/* ============================================================
   QUILL 퀼 — 범용 설문 폼 빌더 (제안용 데모)
   도메인 레퍼런스: Tally(Notion-like 미니멀 편집) · Google Forms(질문 유형·응답 집계) · 마음노트(질문 타입·샘플 템플릿·개인정보 동의 블록)
   디자인 레퍼런스: Linear(타이포 스케일·여백 리듬·이징) [갤러리] · Tally(흑백 미니멀 + 단일 액센트)
   시스템: 웜화이트 페이퍼 + 잉크 블랙 + 단일 액센트(vermillion). 툴 성격 → 절제된 모션.
   ※ 모든 데이터는 시연용 가상값. 실존 인물·업체와 무관.
   ============================================================ */

:root{
  --paper:#FAF9F7; --card:#FFFFFF; --ink:#16150F; --ink-2:#3B3A33;
  --mut:#6D6A62; --mut-2:#9A968C; --line:#ECE9E2; --line-2:#E0DCD2;
  --acc:#E0523D; --acc-ink:#B93A28; --acc-wash:#FCEDE9;
  --ok:#1F8A5B; --ok-wash:#E7F4EC; --warn:#B9762A; --warn-wash:#FBF1E2;
  --bad:#C6362B; --bad-wash:#FBEAE7; --info:#2C6AA0; --info-wash:#EAF1F8;
  --radius:14px; --radius-s:10px; --radius-xs:7px;
  --shadow:0 1px 2px rgba(20,18,12,.04), 0 8px 30px -14px rgba(20,18,12,.14);
  --shadow-lg:0 30px 70px -30px rgba(20,18,12,.30);
  --shell:1180px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Malgun Gothic",sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-2:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); background:var(--paper); color:var(--ink);
  line-height:1.62; letter-spacing:-0.011em; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,textarea,select{font-family:inherit; font-size:inherit; color:inherit}
::selection{background:var(--acc); color:#fff}
h1,h2,h3,h4{margin:0; font-weight:760; letter-spacing:-0.03em; line-height:1.08}
p{margin:0}
.mono{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:0}
.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
img{max-width:100%; display:block}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.06s} .rv[data-d="2"]{transition-delay:.12s}
.rv[data-d="3"]{transition-delay:.18s} .rv[data-d="4"]{transition-delay:.24s}
.rv[data-d="5"]{transition-delay:.30s}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
  border-radius:var(--radius-s); font-weight:640; font-size:15px; letter-spacing:-0.01em;
  transition:transform .14s var(--ease), background .16s, box-shadow .16s, border-color .16s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--ink); color:#fff}
.btn-pri:hover{background:#000; box-shadow:0 10px 24px -12px rgba(20,18,12,.5)}
.btn-acc{background:var(--acc); color:#fff}
.btn-acc:hover{background:var(--acc-ink); box-shadow:0 12px 26px -12px rgba(224,82,61,.6)}
.btn-gho{background:var(--card); color:var(--ink); border:1px solid var(--line-2)}
.btn-gho:hover{border-color:var(--ink); background:#fff}
.btn-sm{height:36px; padding:0 14px; font-size:13.5px; border-radius:var(--radius-xs)}
.btn-lg{height:52px; padding:0 26px; font-size:16px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- pills/badges ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:999px; font-size:12.5px; font-weight:640; background:var(--card); border:1px solid var(--line-2); color:var(--mut)}
.pill.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--acc)}
.tag{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:6px; font-size:11.5px; font-weight:640}
.tag.ok{background:var(--ok-wash); color:var(--ok)} .tag.warn{background:var(--warn-wash); color:var(--warn)}
.tag.bad{background:var(--bad-wash); color:var(--bad)} .tag.info{background:var(--info-wash); color:var(--info)}
.tag.mut{background:#F1EFE9; color:var(--mut)} .tag.acc{background:var(--acc-wash); color:var(--acc-ink)}

/* ============================================================
   LANDING (index.html)
   ============================================================ */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,249,247,.82); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:var(--shell); margin:0 auto; padding:0 24px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; letter-spacing:-0.04em}
.brand-mark{width:26px; height:26px; border-radius:7px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:15px; font-weight:800; transform:rotate(-4deg)}
.brand small{font-size:11px; font-weight:600; color:var(--mut); letter-spacing:0}
.nav-links{display:flex; gap:26px; align-items:center; font-size:14.5px; color:var(--mut); font-weight:560}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; gap:10px; align-items:center}
@media(max-width:820px){ .nav-links{display:none} }

