/* 손님 화면 — 시안 1 B안(하나씩 넘기기) · 시안 2 E안(고른 것만 펼침) · 시안 3 G안(시차)
   화면 규칙은 시안 8 에서 정했습니다 — B 사진 위 · 킬리만자로 밤 · Pretendard

   🔴 손님 상당수가 장년 이상입니다. 아래 셋은 취향이 아니라 조건입니다.
      · 글자 대비는 7:1 이상 (통과선 4.5:1 이 아니라)
      · 위계는 색이 아니라 크기와 굵기로 (7:1 로 올리면 회색이 한 단계로 수렴합니다)
      · 한글에 음수 자간을 주지 않습니다
*/

/* ── 한글 화면용 글꼴 (무료 · font/LICENSE.txt) ─────────────── */
@font-face{
  font-family:"Pretendard";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/Pretendard-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Pretendard";font-style:normal;font-weight:700;font-display:swap;
  src:url("font/Pretendard-Bold.woff2") format("woff2");
}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* 색 — 바탕·글자·보조·선·주색 다섯. 경고는 정말 경고일 때만 */
  --paper:#faf9f7;
  --ink:#17191c;        /* 본문      16.7:1 */
  --dim:#4f5660;        /* 보조·잔글씨  7.0:1 — 회색은 이 한 단계뿐입니다 */
  --line:#e3e5e9;
  --green:#1e3a4c;      /* 주색 — 킬리만자로 새벽 하늘 */
  --green-deep:#152c3b;
  --green-bg:#eef2f5;
  --gold:#c08a2e;       /* 표식 — 아껴 씁니다. 넓게 쓰면 값싸 보입니다 */
  --red:#a33a28; --red-bg:#fbeeeb;
  --amber:#95590a; --amber-bg:#fff8e6;
  --bg:#eceef1;

  /* 글자 다섯 단계 — 장년 손님 기준으로 한 칸 크게 잡았습니다.
     🔴 이 값이 폰 기준입니다. 손님 대부분이 폰으로 보십니다.
        넓은 화면에서 키우는 것은 맨 아래에서 따로 합니다. */
  --t1:36px; --t2:26px; --t3:20px; --t4:18px; --t5:15px;

  /* 여백 다섯 단계 */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px;

  /* 화면 가장자리 여백 — 좁은 화면에서는 20px, 넓어지면 48px 까지 벌어지고
     그보다 더 넓어지면 글이 640px 를 넘지 않게 남는 폭을 여백으로 돌립니다.
     바탕은 화면 전체를 덮은 채 글만 가운데로 모입니다. */
  --padx:max(clamp(20px, 6vw, 48px), calc((100vw - 640px) / 2));
  --pady:clamp(28px, 6vw, 56px);
}
html,body{height:100%}
body{
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  word-break:keep-all;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

/* 바탕은 화면 전체를 덮습니다. 폭을 가두는 것은 글이지 배경이 아닙니다 */
#app{
  height:100%;width:100%;background:var(--paper);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}

