/* goyongup 공통 스타일. 화면 전용 스타일은 각 화면의 css 에 둔다. */

@font-face{
  font-family:'Pretendard Variable';
  src:url('./fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#EDF0F3;
  --side:#E4E9EE;
  --surface:#FFFFFF;
  --ink:#16212E;
  --ink-soft:#5D6B7A;
  --ink-faint:#93A0AC;
  --line:#DCE2E8;
  --line-side:#D3DAE1;
  --accent:#23407A;
  --accent-hover:#1A3161;
  --mark:#C8891F;
  --mark-bg:#FDF6E7;
  --mark-line:#F0DFB8;
  --mark-ink:#7A5410;

  /* 강조색에서 파생 */
  --accent-soft:#E7ECF5;
  --accent-line:rgba(35,64,122,.3);
  --on-accent-soft:rgba(255,255,255,.2);
  --mark-wash:rgba(200,137,31,.26);

  /* 상태색 네 쌍 */
  --st-met-fg:#1F6B36;
  --st-met-bg:#E4F1E8;
  --st-partial-fg:var(--mark-ink);
  --st-partial-bg:var(--mark-bg);
  --st-missing-fg:#9C2B2B;
  --st-missing-bg:#FBE9E9;
  --st-none-fg:var(--ink-soft);
  --st-none-bg:var(--paper);

  /* 표면과 상태 */
  --surface-drop:#F7F9FC;
  --disabled:#C6CDD5;
  --hover-wash:rgba(0,0,0,.05);
  --hover-surface:rgba(255,255,255,.62);
  --shadow-card:0 1px 2px rgba(22,33,46,.06);
  --shadow-focus:0 0 0 3px rgba(35,64,122,.10);
  --focus-ring:rgba(35,64,122,.35);

  --radius:10px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}

.app{display:flex;min-height:100vh;}

/* ══ 사이드바 ══ */
.side{
  width:252px;flex-shrink:0;background:var(--side);
  border-right:1px solid var(--line-side);
  display:flex;flex-direction:column;padding:20px 14px 16px;
}
.side-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:0 4px;}
.logo{font-size:15.5px;font-weight:700;letter-spacing:-0.02em;}
.logo span{color:var(--ink-faint);font-weight:500;font-size:13px;}
.collapse{
  appearance:none;background:none;border:0;padding:4px;cursor:pointer;
  color:var(--ink-faint);font-size:15px;line-height:1;border-radius:5px;
}
.collapse:hover{background:var(--hover-wash);color:var(--ink);}

.newbtn{
  display:flex;align-items:center;gap:8px;width:100%;
  appearance:none;background:var(--surface);border:1px solid var(--line-side);
  border-radius:8px;padding:10px 12px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink);cursor:pointer;margin-bottom:22px;
}
.newbtn:hover{border-color:var(--ink-faint);}
.newbtn b{font-size:15px;font-weight:400;color:var(--ink-faint);line-height:1;}

