/* ──────────────────────────────────────────────────────────────
   Engineering Brain — light editorial design system
   accent: forest green · base: warm off-white · ink: near-black
   ────────────────────────────────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  --bg:#f4f4f1;
  --bg-tint:#eceee8;
  --surface:#ffffff;
  --ink:#17181a;
  --ink-2:#4c4f55;
  --ink-3:#83878f;
  --line:#e2e2dc;
  --line-2:#d2d3cb;
  --accent:#15683f;
  --accent-soft:#e4efe7;
  --accent-ink:#ffffff;
  --warn:#a8412c;
  --warn-soft:#f6e7e2;
  --amber:#9a6a12;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --pad:clamp(20px,5vw,40px);
  --maxw:1180px;
  --shadow:0 1px 2px rgba(23,24,26,.04), 0 18px 40px -28px rgba(23,24,26,.35);
  --shadow-lift:0 1px 2px rgba(23,24,26,.05), 0 30px 60px -34px rgba(23,24,26,.45);

  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#101113; --bg-tint:#16181b; --surface:#191b1e; --ink:#edeef0;
    --ink-2:#aeb2b9; --ink-3:#7d828b; --line:#2a2d31; --line-2:#34383d;
    --accent:#43b07b; --accent-soft:#16271f; --accent-ink:#06140d;
    --warn:#e08b76; --warn-soft:#291916; --amber:#d6a13c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.7);
    --shadow-lift:0 1px 2px rgba(0,0,0,.5), 0 30px 60px -34px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:break-word;  /* 한글: 어절(띄어쓰기) 단위 줄바꿈 */
}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.hidden{display:none !important}

/* ── type scale ─────────────────────────────────────────────── */
.display{
  font-weight:800; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(2.5rem,7vw,4.6rem);
}
.h2{font-weight:780; letter-spacing:-.03em; line-height:1.1; font-size:clamp(1.7rem,4vw,2.7rem)}
.h3{font-weight:700; letter-spacing:-.02em; font-size:clamp(1.15rem,2.4vw,1.45rem)}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--ink-2); line-height:1.55}
.kicker{
  font:600 .78rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.muted{color:var(--ink-3)}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-weight:650; font-size:.98rem; line-height:1; white-space:nowrap;
  padding:.85em 1.35em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .15s ease, border-color .15s ease;
  text-decoration:none;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn-primary:hover{background:#125636}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-lg{font-size:1.05rem; padding:1em 1.7em}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.nav.scrolled{border-color:var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.6em; font-weight:800; letter-spacing:-.02em; font-size:1.06rem}
.brand .mark{
  width:26px; height:26px; border-radius:8px; background:var(--accent);
  display:grid; place-items:center; color:var(--accent-ink); font-size:.9rem; font-weight:800;
  transform:rotate(0deg);
}
.nav-actions{display:flex; align-items:center; gap:.55rem}
.nav-link{font-size:.92rem; color:var(--ink-2); text-decoration:none; padding:.5rem .2rem}
.nav-link:hover{color:var(--ink)}
@media (max-width:680px){ .nav-link.collapse{display:none} }
.lang{display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden}
.lang button{font:600 .76rem/1 var(--mono); letter-spacing:.04em; color:var(--ink-3);
  background:transparent; border:none; padding:.45em .7em; cursor:pointer; transition:.12s}
.lang button.active{background:var(--accent); color:var(--accent-ink)}

/* domains (목업) */
.domain-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem}
.domain-chip{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.85em 1em; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer; transition:.14s}
.domain-chip:hover{border-color:var(--accent); transform:translateY(-1px)}
.domain-chip.soon{color:var(--ink-3); cursor:default; background:transparent}
.domain-chip.soon:hover{border-color:var(--line); transform:none}
.domain-chip .soon-tag{font:600 .64rem/1 var(--mono); letter-spacing:.08em; color:var(--amber);
  border:1px solid var(--line-2); border-radius:999px; padding:.35em .55em}
.domain-chip.active-now .soon-tag{color:var(--accent); border-color:var(--accent)}

/* free limit */
.limit-box{display:none; margin-top:1.4rem; padding:clamp(18px,3vw,24px); border-radius:var(--r-md);
  border:1px solid var(--accent); background:var(--accent-soft); text-align:center}
.limit-box.show{display:block; animation:rise .35s ease}
.limit-box h3{margin:0 0 .5rem; font-size:1.15rem; font-weight:740; letter-spacing:-.02em; color:var(--ink)}
.limit-box p{margin:0 0 1.2rem; color:var(--ink-2); font-size:.95rem}

/* ── hero (asymmetric split) ────────────────────────────────── */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4.5rem)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero-copy .display{margin:.5rem 0 0}
.hero-copy .display em{font-style:normal; color:var(--accent)}
.hero-copy .lead{margin:1.4rem 0 0; max-width:34ch}
.hero-cta{display:flex; gap:.75rem; margin-top:2rem; flex-wrap:wrap}
/* 맛보기 버튼이 실채점처럼 보이지 않도록, 누르기 전에 알린다 */
.demo-note{
  margin:.8rem 0 0; font-size:.83rem; line-height:1.6; color:var(--ink-3);
  max-width:34rem; word-break:keep-all; overflow-wrap:break-word;
}
.demo-note .linkish{
  font:inherit; font-weight:650; background:none; border:0; padding:0;
  color:var(--accent); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; white-space:nowrap;
}
.demo-note .linkish:hover{opacity:.78}
.hero-note{margin-top:1.4rem; font-size:.86rem; color:var(--ink-3); display:flex; gap:1.2rem; flex-wrap:wrap}
.hero-note b{color:var(--ink-2); font-weight:650}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem}
  .hero-visual{display:none}      /* 폰에선 사진 제거(카피만) */
}

