/* PLUT 스터디 — 공통 디자인.
   원칙: 이모지 없음. 보라색 그라데이션 없음. 말풍선 채팅 UI 없음.
   종이·연필·빨간펜의 물성으로 간다. */

:root{
  --bg:#F6F7F4; --card:#fff; --paper:#FFFDF7;
  --ink:#15181C; --ink2:#3A4149; --muted:#6B7480; --faint:#A0A8B2;
  --line:#E8EBE6; --line2:#D8DDD4;
  --brand:#0FA97A; --brand-d:#0A8A63; --brand-s:#E7F6EF; --brand-b:#BEE7D5;
  --kor:#D9573C; --kor-s:#FCEFEA;
  --soc:#2E8B62; --soc-s:#E9F5EE;
  --mat:#3762C6; --mat-s:#EBF0FC;
  --note:#6E52C8; --note-s:#EFEBFA;
  --warn:#B8722A; --warn-s:#FBF1E4;
  --f:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo",sans-serif;
  --e:cubic-bezier(.22,1,.36,1);
  --sh:0 1px 2px rgba(20,30,20,.035),0 6px 18px rgba(25,40,30,.055);
  --sh-l:0 2px 5px rgba(20,30,20,.05),0 18px 44px rgba(25,40,30,.12);
  --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:0;color:inherit}
input,textarea,select{font:inherit;color:inherit}
textarea{resize:vertical}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,h4{letter-spacing:-.035em;margin:0}

