/* styles.css — 화면. 값은 tokens.css만. 감각은 토스: 흰 바탕, 왼쪽 정렬 큰 제목, 회색 보조문, 하단 고정 CTA, 테두리 대신 면. */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--surface-2); color:var(--foreground);
  font-family:var(--font); font-size:var(--font-18); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum";
}
button{font:inherit}

/* 폰 프레임 */
.phone{
  max-width:430px; min-height:100dvh; margin:0 auto; background:var(--background);
  display:flex; flex-direction:column; position:relative;
  padding:env(safe-area-inset-top) 0 0;
}

/* 상단 바: 뒤로 + 진행 막대 */
.top{height:calc(var(--spacing)*14);display:flex;align-items:center;padding:0 calc(var(--spacing)*2);position:relative}
.back{
  width:var(--tap-min);height:var(--tap-min);border:0;background:transparent;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--grey800);cursor:pointer
}
.back:active{background:var(--surface-2)}
.back[hidden],.progress[hidden]{display:none}
.back svg{width:24px;height:24px}
.progress{position:absolute;left:calc(var(--spacing)*6);right:calc(var(--spacing)*6);bottom:0;height:3px;background:var(--grey200);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand);border-radius:2px;transition:width .25s ease}

/* 본문 */
.screen{flex:1;display:flex;flex-direction:column;padding:calc(var(--spacing)*4) calc(var(--spacing)*6) calc(var(--spacing)*42)}
.eyebrow{font-size:var(--font-14);color:var(--text-3);font-weight:var(--font-weight-semibold);margin:0 0 calc(var(--spacing)*2)}
h1{font-size:var(--font-30);line-height:var(--leading-tight);margin:calc(var(--spacing)*2) 0 calc(var(--spacing)*3);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);word-break:keep-all}
h2{font-size:var(--font-24);line-height:var(--leading-tight);margin:0 0 calc(var(--spacing)*2);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);word-break:keep-all}
p{margin:0 0 calc(var(--spacing)*3)}
.sub{color:var(--text-2);font-size:var(--font-16);line-height:var(--leading-normal);margin:0 0 calc(var(--spacing)*7)}
.hint{color:var(--text-3);font-size:var(--font-14);margin:0 0 calc(var(--spacing)*5)}
.spacer{flex:1}
.accent{color:var(--brand)}

/* 리스트 (시작 화면 안내) */
.list{background:var(--surface);border-radius:var(--radius-2xl);padding:calc(var(--spacing)*1) calc(var(--spacing)*5)}
.list .row{display:flex;align-items:center;gap:calc(var(--spacing)*4);padding:calc(var(--spacing)*4) 0;border-bottom:1px solid var(--grey200)}
.list .row:last-child{border-bottom:0}
.list .n{width:28px;height:28px;border-radius:50%;background:var(--grey200);color:var(--foreground);font-size:var(--font-14);font-weight:var(--font-weight-bold);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.list .t{font-size:var(--font-16);color:var(--grey800)}

/* 선택지: 면으로 구분, 누르면 파랗게 */
.opt{
  display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--control-h);
  padding:calc(var(--spacing)*4) calc(var(--spacing)*5);margin:0 0 calc(var(--spacing)*2.5);
  border:0;border-radius:var(--radius-2xl);background:var(--surface);color:var(--foreground);
  font-size:var(--font-18);font-weight:var(--font-weight-semibold);text-align:left;cursor:pointer;
  transition:background .12s ease,transform .06s ease;
}
.opt:active,.opt.on{background:var(--brand-light);color:var(--foreground);transform:scale(.99)}
.opt .chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--grey300);flex:0 0 auto;margin-left:12px}
.opt.on .chk{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 4px #fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--spacing)*2.5)}
.grid2 .opt{margin:0;justify-content:center;text-align:center;min-height:calc(var(--spacing)*17)}
.grid2 .opt .chk{display:none}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--spacing)*2)}
.grid5 .opt{margin:0;justify-content:center;min-height:var(--control-h-sm);padding:calc(var(--spacing)*2) var(--spacing);font-size:var(--font-16)}
.grid5 .opt .chk{display:none}

/* 버튼 (토스): 꽉 찬 파랑 / 회색 면 / 글자만 */
.btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--control-h);
  padding:0 calc(var(--spacing)*4);margin:0 0 calc(var(--spacing)*2.5);border:0;border-radius:var(--radius-2xl);
  font-size:var(--font-18);font-weight:var(--font-weight-bold);cursor:pointer;transition:filter .1s ease,transform .06s ease
}
.btn:active{transform:scale(.985);filter:brightness(.94)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.btn.primary{background:var(--brand);color:var(--brand-foreground)}
.btn.secondary{background:var(--surface-2);color:var(--grey800)}
.btn.ghost{background:transparent;color:var(--text-2);font-weight:var(--font-weight-medium);font-size:var(--font-16);min-height:var(--control-h-sm);margin:0}

/* 하단 고정 CTA */
.cta{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  padding:calc(var(--spacing)*3) calc(var(--spacing)*6) calc(calc(var(--spacing)*4) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%);z-index:5
}
.cta .btn{margin:0}
.cta .btn + .btn{margin-top:calc(var(--spacing)*2)}
.cta .ghost{margin-top:var(--spacing)}

/* 계산 중 */
.calc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing)*5)}
.dots{display:flex;gap:8px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--brand);animation:pulse 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{transform:scale(.55);opacity:.35}50%{transform:scale(1);opacity:1}}