.hero{padding:74px 0 34px; position:relative}
.hero .shell{position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:680; color:var(--acc-ink); letter-spacing:-0.01em; margin-bottom:20px}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--acc)}
.hero h1{font-size:clamp(40px,6.4vw,78px); line-height:1.0; letter-spacing:-0.045em; font-weight:800; max-width:15ch}
.hero h1 em{font-style:normal; color:var(--acc)}
.hero-sub{margin-top:24px; font-size:clamp(16px,2vw,20px); color:var(--ink-2); max-width:52ch; line-height:1.55}
.hero-cta{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap}
.hero-meta{margin-top:26px; display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; color:var(--mut)}
.hero-meta b{color:var(--ink); font-weight:680}

/* word reveal (⑤ 텍스트 애니메이션 — 절제) */
.wr{display:inline-block; overflow:hidden; vertical-align:bottom}
.wr > span{display:inline-block; transform:translateY(105%); transition:transform .8s var(--ease)}
.wr.in > span{transform:none}

/* builder preview mock in hero */
.hero-mock{margin-top:52px; border:1px solid var(--line-2); border-radius:18px; background:var(--card); box-shadow:var(--shadow-lg); overflow:hidden}
.mock-bar{display:flex; align-items:center; gap:7px; height:44px; padding:0 16px; border-bottom:1px solid var(--line); background:#fbfaf8}
.mock-bar .dot{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.mock-bar .u{margin-left:12px; font-size:12.5px; color:var(--mut-2); font-family:var(--mono)}
.mock-body{display:grid; grid-template-columns:1fr 260px; min-height:340px}
@media(max-width:760px){ .mock-body{grid-template-columns:1fr} .mock-side{display:none} }
.mock-canvas{padding:26px 30px; background:linear-gradient(180deg,#fff, #fdfcfa)}
.mock-side{border-left:1px solid var(--line); background:#fbfaf8; padding:18px}

/* logos / social proof strip */
.proof{padding:22px 0 8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:52px}
.proof .shell{display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; font-size:13px; color:var(--mut-2); font-weight:600}

/* section */
.sec{padding:78px 0}
.sec-head{max-width:60ch}
.sec-k{font-size:12.5px; font-weight:700; color:var(--acc-ink); letter-spacing:.02em; text-transform:uppercase; margin-bottom:14px}
.sec-head h2{font-size:clamp(28px,4vw,44px); letter-spacing:-0.038em}
.sec-head p{margin-top:16px; font-size:17px; color:var(--mut); line-height:1.6}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px}
@media(max-width:860px){ .steps{grid-template-columns:1fr} }
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative; overflow:hidden}
.step .n{font-family:var(--mono); font-size:13px; color:var(--acc); font-weight:700}
.step h3{font-size:20px; margin:12px 0 8px; letter-spacing:-0.03em}
.step p{color:var(--mut); font-size:14.5px; line-height:1.58}

/* field type gallery */
.types{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:40px}
@media(max-width:900px){ .types{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .types{grid-template-columns:1fr} }
.type-c{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); padding:18px; transition:transform .18s var(--ease), border-color .18s, box-shadow .18s}
.type-c:hover{transform:translateY(-3px); border-color:var(--ink); box-shadow:var(--shadow)}
.type-c .ico{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line-2); font-size:18px; margin-bottom:12px}
.type-c b{font-size:15px; letter-spacing:-0.02em}
.type-c p{font-size:13px; color:var(--mut); margin-top:5px}

/* entry cards (3 surfaces) */
.entries{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
@media(max-width:900px){ .entries{grid-template-columns:1fr} }
.entry{display:block; background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius); padding:26px; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s}
.entry:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--ink)}
.entry .ek{font-family:var(--mono); font-size:12px; color:var(--mut-2)}
.entry h3{font-size:22px; margin:10px 0; letter-spacing:-0.03em; display:flex; align-items:center; gap:8px}
.entry p{color:var(--mut); font-size:14px; line-height:1.55}
.entry .go{margin-top:16px; font-weight:680; color:var(--acc-ink); font-size:14px; display:inline-flex; gap:6px; align-items:center}
.entry:hover .go{gap:10px}

