/* ============================================================
   영어하는 준쌤 — 공통 스타일
   따뜻하고 귀여운 테마 · 크림 + 연노랑 형광펜 + 파스텔
   라이트/다크 대응
   ============================================================ */

:root{
  --cream:#FBF4E6;      /* 배경 크림 */
  --paper:#FFFDF7;      /* 카드 */
  --ink:#4A4038;        /* 따뜻한 먹색(부드러운) */
  --ink-soft:#8A7F73;
  --faint:#B4A99A;
  --hair:#EFE4D0;
  --hair-strong:#E2D4BC;

  --honey:#F4C24B;      /* 메인 포인트 — 버터 옐로 */
  --honey-deep:#E0A324;
  --peach:#F29E7E;      /* 서브 포인트 — 살구 */
  --peach-deep:#E07E5C;
  --mint:#9FD8BE;
  --sky:#A9D3EE;
  --lav:#CDBEE8;
  --hi:#FFF0A0;         /* 형광펜 노랑 */

  --shadow:0 2px 4px rgba(120,90,40,.05), 0 16px 34px -18px rgba(120,90,40,.22);
  --shadow-sm:0 1px 2px rgba(120,90,40,.06), 0 8px 18px -12px rgba(120,90,40,.2);
  --kr:"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --wrap:760px;
}
@media (prefers-color-scheme:dark){
  :root{
    --cream:#211C16;--paper:#2A241C;--ink:#F0E7D8;--ink-soft:#C1B4A0;--faint:#8E8271;
    --hair:#3A3227;--hair-strong:#4A4033;
    --honey:#F6CB5E;--honey-deep:#FFDA7E;--peach:#F0A184;--peach-deep:#FFB79A;
    --mint:#7FC0A5;--sky:#8FBEDC;--lav:#B7A7D6;--hi:#5C5326;
    --shadow:0 2px 4px rgba(0,0,0,.35), 0 18px 36px -18px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 18px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{
  --cream:#FBF4E6;--paper:#FFFDF7;--ink:#4A4038;--ink-soft:#8A7F73;--faint:#B4A99A;
  --hair:#EFE4D0;--hair-strong:#E2D4BC;--honey:#F4C24B;--honey-deep:#E0A324;
  --peach:#F29E7E;--peach-deep:#E07E5C;--mint:#9FD8BE;--sky:#A9D3EE;--lav:#CDBEE8;--hi:#FFF0A0;
}
:root[data-theme="dark"]{
  --cream:#211C16;--paper:#2A241C;--ink:#F0E7D8;--ink-soft:#C1B4A0;--faint:#8E8271;
  --hair:#3A3227;--hair-strong:#4A4033;--honey:#F6CB5E;--honey-deep:#FFDA7E;
  --peach:#F0A184;--peach-deep:#FFB79A;--mint:#7FC0A5;--sky:#8FBEDC;--lav:#B7A7D6;--hi:#5C5326;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--kr);-webkit-font-smoothing:antialiased;
  line-height:1.78;letter-spacing:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* soft ambient blobs on background */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-deco span{position:absolute;border-radius:50%;filter:blur(50px);opacity:.5}
.bg-deco .b1{width:340px;height:340px;background:var(--sky);top:-90px;right:-70px;opacity:.35}
.bg-deco .b2{width:300px;height:300px;background:var(--mint);bottom:-80px;left:-80px;opacity:.3}
.bg-deco .b3{width:240px;height:240px;background:var(--lav);top:40%;left:55%;opacity:.22}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--cream) 82%,transparent);backdrop-filter:saturate(150%) blur(10px);border-bottom:2px dotted var(--hair-strong)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand .mark{width:38px;height:38px;flex:0 0 auto}
.brand b{font-size:1.05rem;letter-spacing:0}
.brand small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.18em;color:var(--peach-deep);text-transform:uppercase}
.nav-links{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav-links a{font-size:.86rem;font-weight:800;color:var(--ink-soft);padding:7px 13px;border-radius:999px}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);background:var(--hi)}
.nav-links .tbtn{font-size:1rem}

.page{max-width:var(--wrap);margin:0 auto;padding:30px 20px 76px}