.side h2{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-faint);
  margin:0 0 8px;padding:0 6px;
}
.hist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;}
.hist li{margin-bottom:2px;}
.hist a{
  display:block;padding:9px 10px;border-radius:7px;text-decoration:none;color:inherit;
}
.hist a:hover{background:var(--hover-surface);}
.hist a.on{background:var(--surface);box-shadow:var(--shadow-card);}
.hist .co{font-size:13px;font-weight:600;letter-spacing:-0.01em;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist .meta{font-size:11.5px;color:var(--ink-faint);display:flex;gap:6px;margin-top:1px;}
.hist .meta .kind{color:var(--accent);font-weight:600;}

.hist-empty{flex:1;margin:0;padding:9px 10px;font-size:12.5px;color:var(--ink-faint);line-height:1.55;}

/* 지우기. 되돌릴 수 없어서 ×를 누르면 그 줄이 확인 줄로 바뀐다 */
.hist li{position:relative;}
.del{
  position:absolute;right:5px;top:6px;appearance:none;background:none;border:0;
  width:24px;height:24px;line-height:1;padding:0;border-radius:5px;
  font:inherit;font-size:15px;color:var(--ink-faint);cursor:pointer;opacity:0;
}
.hist li:hover .del,.del:focus-visible{opacity:1;}
.del:hover{background:var(--hover-wash);color:var(--ink);}
.confirm{display:none;align-items:center;gap:7px;padding:9px 10px;font-size:12.5px;color:var(--ink-soft);}
.confirm button{
  appearance:none;background:none;border:0;padding:2px 4px;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.confirm button[data-no]{color:var(--ink-faint);}
.confirm button:disabled{color:var(--ink-faint);cursor:default;text-decoration:none;}
.hist li.confirming > a,.hist li.confirming .del{display:none;}
.hist li.confirming .confirm{display:flex;}

/* 남은 횟수 한 줄 (D-60). 계정 칸 바로 위에 둔다 */
.quota{
  margin:14px 6px 0;padding:7px 9px;border-radius:7px;
  background:var(--accent-soft);color:var(--accent);
  font-size:11.5px;font-weight:600;letter-spacing:-0.01em;
}

/* 계정 — 저장과 로그인은 P3 (D-35) */
.account{border-top:1px solid var(--line-side);padding:12px 6px 0;margin-top:14px;}
/* 로그인 버튼. 브랜드 색과 로고를 그대로 쓴다. 사람들이 아는 모양이어야 눌린다.
   여기 색은 우리 토큰이 아니라 구글과 카카오가 정한 값이라 그대로 적는다 */
.oauth{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  appearance:none;border:1px solid transparent;border-radius:8px;padding:10px 14px;min-height:48px;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:-0.01em;cursor:pointer;
}
.oauth svg{flex:none;}
.oauth.google{background:#FFFFFF;border-color:#DADCE0;color:#1F1F1F;}
.oauth.google:hover{background:#F8F9FA;}
.oauth.kakao{background:#FEE500;color:rgba(0,0,0,.85);}
.oauth.kakao:hover{filter:brightness(.96);}
.oauth:disabled{opacity:.6;cursor:default;}
/* 수단이 둘이라 세로로 쌓는다. 나란히 두면 사이드바 252px 안에서 글자가 줄바꿈된다 */
.signin-group{display:flex;flex-direction:column;gap:8px;}

/* 이메일은 대체 경로다 (D-61). 브랜드 버튼과 같은 무게로 두면 셋이 같은 추천으로 읽힌다 */
.mail-link{
  appearance:none;background:none;border:0;padding:6px 4px;margin-top:2px;
  font:inherit;font-size:12.5px;color:var(--ink-faint);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.mail-link:hover{color:var(--ink);}
.signout{
  display:none;width:100%;appearance:none;background:none;
  border:1px solid var(--line-side);border-radius:8px;padding:8px 12px;min-height:44px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;margin-top:9px;
}
.signout:hover{border-color:var(--ink-faint);color:var(--ink);}
.account-note{margin:9px 2px 0;font-size:11.5px;color:var(--ink-faint);line-height:1.55;}
/* 처리방침은 로그인 전후 모두 보여야 한다 */
.account-legal{margin:10px 2px 0;font-size:11.5px;color:var(--ink-faint);}
/* 넷이 되면서 두 줄로 접힌다 (D-62). 링크 안에서 끊기면 "환불 정책" 이 갈라지므로 통째로 넘긴다 */
.account-legal a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.account-legal a:hover{color:var(--ink);}
.account .who{display:none;align-items:center;gap:7px;padding:5px 2px;font-size:13px;font-weight:600;}
.account .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account .who b{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--accent);color:var(--surface);
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.account.on .who{display:flex;}
.account.on .signin-group,.account.on .account-note{display:none;}
.account.on .signout{display:block;}

/* 접힘 */
.app.folded .side{width:60px;padding-left:10px;padding-right:10px;}
.app.folded .side .logo span,
.app.folded .side h2,
.app.folded .hist,
.app.folded .hist-empty,
.app.folded .account,
.app.folded .newbtn span{display:none;}
.app.folded .newbtn{justify-content:center;padding:10px 0;}
.app.folded .side-top{justify-content:center;}
.app.folded .logo{display:none;}

/* 모바일에서 사이드바를 여는 버튼 */
.menu{
  display:none;appearance:none;background:none;border:1px solid var(--line);
  border-radius:7px;padding:6px 11px;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer;
}

/* ══ 본문 틀 ══ */
.main{flex:1;min-width:0;overflow-x:hidden;}
.wrap{max-width:1020px;margin:0 auto;padding:30px 28px 72px;}
/* 화면마다 목적이 달라 폭은 통일하지 않는다 */
.wrap.w-narrow{max-width:560px;}
.wrap.w-mid{max-width:860px;}

/* ══ 카드와 입력 칸 ══ */
.pane{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 14px;display:flex;flex-direction:column;
  transition:border-color .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.pane:focus-within{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.pane.dragging{border-color:var(--accent);border-style:dashed;background:var(--surface-drop);}
.pane.off{opacity:.5;pointer-events:none;}

.pane-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.pane-label{font-size:14px;font-weight:600;letter-spacing:-0.01em;}
.pane-count{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.pane-count.filled{color:var(--ink-soft);}
.pane-body{flex:1;display:flex;flex-direction:column;min-height:270px;}

textarea{
  width:100%;flex:1;min-height:120px;border:0;outline:0;resize:none;background:transparent;
  color:var(--ink);font:inherit;font-size:14px;line-height:1.7;
}
textarea::placeholder{color:var(--ink-faint);}

.pane-hint{font-size:12px;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:10px;margin-top:10px;}
.pane-hint .filelink{
  appearance:none;background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.pane-hint input[type=file]{display:none;}
/* data-soon 이 붙은 링크만 흐리게. 파일 열기는 D-40 으로 활성이라 지금은 해당 없음 */
.pane-hint .filelink[data-soon]{color:var(--ink-faint);cursor:default;text-decoration-color:var(--line);}
.pane-hint .filelink[data-soon]:hover{color:var(--ink-soft);}

/* ══ 판독 ══ */
.reading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-soft);font-size:13px;}
.reading[hidden]{display:none;}
.thumb{max-width:100%;max-height:140px;border-radius:6px;border:1px solid var(--line);object-fit:contain;}
.docchip{display:none;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-size:13px;color:var(--ink-soft);}
.docchip.on{display:inline-flex;}
.docchip b{font-weight:600;color:var(--ink);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-l{width:130px;height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.bar-l i{display:block;height:100%;width:40%;background:var(--accent);border-radius:2px;animation:slide 1s ease-in-out infinite;}
@keyframes slide{0%{transform:translateX(-100%);}100%{transform:translateX(330%);}}

/* ══ 배지 ══ */
.soon{
  font-size:10.5px;font-weight:600;margin-left:5px;
  background:var(--mark-bg);color:var(--mark);border-radius:4px;padding:1px 4px;
}

/* ══ 배너 ══ */
.review{display:none;background:var(--mark-bg);border:1px solid var(--mark-line);border-radius:7px;padding:9px 11px;font-size:12.5px;color:var(--mark-ink);margin-bottom:11px;line-height:1.5;}
.review.on{display:block;}
.review.fail{background:var(--st-missing-bg);border-color:var(--st-missing-fg);color:var(--st-missing-fg);}
.review.fail button{color:var(--st-missing-fg);}
.review button{appearance:none;background:none;border:0;padding:0;margin-left:6px;font:inherit;font-size:12.5px;color:var(--mark-ink);font-weight:600;text-decoration:underline;cursor:pointer;}
.source{display:none;margin-top:9px;}
.source.on{display:block;}
.source img{max-width:100%;border-radius:6px;border:1px solid var(--mark-line);}

.soonbar{
  display:none;max-width:640px;margin:0 auto 22px;
  background:var(--mark-bg);border:1px solid var(--mark-line);border-radius:8px;
  padding:12px 15px;font-size:13.5px;color:var(--mark-ink);line-height:1.6;text-align:center;
}
.soonbar.on{display:block;}
.soonbar button{
  appearance:none;background:none;border:0;padding:0;margin-left:6px;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--mark-ink);
  text-decoration:underline;cursor:pointer;
}

/* ══ 버튼 ══ */
button.go{
  appearance:none;border:0;background:var(--accent);color:var(--surface);font:inherit;
  font-size:15px;font-weight:600;letter-spacing:-0.01em;padding:14px 52px;border-radius:8px;cursor:pointer;
  transition:background .15s ease,transform .06s ease;
}
button.go:hover:not(:disabled){background:var(--accent-hover);}
button.go:active:not(:disabled){transform:translateY(1px);}
button.go:disabled{background:var(--disabled);cursor:not-allowed;}
button.go:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;}

/* ══ 상단 바 ══ */
.bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:30px;}
.bar .note{font-size:13px;color:var(--ink-soft);}

/* ══ 공고 머리말 ══ */
.head{margin-bottom:22px;}
.head .company{font-size:13.5px;font-weight:600;color:var(--accent);margin:0 0 6px;}
.head h1{font-size:24px;font-weight:700;letter-spacing:-0.03em;line-height:1.4;margin:0;}

/* ══ 섹션 제목 ══ */
section > h2{
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  margin:0 0 12px;padding-left:2px;
}

/* ══ 한 줄 진단 (D-56) ══
   화면에서 제일 먼저 읽히는 자리다. 요약보다 크고 굵다 */
.headline{
  font-size:19px;font-weight:700;letter-spacing:-0.02em;line-height:1.55;
  color:var(--ink);margin:0 0 18px;
}
.headline[hidden]{display:none;}

/* ══ 요약 카드 ══ */
.summary{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:34px;
}
.summary .total{font-size:13.5px;color:var(--ink-soft);margin:0 0 12px;}
.summary .total b{color:var(--ink);font-weight:700;}
.summary dl{display:flex;flex-wrap:wrap;gap:26px;margin:0;}
.summary div{display:flex;align-items:baseline;gap:7px;}
.summary dt{font-size:12.5px;color:var(--ink-faint);margin:0;}
.summary dd{font-size:19px;font-weight:700;margin:0;font-variant-numeric:tabular-nums;}
/* 셋째 줄. 자소서에서만 쓴다. 분모를 아래로 내려 비율로 읽히지 않게 한다 (D-41) */
.summary .read{
  font-size:12px;color:var(--ink-faint);margin:13px 0 0;
  padding-top:11px;border-top:1px solid var(--line);
}
.summary .read[hidden]{display:none;}

/* ══ 항목 카드 ══ */
.item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:12px;
}
.item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.item-head h3{font-size:15.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.45;margin:0;}
.must{
  display:inline-block;font-size:10.5px;font-weight:700;vertical-align:2px;
  color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 5px;margin-right:6px;
}
/* 자소서 결과에서 몇 번째 문단인지 표시한다. 번호를 못 믿으면 붙이지 않는다 */
.para{
  display:inline-block;font-size:10.5px;font-weight:700;
  color:var(--ink-faint);background:var(--paper);border:1px solid var(--line);
  border-radius:4px;padding:1px 6px;margin-right:7px;white-space:nowrap;
}

/* ══ 상태 배지 ══ */
.badge{
  flex:none;font-size:11.5px;font-weight:600;border-radius:5px;padding:3px 9px;white-space:nowrap;
}
.badge.met{background:var(--st-met-bg);color:var(--st-met-fg);}
.badge.partial{background:var(--st-partial-bg);color:var(--st-partial-fg);}
.badge.missing{background:var(--st-missing-bg);color:var(--st-missing-fg);}
.badge.none{background:var(--st-none-bg);color:var(--st-none-fg);}

/* ══ 근거 인용 ══ */
.quotes{border-left:3px solid var(--line);padding-left:13px;margin-bottom:14px;}
.quotes p{margin:0 0 7px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);}
.quotes p:last-child{margin-bottom:0;}
.quotes .from{
  display:inline-block;width:44px;flex:none;font-size:11.5px;font-weight:600;
  color:var(--ink-faint);letter-spacing:.02em;
}
.quotes .empty{color:var(--ink-faint);}
.why{font-size:13.5px;line-height:1.7;margin:0 0 14px;color:var(--ink);}
/* 근거가 없어 수정본을 만들지 않은 항목의 한 줄 */
.nomake{
  font-size:13px;line-height:1.65;color:var(--ink-soft);margin:0;
  border-top:1px dashed var(--line);padding-top:13px;
}
/* 카드 안에 이 한 줄만 있을 때. 위에 가를 것이 없다 */
.nomake.bare{border-top:0;padding-top:0;}

/* ══ 고쳐 쓸 문장 (D-64) ══
   항목 카드에서 빼내 맨 아래 한 섹션에 모았다. 캐러셀 대신 탭이다 */
.rw-lead{font-size:13px;line-height:1.7;color:var(--ink-soft);margin:-6px 0 11px;}
.rewrite{
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:13px 15px 12px;margin-bottom:8px;
}
.rewrite:last-child{margin-bottom:0;}
/* 항목 이름·탭·복사를 한 줄에 둔다. 줄을 나누면 항목마다 30px 씩 늘어난다 */
.rw-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:10px;
}
/* 어느 항목의 문장인지. 카드의 제목과 같은 무게로 둔다 */
.rw-for{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;letter-spacing:-0.01em;margin:0 0 6px;
}
.rw-tabs{display:flex;gap:4px;}
.rw-tabs button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:6px 11px;margin-bottom:-1px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink-faint);cursor:pointer;
}
.rw-tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);}
.rw-bar .copy{margin:0 0 6px;}
.copy{
  appearance:none;background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:5px 11px;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;
  white-space:nowrap;
}
.copy:hover{border-color:var(--ink-faint);}
.rw{display:none;font-size:14px;line-height:1.7;margin:0;}
.rw.on{display:block;}
/* 항목 카드에서 아래 문장으로 가는 링크. 머리 줄에 얹어 높이를 쓰지 않는다 */
.head-right{display:flex;align-items:center;gap:9px;flex:none;}
.has-rw{
  font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;
}
/* 링크로 뛰어온 자리가 상단 바에 가리지 않게 한다 */
.rewrite{scroll-margin-top:18px;}