/* risk cards */
.risks{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px}
@media(max-width:820px){ .risks{grid-template-columns:1fr} }
.risk{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:var(--radius-s); padding:22px}
.risk h4{font-size:16.5px; letter-spacing:-0.02em; display:flex; gap:8px; align-items:baseline}
.risk .rn{font-family:var(--mono); font-size:12px; color:var(--acc); font-weight:700}
.risk p{font-size:14px; color:var(--mut); margin-top:9px; line-height:1.58}
.risk .fix{margin-top:12px; font-size:13.5px; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.risk .fix b{color:var(--ok)}

/* estimate */
.est{background:var(--ink); color:#fff; border-radius:20px; padding:42px; margin-top:44px}
.est h3{color:#fff; font-size:24px; letter-spacing:-0.03em}
.est-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:24px; background:rgba(255,255,255,.1); border-radius:12px; overflow:hidden}
@media(max-width:720px){ .est-grid{grid-template-columns:1fr} }
.est-row{display:flex; justify-content:space-between; gap:14px; padding:13px 16px; background:#1c1b14; font-size:14px}
.est-row span{color:#c9c6bd} .est-row b{font-family:var(--mono); font-weight:600; white-space:nowrap}
.est-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16)}
.est-total .lab{color:#c9c6bd; font-size:14px} .est-total .val{font-size:30px; font-weight:800; letter-spacing:-0.03em}
.est-note{margin-top:14px; font-size:12.5px; color:#9d9a90; line-height:1.6}

.foot{border-top:1px solid var(--line); padding:38px 0; margin-top:20px; color:var(--mut); font-size:13px}
.foot .shell{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}

/* ============================================================
   APP SHELL (builder / survey / admin)
   ============================================================ */
.app{min-height:100vh; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 18px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:40; gap:12px}
.topbar .left,.topbar .right{display:flex; align-items:center; gap:10px}
.topbar .tt{font-weight:720; font-size:15px; letter-spacing:-0.02em; display:flex; align-items:center; gap:8px}
.seg{display:inline-flex; background:var(--paper); border:1px solid var(--line-2); border-radius:9px; padding:3px}
.seg button{height:30px; padding:0 13px; font-size:13px; font-weight:600; color:var(--mut); border-radius:6px; transition:all .14s}
.seg button.on{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06)}

.toast-wrap{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--ink); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px; font-weight:560; box-shadow:var(--shadow-lg); display:flex; gap:9px; align-items:center; animation:toastIn .3s var(--ease)}
.toast.ok{background:var(--ok)} .toast.warn{background:var(--warn)} .toast.bad{background:var(--bad)}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* modal */
.modal-bg{position:fixed; inset:0; background:rgba(20,18,12,.44); backdrop-filter:blur(3px); z-index:100; display:grid; place-items:center; padding:22px; opacity:0; pointer-events:none; transition:opacity .22s}
.modal-bg.on{opacity:1; pointer-events:auto}
.modal{background:var(--card); border-radius:16px; box-shadow:var(--shadow-lg); max-width:560px; width:100%; max-height:88vh; overflow:auto; transform:translateY(12px) scale(.98); transition:transform .24s var(--ease)}
.modal-bg.on .modal{transform:none}
.modal-h{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card)}
.modal-h h3{font-size:17px} .modal-b{padding:22px}
.x{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--mut); font-size:18px}
.x:hover{background:var(--paper); color:var(--ink)}

/* ============================================================
   BUILDER (builder.html)
   ============================================================ */