/* ── 로고 ── */
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.05em}
.logo .sfx{font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.05em;align-self:flex-end;margin-bottom:3px}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  padding:12px 22px;font-size:15px;font-weight:750;transition:.22s var(--e);white-space:nowrap}
.btn.pri{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(15,169,122,.24)}
.btn.pri:hover{background:var(--brand-d)}
.btn.pri:disabled{background:var(--line2);color:var(--faint);box-shadow:none;cursor:default}
.btn.ghost{background:#fff;border:1.5px solid var(--line2);color:var(--ink2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand-d)}
.btn.soft{background:var(--brand-s);color:var(--brand-d);padding:9px 16px;font-size:13.5px}
.btn.soft:hover{background:var(--brand);color:#fff}
.btn.full{width:100%;padding:14px}
.btn:active{transform:scale(.985)}

/* ── 폼 ── */
label.fl{display:block;font-size:13px;font-weight:750;color:var(--ink2);margin:16px 0 6px}
label.fl:first-child{margin-top:0}
label.fl .opt{color:var(--faint);font-weight:500}
.in{width:100%;background:#F4F6F2;border:1.5px solid transparent;border-radius:13px;
  padding:13px 15px;font-size:16px;transition:.2s var(--e)}
.in::placeholder{color:var(--faint)}
.in:focus{outline:0;background:#fff;border-color:var(--brand)}
.in.mono{letter-spacing:.14em;font-weight:700;text-transform:uppercase}
.hintline{font-size:12.3px;color:var(--faint);margin-top:6px;line-height:1.55}
.err{background:var(--kor-s);color:#9E3A22;border-radius:11px;padding:11px 14px;
  font-size:13.5px;font-weight:600;margin-top:14px}
.okmsg{background:var(--brand-s);color:var(--brand-d);border-radius:11px;padding:11px 14px;
  font-size:13.5px;font-weight:600;margin-top:14px}

/* 학생/선생님 전환 */
.seg{display:flex;background:#EFF2EC;border-radius:999px;padding:4px;margin-bottom:22px}
.seg button{flex:1;padding:10px;border-radius:999px;font-size:14px;font-weight:750;
  color:var(--muted);transition:.22s var(--e)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}

/* ── 카드 ── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--sh)}
.panel h3{font-size:16px;font-weight:800;margin-bottom:4px}
.panel .sub{font-size:12.5px;color:var(--faint);margin:0 0 16px}
.phd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.phd .sub{margin:0}

/* ── 인증 화면 공통 ── */
.authwrap{min-height:100svh;display:grid;place-items:center;padding:28px 20px;position:relative;overflow:hidden;background:#F7FBF7}
.mesh{position:absolute;inset:0;pointer-events:none}
.mesh i{position:absolute;border-radius:50%;filter:blur(72px);display:block}
.mesh .a{width:46vw;height:46vw;min-width:340px;min-height:340px;background:#A6E9CD;opacity:.5;top:-16%;left:-8%}
.mesh .b{width:40vw;height:40vw;min-width:300px;min-height:300px;background:#CFE4FF;opacity:.45;top:6%;right:-10%}
.mesh .c{width:34vw;height:34vw;min-width:260px;min-height:260px;background:#FFF1CC;opacity:.5;bottom:-14%;left:26%}
.authcard{position:relative;z-index:1;width:100%;max-width:412px;background:#fff;border:1px solid var(--line);
  border-radius:26px;box-shadow:var(--sh-l);padding:36px 32px}
.authcard .logo{font-size:22px;margin-bottom:8px}
.authcard .lede{color:var(--muted);font-size:14.5px;margin:0 0 26px;line-height:1.6}
.swap{text-align:center;font-size:13.5px;color:var(--muted);margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.swap a{color:var(--brand-d);font-weight:750}
.privacy{font-size:12px;color:var(--faint);line-height:1.6;margin-top:16px;text-align:center}
.privacy b{color:var(--brand-d)}
.backhome{position:absolute;top:22px;left:24px;z-index:2;font-size:13.5px;color:var(--muted);font-weight:650}
.backhome:hover{color:var(--ink)}

/* ── 앱 셸 ── */
header.top{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
header .in2{max-width:1240px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px}
.tabs{display:flex;gap:4px;margin:0 auto}
.tabs button{padding:9px 19px;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--muted);transition:.22s var(--e)}
.tabs button.on{background:var(--brand-s);color:var(--brand-d)}
.tabs button:hover:not(.on){background:#F2F5F0;color:var(--ink2)}
.uwrap{display:flex;align-items:center;gap:11px}
.av{width:34px;height:34px;border-radius:11px;background:var(--brand-s);color:var(--brand-d);
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}
.uname{font-size:14px;font-weight:750;color:var(--ink2)}
.uname small{display:block;font-size:11px;color:var(--faint);font-weight:600}
.out{font-size:13px;color:var(--faint);font-weight:650}
.out:hover{color:var(--ink2)}
@media(max-width:760px){.uname{display:none}.tabs button{padding:9px 12px;font-size:13.5px}}
main{max-width:1240px;margin:0 auto;padding:26px 22px 72px}
.grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:920px){.grid{grid-template-columns:1fr}}

/* ── 빈 상태 ── 만들어 낸 데이터를 절대 안 넣는다 */
.empty{padding:52px 18px;text-align:center;color:var(--muted);font-size:14.2px;line-height:1.7}
.empty svg{color:var(--line2);margin-bottom:14px;display:block;margin-left:auto;margin-right:auto}
.empty b{display:block;color:var(--ink2);font-size:15px;font-weight:750;margin-bottom:5px}
.empty .btn{margin-top:18px}

/* ── 로딩 ── */
.skel{background:linear-gradient(90deg,#EDEFEA 25%,#F6F7F4 50%,#EDEFEA 75%);
  background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:9px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spin{width:17px;height:17px;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 과목 태그 ── */
.tag{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;
  background:var(--s,var(--brand-s));color:var(--k,var(--brand-d));white-space:nowrap;letter-spacing:-.01em}
.m-math{--k:var(--mat);--s:var(--mat-s)}
.m-korean{--k:var(--kor);--s:var(--kor-s)}
.m-social{--k:var(--soc);--s:var(--soc-s)}
.m-note{--k:var(--note);--s:var(--note-s)}

/* ── 목록 행 ── */
.row{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .tt{flex:1;min-width:0}
.row .tt b{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tt span{font-size:12.3px;color:var(--faint)}
.row .met{text-align:right;font-size:11.8px;color:var(--faint);white-space:nowrap}
.row .met b{display:block;font-size:14px;color:var(--ink2);font-weight:800}

/* ── 첨삭 블록 ── 빨간펜(고칠 점) / 초록펜(잘한 점) */
.pen{border-radius:0 12px 12px 0;padding:11px 14px;font-size:13.4px;line-height:1.68;margin-top:10px}
.pen b{display:block;font-size:10px;letter-spacing:.1em;font-weight:800;margin-bottom:4px}
.pen.red{border-left:2.5px solid var(--kor);background:var(--kor-s);color:#8E3722}
.pen.red b{color:var(--kor)}
.pen.green{border-left:2.5px solid var(--soc);background:var(--soc-s);color:#1F6244}
.pen.green b{color:var(--soc)}
.pen.tipp{border-left:2.5px solid var(--warn);background:var(--warn-s);color:#7A4A15}
.pen.tipp b{color:var(--warn)}

/* ── 원고지 느낌의 글쓰기 칸 ── */
.sheet{background:var(--paper);border:1px solid var(--line2);border-radius:14px;padding:16px 18px}
.write{width:100%;border:0;background:transparent;font-size:15.5px;line-height:30px;
  min-height:180px;padding:0;outline:0;
  background-image:repeating-linear-gradient(transparent,transparent 29px,#E4E2D6 29px,#E4E2D6 30px);
  background-attachment:local}
.count{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  color:var(--faint);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.count b{color:var(--ink2);font-weight:800}
.count .ok{color:var(--brand-d)}

/* 알림 — alert() 는 페이지를 멈추므로 쓰지 않는다 */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:90;
  background:var(--ink);color:#fff;border-radius:14px;padding:13px 20px;font-size:14px;font-weight:700;
  box-shadow:0 10px 34px rgba(15,25,20,.3);opacity:0;pointer-events:none;transition:.28s var(--e);
  max-width:calc(100% - 40px);text-align:center;line-height:1.5}
.toast.show{opacity:1;transform:translate(-50%,0)}