/* ══ 접히는 카드 ══ */
details.fold{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 20px;}
details.fold summary{
  cursor:pointer;list-style:none;padding:16px 0;
  font-size:14px;font-weight:600;color:var(--ink-soft);
}
details.fold summary::-webkit-details-marker{display:none;}
details.fold summary::after{content:"▾";float:right;color:var(--ink-faint);font-size:12px;}
details.fold[open] summary::after{content:"▴";}
details.fold[open] summary{border-bottom:1px solid var(--line);}

/* ══ 화면 하단 ══ */
.action{text-align:center;margin-top:26px;}
.foot{text-align:center;margin-top:44px;border-top:1px solid var(--line);padding-top:30px;}
.action-note{font-size:12.5px;color:var(--ink-faint);margin-top:14px;min-height:19px;}
.foot-note{font-size:12.5px;color:var(--ink-faint);margin:14px 0 0;}
/* 저장하지 못했을 때. 조용히 넘어가면 저장된 줄 안다 */
.foot-note.bad{color:var(--st-missing-fg);font-weight:600;}

/* ══ 수집 고지 카드 (D-35 선행 둘째) ══
   사이드바가 252px 이라 고지를 담을 수 없어서 화면 가운데에 띄운다 */
.sheet{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(22,33,46,.38);padding:20px;
}
.sheet-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;
  box-shadow:0 8px 28px rgba(22,33,46,.16);
}
.sheet-card h2{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin:0 0 16px;}
.sheet-card dl{margin:0 0 16px;font-size:13.5px;line-height:1.65;}
.sheet-card dt{font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--ink-faint);margin-bottom:2px;}
.sheet-card dd{margin:0 0 11px;color:var(--ink-soft);}
.sheet-no{
  font-size:13px;line-height:1.65;color:var(--ink-soft);margin:0 0 18px;
  border-top:1px dashed var(--line);padding-top:14px;
}
.sheet-lead{font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 20px;}
/* 닫는 쪽은 조용하게 둔다. 로그인 버튼과 같은 무게로 두면 무엇을 눌러야 할지 흐려진다 */
.sheet-skip{
  display:block;margin:16px auto 0;appearance:none;background:none;border:0;padding:8px 12px;
  font:inherit;font-size:13px;color:var(--ink-faint);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.sheet-skip:hover{color:var(--ink);}
.sheet-link{margin:0 0 18px;font-size:12.5px;}
.sheet-link a{color:var(--accent);text-underline-offset:3px;}
.sheet-act{display:flex;gap:9px;flex-wrap:wrap;}
.sheet-act .go{padding:11px 20px;font-size:14px;}

/* ══ 요금 카드 (D-60) ══
   3회와 12회를 위에 크게, 5회와 30회를 아래에 작게 둔다.
   주력 둘을 먼저 읽게 하고 나머지를 숨기지는 않는다 */
.plans{margin-bottom:38px;}
.plans h2{font-size:15px;font-weight:700;letter-spacing:-0.01em;margin:0 0 8px;}
.plans-lead{font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px;}
.plan-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 10px;padding:0;list-style:none;}
.plan-list.more{margin-bottom:14px;}
.plan{
  display:flex;flex-direction:column;gap:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px;
}
.plan.pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
/* 배지가 있는 카드만 한 줄 밀리면 가격이 어긋난다. 짝이 되는 카드에 같은 높이를 비워 둔다 */
.plan-list.main .plan:not(.pick)::before{content:'';display:block;height:24px;}
.plan-badge{
  align-self:flex-start;margin:0 0 4px;padding:2px 8px;border-radius:20px;
  background:var(--accent);color:var(--surface);font-size:10.5px;font-weight:700;letter-spacing:.02em;
}
.plan-unit{margin:0;font-size:13px;font-weight:600;color:var(--ink-faint);}
.plan-price{margin:0;font-size:26px;font-weight:700;letter-spacing:-0.03em;color:var(--ink);}
.plan-price span{font-size:15px;font-weight:600;margin-left:1px;}
.plan-each{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--accent);}
.plan-save{margin:1px 0 0;font-size:12px;color:var(--ink-soft);}
.plan-term{margin:7px 0 14px;font-size:11.5px;color:var(--ink-faint);}
.buy{
  margin-top:auto;appearance:none;border:0;border-radius:7px;padding:11px 10px;
  background:var(--disabled);color:var(--surface);font:inherit;font-size:13px;font-weight:600;
  cursor:not-allowed;
}

