/* 필라티크 운동연구소 - app.css
   브랜드 기준색은 로고에서 추출: 골드 #D0AC5F / 웜 크림 #F7ECE6 */

:root{
  --gold:#D0AC5F;
  --gold-deep:#8A6A26;      /* 크림 위 본문에서 AA 확보용 */
  --gold-soft:#F0E3CB;
  --gold-line:#E2CFA4;

  --ink:#1C1A17;
  --ink-2:#4A443C;
  --muted:#877D70;

  --cream:#F7ECE6;
  --paper:#FBF5F0;
  --surface:#FFFFFF;
  --surface-2:#F3E9E1;
  --line:#E5D8CD;
  --line-soft:#EFE5DC;

  --ok:#4B6B4F;
  --ok-soft:#E4EDE3;
  --warn:#8A6A26;
  --warn-soft:#F6EDD9;

  --shadow:0 1px 2px rgba(28,26,23,.05), 0 14px 34px -22px rgba(28,26,23,.45);
  --tabh:64px;

  --display:"Gowun Batang","Nanum Myeongjo",Georgia,serif;
  --latin:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --gold:#D9B96F; --gold-deep:#E3C98C; --gold-soft:#2E2718; --gold-line:#4A3E24;
    --ink:#F2EBE3; --ink-2:#C6BCAF; --muted:#93887A;
    --cream:#14120F; --paper:#181510; --surface:#1F1B16; --surface-2:#26211A;
    --line:#363026; --line-soft:#2B261F;
    --ok:#8FB694; --ok-soft:#1C2A1E; --warn:#D9B96F; --warn-soft:#2C2415;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 38px -24px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --gold:#D9B96F; --gold-deep:#E3C98C; --gold-soft:#2E2718; --gold-line:#4A3E24;
  --ink:#F2EBE3; --ink-2:#C6BCAF; --muted:#93887A;
  --cream:#14120F; --paper:#181510; --surface:#1F1B16; --surface-2:#26211A;
  --line:#363026; --line-soft:#2B261F;
  --ok:#8FB694; --ok-soft:#1C2A1E; --warn:#D9B96F; --warn-soft:#2C2415;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 38px -24px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px));
}
img{max-width:100%; display:block}
a{color:inherit; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
button{font:inherit; color:inherit}
[hidden]{display:none!important}

/* ── 앱 헤더 ───────────────────────────── */
.appbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:12px 18px calc(12px) 18px;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding-top:calc(12px + env(safe-area-inset-top,0px));
}
.appbar .mark{width:30px; height:auto; flex:0 0 auto}
.appbar .wordmark{display:flex; flex-direction:column; line-height:1.1; min-width:0}
.appbar .wm-latin{
  font-family:var(--latin); font-size:19px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); font-weight:600;
}
.appbar .wm-ko{font-size:10.5px; letter-spacing:.2em; color:var(--muted)}
.appbar .spacer{flex:1}
.navdesk{display:none}
@media(min-width:1024px){
  .navdesk{display:flex; gap:4px}
  .navdesk a{
    text-decoration:none; color:var(--ink-2); font-size:14px; padding:9px 15px;
    border-bottom:2px solid transparent; white-space:nowrap;
  }
  .navdesk a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--gold)}
  .navdesk a:hover{color:var(--ink)}
}
.appbar .back{
  border:1px solid var(--line); background:transparent; border-radius:999px;
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color:var(--ink-2);
}

/* ── 공통 레이아웃 ─────────────────────── */
main{display:block}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
.wide{max-width:1080px; margin:0 auto; padding:0 20px}
section.blk{padding:44px 0}
section.blk:first-child{padding-top:28px}

.eyebrow{
  font-family:var(--latin); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 14px; display:flex; align-items:center; gap:12px; font-weight:600;
  white-space:nowrap; min-width:0;
}
.eyebrow::after{content:""; flex:1 1 24px; height:1px; background:var(--gold-line); min-width:20px}
.eyebrow > span:first-child{overflow:hidden; text-overflow:ellipsis}

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.01em; text-wrap:balance; margin:0}
h1{font-size:clamp(27px,7vw,40px); line-height:1.3}
h2{font-size:clamp(21px,4.6vw,28px); line-height:1.38; margin-bottom:14px}
h3{font-size:17px; line-height:1.5; margin-bottom:8px; font-weight:700}
p{margin:0 0 16px; color:var(--ink-2)}
p.lead{font-size:17.5px; color:var(--ink); line-height:1.72}
p:last-child{margin-bottom:0}
.sm{font-size:13.5px; line-height:1.7; color:var(--muted)}