/* ── 위 ── */
.top{flex:none;padding:var(--s4) var(--padx) 0}
.brand{font:700 var(--t5)/1;letter-spacing:.16em;color:var(--green)}
.prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.prog span{font:700 var(--t5)/1;color:var(--dim);flex:none;min-width:48px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.prog i b{display:block;height:100%;background:var(--green);width:0;transition:width .22s}
.top.hide .prog{visibility:hidden}
.top.gone{display:none}          /* 시작 화면 — 브랜드가 사진 위로 올라갑니다 */

/* ── 가운데 ── */
main{flex:1;overflow-y:auto;padding:var(--pady) var(--padx)}

h1{font:700 var(--t2)/1.5;margin-bottom:var(--s2)}
.sub{font:400 var(--t4)/1.7;color:var(--dim);margin-bottom:var(--s4)}

/* 선택지 — E안: 고른 것만 펼칩니다 */
.opt{width:100%;text-align:left;border:1.5px solid #d5d9df;border-radius:12px;
  padding:var(--s3) var(--s3);margin-bottom:10px;background:#fff;display:block}
.opt:hover{border-color:var(--dim)}
.opt.on{border-color:var(--green);background:var(--green-bg);border-width:2px;
  padding:calc(var(--s3) - 1px)}
.opt .lab{display:flex;align-items:baseline;gap:12px;font:700 var(--t4)/1.5}
.opt .lab .t{flex:1}
.opt .lab .pr{flex:none;font:700 var(--t5)/1.4;color:var(--green)}
.opt .hint{display:none;margin-top:10px;padding-top:10px;border-top:1px solid #cdd6dd;
  font:400 var(--t5)/1.7;color:var(--dim)}
.opt.on .hint{display:block}
.opt .check{display:none}

textarea,input.txt{width:100%;border:1.5px solid #d5d9df;border-radius:11px;
  padding:var(--s3);font:400 var(--t4)/1.6;background:#fff}
textarea:focus,input.txt:focus{outline:2px solid var(--green);outline-offset:-2px;border-color:var(--green)}
textarea{min-height:120px;resize:vertical}
input.txt::placeholder,textarea::placeholder{color:var(--dim);opacity:.75}
.gap{height:var(--s3)}
.lbl{font:700 var(--t5)/1;color:var(--dim);margin-bottom:8px;display:block}

.err{font:700 var(--t5)/1.6;color:var(--red);background:var(--red-bg);
  border-radius:10px;padding:12px 14px;margin-top:var(--s3)}

/* ── 아래 ── */
.foot{flex:none;display:flex;gap:10px;padding:var(--s4) var(--padx);
  border-top:1px solid var(--line);background:var(--paper)}
.foot.hide{display:none}
.prev{font:700 var(--t4)/1;padding:20px var(--s4);border-radius:12px;
  background:#e6e9ed;color:var(--dim);flex:none}
.prev[disabled]{display:none}    /* 누를 수 없는 단추는 자리를 차지하지 않습니다 */
.next{flex:1;font:700 var(--t3)/1;padding:20px;border-radius:12px;background:var(--green);color:#fff}
.next:hover{background:var(--green-deep)}
.next.wait{background:#8b95a1}

/* ── 시작 화면 — 시안 8 B안 ────────────────────────────────── */
.shot{
  /* main 의 여백을 밀어내 사진이 화면 끝까지 닿게 합니다 */
  margin:calc(var(--pady) * -1) calc(var(--padx) * -1) 0;
  position:relative;height:38vh;min-height:190px;max-height:360px;
  background:url("img/guests-sunset.jpg") center 22%/cover no-repeat;
}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 45%);
}
.shot .brand{position:absolute;top:var(--s4);left:var(--padx);z-index:1;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.rule{height:3px;width:40px;background:var(--gold);border-radius:2px;margin:var(--s5) 0 var(--s4)}

.hero h1{font-size:var(--t2);margin-bottom:var(--s2)}
.hero p{font:400 var(--t4)/1.8;color:var(--dim);margin-bottom:var(--s3)}
.hero p b{font-weight:700;color:var(--ink)}
.meta{display:flex;gap:var(--s3);flex-wrap:wrap;font:400 var(--t5)/1.6;color:var(--dim);
  margin-top:var(--s4)}
.meta b{font-weight:700;color:var(--ink)}

.card{border:1px solid var(--line);border-radius:13px;padding:var(--s3);
  margin-top:var(--s3);background:#fff}
.card b{display:block;font:700 var(--t5)/1;color:var(--dim);margin-bottom:10px}
.card .kv{display:flex;justify-content:space-between;gap:12px;font:700 var(--t4)/1.9}
.card .kv s{text-decoration:none;color:var(--dim);font-weight:400;flex:none}
.clock{background:var(--green-bg);border-color:#ccd6de}
.clock .kv{color:var(--green)}

/* 이 화면에서 손님이 가장 알고 싶은 것 — 언제 답이 오나. 그래서 여기가 강조 하나입니다 */
.when{
  font:700 var(--t2)/1.4;color:var(--green);
  margin:var(--s5) 0 var(--s4);padding-left:var(--s3);
  border-left:4px solid var(--gold);
}
.when span{display:block;font:400 var(--t4)/1.6;color:var(--dim);margin-top:6px}
.why{font:400 var(--t4)/1.8;color:var(--dim);margin-top:var(--s4)}
.why b{font-weight:700;color:var(--ink)}

.alt{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s4)}
.alt p{font:400 var(--t5)/1.7;color:var(--dim);margin-bottom:12px}
.alt a{display:block;font:700 var(--t4)/1;color:var(--ink);background:#fff;
  border:1.5px solid #d5d9df;padding:18px var(--s3);border-radius:12px;
  text-decoration:none;margin-bottom:10px}
.alt a:hover{border-color:var(--green)}

.sum{margin-top:var(--s3)}
.sum .row{display:flex;gap:12px;font:400 var(--t5)/1.9;border-bottom:1px solid var(--line);padding:8px 0}
.sum .row:last-child{border-bottom:0}
.sum .row s{text-decoration:none;color:var(--dim);flex:none;width:136px;font-weight:700}
.sum .row b{font-weight:700}

.devbox{margin-top:var(--s4);border:1.5px dashed #c3cad2;border-radius:11px;padding:14px}
.devbox b{display:block;font:700 12px/1.6;color:var(--amber);margin-bottom:8px}
.devbox pre{font:400 12px/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap;color:var(--dim);
  max-height:230px;overflow:auto}

/* 넓은 화면 — 폰 기둥을 그대로 늘리지 않고 글자를 키웁니다 */
@media (min-width:600px){
  .hero h1{font-size:var(--t1);line-height:1.35}
  .hero p{font-size:var(--t3)}
}