/* ---------- hero (home) ---------- */
.hero{
  background:linear-gradient(180deg,var(--paper),var(--paper));
  border:2px solid var(--hair);border-radius:30px;box-shadow:var(--shadow);
  padding:34px 34px 30px;margin-bottom:28px;position:relative;overflow:hidden;
}
.hero-grid{display:flex;align-items:center;gap:24px}
@media(max-width:600px){.hero-grid{flex-direction:column-reverse;text-align:center;gap:14px}.hero{padding:28px 22px}}
.hero-txt{flex:1;min-width:0}
.hero .tagpill{display:inline-block;background:var(--sky);color:#2b4a63;font-weight:900;font-size:.8rem;padding:6px 14px;border-radius:999px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
@media (prefers-color-scheme:dark){.hero .tagpill{color:#0e1c26}}
.hero h1{font-size:2.15rem;font-weight:900;letter-spacing:0;line-height:1.22;margin:0 0 10px;text-wrap:balance}
.hero h1 .circle{position:relative;white-space:nowrap}
.hero h1 .circle::after{content:"";position:absolute;left:-6%;top:-8%;width:112%;height:120%;border:3px solid var(--sky);border-radius:50%;transform:rotate(-3deg);opacity:.9}
@media(max-width:600px){.hero h1{font-size:1.7rem}}
.hero .sub{margin:0;color:var(--ink-soft);font-size:1rem;max-width:44ch}
.hero .sub b{color:var(--peach-deep)}
.hero .meta-row{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:600px){.hero .meta-row{justify-content:center}}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;color:var(--ink-soft);background:var(--cream);border:2px solid var(--hair);border-radius:999px;padding:6px 12px}
.pill b{color:var(--honey-deep)}
.hero-art{flex:0 0 auto;width:150px}
@media(max-width:600px){.hero-art{width:130px}}

/* ---------- category filter ---------- */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.cats button{font-size:.86rem;font-weight:800;color:var(--ink-soft);background:var(--paper);border:2px solid var(--hair);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s}
.cats button:hover{border-color:var(--honey)}
.cats .on{color:var(--ink);border-color:var(--honey);background:var(--hi)}

/* ---------- post list ---------- */
.list{display:flex;flex-direction:column;gap:16px}
.post-card{display:block;background:var(--paper);border:2px solid var(--hair);border-radius:24px;box-shadow:var(--shadow-sm);padding:22px 24px;transition:transform .15s,border-color .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);border-color:var(--honey);box-shadow:var(--shadow)}
.post-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{font-size:.72rem;font-weight:900;color:var(--honey-deep);background:var(--hi);border-radius:999px;padding:3px 11px}
.tag.series{color:var(--ink-soft);background:transparent;border:1.5px dashed var(--hair-strong)}
.post-card h3{font-size:1.24rem;font-weight:900;letter-spacing:0;margin:0 0 8px;line-height:1.4}
.post-card h3 .em{background:linear-gradient(transparent 58%,var(--hi) 58%);padding:0 2px}
.post-card .ex{color:var(--ink-soft);font-size:.95rem;margin:0 0 12px}
.post-card .foot{display:flex;align-items:center}
.post-card .date{font-size:.82rem;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
.post-card .go{margin-left:auto;color:var(--peach-deep);font-weight:900;font-size:.86rem}

/* ---------- footer ---------- */
.foot{border-top:2px dotted var(--hair-strong);margin-top:44px}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:24px 20px;color:var(--faint);font-size:.84rem;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.foot-in .brand-sm{font-weight:900;color:var(--ink-soft)}
.foot-in .sp{margin-left:auto}

/* ============================================================
   ARTICLE
   ============================================================ */
.article{max-width:var(--wrap);margin:0 auto;padding:28px 20px 76px}
.art-head{margin:0 0 24px;text-align:center}
.art-head .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;justify-content:center}
.art-head h1{font-size:2rem;font-weight:900;letter-spacing:0;line-height:1.28;margin:0 0 14px;text-wrap:balance}
@media(max-width:600px){.art-head h1{font-size:1.55rem}}
.byline{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft);font-weight:700}
.byline .av{width:34px;height:34px}