/* 보조 둘은 같은 정보를 담되 무게를 낮춘다 */
.plan-list.more .plan{padding:13px 14px 12px;background:transparent;}
.plan-list.more .plan-unit{font-size:12px;}
.plan-list.more .plan-price{font-size:18px;}
.plan-list.more .plan-price span{font-size:12.5px;}
.plan-list.more .plan-each{font-size:12px;}
.plan-list.more .plan-term{margin:5px 0 10px;font-size:11px;}
.plan-list.more .buy{padding:8px 10px;font-size:12px;}

.plans-foot{font-size:12.5px;line-height:1.7;color:var(--ink-soft);margin:0;}

/* ══ 내 회차권 (D-71) ══ */
.mine-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;margin-bottom:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
}
.mine-name{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);}
.mine-sub{margin:3px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.55;}
.mine-why{margin:0;font-size:12px;color:var(--ink-faint);text-align:right;}
.mine-act{flex-shrink:0;}
.mine-note{font-size:12.5px;line-height:1.7;color:var(--ink-soft);margin:10px 0 0;}

@media (max-width:520px){
  .plan-list{grid-template-columns:1fr;}
  .mine-item{flex-direction:column;align-items:flex-start;gap:8px;}
  .mine-why{text-align:left;}
}

/* ══ 이메일 로그인 시트 (D-61) ══ */
.sheet-card.mail{max-width:380px;}
.mail .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.mail .tabs button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:8px 12px;margin-bottom:-1px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink-faint);cursor:pointer;
}
.mail .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);}
.mail-form{display:flex;flex-direction:column;gap:12px;}
.mail-form label{
  display:flex;flex-direction:column;gap:5px;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-faint);
}
.mail-form input{
  appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:11px 12px;min-height:44px;font:inherit;font-size:14px;color:var(--ink);
}
.mail-form input:focus{outline:3px solid var(--focus-ring);outline-offset:1px;border-color:var(--accent);}
.mail-form .go{width:100%;padding:13px 20px;font-size:14px;}
.mail-hint{margin:0;min-height:17px;font-size:12px;line-height:1.5;color:var(--ink-soft);}
.mail-hint.bad{color:var(--st-missing-fg);}
.mail-reset{
  display:block;margin:14px auto 0;appearance:none;background:none;border:0;padding:4px;
  font:inherit;font-size:12.5px;color:var(--ink-faint);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.mail-reset:hover{color:var(--ink);}
.mail .sheet-skip{margin-top:8px;}

/* ══ 반응형 ══ */
@media (max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);transition:transform .2s ease;}
  .app.open .side{transform:none;}
  .app.folded .side{width:252px;padding-left:14px;padding-right:14px;}
  .menu{display:inline-flex !important;}
  .bar{justify-content:space-between;}
}