/* hero photo (절제된 실사 1장) — 위아래 크롭해 정사각으로 짧게 */
.hero-photo{margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lift)}
.hero-photo img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 40%;
  display:block; filter:saturate(.62) contrast(1.04); transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hero-photo:hover img{transform:scale(1.025)}
.hero-photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(21,104,63,.16) 100%);
  mix-blend-mode:multiply}

/* sample card centered, narrower */
.sample-card{max-width:680px; margin:0 auto}

/* preview card (real product UI, not a fake screenshot) */
.qcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(18px,3vw,26px); box-shadow:var(--shadow-lift);
}
.qcard-top{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem}
.tag{
  font:600 .76rem/1 var(--mono); letter-spacing:.02em; color:var(--accent);
  background:var(--accent-soft); padding:.5em .7em; border-radius:7px;
}
.diff{font:600 .76rem/1 var(--mono); letter-spacing:.14em; color:var(--amber)}
.qcard-prog{margin-left:auto; font:600 .76rem/1 var(--mono); color:var(--ink-3)}
.field-label{
  font:600 .72rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:1.15rem 0 .5rem; display:block;
}
.dilemma{color:var(--ink-2); font-size:.98rem; line-height:1.62}
.gloss{margin-top:1rem; border-left:2px solid var(--line-2); padding-left:.85rem}
.gloss li{list-style:none; font:.84rem/1.5 var(--mono); color:var(--ink-3); margin:.25rem 0}
.gloss li b{color:var(--ink-2); font-weight:650}
.gloss ul{margin:0; padding:0}
.question{font-size:1.06rem; font-weight:650; color:var(--ink); line-height:1.45}
.cardpool{margin-top:1.1rem; border:1px solid var(--line-2); border-radius:9px; padding:.7em .9em}
.cardpool summary{
  cursor:pointer; font:600 .78rem/1 var(--mono); letter-spacing:.04em; color:var(--ink-3);
  list-style:none;
}
.cardpool summary::-webkit-details-marker{display:none}
.cardpool summary::before{content:"▸ "; color:var(--accent)}
.cardpool[open] summary::before{content:"▾ "}
.cardpool ul{margin:.7em 0 0; padding:0}
.cardpool li{list-style:none; font:.84rem/1.55 var(--mono); color:var(--ink-3); margin:.4rem 0; padding-left:.9em; border-left:2px solid var(--line-2)}

