/* ===========================================================
   휴라운지 데모 — 공용 디자인 시스템 + 3가지 시안 테마
   테마: A(웜 우드) · B(다크 앰버) · C(내추럴 라이트)
   =========================================================== */

:root{
  /* 간격 스케일 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r-sm:12px; --r:18px; --r-lg:26px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-sheet:cubic-bezier(0.32,0.72,0,1);
  --maxw:1180px;

  /* 기본 = 시안 A (웜 우드) */
  --bg:#FAF8F5; --surface:#FFFFFF; --fg:#1A1512; --muted:#F3EFE9; --muted-fg:#7A6E63;
  --border:#E8E1D7; --primary:#241C16; --on-primary:#FFF;
  --accent:#A16207; --accent-2:#C98A2B; --accent-soft:#FDF6E9; --accent-border:#F0DFC0;
  --green:#15803D; --green-soft:#EDFDF2; --red:#DC2626;
  --hero:url('img/hero1.webp');
  --hero-tint:linear-gradient(178deg,rgba(20,14,10,.62) 0%,rgba(20,14,10,.42) 45%,rgba(20,14,10,.80) 100%);
  --shadow-sm:0 1px 2px rgba(26,21,18,.05);
  --shadow-md:0 2px 8px rgba(26,21,18,.06),0 12px 32px rgba(26,21,18,.08);
  --shadow-lg:0 -8px 44px rgba(26,21,18,.18);
  --font-display:"Pretendard Variable",Pretendard,system-ui,sans-serif;
}

/* ---------- 시안 B — 다크 앰버 (야간 라운지) ---------- */
[data-theme="b"]{
  --bg:#100D0B; --surface:#1A1613; --fg:#F7F3EE; --muted:#241E1A; --muted-fg:#A2958A;
  --border:#2E2722; --primary:#E8A33D; --on-primary:#1A1207;
  --accent:#E8A33D; --accent-2:#F5C46B; --accent-soft:#241B10; --accent-border:#3D2E19;
  --green:#4ADE80; --green-soft:#152A1C; --red:#F87171;
  --hero:url('img/hero2.webp');
  --hero-tint:linear-gradient(178deg,rgba(8,6,5,.42) 0%,rgba(8,6,5,.34) 45%,rgba(8,6,5,.86) 100%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 8px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 -8px 44px rgba(0,0,0,.6);
}

/* ---------- 시안 C — 내추럴 라이트 (주간 웰니스) ---------- */
[data-theme="c"]{
  --bg:#F7F9F8; --surface:#FFFFFF; --fg:#12201B; --muted:#EDF2EF; --muted-fg:#68786F;
  --border:#DDE7E1; --primary:#1F4438; --on-primary:#FFF;
  --accent:#2F7D62; --accent-2:#48A585; --accent-soft:#EAF6F0; --accent-border:#C7E4D6;
  --green:#15803D; --green-soft:#EAF6F0; --red:#DC2626;
  --hero:url('img/hero3.webp');
  --hero-tint:linear-gradient(178deg,rgba(10,30,24,.50) 0%,rgba(10,30,24,.30) 42%,rgba(10,30,24,.74) 100%);
  --shadow-sm:0 1px 2px rgba(18,32,27,.05);
  --shadow-md:0 2px 8px rgba(18,32,27,.05),0 12px 32px rgba(18,32,27,.07);
  --shadow-lg:0 -8px 44px rgba(18,32,27,.16);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-display);
  background:var(--bg); color:var(--fg); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .4s,color .4s;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- 타이포 (사이즈별 트래킹) ---------- */
.h1{font-size:clamp(2rem,6vw,3.6rem);line-height:1.08;letter-spacing:-0.03em;font-weight:800}
.h2{font-size:clamp(1.45rem,3.4vw,2.3rem);line-height:1.16;letter-spacing:-0.022em;font-weight:800}
.h3{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.3;letter-spacing:-0.014em;font-weight:700}
.body{font-size:clamp(.95rem,1.3vw,1.05rem);letter-spacing:-0.004em}
.cap{font-size:.75rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-fg)}
.sub{color:var(--muted-fg);font-size:.93rem}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px;border:none;border-radius:var(--r-sm);cursor:pointer;
  font:inherit;font-size:1rem;font-weight:700;letter-spacing:-0.01em;
  background:var(--primary);color:var(--on-primary);
  transition:transform .12s ease-out,opacity .2s,background .3s;
  min-height:52px;text-decoration:none;
}
.btn:active{transform:scale(.97)}
.btn.block{width:100%}
.btn.ghost{background:var(--muted);color:var(--fg)}
.btn.gold{background:var(--accent);color:#fff}
[data-theme="b"] .btn.gold{color:#1A1207}
.btn.outline{background:transparent;border:1.5px solid var(--border);color:var(--fg)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn svg{flex:none}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm)}

/* ---------- 시안 전환 바 (데모 전용) ---------- */
.themebar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 10px;background:rgba(18,14,11,.93);backdrop-filter:blur(14px);
  font-size:.72rem;color:rgba(255,255,255,.62);
}
.themebar b{color:#E8A33D;font-weight:800;letter-spacing:.04em;margin-right:2px;flex:none}
.themebar .lbl{display:none}
.themebar .tset{display:flex;gap:3px;background:rgba(255,255,255,.08);border-radius:99px;padding:3px;min-width:0}
.themebar button{
  border:none;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:.72rem;font-weight:700;
  padding:5px 11px;border-radius:99px;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.themebar button .full{display:none}
.themebar button.on{background:#fff;color:#1A1512}
@media(min-width:560px){
  .themebar{font-size:.74rem;padding:7px 12px}
  .themebar .lbl{display:inline}
  .themebar button{padding:5px 13px}
  .themebar button .full{display:inline}
  .themebar button .short{display:none}
}
body{padding-top:36px}

/* ---------- 워터마크 ---------- */
.wm{
  position:fixed;bottom:0;left:0;right:0;z-index:190;
  background:rgba(18,14,11,.94);color:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  font-size:.68rem;text-align:center;padding:7px 12px calc(7px + env(safe-area-inset-bottom));
  letter-spacing:.02em;
  pointer-events:none; /* 안내 띠라서 아래 콘텐츠(시간 슬롯 등) 클릭을 막지 않도록 */
}
.wm b{color:#E8A33D}

/* ---------- 토스트 ---------- */
.toast{
  position:fixed;top:48px;left:50%;transform:translate(-50%,-140px);z-index:210;
  background:var(--primary);color:var(--on-primary);font-size:.87rem;font-weight:700;
  padding:12px 22px;border-radius:99px;box-shadow:var(--shadow-md);
  transition:transform .45s var(--ease-sheet);max-width:92vw;text-align:center;
}
.toast.show{transform:translate(-50%,0)}

/* ---------- 스크롤 등장 ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.16s !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-transparency: reduce){
  .themebar,.wm{backdrop-filter:none;background:#12100D}
}