@media (max-width:780px){
  .wrap{padding:20px 18px 60px;}
  .headline{font-size:17px;}
  .pane-body{min-height:180px;}
  .head h1{font-size:19px;}
  .summary dl{gap:18px;}
  .item-head{flex-direction:column;gap:8px;}
  /* 좁은 화면에서는 항목 이름이 한 줄을 차지하고 탭과 복사가 아래로 내려간다 */
  .rw-for{flex-basis:100%;}

  /* 손가락으로 누르는 것은 44x44 이상 */
  .rw-tabs button{min-height:44px;padding:6px 14px;}
  .copy{min-height:44px;}
  /* 글자 크기는 두고 누를 수 있는 영역만 넓힌다 */
  .pane-hint .filelink,
  .review button{position:relative;}
  .pane-hint .filelink::after,
  .review button::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);
  }
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}



/* ══════════ 01-input 전용 (body.page-input) ══════════ */

/* .bar 아래 여백이 44 → 30 으로 줄어든 만큼 여기서 보정한다. 마진은 상쇄되므로 padding 을 쓴다 */
.page-input .hero{text-align:center;padding-top:14px;margin-bottom:32px;}
.page-input h1{font-size:30px;font-weight:700;letter-spacing:-0.04em;line-height:1.45;margin:0 0 16px;}
.page-input h1 .src{
  color:var(--accent);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent-line);
}
.page-input h1 mark{background:linear-gradient(to top,var(--mark-wash) 42%,transparent 42%);color:inherit;padding:0 2px;}
.page-input .sub{font-size:14.5px;color:var(--ink-soft);margin:0;}
.page-input .sub b{color:var(--ink);font-weight:600;}