.col{display:flex;flex-direction:column;gap:30px}
.card{background:var(--paper);border:2px solid var(--hair);border-radius:26px;box-shadow:var(--shadow-sm);padding:30px 30px}
@media(max-width:600px){.card{padding:24px 20px;border-radius:20px}}

/* cute eyebrow: pin + honey label */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:900;color:var(--honey-deep);margin:0 0 12px}
.eyebrow::before{content:"📌";font-size:.9em}
h2.sec{font-size:1.5rem;font-weight:900;letter-spacing:0;margin:0 0 6px;text-wrap:balance;line-height:1.35}
h2.sec .hl{background:linear-gradient(transparent 55%,var(--hi) 55%);padding:0 4px}
.lead{color:var(--ink-soft);font-size:1rem;margin:0}
.card p{margin:0 0 14px}.card p:last-child{margin-bottom:0}
.card strong{font-weight:900}
.hl{background:linear-gradient(transparent 55%,var(--hi) 55%);padding:0 3px;font-weight:800}
.card em{font-style:normal;font-weight:900;color:var(--peach-deep)}

/* check list */
.checks{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:13px;align-items:flex-start}
.num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--honey);color:#fff;font-weight:900;display:grid;place-items:center;font-size:.9rem;margin-top:2px;box-shadow:var(--shadow-sm)}
.checks .t{font-weight:500}

/* dissection */
.dissect{border:2px dashed var(--hair-strong);border-radius:20px;overflow:hidden;margin:16px 0 14px;background:var(--cream)}
.drow{padding:20px 22px}
.drow+.drow{border-top:2px dashed var(--hair-strong)}
.rowlabel{font-size:.78rem;font-weight:900;color:var(--ink-soft);margin-bottom:12px}
.rowlabel::before{content:"🔎 ";}
.sent{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.token{display:flex;flex-direction:column;align-items:center;gap:6px}
.word{font-size:1.25rem;font-weight:900;line-height:1.1;color:var(--ink);padding-bottom:4px;border-bottom:3px solid var(--hair-strong);border-radius:2px}
.token.mark .word{color:var(--peach-deep);border-bottom-color:var(--peach)}
.role{font-size:.68rem;font-weight:900;color:var(--faint)}
.token.mark .role{color:var(--peach-deep)}
.plain{font-size:1.25rem;font-weight:700;color:var(--faint);padding-bottom:4px}
.formula{margin-top:14px;font-size:.88rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:700}
.formula .chip{padding:3px 11px;border:2px solid var(--hair-strong);border-radius:999px;background:var(--paper)}
.formula .chip.mark{border-color:var(--peach);color:var(--peach-deep);background:var(--paper)}
.formula .ko{color:var(--faint);margin-left:auto}
.keyline{color:var(--ink-soft);font-size:.94rem;margin:0}
.keyline b{color:var(--peach-deep)}

/* quotes */
.quote{background:var(--cream);border:2px solid var(--hair);border-left:6px solid var(--honey);border-radius:6px 16px 16px 6px;padding:14px 18px;margin:0 0 12px;font-size:1rem;line-height:1.6;color:var(--ink);font-weight:600}
.quote .find{background:linear-gradient(transparent 55%,var(--hi) 55%);font-weight:900;padding:0 2px}
.quote small{display:block;color:var(--ink-soft);font-size:.85rem;margin-top:7px;font-weight:500}

/* post cover image */
.cover-figure{margin:0 0 18px;border:2px solid var(--hair);border-radius:22px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm)}
.cover-figure img{width:100%;aspect-ratio:1728/910;object-fit:cover}
.cover-figure figcaption{padding:10px 14px;color:var(--ink-soft);font-size:.82rem;font-weight:800;background:var(--cream)}