/* ── 히어로 ────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--ink)}
.hero-media{position:relative; aspect-ratio:4/5; max-height:76vh; width:100%}
@media(min-width:720px){.hero-media{aspect-ratio:16/9; max-height:70vh}}
.hero-media picture{display:block; width:100%; height:100%}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.72}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(20,18,15,.28) 0%, rgba(20,18,15,.15) 38%, rgba(20,18,15,.92) 100%);
}
.hero-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 22px 30px; color:#F7ECE6;
}
.hero-copy .eyebrow{color:var(--gold)}
.hero-copy .eyebrow::after{background:rgba(208,172,95,.45)}
.hero-copy h1{color:#FBF5EF; font-size:clamp(28px,7.6vw,44px)}
.hero-copy p{color:rgba(247,236,230,.82); margin:12px 0 0; font-size:15.5px; max-width:34ch}
.hero-facts{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:18px;
  font-family:var(--latin); font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold);
}

/* ── 버튼 ──────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:2px; text-decoration:none; font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:background .18s, color .18s, border-color .18s;
}
.btn-gold{background:var(--gold); color:#1C1A17; border-color:var(--gold)}
.btn-gold:hover{background:#C29B4A}
.btn-line{border-color:var(--gold-line); color:var(--ink); background:transparent}
.btn-line:hover{border-color:var(--gold); background:var(--gold-soft)}
.btn-block{display:flex; width:100%}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}

/* ── 카드 ──────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:22px; box-shadow:var(--shadow);
}
.stack{display:flex; flex-direction:column; gap:14px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}

/* 프로그램 카드 */
.pcard{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:2px; overflow:hidden; box-shadow:var(--shadow);
}
.pcard figure{margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.pcard figure img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.pcard:hover figure img{transform:scale(1.04)}
.pcard .body{padding:18px 20px}
.pcard .meta{
  display:flex; align-items:center; gap:9px; margin-bottom:9px;
  font-family:var(--latin); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600;
}
.pcard h3{margin-bottom:6px}
.pcard p{font-size:14px; margin:0; color:var(--ink-2)}
.pcard .go{
  margin-top:14px; font-size:13px; color:var(--gold-deep); font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.badge{
  display:inline-block; font-family:var(--latin); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:2px 8px; border:1px solid var(--gold-line);
  color:var(--gold-deep); border-radius:999px; font-weight:600;
}

/* ── 스텝 / 리스트 ─────────────────────── */
ul.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
ul.ticks li{display:grid; grid-template-columns:16px 1fr; gap:11px; font-size:15px; color:var(--ink-2); line-height:1.66}
ul.ticks li::before{
  content:""; width:7px; height:7px; margin-top:10px; border:1px solid var(--gold);
  transform:rotate(45deg);
}
ol.steps{list-style:none; margin:0; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:16px}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--latin); font-size:13px; letter-spacing:.06em; color:var(--gold-deep);
  border-top:1px solid var(--gold-line); padding-top:6px; line-height:1; font-weight:600;
}
ol.steps li>span{font-size:15px; color:var(--ink-2); line-height:1.68}

/* ── 근거 블록 ─────────────────────────── */
.evid{border:1px solid var(--line); border-left:2px solid var(--gold); background:var(--surface); padding:18px 20px; border-radius:2px}
.evid .lbl{
  font-family:var(--latin); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); display:block; margin-bottom:9px; font-weight:600;
}
.evid p{font-size:14.5px; margin-bottom:10px}
.evid .limit{font-size:13.5px; color:var(--muted); margin:0}
.evid cite{display:block; font-size:12px; color:var(--muted); font-style:normal; margin-top:8px; font-family:var(--latin); letter-spacing:.04em}

.notice{border:1px solid var(--line); background:var(--surface-2); padding:16px 18px; border-radius:2px; font-size:13.8px; color:var(--ink-2); line-height:1.7}
.notice strong{color:var(--ink)}
.notice.safety{background:var(--warn-soft); border-color:var(--gold-line)}

/* ── FAQ ───────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faqi{border-bottom:1px solid var(--line-soft)}
.faqi summary{
  list-style:none; cursor:pointer; padding:16px 26px 16px 0; position:relative;
  font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.6;
}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary::after{
  content:""; position:absolute; right:4px; top:24px; width:9px; height:9px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .2s;
}
.faqi[open] summary::after{transform:rotate(-135deg); top:27px}
.faqi p{padding:0 0 18px; margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.75}
.faqi summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ── 스펙 표 ───────────────────────────── */
dl.specs{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0; border-top:1px solid var(--line)}
dl.specs dt{
  padding:11px 14px 11px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--latin); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; font-weight:600;
}
dl.specs dd{padding:11px 0; margin:0; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--ink-2)}