/* 문서 종류 스위치 */
.page-input .switch{display:flex;justify-content:center;margin-bottom:22px;}
.page-input .seg{
  display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:3px;gap:2px;
}
.page-input .seg button{
  appearance:none;background:none;border:0;border-radius:7px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  padding:8px 22px;cursor:pointer;transition:background .14s ease,color .14s ease;
}
.page-input .seg button:hover:not(.on){color:var(--ink);}
.page-input .seg button.on{background:var(--accent);color:var(--surface);}
.page-input .seg button.on .soon{background:var(--on-accent-soft);color:var(--surface);}

/* 두 칸 배치 */
.page-input .panes{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;margin-bottom:24px;}
.page-input .between{position:relative;display:flex;align-items:center;justify-content:center;}
.page-input .between::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);}
.page-input .between em{position:relative;background:var(--paper);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--ink-faint);writing-mode:vertical-rl;padding:14px 0;}
.page-input .promise{
  margin-top:50px;border-top:1px solid var(--line);padding-top:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;font-size:13px;line-height:1.75;
}
.page-input .promise h2{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 8px;}
.page-input .promise ul{margin:0;padding-left:16px;color:var(--ink-soft);}
.page-input .promise li{margin-bottom:3px;}
.page-input .promise .no li{color:var(--ink-faint);}