/* visual breather between article cards */
.source-photo,
.article-break{
  margin:0 10px;
  border:2px solid var(--hair);
  border-radius:24px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-sm);
}
.source-photo img,
.article-break img{
  width:100%;
  aspect-ratio:16/6.6;
  object-fit:cover;
}
.source-photo figcaption,
.article-break figcaption{
  padding:11px 15px;
  background:var(--cream);
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:800;
  line-height:1.55;
}
.source-photo figcaption a,
.article-break figcaption a{
  color:var(--peach-deep);
  font-weight:900;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.illustration-break img{object-position:left center}
@media(max-width:600px){
  .col{gap:24px}
  .source-photo,.article-break{margin:0;border-radius:20px}
  .source-photo img,.article-break img{aspect-ratio:16/8.2}
}

/* vocabulary blocks */
.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0}
@media(max-width:600px){.word-grid{grid-template-columns:1fr}}
.word-tile{border:2px solid var(--hair);border-radius:18px;background:var(--cream);padding:16px 18px;overflow-wrap:anywhere}
.word-tile .eng{font-size:1.12rem;font-weight:900;color:var(--peach-deep);line-height:1.25;margin-bottom:6px}
.word-tile .ko{font-size:.92rem;color:var(--ink-soft);font-weight:700;line-height:1.55}
.miniq{margin:16px 0 0;padding:18px;border:2px dashed var(--hair-strong);border-radius:20px;background:var(--cream)}
.miniq .qtext{font-weight:900;margin-bottom:10px}
.miniq ol{margin:0;padding-left:22px;color:var(--ink-soft);font-weight:700}
.miniq li+li{margin-top:6px}

/* word hero — 카드 배경 + 우측 제목 오버레이 (재사용 에셋 규격 1728x910) */
.word-hero{position:relative;border:2px solid var(--hair);border-radius:22px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);margin:0 0 8px}
.word-hero img{width:100%;aspect-ratio:1728/910;object-fit:cover;display:block}
.word-hero .wh-word{position:absolute;inset:0 0 0 auto;width:48%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 6% 0 5%;background:linear-gradient(to left,var(--cream) 58%,transparent)}
.word-hero .wh-word .lab{font-size:.78rem;font-weight:900;color:var(--honey-deep)}
.word-hero .wh-word .w{font-size:2rem;font-weight:900;color:var(--peach-deep);line-height:1.08;letter-spacing:-.02em}
.word-hero .wh-word .w small{display:block;font-size:.86rem;color:var(--ink-soft);font-weight:800;margin-top:8px;line-height:1.4}
@media(max-width:600px){
  .word-hero .wh-word{position:static;width:auto;padding:14px 18px;background:var(--cream);border-top:2px dashed var(--hair-strong)}
  .word-hero .wh-word .w{font-size:1.5rem}
}

/* CTA — 글 하단 전환 블록 */
.cta-card{text-align:center;background:linear-gradient(135deg,var(--hi),var(--paper));border:2px solid var(--honey)}
.cta-card h2{font-size:1.22rem;font-weight:900;margin:0 0 6px}
.cta-card p{color:var(--ink-soft);margin:0 0 14px !important;font-weight:700}
.cta-btn{display:inline-block;background:var(--peach-deep);color:#fff;font-weight:900;font-size:.94rem;padding:11px 22px;border-radius:999px}

/* vs-row — 헷갈리는 단어 짝 비교 */
.vs-list{margin:14px 0 0;border:2px solid var(--hair);border-radius:18px;background:var(--cream);overflow:hidden}
.vs-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:15px 16px}
.vs-row+.vs-row{border-top:2px dashed var(--hair-strong)}
.vs-row .side{min-width:0}
.vs-row .side .w{font-weight:900;color:var(--peach-deep);font-size:1.02rem;line-height:1.2}
.vs-row .side .m{font-size:.86rem;color:var(--ink-soft);font-weight:700;margin-top:2px}
.vs-row .side.r{text-align:right}
.vs-row .vs{flex:0 0 auto;font-weight:900;color:var(--honey-deep);font-size:.72rem;background:var(--hi);border-radius:999px;padding:3px 9px}
.vs-tip{padding:0 16px 14px;color:var(--ink-soft);font-size:.88rem;font-weight:600}
.vs-tip b{color:var(--peach-deep)}

