/* =========================================================================
   aipt.css — AI 스터디 PT (입력 `ai-pt.html` · 시간표 `plan.html`)
   -------------------------------------------------------------------------
   헤더·버튼·타이포는 css/site.css 를 그대로 씁니다. 여기서 다시 정의하면
   랜딩과 이 화면들이 조금씩 어긋나기 시작합니다.
   이 파일에는 이 두 화면에만 있는 것(격자·시간표·블록)만 둡니다.
   ========================================================================= */

main{padding-top:var(--header-h)}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.wrap--wide{max-width:1240px}
section{padding:60px 0}
h2.sec{font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-.03em;margin-bottom:10px}
p.lead{font-size:15px;color:var(--ink-soft);line-height:1.75;margin-bottom:30px;max-width:720px}
.warn{color:#b42318;font-weight:400}

.top{background:var(--dark);color:#fff;padding:72px 0 60px}
.top .eyebrow{color:rgba(255,255,255,.85);margin-bottom:20px}
.top h1{font-size:clamp(28px,4.4vw,50px);font-weight:200;letter-spacing:.02em;line-height:1.12;margin-bottom:18px}
.top p{font-size:clamp(15px,1.6vw,18px);font-weight:300;line-height:1.75;color:rgba(255,255,255,.86);max-width:700px}
.top .back{display:inline-block;margin-top:22px;font-size:14px;color:rgba(255,255,255,.8);
  border-bottom:1px solid currentColor;padding-bottom:3px}
.top .back:hover{color:#fff}

/* ---------- 입력 폼 ---------- */
fieldset{border:1px solid var(--line);padding:24px 22px;margin-bottom:22px}
legend{font-size:14px;font-weight:700;padding:0 8px}
legend .opt{font-weight:400;color:var(--ink-soft);font-size:12.5px;margin-left:4px}
.hint{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:6px 0 16px}
.hint small{color:#9aa3b0}
.pair{display:flex;gap:12px;flex-wrap:wrap}
.pair label{flex:1 1 150px;font-size:13px;color:var(--ink-soft)}
input[type=number]{width:100%;height:48px;border:1px solid var(--line);
  padding:0 12px;font-size:16px;font-family:inherit;background:#fff;margin-top:6px}
input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.linkish{background:none;border:none;padding:0;margin-top:12px;font-size:13px;
  color:var(--ink-soft);text-decoration:underline;cursor:pointer}

/* 급수 고르기 — 라디오를 숨기고 칸 자체를 누르게 합니다 */
.lv{display:flex;gap:12px;flex-wrap:wrap}
.lv label{flex:1 1 200px;border:1px solid var(--line);padding:16px 18px;cursor:pointer;
  display:block;transition:border-color .2s,background .2s}
.lv label:hover{border-color:var(--ink)}
.lv input{position:absolute;opacity:0;width:0;height:0}
.lv label:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.lv b{display:block;font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:.06em}
.lv span{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-soft)}
.lv label:has(input:checked) span{color:rgba(255,255,255,.75)}
.lv label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
/* 준비 중 급수: 사다리에는 보이되 선택은 아직 못 하게 (점선·흐림) */
.lv label.soon{border-style:dashed;opacity:.55}
.lv label.soon:hover{border-color:var(--line)}
.lv label.soon b::after{content:"준비 중";margin-left:8px;font-family:var(--body,inherit);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:1px 7px;vertical-align:middle}

.chk{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.6;cursor:pointer}
.chk input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--ink)}
.chk small{display:block;margin-top:4px;font-size:12.5px;color:#9aa3b0;line-height:1.65}

/* 시험일 — 1년에 두 번이라 달력 대신 버튼입니다.
   달력을 펼쳐도 고를 수 있는 날이 한둘이라 달만 넘기게 됩니다. */
.picks{display:flex;gap:12px;flex-wrap:wrap}
.pick{flex:1 1 240px;text-align:left;border:1px solid var(--line);background:#fff;
  padding:18px 20px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.pick:hover{border-color:var(--ink)}
.pick b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.pick span{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft)}
.pick.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pick.on span{color:rgba(255,255,255,.75)}
.pick:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* 주간 격자 — 드래그해서 칠합니다 */
.grid{user-select:none;-webkit-user-select:none;touch-action:none;border:1px solid var(--line);
  max-width:640px;margin-top:6px}
.grow{display:grid;grid-template-columns:52px repeat(7,1fr)}
.ghead span{text-align:center;font-size:12px;font-weight:700;padding:8px 0;background:#fafafa}
.gtime{font-size:11px;color:var(--ink-soft);text-align:right;padding-right:6px;line-height:14px}
.gcell{height:14px;border-top:1px solid #eef0f2;border-left:1px solid #eef0f2;cursor:pointer;background:#fff}
.grow:nth-child(even) .gcell{border-top-color:#e2e5e9}
.gcell.on{background:var(--ink)}
.gcell:hover{outline:1px solid var(--blue);outline-offset:-1px}
#gridTotal{display:inline-block;margin-top:12px;font-weight:700}

/* 버튼은 하나뿐입니다 */
.go{margin-top:34px;text-align:center}
.btn--big{min-width:280px;height:60px;font-size:16.5px;font-weight:600}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink);color:#fff}
.gowhy{margin-top:12px;font-size:13px;color:var(--ink-soft);min-height:18px}
.gonote{margin:6px auto 0;max-width:520px;font-size:12.5px;color:#9aa3b0;line-height:1.65}
.gonote b{color:var(--ink-soft)}

/* ---------- 계획 화면 ---------- */
.err{border:1px solid #b42318;color:#b42318;padding:14px 16px;font-size:14.5px}
.sum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:22px}
.sum div{background:#fff;padding:20px 16px;text-align:center}
.sum b{display:block;font-family:var(--disp);font-size:clamp(20px,2.8vw,30px);font-weight:600}
.sum span{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft)}
.diag,.rule{background:#fafafa;border:1px solid var(--line);padding:20px;margin-bottom:22px}
.diag p{font-size:14.5px;line-height:1.8;color:var(--ink-soft)}
.diag p+p{margin-top:10px}
.diag b,.rule b{color:var(--ink)}
.rule p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-top:6px}

.short{border:2px solid var(--ink);padding:22px 20px;margin-bottom:22px;background:#fffdf5}
/* 제목에만 적용합니다. `.short b` 로 두면 문장 안의 <b> 강조까지 블록이 되어
   "필요하다는 / 150시간 / 은" 처럼 문장이 토막납니다. 토익 쪽에서 겪은 것입니다. */
.short > b:first-child{display:block;font-size:16px;margin-bottom:8px}
.short p{font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.short p.note{margin-top:10px;font-size:12.5px;color:#9aa3b0;line-height:1.7}
.shortcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn--sm{min-width:0;height:42px;padding:0 18px;font-size:13.5px}

/* ---------- 주간 시간표 ---------- */
.wknav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:6px 0 16px;flex-wrap:wrap}
.wknav h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.wknav h2 small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--ink-soft)}
.wkbtns{display:flex;gap:8px;align-items:center}
.wkbtn{width:40px;height:40px;border:1px solid var(--line);font-size:17px;line-height:1;
  background:#fff;cursor:pointer;color:var(--ink)}
.wkbtn:hover:not(:disabled){border-color:var(--ink)}
.wkbtn:disabled{opacity:.3;cursor:default}

/* 진행 현황 — 주를 넘겨도 그대로 있습니다 */
.prog{border:1px solid var(--line);margin-bottom:16px}
.prog-top{display:flex;align-items:center;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.prog-num{flex:1 1 110px;padding:16px 18px;border-right:1px solid var(--line)}
.prog-num:last-child{border-right:0}
.prog-num b{display:block;font-family:var(--disp);font-size:26px;font-weight:600;line-height:1}
.prog-num span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-soft)}
.prog-num.done b{color:#1a7f4b}
.prog-num.missed b{color:#b42318}
.prog-keep{flex:2 1 260px;padding:16px 18px}
.prog-keep .lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
.prog-keep .lbl b{color:var(--ink);font-size:13px}
.prog-keep .bar{height:8px;background:var(--line)}
.prog-keep .bar i{display:block;height:100%;background:#1a7f4b}
.prog-keep .msg{margin-top:9px;font-size:12.5px;color:var(--ink-soft);line-height:1.6}

/* 주별 기록 — 지난 주에 뭘 했는지 다음 주 화면에서도 보입니다.
   누르면 그 주로 넘어갑니다. */
.wkstrip{display:flex;gap:1px;background:var(--line);overflow-x:auto}
.wkchip{flex:1 0 62px;background:#fff;border:0;padding:10px 4px 9px;cursor:pointer;
  font-family:inherit;text-align:center;color:var(--ink)}
.wkchip:hover{background:#f7f8fa}
.wkchip b{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.wkchip i{display:block;height:5px;margin:7px 4px 0;background:var(--line)}
.wkchip i span{display:block;height:100%;background:#1a7f4b}
.wkchip.miss i span{background:#b42318}
.wkchip.now{background:var(--ink)}
.wkchip.now b{color:#fff}
.wkchip.now i{background:rgba(255,255,255,.28)}
.wkchip:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.prog-save{padding:12px 18px;border-top:1px solid var(--line);background:#fafafa;
  font-size:12.5px;color:var(--ink-soft);line-height:1.65}
.prog-save b{color:var(--ink)}

/* 가로가 좁으면 밀어서 봅니다. 요일 7칸을 접으면 시간표가 아니게 됩니다. */
.ttwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.tt{display:grid;grid-template-columns:58px repeat(7,minmax(112px,1fr));
  gap:1px;background:var(--line);min-width:842px}
.tt > *{background:#fff}
.tt-head{padding:11px 4px;text-align:center}
.tt-head b{display:block;font-size:13.5px;font-weight:700}
.tt-head span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-soft)}
.tt-head.sat b{color:var(--blue)}
.tt-head.sun b{color:#b42318}
.tt-head.today{background:var(--ink);color:#fff}
.tt-head.today b,.tt-head.today span{color:#fff}
.tt-corner{background:#fafafa}
.tt-time{background:#fafafa;padding:12px 8px 0;text-align:right;
  font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft)}
.tt-cell{padding:9px 9px 10px;min-height:104px;text-align:left;border:0;
  font-family:inherit;cursor:pointer;display:block;width:100%}
.tt-cell:hover{background:#f7f8fa}
.tt-cell:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tt-cell.void{background:#fbfbfc;cursor:default}
.tt-cell.void:hover{background:#fbfbfc}
.tt-cell.past{opacity:.55}
.tt-cell.s-done{background:#f2faf5}
.tt-cell.s-missed{background:#fdf5f4}
.tt-cell.s-open{background:#fffdf3;box-shadow:inset 3px 0 0 var(--ink)}
.tt-cell.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.tt-min{font-size:11px;color:#9aa3b0;margin-bottom:6px}
.tt-item{display:block;font-size:12.5px;line-height:1.4;margin-bottom:5px;
  padding-left:8px;border-left:2px solid var(--line)}
/* 두 줄에서 자릅니다. 안 자르면 「문법형식 판단 · 한자 읽기」 같은 긴 이름이
   좁은 칸에서 네 줄이 되고, 그 칸 하나 때문에 그 줄 전체가 화면 하나만큼
   높아집니다. 좁은 화면에서는 옆 칸이 안 보이니 빈 화면만 보게 됩니다.
   전문은 칸을 누르면 아래 상세에 그대로 나옵니다. */
.tt-item b{display:block;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-item em{font-style:normal;color:#9aa3b0;font-size:11px}
.tt-item.k-kana{border-left-color:#c8912f}
.tt-item.k-voca{border-left-color:var(--blue)}
.tt-item.k-mock{border-left-color:var(--ink)}
.tt-item.k-drill{border-left-color:#1a7f4b}
.tt-item.k-review{border-left-color:#9aa3b0}
.tt-badge{display:inline-block;margin-top:2px;font-size:11px;padding:2px 7px;border:1px solid var(--line);color:var(--ink-soft)}
.tt-badge.done{border-color:#1a7f4b;color:#1a7f4b}
.tt-badge.missed{border-color:#b42318;color:#b42318}
.tt-badge.open{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.ttscroll{margin-top:8px;font-size:12.5px;color:#9aa3b0}

/* 칸을 누르면 아래에 자세히 나옵니다. 칸 안에 다 넣으면 글자가 4px 이 됩니다. */
.detail{border:1px solid var(--ink);padding:20px;margin-top:18px}
.detail h3{font-size:16px;font-weight:700;margin-bottom:4px}
.detail .when{font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.detail ul{list-style:none;display:grid;gap:12px}
.detail li{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.detail li:last-child{border-bottom:0;padding-bottom:0}
.detail li b{font-size:15px}
.detail li em{font-style:normal;font-size:13px;color:var(--ink-soft)}
.detail li small{grid-column:1/-1;margin-top:4px;font-size:12.5px;color:#9aa3b0;line-height:1.6}
.detail li a{grid-column:1/-1;margin-top:8px;display:inline-block;font-size:13px;font-weight:600;
  border-bottom:1px solid currentColor;justify-self:start}
.detail .act{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.detail .act .msg{font-size:13px;color:var(--ink-soft)}

/* 오답노트 */
.bars{display:grid;gap:8px;margin:16px 0 22px}
.bar{display:grid;grid-template-columns:200px 1fr 42px;align-items:center;gap:10px;font-size:13px}
.bar i{display:block;height:10px;background:var(--line)}
.bar i b{display:block;height:100%;background:var(--ink)}
.bar em{font-style:normal;text-align:right;color:var(--ink-soft)}
.qlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.qrow{display:grid;grid-template-columns:86px 46px 1fr auto auto;gap:10px;align-items:center;
  background:#fff;padding:11px 14px;font-size:13.5px}
.qrow:hover{background:#fafafa}
.qs{font-weight:700}
.qn,.qa{color:var(--ink-soft)}
.qx{color:#b42318;font-weight:700}

/* 근거 */
.ev{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.ev>div{background:#fff;padding:22px 20px}
.ev h3{font-size:16px;font-weight:700;margin-bottom:8px}
.ev p{font-size:14px;color:var(--ink-soft);line-height:1.75}
.ev cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:#9aa3b0}
.ev cite a{text-decoration:underline}
.caveat{border:1px solid var(--ink);padding:22px 20px;margin-top:22px}
.caveat > b:first-child{display:block;margin-bottom:8px}
.caveat p{font-size:14px;color:var(--ink-soft);line-height:1.8}

footer{border-top:1px solid var(--line);padding:40px 0;font-size:13px;color:var(--ink-soft)}

@media (max-width:860px){
  section{padding:56px 0}
  .sum{grid-template-columns:repeat(2,1fr)}
  .qrow{grid-template-columns:1fr;gap:4px}
  .bar{grid-template-columns:1fr;gap:4px}
  .bar em{text-align:left}
  .btn--big{width:100%;min-width:0}
  .shortcta .btn{flex:1 1 100%}
  .wknav{flex-direction:column;align-items:flex-start}
}

/* 오답노트 유형 막대에서 바로 연습으로 — app/drill.html */
.bar .bardrill{flex:0 0 auto;margin-left:10px;font-size:12px;color:var(--blue);
  border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap}
.bar .bardrill:hover{opacity:.65}

/* 온라인 스터디 칸 — 남과 약속한 시간이라 혼자 하는 칸과 달라 보여야 합니다 */
.tt-item.pday--study,.tt-item[data-study="1"]{border-left:4px solid var(--blue);background:#f4f7fd}
.tt-item[data-study="1"] b::before{content:"👥 ";}
.detail .dstudy{display:inline-block;margin-left:8px;font-size:11.5px;padding:2px 9px;
  border-radius:999px;background:#eaf0fb;color:var(--blue);font-weight:600}
.tt-cell.study{border-color:var(--blue);background:#f4f7fd}
.tt-cell.study .tt-min{color:var(--blue);font-weight:600}

/*
── 케어 리스트 — 오답노트를 캐릭터가 들고 오는 카드 3장 ─────────────────
   말풍선은 각진 사각형 금지(브랜드 규칙) — 비대칭 둥근 모서리로 캐릭터 쪽만
   살짝 각을 낮춰 "캐릭터가 말하는" 방향을 만듭니다. */
.care{display:flex;gap:20px;align-items:flex-start;margin:6px 0 30px;
  padding:22px;border:1px solid var(--line);border-radius:20px;background:#fffdf7}
.care-chick{width:96px;height:auto;flex:0 0 auto;margin-top:2px}
.care-body{flex:1;min-width:0}
.care-say{position:relative;font-size:14.5px;line-height:1.7;color:var(--ink);
  background:#fff;border:1px solid var(--line);
  border-radius:6px 18px 18px 18px;padding:12px 16px;margin-bottom:14px}
.care-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.care-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  text-decoration:none;color:var(--ink);transition:transform .15s ease,border-color .15s ease}
.care-card:hover{transform:translateY(-2px);border-color:var(--blue)}
.care-card b{font-size:14px;line-height:1.4}
.care-card span{font-size:12.5px;color:var(--ink-soft)}
.care-card em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--blue);margin-top:4px}
@media (max-width:560px){
  .care{flex-direction:column;gap:12px}
  .care-chick{width:72px}
}
.tt-item.k-tpl{border-left-color:#b04ac2}
.tt-item.k-learn{border-left-color:#d98314}