/* ── 프로필 ────────────────────────────── */
.profile{display:grid; gap:22px}
@media(min-width:680px){.profile{grid-template-columns:300px 1fr; align-items:start}}
.profile figure{margin:0; border:1px solid var(--line); background:var(--surface-2)}
.profile figure img{width:100%; aspect-ratio:4/5; max-height:52vh; object-fit:cover; object-position:50% 18%}
@media(min-width:680px){.profile figure img{aspect-ratio:3/4; max-height:none}}
.profile .name{font-family:var(--display); font-size:26px; font-weight:700; margin:0 0 4px}
.profile .role{font-size:14px; color:var(--gold-deep); font-weight:600; margin:0 0 2px}
.profile .subrole{font-size:13px; color:var(--muted); margin:0 0 18px}
.credgroup{margin-top:22px}
.credgroup h3{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:600}
.credgroup ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.credgroup li{font-size:14.3px; color:var(--ink-2); padding-left:14px; position:relative; line-height:1.6}
.credgroup li::before{content:""; position:absolute; left:0; top:11px; width:5px; height:5px; background:var(--gold-line)}

/* ── 등급 ──────────────────────────────── */
.tier{display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line)}
.tier > div{padding:18px 0; border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:start}
.tier .tn{font-family:var(--latin); font-size:15px; letter-spacing:.1em; color:var(--gold-deep); font-weight:600}
.tier .tn small{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.14em; color:var(--muted); margin-top:4px; font-weight:400}
.tier p{margin:0; font-size:14.3px}

/* ── 저널 ──────────────────────────────── */
.jlist{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line)}
.jitem{display:block; text-decoration:none; padding:20px 0; border-bottom:1px solid var(--line-soft)}
.jitem .jm{
  font-family:var(--latin); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px; display:flex; gap:12px; font-weight:600;
}
.jitem h3{margin-bottom:6px}
.jitem p{font-size:14px; margin:0; color:var(--ink-2)}

/* ── 잠금 화면 (비공개 라우트) ─────────── */
.locked{text-align:center; padding:46px 6px}
.locked .ring{
  width:74px; height:74px; margin:0 auto 22px; border:1px solid var(--gold-line);
  display:grid; place-items:center; border-radius:50%;
}
.locked .ring img{width:36px}
.locked h2{margin-bottom:12px}
.locked p{max-width:34ch; margin:0 auto 22px; font-size:15px}

/* ── 톡톡 플로팅 ───────────────────────── */
.talk{
  position:fixed; right:16px; z-index:60; text-decoration:none;
  bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:var(--cream);
  padding:12px 17px; border-radius:999px; font-size:13.5px; font-weight:600;
  border:1px solid var(--gold); box-shadow:0 10px 28px -12px rgba(28,26,23,.6);
}
.talk .dot{width:7px; height:7px; border-radius:50%; background:var(--gold)}
:root[data-theme="dark"] .talk, :root:not([data-theme="light"]) .talk{color:var(--ink); background:var(--surface)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .talk{background:#1C1A17; color:#F7ECE6}}

/* ── 하단 탭바 ─────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--cream) 93%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  height:var(--tabh); text-decoration:none; color:var(--muted); font-size:10.5px; letter-spacing:.02em;
  position:relative;
}
.tabbar a svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.5}
.tabbar a[aria-current="page"]{color:var(--ink)}
.tabbar a[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2px; background:var(--gold);
}

/* ── 푸터 ──────────────────────────────── */
footer{border-top:1px solid var(--line); margin-top:30px; padding:30px 0 34px; background:var(--paper)}
footer .brand{display:flex; align-items:center; gap:11px; margin-bottom:16px}
footer .brand img{width:26px}
footer .brand b{font-family:var(--latin); letter-spacing:.16em; text-transform:uppercase; font-size:15px; font-weight:600}
footer p{font-size:13px; color:var(--muted); margin:0 0 8px; line-height:1.7}
footer .flinks{display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0 18px; font-size:13px}
footer .flinks a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line)}
footer .legal{font-size:12px; color:var(--muted); border-top:1px solid var(--line-soft); padding-top:14px; margin-top:16px; line-height:1.75}

/* 데스크탑에서 앱 느낌 유지 */
@media(min-width:1024px){
  body{padding-bottom:0}
  .tabbar{display:none}
  .talk{bottom:22px}
  .wrap{max-width:820px}
  section.blk{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}