/* flow — 의미 확장/단계 다이어그램 (재사용) */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:16px 0 4px}
.flow .node{flex:1 1 110px;min-width:104px;background:var(--paper);border:2px solid var(--hair);border-radius:18px;padding:16px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.flow .node .ic{font-size:2rem;line-height:1}
.flow .node .t{font-weight:900;margin-top:8px;font-size:1rem}
.flow .node .s{font-size:.76rem;color:var(--ink-soft);font-weight:700;margin-top:3px}
.flow .arw{align-self:center;color:var(--honey-deep);font-weight:900;font-size:1.3rem}
@media(max-width:560px){.flow{flex-direction:column}.flow .arw{transform:rotate(90deg);align-self:center}}

/* emoji-grid — 이모지 카드 (재사용) */
.emoji-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 4px}
@media(max-width:560px){.emoji-grid{grid-template-columns:1fr}}
.emoji-cell{display:flex;align-items:center;gap:14px;background:var(--cream);border:2px solid var(--hair);border-radius:18px;padding:15px 16px}
.emoji-cell .em{font-size:2rem;line-height:1;flex:0 0 auto}
.emoji-cell .tx .w{font-weight:900;color:var(--peach-deep);font-size:1.02rem}
.emoji-cell .tx .d{font-size:.85rem;color:var(--ink-soft);font-weight:700;margin-top:2px}

/* exam analysis */
.exam-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.exam-head .qno{font-weight:900;font-size:.95rem;background:var(--peach);color:#fff;padding:5px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.exam-head .name{font-weight:900;font-size:1rem}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
@media(max-width:600px){.meta{grid-template-columns:1fr}}
.meta .m{border:2px solid var(--hair);border-radius:16px;padding:13px 15px;background:var(--cream)}
.meta .mk{font-size:.72rem;font-weight:900;color:var(--faint);margin-bottom:5px}
.meta .mv{font-weight:900;font-size:1rem}
.stars{letter-spacing:2px;color:var(--honey-deep)}
.prob{border:2px solid var(--hair-strong);border-radius:18px;padding:20px 22px;background:var(--paper);font-size:1.02rem;line-height:1.8;font-weight:500}
.prob .q{font-weight:900;margin-bottom:10px}
.pick{display:inline;font-size:.96rem;padding:2px 7px;border-radius:8px;background:var(--cream);border:2px solid var(--hair-strong);font-weight:700}
.slash{color:var(--faint);font-weight:900;margin:0 7px}

/* solution steps */
.step{display:flex;gap:14px;padding:15px 0}
.step+.step{border-top:2px dashed var(--hair-strong)}
.step .k{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--peach);color:#fff;font-weight:900;display:grid;place-items:center;font-size:.9rem;box-shadow:var(--shadow-sm)}
.step .b .qq{font-weight:900;margin-bottom:4px}
.badge-no{display:inline-block;font-weight:900;color:var(--peach-deep)}
.answer{margin-top:16px;border-radius:20px;padding:18px 20px;background:var(--hi);border:2px solid var(--honey)}
.answer .lab{font-size:.76rem;font-weight:900;color:var(--honey-deep);margin-bottom:8px}
.answer .lab::before{content:"⭐ "}
.answer .final{font-size:1.05rem;font-weight:800;line-height:1.7;color:#5a4a1e}
@media (prefers-color-scheme:dark){.answer .final{color:var(--ink)}}
.answer .final b{color:var(--peach-deep)}

/* inline visual note: sticker + one focused takeaway */
.visual-note{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin:16px 0 4px;
  padding:16px 18px;
  border:2px solid var(--hair);
  border-radius:20px;
  background:linear-gradient(135deg,var(--cream),var(--paper));
  box-shadow:var(--shadow-sm);
}
.visual-note img{
  width:82px;
  height:82px;
  object-fit:contain;
}
.visual-note .vn-k{
  display:inline-flex;
  margin:0 0 6px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--hi);
  color:var(--honey-deep);
  font-size:.72rem;
  font-weight:900;
}
.visual-note strong{
  display:block;
  margin:0 0 4px;
  font-size:1.02rem;
  line-height:1.42;
}
.visual-note span{
  display:block;
  color:var(--ink-soft);
  font-size:.92rem;
  font-weight:700;
  line-height:1.6;
}
@media(max-width:520px){
  .visual-note{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px}
  .visual-note img{width:60px;height:60px}
  .visual-note strong{font-size:.98rem}
}

.art-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.art-nav a{font-weight:900;color:var(--peach-deep);font-size:.9rem}

.scrollx{overflow-x:auto}
@media(prefers-reduced-motion:no-preference){
  .card,.hero,.post-card{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}