/* 결과 이미지: 사진이 색을 맡는다. assets/hero.jpg 가 없으면 자리 표시 */
.hero-img{width:calc(100% + var(--spacing)*12);margin:calc(var(--spacing)*-4) 0 calc(var(--spacing)*5) calc(var(--spacing)*-6);aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-img .ph{font-size:var(--font-14);color:var(--text-3);text-align:center;padding:0 24px}

/* 결과 */
.hero{margin:0 0 calc(var(--spacing)*6)}
.hero h1{margin-bottom:calc(var(--spacing)*5)}
.hero .num{font-size:var(--font-30);font-weight:var(--font-weight-extrabold);letter-spacing:var(--tracking-tight)}
.stat{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:var(--radius-2xl);padding:calc(var(--spacing)*5) calc(var(--spacing)*5)}
.stat div+div{border-left:1px solid var(--grey200);padding-left:calc(var(--spacing)*5)}
.stat .k{font-size:var(--font-14);color:var(--text-3);margin:0 0 var(--spacing)}
.stat .v{font-size:var(--font-24);font-weight:var(--font-weight-bold);margin:0;letter-spacing:var(--tracking-tight)}
.stat .v small{font-size:var(--font-14);font-weight:var(--font-weight-medium);color:var(--text-3);margin-left:2px}

.sec{padding:calc(var(--spacing)*5) 0;border-top:1px solid var(--grey200)}
.sec .k{font-size:var(--font-14);color:var(--text-3);font-weight:var(--font-weight-semibold);margin:0 0 calc(var(--spacing)*2)}
.sec .v{font-size:var(--font-18);color:var(--grey800);margin:0;line-height:var(--leading-normal);word-break:keep-all}
.sec .v::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin:0 10px 3px 0}

/* 게이트: 흐린 문장 + 회색 버튼 */
.gate .v{filter:blur(6px);user-select:none;pointer-events:none}
.gate.open .v{filter:none;user-select:auto;pointer-events:auto}
.gate .veil{margin-top:calc(var(--spacing)*3)}
.gate.open .veil{display:none}
.gate .veil .btn{margin:0 0 calc(var(--spacing)*2)}
.gate .veil .note{font-size:var(--font-14);color:var(--text-3);margin:0;text-align:center}

/* 입력 (토스: 면 채운 입력) */
input.name{
  width:100%;min-height:var(--control-h);border:0;border-radius:var(--radius-2xl);padding:0 calc(var(--spacing)*5);
  font:inherit;font-size:var(--font-20);font-weight:var(--font-weight-semibold);background:var(--input);margin:0 0 calc(var(--spacing)*3);color:var(--foreground)
}
input.name::placeholder{color:var(--grey400);font-weight:var(--font-weight-medium)}
input.name:focus{outline:0;box-shadow:0 0 0 2px var(--brand) inset;background:#fff}

/* 카드 미리보기 */
.card-wrap{margin:0 0 calc(var(--spacing)*4)}
.card-wrap canvas{width:100%;height:auto;border-radius:var(--radius-3xl);box-shadow:0 10px 36px rgba(25,31,40,.14);display:block}

.disclaimer{font-size:var(--font-12);color:var(--text-3);text-align:center;padding:0 calc(var(--spacing)*6) calc(var(--spacing)*4);margin-top:auto}
.toast{
  position:fixed;left:50%;bottom:calc(var(--spacing)*26);transform:translateX(-50%);
  background:var(--grey800);color:#fff;padding:calc(var(--spacing)*3) calc(var(--spacing)*4.5);border-radius:var(--radius-2xl);font-size:var(--font-14);max-width:90%;z-index:9
}

/* 사진 단계 */
.photo-box{aspect-ratio:1/1;border-radius:var(--radius-3xl);background:var(--surface-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.photo-box img{width:100%;height:100%;object-fit:cover;display:block}
.photo-box .ph{text-align:center;color:var(--text-3);font-size:var(--font-14)}
.photo-box .ph .face{width:96px;height:120px;border:2.5px dashed var(--grey300);border-radius:50% 50% 46% 46%/60% 60% 40% 40%;margin:0 auto 12px}
.photo-box .ph p{margin:0}
.badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--brand-light);color:var(--brand-medium);font-size:var(--font-12);font-weight:var(--font-weight-bold);vertical-align:middle}