/* ── generic section ────────────────────────────────────────── */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-head{max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem)}
.section-head .h2{margin:.6rem 0 0}
.section-head .lead{margin-top:1rem}

/* steps (numbered, no equal cards) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.step{padding:1.8rem 1.6rem 1.8rem 0; border-right:1px solid var(--line)}
.step:last-child{border-right:none; padding-right:0}
.step .num{font:800 2.1rem/1 var(--sans); letter-spacing:-.04em; color:var(--accent); opacity:.85}
.step h3{margin:1rem 0 .5rem; font-size:1.12rem; font-weight:720; letter-spacing:-.02em}
.step p{margin:0; color:var(--ink-2); font-size:.96rem}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .step{border-right:none; border-bottom:1px solid var(--line); padding:1.5rem 0}
  .step:last-child{border-bottom:none}
}

/* philosophy split */
.philo{background:var(--bg-tint)}
.philo-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.philo-list{display:grid; gap:1.4rem}
.philo-item{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.philo-item .ic{
  width:38px; height:38px; flex:none; border-radius:10px; background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--accent);
}
.philo-item h3{margin:.1rem 0 .35rem; font-size:1.05rem; font-weight:700; letter-spacing:-.01em}
.philo-item p{margin:0; color:var(--ink-2); font-size:.95rem}
@media (max-width:760px){ .philo-grid{grid-template-columns:1fr; gap:2rem} }

/* CTA band */
.cta-band{text-align:center}
.cta-band .h2{margin:0 auto}
.cta-band .lead{margin:1rem auto 2rem; max-width:46ch}

/* footer */
footer{border-top:1px solid var(--line); padding:2.5rem 0; color:var(--ink-3); font-size:.88rem}
.foot-inner{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center}

/* ── auth modal ─────────────────────────────────────────────── */
.modal-back{
  position:fixed; inset:0; z-index:90; background:rgba(23,24,26,.45);
  backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px;
  animation:fade .2s ease;
}
.modal{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,4vw,30px); box-shadow:var(--shadow-lift);
  animation:rise .25s ease;
}
.modal h2{margin:.2rem 0 .3rem; font-size:1.4rem; font-weight:760; letter-spacing:-.02em}
.modal p.sub{margin:0 0 1.5rem; color:var(--ink-2); font-size:.94rem}
.modal .close{position:absolute; top:14px; right:16px; background:none; border:none; cursor:pointer; color:var(--ink-3); font-size:1.3rem}
.field-group{display:grid; gap:.4rem; margin-bottom:1rem}
.field-group label{font-size:.82rem; font-weight:600; color:var(--ink-2)}
input[type=email],input[type=text]{
  width:100%; padding:.8em .9em; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink); font-size:1rem; font-family:inherit; outline:none;
  transition:border-color .15s;
}
input:focus{border-color:var(--accent)}
.divider{display:flex; align-items:center; gap:.8rem; margin:1.2rem 0; color:var(--ink-3); font-size:.8rem}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.oauth{display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:.8em; border:1px solid var(--line-2); border-radius:999px; background:var(--surface);
  color:var(--ink); font-weight:600; font-size:.95rem; cursor:pointer; transition:border-color .15s}
.oauth:hover{border-color:var(--ink-3)}
.modal-foot{margin-top:1.3rem; font-size:.78rem; color:var(--ink-3); line-height:1.5; text-align:center}
.note{margin-top:.9rem; font-size:.86rem; padding:.7em .85em; border-radius:var(--r-sm); display:none}
.note.ok{display:block; background:var(--accent-soft); color:var(--accent)}
.note.err{display:block; background:var(--warn-soft); color:var(--warn)}

/* ── quiz app view ──────────────────────────────────────────── */
#app-view{min-height:100dvh; padding-bottom:5rem}
.app-bar{display:flex; align-items:center; justify-content:space-between; height:64px; border-bottom:1px solid var(--line); margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.app-user{display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--ink-2)}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:700; font-size:.85rem}
.app-main{max-width:720px; margin:0 auto}
.streak{font:600 .8rem/1 var(--mono); color:var(--ink-3)}

