/* ===============================
   TryOn.KR — Polished Styles
   (drop-in replacement for styles.css)
   =============================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Brand */
  --brand:#0f172a;                /* 깊은 네이비(텍스트/버튼) */
  --brand-2:#2563eb;              /* 액션(CTA) 블루 */
  --brand-3:#06b6d4;              /* 보조 포인트(시안) */

  /* Surface & Lines */
  --bg:#f7f8fb;                   /* 페이지 배경 */
  --surface:#ffffff;              /* 카드/패널 */
  --line:#e5e7eb;                 /* 경계선 */

  /* Text */
  --text:#0b1220;                 /* 기본 텍스트 */
  --muted:#64748b;                /* 보조 텍스트 */

  /* Effects */
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --ring:#93c5fd;                 /* 포커스 링 */
  --radius:14px;
  --radius-sm:10px;

  /* Layout */
  --container:1120px;
  --gap:20px;
}

/* ---------- Base Reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Containers ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px);
}
.bar{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.2px;}
.logo{width:28px; height:28px}
.nav a{
  margin-left:18px; color:#334155; font-weight:600;
  transition:opacity .2s ease;
}
.nav a:hover{opacity:.75}
.authbox{display:flex; gap:8px; align-items:center}

/* ---------- Badges ---------- */
.badge{
  background:#f1f5f9;border:1px solid #e2e8f0;
  padding:6px 10px;border-radius:999px;font-size:12px;color:#334155;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--line); font-weight:800; cursor:pointer;
  transition:transform .04s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg, var(--brand-2), #1e40af);
  color:#fff; border-color:transparent; box-shadow:var(--shadow);
}
.btn.primary:hover{filter:saturate(110%) brightness(1.02)}
.btn.ghost{
  background:var(--surface); color:var(--brand); border-color:var(--line);
}
.btn.ghost:hover{background:#f9fafb}
.btn.small{padding:6px 10px; font-size:12px}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(180deg,#fff,#f7f8fb 70%);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:flex; gap:40px; align-items:center; justify-content:space-between;
  padding:72px 0;
}
.hero-copy h1{
  font-size:42px; line-height:1.18; margin:0 0 12px; letter-spacing:-.3px;
}
.accent{
  background:linear-gradient(90deg, var(--brand-2), var(--brand-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p{color:#4b5563; margin:0 0 16px; font-size:16px}
.cta{display:flex; gap:12px; margin:16px 0 10px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0; padding:0; color:#556; font-weight:600}
.badges li{
  list-style:none; border:1px dashed #d1d5db; padding:6px 10px; border-radius:8px; font-size:12px; color:#64748b;
}

/* Visual Card */
.card{
  display:flex; gap:14px; align-items:center; justify-content:center;
  padding:16px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); box-shadow:var(--shadow);
}
.arrow{font-size:28px; color:#9aa2ad}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.section.alt{background:#fbfcff}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ---------- Forms / Inputs ---------- */
.box{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; background:var(--surface); box-shadow:var(--shadow);
}
.row{display:flex; gap:14px; flex-wrap:wrap}
label{display:flex; flex-direction:column; gap:8px; font-weight:700; color:#0f172a}
input,select{
  height:44px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{
  outline:none; border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(147,197,253,.35);
}

/* ---------- Preview Grid ---------- */
.preview{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.preview .ph{
  border:1px dashed #d1d5db; border-radius:12px; height:240px;
  display:flex; align-items:center; justify-content:center; color:#94a3b8; background:#f8fafc;
}

/* ---------- Pricing ---------- */
.pricing{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px;
}
.plan{
  border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  background:var(--surface); position:relative; box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .2s ease;
}
.plan:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(2,6,23,.10)}
.plan h3{margin:0 0 6px; font-size:18px}
.plan .price{margin:8px 0 0; font-size:16px}
.plan ul{margin:12px 0 0; padding-left:18px; color:#475569}
.plan.popular{
  outline:2px solid var(--brand-2);
  background:linear-gradient(180deg,#ffffff, #f8fbff);
}
.plan.popular .tag{
  position:absolute; top:-12px; right:12px; background:var(--brand-2); color:#fff;
  padding:4px 8px; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:.2px;
  box-shadow:var(--shadow);
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line); padding:22px 0; color:#6b7280; background:var(--surface);
}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:80; display:none}
.modal[style*="display: block"], .modal[style*="display:"]{display:block}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35)}
.modal__panel{
  position:relative; max-width:440px; margin:10vh auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  animation:pop .16s ease-out;
}
@keyframes pop{from{transform:scale(.98); opacity:.95} to{transform:scale(1); opacity:1}}
.modal__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.tabs{display:flex; gap:8px; margin:6px 0 12px}
.tab{
  border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; cursor:pointer; font-weight:800;
}
.tab.active{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ---------- Focus Visible (a11y) ---------- */
:focus-visible{
  outline:2px dashed var(--ring); outline-offset:2px;
}

/* ---------- Utility ---------- */
.hidden{display:none!important}
.center{text-align:center}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-inner{gap:24px; padding:56px 0}
  .hero-copy h1{font-size:36px}
}
@media (max-width: 900px){
  .hero-inner{flex-direction:column; text-align:center}
  .cta{justify-content:center}
  .preview{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .bar{flex-direction:column; align-items:flex-start; height:auto; padding:10px 0; gap:6px}
  .brand{font-size:16px}
  .nav{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
  .nav a{font-size:14px}
  .authbox{width:100%; justify-content:flex-start; flex-wrap:wrap; gap:6px}
  .hero-inner{padding:36px 0}
  .hero-copy h1{font-size:28px; line-height:1.32}
  .preview{grid-template-columns:1fr}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* ===== Mobile pricing fixes ===== */

/* 1) 인기 카드의 파란 윤곽선(outline) → border로 변경(크기 안변하게) */
.plan.popular{
  outline:none;
  border-color: var(--brand-2);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg,#ffffff, #f8fbff);
}

/* 2) 태그 위치/크기 살짝 보정 */
.plan.popular .tag{
  top:-10px; right:10px;
  padding:4px 10px; border-radius:999px;
}

/* 3) 카드 균일 높이 & 내부 정렬 안정화 */
.plan{
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height: 168px;
}

/* 4) 가격 줄바꿈 방지 (₩9,000 / 10크레딧 한 줄 유지) */
.plan .price{ white-space: nowrap; }

/* 5) 작은 화면에서는 1열로 (카드 폭 확보) */
@media (max-width: 820px){
  .pricing{ grid-template-columns: 1fr; }
}

/* 6) 아주 작은 화면에서 폰트/여백 살짝 축소 */
@media (max-width: 420px){
  .plan{ padding:16px; }
  .plan h3{ font-size:16px; }
  .plan .price{ font-size:15px; }
}

/* ===== Scroll reveal (global) ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: transform .6s ease, opacity .6s ease;
  will-change: transform, opacity;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* variants */
.reveal[data-anim="fade"]      { transform: none; }
.reveal[data-anim="slide-up"]  { transform: translateY(18px); }
.reveal[data-anim="slide-left"]{ transform: translateX(18px); }
.reveal[data-anim="slide-right"]{transform: translateX(-18px); }

.reveal.in[data-anim="slide-up"],
.reveal.in[data-anim="slide-left"],
.reveal.in[data-anim="slide-right"] { transform: none; }

/* stagger delay helpers */
.reveal[data-delay="100"] { transition-delay: .1s; }
.reveal[data-delay="200"] { transition-delay: .2s; }
.reveal[data-delay="300"] { transition-delay: .3s; }
.reveal[data-delay="400"] { transition-delay: .4s; }
.reveal[data-delay="500"] { transition-delay: .5s; }

/* parallax (mild) */
.parallax {
  will-change: transform;
  transform: translateY(0);
  transition: transform .1s linear;
}

/* 접근성: 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .parallax {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* 패럴랙스/리빌 성능 힌트 */
.reveal, .parallax, .parallax img, .hero-visual img {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* iOS 튐 방지용: 부모에서 넘침 숨김 */
.hero-visual { overflow: hidden; }

/* 모바일에서는 패럴랙스 OFF */
@media (max-width: 768px) {
  [data-parallax] { transform: none !important; }
}

/* =========================
   HOW IT WORKS (완성본 스타일)
   ========================= */
#howitworks { padding: 56px 0; }
.how-title { margin-bottom: 18px; }

.how-step{
  display:flex; gap:28px; align-items:center;
  margin:28px 0 54px; padding:18px; background:#fff;
  border:1px solid #e5e7eb; border-radius:16px;
}
.how-step.reverse{ flex-direction: row-reverse; }

/* 공통 텍스트 영역 */
.how-text{ flex:1; min-width:260px; }
.how-text h3{ margin:6px 0 8px; }
.how-text ul{ margin:10px 0 0; padding-left:18px; color:#475569; }
.how-text ul li{ margin:4px 0; }

/* 번호 배지 */
.how-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  font-weight:700; color:#fff; background:linear-gradient(180deg,#2563eb,#1d4ed8);
  margin-bottom:8px; font-variant-numeric: tabular-nums;
}

/* 단일 이미지 프레임 (원본비율 유지 + 여백 OK) */
.how-media{ flex:1; display:flex; align-items:center; justify-content:center; }
.how-media{
  /* 프레임 */
  background:#f8fafc;
  border:1px solid #e5e7eb; border-radius:12px;
  padding:8px;                /* 여백으로 잘림 방지 */
  max-width:520px;            /* 데스크탑 과도확대 방지 */
  width:100%;
}
.how-media img{
  width:100%; height:auto; object-fit:contain; display:block;
}

/* 3각도 그리드 */
.how-media-grid{
  flex:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.how-media-grid img{
  width:100%; height:auto; object-fit:contain; display:block;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:6px;
}

/* 리빌 애니메이션 훅(이미 페이지에 엔진 넣었을 경우 자동작동) */
.how-step[data-anim]{ opacity:0; transform:translateY(14px); transition:all .6s ease; }
.how-step.in{ opacity:1; transform:none; }

/* 모바일 최적화 */
@media (max-width: 900px){
  .how-step, .how-step.reverse{ flex-direction:column; }
  .how-step{ padding:14px; }
  .how-media{ max-width:none; width:100%; }
  .how-media img{ max-height:56vh; } /* 너무 길어지는 것 방지 */
  .how-media-grid{ grid-template-columns:repeat(3,1fr); }
}