.b-wrap{display:grid; grid-template-columns:1fr 300px; gap:0; flex:1; min-height:0}
@media(max-width:900px){ .b-wrap{grid-template-columns:1fr} }
.b-canvas{padding:30px 22px 120px; overflow:auto}
.b-canvas-in{max-width:720px; margin:0 auto}
.b-side{border-left:1px solid var(--line); background:#fbfaf8; padding:18px; overflow:auto}
@media(max-width:900px){ .b-side{border-left:none; border-top:1px solid var(--line)} }

.form-head{background:var(--card); border:1px solid var(--line-2); border-top:4px solid var(--acc); border-radius:var(--radius); padding:24px; margin-bottom:16px}
.form-head input.t{font-size:26px; font-weight:760; letter-spacing:-0.03em; border:none; width:100%; outline:none; background:none; padding:2px 0}
.form-head input.d{font-size:14.5px; color:var(--mut); border:none; width:100%; outline:none; margin-top:8px; background:none}
.form-head input.t::placeholder,.form-head input.d::placeholder{color:var(--mut-2)}

.pages-tab{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; align-items:center}
.ptab{height:30px; padding:0 13px; border-radius:8px 8px 0 0; font-size:13px; font-weight:640; background:var(--acc-wash); color:var(--acc-ink); border:1px solid var(--line-2); border-bottom:none}
.ptab.on{background:var(--acc); color:#fff; border-color:var(--acc)}
.ptab.add{background:var(--card); color:var(--mut); border-radius:8px}

.q{background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius); padding:20px; margin-bottom:12px; position:relative; transition:box-shadow .18s, border-color .18s}
.q.sel{border-color:var(--ink); box-shadow:var(--shadow)}
.q .grip{position:absolute; top:8px; left:50%; transform:translateX(-50%); color:var(--mut-2); font-size:13px; cursor:grab; letter-spacing:2px; user-select:none}
.q-top{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; margin-top:4px}
.q-type{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px; border:1px solid var(--line-2); border-radius:9px; font-size:13.5px; font-weight:600; background:var(--paper); white-space:nowrap}
.q-type select{border:none; background:none; outline:none; font-weight:600; cursor:pointer}
.q-title{flex:1; border:none; border-bottom:1.5px solid var(--line-2); font-size:16px; font-weight:600; padding:8px 2px; outline:none; background:none; transition:border-color .15s}
.q-title:focus{border-color:var(--acc)}
.q-opts{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.q-opt{display:flex; align-items:center; gap:9px}
.q-opt .mk{width:18px; height:18px; border:1.6px solid var(--mut-2); flex:none}
.q-opt.radio .mk{border-radius:50%} .q-opt.check .mk{border-radius:5px}
.q-opt input{flex:1; border:none; border-bottom:1px solid transparent; padding:5px 2px; outline:none; font-size:14.5px; background:none}
.q-opt input:hover{border-bottom-color:var(--line-2)} .q-opt input:focus{border-bottom-color:var(--acc)}
.q-opt .del{color:var(--mut-2); width:24px; height:24px; border-radius:6px; display:grid; place-items:center; font-size:15px}
.q-opt .del:hover{background:var(--bad-wash); color:var(--bad)}
.q-addopt{display:flex; gap:12px; align-items:center; margin-top:4px; font-size:13.5px}
.q-addopt button{color:var(--acc-ink); font-weight:640}
.q-addopt .or{color:var(--mut-2)}
.q-preview-mini{font-size:13px; color:var(--mut); background:var(--paper); border:1px dashed var(--line-2); border-radius:8px; padding:10px 12px}
.q-foot{display:flex; align-items:center; justify-content:flex-end; gap:6px; padding-top:12px; margin-top:10px; border-top:1px solid var(--line)}
.q-foot .fbtn{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--mut); font-size:16px}
.q-foot .fbtn:hover{background:var(--paper); color:var(--ink)}
.q-foot .req{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mut); padding-right:6px; border-right:1px solid var(--line); margin-right:2px; font-weight:560}
.q-foot .fbtn.dup:hover{color:var(--info)} .q-foot .fbtn.del:hover{background:var(--bad-wash); color:var(--bad)}

/* rating / scale mini editors */
.stars{display:flex; gap:5px; color:var(--mut-2); font-size:22px}
.scale-row{display:flex; gap:6px; flex-wrap:wrap}
.scale-row .sc{width:34px; height:34px; border:1px solid var(--line-2); border-radius:8px; display:grid; place-items:center; font-size:13px; font-weight:600; color:var(--mut)}