.scale-label{display:flex; justify-content:space-between; align-items:baseline}
.scale-label .hint{font:500 .76rem/1 var(--mono); color:var(--ink-3); letter-spacing:0; text-transform:none}
.scale{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; margin-top:.2rem}
.scale button{min-width:0}
@media (max-width:520px){ .scale{grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px} }

/* ── 자동 맞춤(가로 오버플로 방지) 전역 가드 ─────────────────── */
.qcard,.app-main,.feedback,.limit-box,.hero-photo{max-width:100%}
.app-bar,.app-user,.qcard-top,.app-actions,.hero-cta,.brand{min-width:0}
.app-user{flex-shrink:1; overflow:hidden}
.dilemma,.question,.field-label,.critique,.lead,.gloss li,.q,.metric-top{overflow-wrap:anywhere; word-break:keep-all}
.tag{overflow-wrap:anywhere}
.scale button{
  font:650 .95rem/1 var(--mono); color:var(--ink-2); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.7em 0; cursor:pointer;
  transition:transform .1s, border-color .12s, background .12s;
}
.scale button:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-1px)}
.scale button.sel{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
textarea{
  width:100%; min-height:140px; resize:vertical; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:.9em 1em; font-family:inherit;
  font-size:1rem; line-height:1.62; outline:none; transition:border-color .15s;
}
textarea:focus{border-color:var(--accent)}
.app-actions{display:flex; gap:.7rem; margin-top:1.1rem; flex-wrap:wrap}
.app-actions .btn-primary{flex:1; min-width:160px}
.saved{display:none; margin-top:.9rem; font:600 .86rem/1 var(--mono); color:var(--accent)}
.saved.show{display:block; animation:fade .3s}
.grading{display:none; align-items:center; gap:.6rem; margin-top:1.1rem;
  font:600 .9rem/1 var(--sans); color:var(--ink-2)}
.grading.show{display:flex; animation:fade .3s}
.grade-err{display:none; margin-top:1.1rem; padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--accent); background:var(--accent-soft)}
.grade-err.show{display:block; animation:fade .3s}
.grade-err p{margin:0 0 .7rem; color:var(--ink); font-size:.95rem; line-height:1.6}
.dot-pulse{width:9px; height:9px; border-radius:50%; background:var(--accent);
  animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3; transform:scale(.85)}50%{opacity:1; transform:scale(1.15)}}

/* feedback */
.feedback{
  margin-top:1.4rem; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); padding:clamp(16px,3vw,22px); display:none;
}
.feedback.show{display:block; animation:rise .35s ease}
.fb-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem}
.fb-head h3{margin:0; font:700 .76rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.fb-head .tag{color:var(--warn); background:var(--warn-soft)}
.metric{margin:.9rem 0}
.metric-top{display:flex; justify-content:space-between; font:600 .9rem/1 var(--mono); margin-bottom:.45rem; color:var(--ink-2)}
.metric-top b{color:var(--ink)}
.bar{height:8px; border-radius:6px; background:var(--bg-tint); overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:6px; transition:width .85s cubic-bezier(.2,.7,.2,1)}
.bar.green i{background:var(--accent)}
.bar.ink i{background:var(--ink-2)}
.critique{
  margin-top:1.1rem; padding:.9em 1em; border-radius:var(--r-sm);
  background:var(--warn-soft); color:var(--warn); font-size:.94rem; line-height:1.55;
}
.critique b{font-weight:700}
.hint-line{
  margin-top:.7rem; padding:.9em 1em; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent); font-size:.94rem; line-height:1.55;
}
.hint-line b{font-weight:700}
.demo-badge{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.4rem;
  font:500 .76rem/1.4 var(--mono); color:var(--ink-3); padding:.5em .8em;
  border:1px dashed var(--line-2); border-radius:999px;
}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}