/* 분석 중 상태 (D-37). 화면을 나누지 않고 여기서 처리한다 */
.page-input .seg.off{opacity:.5;pointer-events:none;}
.page-input .run{max-width:420px;margin:0 auto;text-align:left;}
.page-input .run[hidden]{display:none;}
.page-input .run-now{display:flex;align-items:center;gap:11px;margin:0;font-size:14px;font-weight:600;color:var(--ink);}
.page-input .run-clock{margin-left:8px;font-weight:400;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.page-input .run-done{margin:9px 0 0 27px;font-size:13px;color:var(--ink-soft);}
.page-input .run-done[hidden]{display:none;}
.page-input .run-mark{
  flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-side);border-top-color:var(--accent);background:var(--paper);
  animation:runspin .9s linear infinite;
}
@keyframes runspin{to{transform:rotate(360deg);}}
.page-input .run.bad .run-mark{animation:none;background:var(--st-missing-fg);border-color:var(--st-missing-fg);}
.page-input .run.bad .run-now{color:var(--st-missing-fg);}
.page-input .run.ok .run-mark{animation:none;background:var(--accent);border-color:var(--accent);}
.page-input .run-hint{margin:18px 0 0;font-size:12.5px;color:var(--ink-faint);}
.page-input .run-hint[hidden]{display:none;}
.page-input .run-fail{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;}
.page-input .run-fail[hidden]{display:none;}
.page-input .run-fail-msg{margin:0 0 13px;font-size:14px;font-weight:600;color:var(--ink);}
/* 소셜 로그인에서 돌아와 입력을 되살렸을 때 한 줄 (D-66).
   말없이 채우지 않는다. 한 글자라도 고치면 걷힌다 */
.page-input .restored{
  margin:0 0 12px;padding:9px 13px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent);
  font-size:12.5px;font-weight:600;letter-spacing:-0.01em;
}

.page-input .run-actions{display:flex;gap:9px;flex-wrap:wrap;}
/* 버튼 묶음이 셋이고 상황마다 하나만 보인다 (D-60, D-65).
   display 를 준 선택자가 [hidden] 을 이기므로 여기서 다시 눌러 준다 */