/* consent block (핵심 법적 기능) */
.q.consent{border-color:var(--info); border-left:3px solid var(--info)}
.consent-block{display:flex; flex-direction:column; gap:10px}
.consent-item{border:1px solid var(--line-2); border-radius:10px; padding:13px 14px; background:var(--paper)}
.consent-item .ch{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.consent-item .ch b{font-size:14px}
.consent-item textarea{width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:13px; resize:vertical; min-height:52px; background:var(--card); outline:none}
.consent-item.req-badge b::after{content:"필수"; margin-left:8px; font-size:10.5px; background:var(--bad-wash); color:var(--bad); padding:2px 7px; border-radius:5px; font-weight:700; vertical-align:middle}
.consent-item.opt-badge b::after{content:"선택"; margin-left:8px; font-size:10.5px; background:var(--info-wash); color:var(--info); padding:2px 7px; border-radius:5px; font-weight:700; vertical-align:middle}
.consent-add{display:flex; gap:8px; flex-wrap:wrap}

/* warnings inside builder */
.warn-line{display:flex; gap:10px; align-items:flex-start; background:var(--warn-wash); border:1px solid #EAD9B8; border-radius:9px; padding:11px 13px; font-size:13px; color:#7a5215; margin-top:10px; line-height:1.5}
.warn-line.bad{background:var(--bad-wash); border-color:#EDC7C1; color:var(--bad)}
.warn-line b{font-weight:700}
.warn-line .ic{font-size:15px; line-height:1.3}

/* side panel */
.side-sec{margin-bottom:20px}
.side-sec h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut-2); margin-bottom:10px}
.add-menu{display:flex; flex-direction:column; gap:4px}
.add-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:560; color:var(--ink-2); transition:background .13s; text-align:left; width:100%}
.add-item:hover{background:var(--acc-wash); color:var(--acc-ink)}
.add-item .ai{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--card); border:1px solid var(--line-2); font-size:14px; flex:none}
.theme-row{display:flex; gap:8px; flex-wrap:wrap}
.sw{width:32px; height:32px; border-radius:9px; border:2px solid transparent; cursor:pointer; transition:transform .14s}
.sw:hover{transform:scale(1.08)} .sw.on{border-color:var(--ink)}
.side-stat{display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px solid var(--line); color:var(--mut)}
.side-stat b{color:var(--ink); font-family:var(--mono); font-weight:600}

/* empty */
.empty{text-align:center; padding:50px 20px; color:var(--mut-2)}
.empty .big{font-size:40px; margin-bottom:12px}

/* ============================================================
   SURVEY (survey.html) — 태블릿 우선
   ============================================================ */
