/* ============================================================
   Reels Remix — 화이트 미니멀 · 인스타 시그니처 그라데이션
   왜 이 톤: 바탕은 순백·저채도로 프리미엄을 유지하고,
   인스타 로고 그라데이션은 '주요 액션'에만 시그니처로 찍어
   브랜드 냄새는 내되 화면 전체가 무지개(=슬롭)로 번지지 않게 한다.
   모션: transform/opacity만, expo 이징, reduced-motion 존중.
   ============================================================ */
:root{
  --bg:#FBFAFB; --surface:#FFFFFF;
  --ink:#15121A; --ink-2:#655F6E; --ink-3:#78718A;
  --line:rgba(21,18,26,.10); --line-2:rgba(21,18,26,.05);
  /* 인스타 시그니처 그라데이션 + 그 중간값을 뽑은 솔리드 마젠타 */
  --ig:linear-gradient(115deg,#FEDA75 0%,#FA7E1E 22%,#D62976 52%,#962FBF 78%,#4F5BD5 100%);
  --accent:#D6266E; --accent-ink:#B01560; --accent-weak:rgba(214,38,110,.10);
  --ok:#3B7A4B;
  --r-card:18px; --r-input:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(21,18,26,.04), 0 10px 30px rgba(21,18,26,.05);
  --sh-2:0 3px 8px rgba(21,18,26,.06), 0 22px 60px rgba(21,18,26,.10);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.25,.1,.25,1);
  --font:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",
         "Noto Sans KR",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-.011em; line-height:1.55; overflow-x:hidden;
}
.wrap{width:100%; max-width:1040px; margin-inline:auto; padding-inline:28px}
.hidden{display:none !important}

/* 미세 상단 워시 — 흰 면에 인스타 톤을 아주 옅게 얹음 */
.grain{position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 55% at 78% -8%, rgba(214,38,110,.06), transparent 60%),
             radial-gradient(90% 45% at 12% -4%, rgba(79,91,213,.05), transparent 60%);}

/* ── 상단바 ─────────────────────────────── */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.5) blur(16px);
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom:1px solid var(--line-2);}
.topbar__in{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.brand__mark{display:grid; place-items:center; width:28px; height:28px; border-radius:9px;
  background:var(--ig); color:#fff; font-size:16px; font-weight:600;
  box-shadow:0 2px 8px rgba(214,38,110,.28); transform:translateZ(0)}
.brand__name{font-size:16px}
.steps{display:flex; gap:3px}
.step{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-2);
  padding:7px 13px; border-radius:var(--r-pill); font-weight:650; white-space:nowrap;
  transition:.25s var(--ease-out)}
.step i{display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  border:1.5px solid var(--line); font-style:normal; font-size:11.5px; font-weight:700;
  color:var(--ink-3); transition:.3s var(--ease-expo)}
.step.is-on{color:var(--ink); background:var(--accent-weak)}
.step.is-on i{background:var(--ig); border:0; color:#fff}
.step.is-done i{background:var(--ink); border:0; color:#fff}
@media(max-width:600px){ .step__t{display:none} .step{padding:5px 6px; gap:0} }

/* ── 히어로 (첫 폴드를 꽉 채운다) ─────────────── */
/* 내용 높이 기준(풀높이 금지) — 진행/결과 카드가 입력 바로 아래에 붙는다 */
.hero{display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(44px,9vh,96px) 0 18px; position:relative; z-index:1}
.hero__in{max-width:800px}
.eyebrow{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 18px}
.hero__title{font-size:clamp(36px,6.2vw,62px); line-height:1.04; margin:0; font-weight:850;
  letter-spacing:-.04em}
.hero__title em{font-style:normal; background:var(--ig); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.hero__sub{margin:20px 0 0; color:var(--ink-2); font-size:clamp(16px,1.8vw,18px); max-width:46ch}

/* 링크바 = 화면의 주인공. 포커스 시 인스타 그라데이션 링이 감싼다. */
.linkbar{display:flex; gap:10px; margin-top:36px; max-width:640px}
.linkbar__input{flex:1; min-width:0; height:56px; padding:0 20px; font-size:17px;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-1); font-family:var(--font); letter-spacing:-.01em;
  transition:border-color .2s var(--ease-out), box-shadow .25s var(--ease-out)}
.linkbar__input::placeholder{color:var(--ink-3)}
.linkbar__input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-weak), var(--sh-1)}
.hint{margin:16px 0 0; font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.hint.err{color:var(--accent-ink)}

/* ── 버튼 ─────────────────────────────── */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 26px; border-radius:12px; border:1px solid transparent;
  font-family:var(--font); font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:transform .12s var(--ease-out), opacity .2s, box-shadow .25s;}