.page-input .run-actions[hidden]{display:none;}
.page-input .run-actions .go{padding:11px 22px;font-size:14px;}
/* 입력 화면의 실패 영역과 수집 고지 카드가 함께 쓴다. 화면 전용이 아니다 */
.back{
  appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:11px 18px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
}
.back:hover{border-color:var(--ink-faint);}

@media (max-width:780px){
.page-input h1{font-size:22px;line-height:1.5;}
.page-input .panes{grid-template-columns:1fr;gap:12px;}
.page-input .between{height:34px;}
.page-input .between::before{top:50%;left:0;right:0;width:auto;height:1px;}
.page-input .between em{writing-mode:horizontal-tb;padding:0 14px;}
.page-input .promise{grid-template-columns:1fr;gap:20px;}
}

/* ══════════ 사업자 정보 푸터 (D-67) ══════════
   모든 화면 하단에 둔다. 전자상거래법 제10조제1항이 요구하는 표시다 */
.biz-foot{
  margin-top:48px;padding:18px 2px 8px;
  border-top:1px solid var(--line);
  color:var(--ink-faint);font-size:11.5px;line-height:1.75;
}
.biz-name{margin:0 0 4px;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.biz-line{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;}
.biz-line span{white-space:nowrap;}

@media (max-width:560px){
  .biz-line{gap:2px 12px;}
  .biz-line span{white-space:normal;}
}

/* ══════════ 문서 화면 전용 (body.page-doc) ══════════ */

/* 본문 앞에 두는 상태 알림. 지금은 환불 정책의 "결제 기능 없음" 한 곳이 쓴다 */
.page-doc .lead{
  margin:0 0 30px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  font-size:13px;line-height:1.75;color:var(--ink-soft);
}

.page-doc .doc section{margin-bottom:32px;}
.page-doc .doc h2{font-size:15px;font-weight:700;letter-spacing:-0.01em;margin:0 0 11px;}
/* 절 안의 소제목. 약관 2절의 변경 고지가 쓴다 (D-69) */
.page-doc .doc h3{
  font-size:13.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
  margin:22px 0 9px;padding-top:14px;border-top:1px solid var(--line);
}
.page-doc .doc p{font-size:13.5px;line-height:1.75;color:var(--ink-soft);margin:0 0 10px;}
.page-doc .doc p b{color:var(--ink);font-weight:700;}
.page-doc .doc p:last-child{margin-bottom:0;}
.page-doc .doc table{width:100%;border-collapse:collapse;margin:0 0 12px;}
.page-doc .doc th{
  width:118px;text-align:left;vertical-align:top;padding:10px 12px 10px 0;
  font-size:12.5px;font-weight:600;color:var(--ink-faint);border-top:1px solid var(--line);
}
.page-doc .doc td{
  padding:10px 0;font-size:13.5px;line-height:1.7;color:var(--ink-soft);border-top:1px solid var(--line);
}
.page-doc .doc a{color:var(--accent);}

@media (max-width:560px){
  .page-doc .doc th,.page-doc .doc td{display:block;width:auto;}
  .page-doc .doc th{padding-bottom:2px;}
  .page-doc .doc td{padding-top:0;border-top:0;}
}

/* ══════════ result 전용 (body.page-result) ══════════ */

/* 숫자를 라벨 앞에 둔다 */
.page-result .summary dt{order:2;}
.page-result .summary dd{order:1;}
.page-result section{margin-bottom:34px;}

/* 결과가 빠진 문장 */
.page-result .gaps{margin:0;padding:0;list-style:none;}
.page-result .gaps li{padding:13px 0;border-top:1px solid var(--line);}
.page-result .gaps li:first-child{padding-top:0;border-top:0;}
.page-result .gaps li:last-child{padding-bottom:0;}
.page-result .gaps q{display:block;font-size:14px;font-weight:600;margin-bottom:4px;quotes:none;}
.page-result .gaps q.empty{font-weight:400;color:var(--ink-faint);}
.page-result .gaps span{font-size:13px;color:var(--ink-soft);line-height:1.65;}

/* 판정하지 않은 항목 */
.page-result .nj-note{font-size:13px;line-height:1.7;color:var(--ink-soft);margin:15px 0 13px;}
.page-result .nj{margin:0;padding:0 0 18px;list-style:none;}
.page-result .nj li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;}