.s-stage{min-height:100vh; display:grid; place-items:start center; padding:40px 18px 80px; background:
  radial-gradient(120% 80% at 50% -10%, #fff, transparent 60%), var(--paper)}
.tablet{width:100%; max-width:820px; border-radius:22px; background:var(--card); box-shadow:var(--shadow-lg); border:1px solid var(--line-2); overflow:hidden}
.s-cover{padding:40px 44px; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.s-cover .theme-band{position:absolute; inset:0 0 auto 0; height:8px; background:var(--acc)}
.s-cover h1{font-size:clamp(24px,4vw,34px); letter-spacing:-0.03em; margin-top:12px}
.s-cover .desc{margin-top:12px; color:var(--mut); font-size:15px; line-height:1.55; max-width:56ch}
.s-cover .brandline{font-size:12.5px; color:var(--mut-2); margin-top:16px; display:flex; gap:8px; align-items:center}
.s-prog{height:4px; background:var(--line); position:sticky; top:0; z-index:5}
.s-prog i{display:block; height:100%; background:var(--acc); width:0; transition:width .4s var(--ease)}
.s-body{padding:20px 44px 30px}
@media(max-width:560px){ .s-cover,.s-body{padding-left:22px; padding-right:22px} }
.s-q{padding:26px 0; border-bottom:1px solid var(--line)}
.s-q:last-child{border-bottom:none}
.s-q .ql{font-size:17px; font-weight:600; letter-spacing:-0.02em; margin-bottom:4px}
.s-q .ql .rq{color:var(--acc); margin-left:4px}
.s-q .qh{font-size:13px; color:var(--mut); margin-bottom:14px}
.s-opts{display:flex; flex-direction:column; gap:10px}
.s-opts.grid{display:grid; grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){ .s-opts.grid{grid-template-columns:1fr} }
.s-opt{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line-2); border-radius:12px; font-size:15px; transition:all .14s; cursor:pointer; background:var(--card); user-select:none}
.s-opt:hover{border-color:var(--ink)}
.s-opt.on{border-color:var(--acc); background:var(--acc-wash); color:var(--acc-ink); font-weight:600}
.s-opt .mk{width:22px; height:22px; border:2px solid var(--mut-2); flex:none; display:grid; place-items:center; transition:all .14s}
.s-opt.radio .mk{border-radius:50%} .s-opt.check .mk{border-radius:6px}
.s-opt.on .mk{border-color:var(--acc); background:var(--acc); color:#fff}
.s-opt.on .mk::after{content:"✓"; font-size:13px}
.s-input{width:100%; border:1.5px solid var(--line-2); border-radius:12px; padding:14px 16px; font-size:15px; outline:none; transition:border-color .14s; background:var(--card)}
.s-input:focus{border-color:var(--acc)}
textarea.s-input{min-height:96px; resize:vertical}
.s-stars{display:flex; gap:8px; font-size:36px; color:var(--line-2)}
.s-stars .st{cursor:pointer; transition:transform .12s, color .12s}
.s-stars .st:hover{transform:scale(1.12)} .s-stars .st.on{color:var(--acc)}
.s-scale{display:flex; gap:8px; flex-wrap:wrap}
.s-scale .sc{min-width:48px; height:48px; padding:0 6px; border:1.5px solid var(--line-2); border-radius:12px; display:grid; place-items:center; font-size:16px; font-weight:640; color:var(--mut); cursor:pointer; transition:all .14s}
.s-scale .sc:hover{border-color:var(--ink)} .s-scale .sc.on{background:var(--acc); color:#fff; border-color:var(--acc)}
.s-scale-ends{display:flex; justify-content:space-between; font-size:12px; color:var(--mut-2); margin-top:8px}

/* consent renderer */
.s-consent{border:1.5px solid var(--info); border-radius:14px; overflow:hidden; margin-top:8px}
.s-consent .ch-item{padding:16px; border-bottom:1px solid var(--line)}
.s-consent .ch-item:last-child{border-bottom:none}
.s-consent .ch-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.s-consent .ch-head b{font-size:14.5px} .s-consent .ch-head .badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px}
.s-consent .req .badge{background:var(--bad-wash); color:var(--bad)} .s-consent .opt .badge{background:var(--info-wash); color:var(--info)}
.s-consent .ch-body{font-size:12.5px; color:var(--mut); margin:8px 0 12px; line-height:1.55; white-space:pre-line; background:var(--paper); padding:10px 12px; border-radius:8px; max-height:120px; overflow:auto}
.s-consent .ch-choose{display:flex; gap:8px}
.chbtn{flex:1; height:42px; border:1.5px solid var(--line-2); border-radius:10px; font-size:14px; font-weight:600; color:var(--mut); transition:all .14s}
.chbtn.on-y{background:var(--ok); color:#fff; border-color:var(--ok)} .chbtn.on-n{background:#efeee9; color:var(--ink-2); border-color:var(--line-2)}

.s-submit{padding:24px 44px 40px}
@media(max-width:560px){ .s-submit{padding:22px} }
.s-submit .warn-line{margin-bottom:14px}

/* success + kiosk reset */
.s-done{padding:70px 40px; text-align:center}
.s-done .chk{width:72px; height:72px; border-radius:50%; background:var(--ok-wash); color:var(--ok); display:grid; place-items:center; font-size:36px; margin:0 auto 20px; animation:pop .4s var(--ease)}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:none; opacity:1}}
.s-done h2{font-size:26px; letter-spacing:-0.03em}
.s-done p{color:var(--mut); margin-top:10px}
.kiosk-guard{margin-top:26px; background:var(--info-wash); border:1px solid #cfe0ef; border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--info); display:inline-block; text-align:left; max-width:420px}
.kiosk-guard b{display:block; margin-bottom:5px; color:#1f4d75}
.kiosk-count{font-family:var(--mono); font-weight:700; font-size:15px}

/* tablet chrome toggle (desktop shows device frame) */
.device-note{max-width:820px; margin:0 auto 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--mut); flex-wrap:wrap}

/* ============================================================
   ADMIN / DASHBOARD (admin.html)
   ============================================================ */
.a-wrap{display:grid; grid-template-columns:230px 1fr; flex:1; min-height:0}
@media(max-width:880px){ .a-wrap{grid-template-columns:1fr} }
.a-side{border-right:1px solid var(--line); background:#fbfaf8; padding:18px 14px; display:flex; flex-direction:column; gap:6px}
@media(max-width:880px){ .a-side{flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:10px} }
.a-nav{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:560; color:var(--ink-2); transition:background .13s; white-space:nowrap}
.a-nav:hover{background:var(--card)} .a-nav.on{background:var(--ink); color:#fff}
.a-nav .ic{font-size:16px; width:18px; text-align:center}
.a-main{padding:26px; overflow:auto}
@media(max-width:560px){ .a-main{padding:16px} }

/* role switcher */
.role-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; margin-bottom:22px}
.role-bar .rl{font-size:13px; color:var(--mut); font-weight:560}
.role-tabs{display:inline-flex; background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:3px; gap:2px}
.role-tabs button{height:34px; padding:0 15px; border-radius:8px; font-size:13.5px; font-weight:620; color:var(--mut); transition:all .14s; display:flex; gap:7px; align-items:center}
.role-tabs button.on{background:var(--ink); color:#fff}
.role-scope{margin-left:auto; font-size:12.5px; color:var(--mut); display:flex; align-items:center; gap:8px}
.role-scope .who{font-weight:680; color:var(--ink)}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
@media(max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .kpis{grid-template-columns:1fr} }
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.kpi .k{font-size:12.5px; color:var(--mut); font-weight:560}
.kpi .v{font-size:30px; font-weight:780; letter-spacing:-0.03em; margin-top:8px; font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px; margin-top:5px; color:var(--mut-2)}
.kpi .s b{color:var(--ok)}

.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.panel-h h3{font-size:17px; letter-spacing:-0.02em}
.panel-h .sub{font-size:12.5px; color:var(--mut)}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; align-items:center}
.filt{display:flex; flex-direction:column; gap:5px}
.filt label{font-size:11.5px; color:var(--mut-2); font-weight:600; padding-left:2px}
.filt select,.filt input{height:38px; padding:0 12px; border:1px solid var(--line-2); border-radius:9px; background:var(--card); outline:none; font-size:13.5px; min-width:130px}
.filt select:focus,.filt input:focus{border-color:var(--acc)}

.charts{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:820px){ .charts{grid-template-columns:1fr} }
.chart-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.chart-box h4{font-size:14.5px; margin-bottom:4px} .chart-box .ch-sub{font-size:12px; color:var(--mut); margin-bottom:14px}
canvas{display:block; width:100%}

.bars{display:flex; flex-direction:column; gap:11px}
.bar-row{display:grid; grid-template-columns:110px 1fr 44px; gap:12px; align-items:center; font-size:13px}
.bar-row .bl{color:var(--ink-2); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track{height:22px; background:var(--paper); border-radius:6px; overflow:hidden; border:1px solid var(--line)}
.bar-fill{height:100%; background:var(--acc); border-radius:6px 0 0 6px; width:0; transition:width .8s var(--ease)}
.bar-row .bv{font-family:var(--mono); font-size:12.5px; color:var(--mut); text-align:right}

/* table */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px}
.tbl th{text-align:left; padding:12px 14px; background:var(--paper); font-weight:660; color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.02em; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#fdfcfa}
.tbl .row-click{cursor:pointer}
.masked{font-family:var(--mono); color:var(--mut-2); letter-spacing:1px}
.cell-name{font-weight:600}

/* drawer */
.drawer-bg{position:fixed; inset:0; background:rgba(20,18,12,.4); z-index:110; opacity:0; pointer-events:none; transition:opacity .22s}
.drawer-bg.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw; background:var(--card); box-shadow:var(--shadow-lg); z-index:111; transform:translateX(100%); transition:transform .28s var(--ease); overflow:auto}
.drawer.on{transform:none}
.drawer-h{position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--line); padding:18px 20px; display:flex; align-items:center; justify-content:space-between}
.drawer-b{padding:20px}
.dr-field{padding:12px 0; border-bottom:1px solid var(--line)}
.dr-field .fl{font-size:12px; color:var(--mut-2); font-weight:600; margin-bottom:4px}
.dr-field .fv{font-size:14.5px}

/* backup */
.backup-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px}
.backup-row:last-child{border-bottom:none}
.log-line{font-family:var(--mono); font-size:12px; color:var(--mut); padding:6px 0; border-bottom:1px dashed var(--line)}
.log-line b{color:var(--ink)}

/* ---------- 종이 설문지 뷰 (응답 상세) ---------- */
.drawer.wide{width:600px}
.drawer.wide .drawer-b{background:#EFECE4; min-height:calc(100vh - 65px)}
@media(min-width:761px){
  .drawer.wide{left:50%; top:50%; right:auto; height:auto; max-height:92vh; width:660px; max-width:92vw;
    border-radius:18px; transform:translate(-50%,-48%) scale(.97); opacity:0; pointer-events:none;
    transition:transform .26s var(--ease), opacity .22s}
  .drawer.wide.on{transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto}
  .drawer.wide .drawer-b{min-height:0}
  .drawer.wide .drawer-h{border-radius:18px 18px 0 0}
}
.psheet{background:#fff; border:1px solid #DDD8CC; border-radius:2px; padding:26px 24px 30px;
  box-shadow:0 1px 0 #eee, 0 14px 34px -18px rgba(20,18,12,.35); color:#222; font-size:12.5px; line-height:1.5}
.psheet .p-logo{text-align:center; font-size:24px; font-weight:900; letter-spacing:-0.05em; margin-bottom:4px}
.psheet .p-logo i{font-style:normal; font-weight:500}
.psheet .p-mgr{display:flex; justify-content:flex-end; gap:8px; font-size:12px; padding:6px 0 4px; border-bottom:2px solid #222}
.psheet .p-mgr b{border-bottom:1px solid #999; min-width:90px; text-align:center; font-weight:600}
.p-info{width:100%; border-collapse:collapse; margin-top:2px}
.p-info td{padding:7px 6px; border-bottom:1px solid #E4E0D6; vertical-align:bottom}
.p-info .pl{width:64px; color:#666; font-size:11px; font-weight:700; letter-spacing:.02em}
.p-info .pv{font-weight:600; font-size:13px}
.p-consent-line{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:#555;
  background:#F7F5F0; border:1px solid #E4E0D6; padding:7px 10px; margin-top:10px; flex-wrap:wrap}
.p-q{display:grid; grid-template-columns:92px 1fr; border-bottom:1px solid #E4E0D6}
.p-q:last-child{border-bottom:none}
.p-q .pqh{padding:12px 8px 12px 2px; font-weight:750; font-size:12px; color:#222; letter-spacing:-0.01em; border-right:1px solid #E4E0D6; display:flex; align-items:center}
.p-q .pqb{padding:10px 2px 10px 12px; display:flex; flex-wrap:wrap; align-items:center; row-gap:4px}
.p-ck{display:inline-flex; align-items:center; gap:5px; margin-right:14px; color:#8b877c; white-space:nowrap; font-size:12px}
.p-ck .bx{font-size:13px; line-height:1}
.p-ck.on{color:#111; font-weight:700}
.p-ck.on .bx{color:var(--acc)}
.p-stars{font-size:16px; letter-spacing:2px; color:#D8D3C6}
.p-stars b{color:var(--acc); font-weight:400}
.p-memo{width:100%; padding:10px 2px 4px 12px}
.p-memo .ml{background:repeating-linear-gradient(to bottom, transparent 0 21px, #E4E0D6 21px 22px); min-height:44px; font-size:12.5px; line-height:22px; color:#333}
.p-foot{margin-top:14px; display:flex; justify-content:space-between; gap:10px; font-size:10.5px; color:#999; flex-wrap:wrap}
@media(max-width:560px){ .p-q{grid-template-columns:76px 1fr} }

/* ---------- 모바일 보정 ---------- */
@media(max-width:640px){
  .topbar{flex-wrap:wrap; height:auto; min-height:56px; padding:10px 12px; row-gap:8px}
  .topbar .right{flex-wrap:wrap}
  .q-top{flex-wrap:wrap}
  .q-title{min-width:0; width:100%}
  .q-top > div{flex:1 1 100%; min-width:0}
  .scale-row .sc{width:28px; height:28px; font-size:12px}
  .s-scale .sc{min-width:40px; height:44px}
}

/* generic helpers */
.muted{color:var(--mut)} .small{font-size:12.5px} .center{text-align:center}
.stack-8{display:flex; flex-direction:column; gap:8px} .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hr{height:1px; background:var(--line); margin:16px 0; border:none}
.notice{background:var(--info-wash); border:1px solid #cfe0ef; color:#1f4d75; border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.55}
.notice.warn{background:var(--warn-wash); border-color:#EAD9B8; color:#7a5215}
.notice.bad{background:var(--bad-wash); border-color:#EDC7C1; color:var(--bad)}
.notice.ok{background:var(--ok-wash); border-color:#c6e6d3; color:#155f3f}
.kbd{font-family:var(--mono); font-size:12px; background:var(--paper); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:1px 6px}
.disclaimer{font-size:11.5px; color:var(--mut-2); text-align:center; padding:20px}