.btn::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(0,0,0,.18); opacity:0; transition:opacity .18s var(--ease-out); pointer-events:none}
.btn:active::after{opacity:1; transition:none}
.btn:disabled{opacity:.5; cursor:default}
.btn__label{position:relative; z-index:1}
/* 주요 액션 = 인스타 그라데이션 (시그니처) — 투명 테두리 제거(그라데 가장자리 헤어라인 방지) */
.btn--primary{background:var(--ig); color:#fff; border:0; box-shadow:0 6px 20px rgba(214,38,110,.30)}
/* 강조 보조 액션 = 솔리드 잉크 (그라데와 위계 분리) */
.btn--dark{background:var(--ink); color:#fff; box-shadow:var(--sh-1)}
.btn--ghost{height:38px; padding:0 15px; font-size:13.5px; font-weight:650; background:var(--surface);
  border-color:var(--line); color:var(--ink)}
.btn--ghost::after{background:rgba(21,18,26,.06)}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn__label{opacity:.4}
.btn.is-busy::before{content:""; position:absolute; z-index:2; width:16px; height:16px;
  border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  animation:spin .7s linear infinite}
.btn--ghost.is-busy::before{border-color:rgba(21,18,26,.3); border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 카드 ─────────────────────────────── */
.card{position:relative; z-index:1; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); box-shadow:var(--sh-1); padding:30px 32px; margin-top:24px}
.h2{font-size:21px; font-weight:800; letter-spacing:-.025em; margin:0}
.h3{font-size:13px; font-weight:700; color:var(--ink-2); margin:20px 0 8px;
  text-transform:uppercase; letter-spacing:.05em}
.muted{color:var(--ink-2); font-size:14.5px; margin:6px 0 18px}
.result__head{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:18px}
.meta{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.row-end{display:flex; justify-content:flex-end; margin-top:20px}

/* ── 진행 리스트 ─────────────────────────────── */
.proglist{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.proglist li{display:flex; align-items:center; gap:14px; padding:12px 6px;
  font-size:15px; color:var(--ink-3); border-radius:10px; transition:color .3s}
.proglist li.is-active,.proglist li.is-done{color:var(--ink)}
.dot{position:relative; width:20px; height:20px; flex:none; border-radius:50%;
  border:1.5px solid var(--line); transition:.3s var(--ease-expo)}
.is-active .dot{border-color:var(--accent-weak); border-top-color:var(--accent);
  animation:spin .8s linear infinite}
.is-done .dot{background:var(--ig); border:0; animation:none}
.is-done .dot::after{content:""; position:absolute; left:6px; top:3px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.progerr{margin-top:12px; padding:14px 16px; border-radius:12px; font-size:14px;
  background:var(--accent-weak); color:var(--accent-ink); border:1px solid rgba(214,38,110,.2)}

/* ── 훅 · 타임라인 ─────────────────────────────── */
.hookbox{margin:2px 0 22px; padding:16px 18px; border-radius:13px;
  background:linear-gradient(180deg, var(--accent-weak), rgba(214,38,110,.03));
  border:1px solid rgba(214,38,110,.16); font-size:15.5px; font-weight:600; color:var(--ink)}
.hookbox::before{content:"HOOK · 0–3초"; display:block; font-size:11px; font-weight:800;
  letter-spacing:.09em; color:var(--accent-ink); margin-bottom:7px}
.tl-wrap,.sc-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:13px}
table.tl,table.sc{width:100%; border-collapse:collapse; font-size:14px; min-width:580px}
.tl th,.sc th{text-align:left; font-weight:700; color:var(--ink-2); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; padding:12px 14px; background:#FAF7FA;
  border-bottom:1px solid var(--line); position:sticky; top:0}
.tl td,.sc td{padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:top}
.tl tr:last-child td,.sc tr:last-child td{border-bottom:none}
.tl td:first-child{font-variant-numeric:tabular-nums; color:var(--accent-ink);
  font-weight:650; white-space:nowrap}
.tl td:nth-child(3){color:var(--ink)}
.tl td:nth-child(4){color:var(--ink-3)}
.sc td:first-child{font-weight:700; color:var(--accent-ink); text-align:center}
.sc td:nth-child(2){font-variant-numeric:tabular-nums; color:var(--ink-2); text-align:center}
tr:hover td{background:rgba(21,18,26,.015)}

.foldout{margin-top:20px; border-top:1px solid var(--line-2); padding-top:8px}
.foldout summary{cursor:pointer; font-size:13.5px; font-weight:650; color:var(--ink-2);
  padding:8px 2px; list-style:none}
.foldout summary::-webkit-details-marker{display:none}
.foldout summary::before{content:"＋ "; color:var(--accent)}
.foldout[open] summary::before{content:"− "}
.proseblock{white-space:pre-wrap; word-break:break-word; font-family:var(--font);
  font-size:14.5px; line-height:1.75; color:var(--ink); background:#FAF7FA; margin:0 0 4px;
  padding:15px 17px; border-radius:11px; border:1px solid var(--line-2)}

/* ── 명령 · 새 대본 ─────────────────────────────── */
.cmd,.newscript{width:100%; resize:vertical; font-family:var(--font); font-size:15.5px;
  line-height:1.7; color:var(--ink); background:#FCFBFC; border:1px solid var(--line);
  border-radius:var(--r-input); padding:15px 17px; transition:border-color .2s, box-shadow .25s}
.cmd:focus,.newscript:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-weak)}
.newscript{background:var(--surface); font-size:16px; line-height:1.8; min-height:300px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{font-family:var(--font); font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 14px; cursor:pointer; transition:.18s var(--ease-out)}
.chip:hover{color:var(--ink); border-color:var(--ink-3)}
.chip:active{transform:scale(.96)}
.exporters{display:flex; gap:7px}
.scmeta{margin-top:18px; font-size:14px; color:var(--ink-2)}
.scmeta .cap{white-space:pre-wrap; margin:6px 0 12px; color:var(--ink)}
.scmeta .tags{display:flex; flex-wrap:wrap; gap:6px}
.scmeta .tag{font-size:12.5px; color:var(--accent-ink); background:var(--accent-weak);
  border-radius:var(--r-pill); padding:4px 11px; font-weight:600}

/* ── 리빌 모션 ─────────────────────────────── */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none;
  transition:opacity .55s var(--ease-expo), transform .55s var(--ease-expo)}

/* ── 토스트 ─────────────────────────────── */
.toast{position:fixed; left:50%; bottom:28px; z-index:50; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600; padding:13px 22px;
  border-radius:var(--r-pill); box-shadow:var(--sh-2); opacity:0; pointer-events:none;
  transition:opacity .28s var(--ease-out), transform .4s var(--ease-expo)}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
  .reveal{opacity:1; transform:none}
  .btn,.chip{transition:none}
}
@media (max-width:600px){
  .wrap{padding-inline:18px}
  .hero{min-height:auto; padding:36px 0 40px}
  .card{padding:22px 18px}
  .linkbar{flex-direction:column; margin-top:30px}
  .btn--primary{width:100%}
  .exporters{flex-wrap:wrap}
}

/* ── 인쇄(PDF) ─────────────────────────────── */
@media print{
  .topbar,.grain,.hero,.exporters,.row-end,.chips,.foldout summary,.toast{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; border:none; padding:0; margin:0 0 18px}
}