/* LivLab 홈페이지 v1 — 도록 시안 v0의 톤·색·글꼴·부품을 이어 씀. 외부 요청 0. */

/* ---------- 글꼴 (파일 동봉 · SIL OFL · 한글 KS X 1001 2,350자 서브셋) ---------- */
@font-face{font-family:"Gowun Batang";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/GowunBatang-400.woff2") format("woff2")}
@font-face{font-family:"Gowun Batang";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/GowunBatang-700.woff2") format("woff2")}
@font-face{font-family:"Noto Serif KR";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/NotoSerifKR-300.woff2") format("woff2")}
@font-face{font-family:"Noto Serif KR";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/NotoSerifKR-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/CormorantGaramond-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/CormorantGaramond-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url("../fonts/CormorantGaramond-400i.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url("../fonts/CormorantGaramond-500i.woff2") format("woff2")}

/* ---------- 색 토큰 (v0 그대로) ---------- */
:root{
  --paper:#F6EDD0; --paper-deep:#EDE2C1; --line:#DCCC9F; --img-filter:none;
  --ink:#2F2A24; --ink-2:#5E554A; --ink-3:#8C8172;
  --gold:#B28E36; --gold-2:#D8BE7C; --seal:#A53F33;
  --grain-op:.55;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1C1915; --paper-deep:#24201B; --line:#3B342B;
    --ink:#EEE4CD; --ink-2:#C6B99F; --ink-3:#8F8471;
    --gold:#CDAA58; --gold-2:#7D6733; --seal:#C6604F; --grain-op:.25;
    --img-filter:invert(1) hue-rotate(180deg) brightness(.92) saturate(1.1); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1C1915; --paper-deep:#24201B; --line:#3B342B;
  --ink:#EEE4CD; --ink-2:#C6B99F; --ink-3:#8F8471;
  --gold:#CDAA58; --gold-2:#7D6733; --seal:#C6604F; --grain-op:.25;
  --img-filter:invert(1) hue-rotate(180deg) brightness(.92) saturate(1.1); color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Serif KR","Apple SD Gothic Neo",Georgia,serif; font-weight:300;
  font-size:17.5px; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased;
  position:relative;
}
/* 한지 결 — 그림 파일로 분리(CSP · 외부 요청 0) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:var(--grain-op); mix-blend-mode:multiply;
  background-image:url("../img/grain.svg");
}
img{max-width:100%; height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.nb{white-space:nowrap}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{width:min(1120px,100% - 48px); margin:0 auto}
@media (max-width:480px){.wrap{width:min(1120px,100% - 32px)}}

/* ---------- 한/영 전환 ---------- */
[lang-ko],[lang-en]{display:none !important}
html[data-lang="ko"] [lang-ko]{display:revert !important}
html[data-lang="en"] [lang-en]{display:revert !important}
html[data-lang="en"] body{font-family:"Cormorant Garamond","Noto Serif KR",Georgia,serif; font-size:20px; font-weight:400; line-height:1.6}
h1,h2,h3{font-family:"Gowun Batang","Cormorant Garamond",serif; margin:0; text-wrap:balance; font-weight:700}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3{font-family:"Cormorant Garamond",serif; font-weight:500}
p{margin:0 0 20px; max-width:62ch}

/* ---------- 내비 ---------- */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.nav .wrap{display:flex; justify-content:space-between; align-items:center; height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.mark{width:34px; height:34px; flex:none; display:block; border-radius:50%}
.mark-lg{width:44px; height:44px}
.mark-hero{width:52px; height:52px}
.brand span{font-family:"Cormorant Garamond",serif; font-size:21px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.links{display:flex; gap:26px; font-size:13.5px; color:var(--ink-2); letter-spacing:.06em}
.links a{text-decoration:none} .links a:hover{color:var(--seal)}
.ctl{display:flex; align-items:center; gap:6px}
.lang{display:flex; gap:2px; font-size:12px; letter-spacing:.1em}
.lang button,.theme{font:inherit; border:0; background:transparent; color:var(--ink-3); padding:6px 8px; cursor:pointer; border-bottom:1.5px solid transparent; min-height:32px}
.lang button[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--seal)}
.theme{width:34px; height:34px; display:grid; place-items:center; border-radius:50%; padding:0; border:1px solid transparent}
.theme:hover{border-color:var(--line); color:var(--ink)}
.theme svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none} :root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme .sun{display:none} :root:not([data-theme="light"]) .theme .moon{display:block} }
@media (max-width:820px){.links{display:none}}

/* ---------- 낙관형 섹션 마커 (立 낙관 = 보조) ---------- */
.marker{display:flex; align-items:center; gap:16px; margin-bottom:26px}
.sq{width:38px; height:38px; border:2px solid var(--seal); color:var(--seal); display:grid; place-items:center; font-family:"Gowun Batang",serif; font-weight:700; font-size:19px; border-radius:3px; transform:rotate(-2deg); flex:none}
.marker .t{font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- 히어로 ---------- */
.hero{padding:clamp(96px,16vh,180px) 0 clamp(72px,10vh,120px); text-align:center}
.hero .marker{justify-content:center; margin-bottom:34px}
.hero h1{font-size:clamp(40px,7vw,96px); line-height:1.12; margin:0 auto; max-width:16ch; letter-spacing:-.01em}
html[lang="en"] .hero h1{max-width:18ch; font-size:clamp(42px,7vw,96px); line-height:1.02}
.hero .lede{font-family:"Gowun Batang",serif; font-size:clamp(18px,1.8vw,24px); color:var(--ink-2); margin:34px auto 0; max-width:40ch; line-height:1.7}
html[lang="en"] .hero .lede{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:clamp(20px,1.9vw,25px)}
.hero .stamp{display:inline-flex; align-items:center; gap:14px; margin-top:38px; font-size:12.5px; letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase}
.hero .stamp i{width:48px; height:1px; background:var(--gold)}

section{padding:120px 0}
section h2{font-size:clamp(30px,3.6vw,48px); line-height:1.25; margin-bottom:34px}
html[lang="en"] section h2{font-size:clamp(34px,4vw,56px); line-height:1.1}
@media (max-width:760px){section{padding:88px 0}}

/* ---------- 립랩이란 ---------- */
.about .wrap{display:grid; grid-template-columns:auto 1fr; gap:64px; align-items:start}
.vert{writing-mode:vertical-rl; text-orientation:upright; font-family:"Gowun Batang",serif; font-size:22px; letter-spacing:.32em; color:var(--gold); border-right:1px solid var(--line); padding-right:18px; height:100%; min-height:320px}
html[lang="en"] .vert{text-orientation:mixed; letter-spacing:.2em; font-family:"Cormorant Garamond",serif; font-size:20px; font-style:italic; text-transform:uppercase}
.thesis{font-family:"Gowun Batang",serif; font-size:clamp(22px,2.2vw,30px); line-height:1.5; color:var(--ink); margin-top:40px; padding-top:28px; border-top:1px solid var(--gold-2); max-width:34ch}
html[lang="en"] .thesis{font-family:"Cormorant Garamond",serif; font-style:italic}
@media (max-width:760px){.about .wrap{grid-template-columns:1fr; gap:28px} .vert{writing-mode:horizontal-tb; text-orientation:mixed; border-right:0; border-bottom:1px solid var(--line); padding:0 0 12px; min-height:0}}

/* ---------- 피어남 (스크롤 크로스페이드) ---------- */
.bloom{padding:0}
.bloom .stage{position:relative; height:260vh}
.bloom .sticky{position:sticky; top:64px; height:calc(100vh - 64px); display:grid; place-items:center}
.bloom .frame{position:relative; width:min(84vh,96vw,980px); aspect-ratio:900/662}
.bloom .frame img{width:100%; display:block; position:relative; filter:var(--img-filter)}
.bloom .frame img.top{position:absolute; inset:0; opacity:0; transition:opacity .2s linear}
.bloom .cap{position:absolute; left:0; right:0; bottom:6vh; text-align:center; pointer-events:none}
.bloom .cap span{display:inline-block; background:color-mix(in srgb,var(--paper) 82%,transparent); padding:10px 22px; font-family:"Gowun Batang",serif; font-size:clamp(18px,2vw,26px); color:var(--ink)}
html[lang="en"] .bloom .cap span{font-family:"Cormorant Garamond",serif; font-style:italic}
.bloom .cap .b{display:none}
.bloom.done .cap .a{display:none} .bloom.done .cap .b{display:inline-block}
.bloom .after{padding:72px 0 0; text-align:center}
.bloom .after p{margin:0 auto; max-width:48ch; color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .bloom .stage{height:auto} .bloom .sticky{position:static; height:auto; padding:40px 0}
  .bloom .frame{display:grid; grid-template-columns:1fr 1fr; gap:24px; width:min(1100px,92vw); aspect-ratio:auto}
  .bloom .frame img.top{position:static; opacity:1}
  .bloom .cap{display:none}
}

/* ---------- 명작 시리즈 — 세 폭 병풍 ---------- */
.svc .row{display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr; gap:0 48px; margin-top:20px; align-items:start}
.svc .div{background:linear-gradient(180deg,transparent,var(--gold),transparent); align-self:stretch}
.svc article{padding:12px 0; min-width:0}
.svc .k{font-family:"Gowun Batang",serif; color:var(--gold); font-size:14px; letter-spacing:.3em; margin-bottom:18px}
html[lang="en"] .svc .k{font-family:"Cormorant Garamond",serif; font-style:italic; letter-spacing:.14em; font-size:18px}
.svc h3{font-size:clamp(30px,3vw,40px); line-height:1.15; margin-bottom:8px}
.svc h3 small{display:block; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:.6em; letter-spacing:.08em; color:var(--ink-3); margin-top:4px}
.svc .sub{font-family:"Gowun Batang",serif; font-size:clamp(17px,1.4vw,19px); color:var(--ink-2); margin-bottom:22px; line-height:1.55}
html[lang="en"] .svc .sub{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:22px}
.svc p{color:var(--ink-2); font-size:16px}
html[lang="en"] .svc p{font-size:18.5px}
.st{display:inline-flex; align-items:center; gap:12px; margin-top:8px; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.st b{font-weight:400; color:var(--seal); border:1.5px solid var(--seal); padding:4px 10px; border-radius:3px; letter-spacing:.14em; font-family:"Gowun Batang",serif; white-space:nowrap}
.slogan{font-family:"Gowun Batang",serif; color:var(--ink); font-size:15.5px; letter-spacing:.06em; margin:0 0 16px; padding-left:14px; border-left:2px solid var(--gold-2)}
html[lang="en"] .slogan{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:19px}
/* 스토어 버튼 자리 — 사전 주문 링크 공개 시 개발팀이 href 넣고 .is-soon 제거 */
.store{display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:11px 18px; border:1px solid var(--ink); border-radius:4px; text-decoration:none; font-size:14px; letter-spacing:.06em; font-weight:400; color:var(--ink); min-height:44px}
.store:hover{background:var(--ink); color:var(--paper)}
.store.is-soon{border-color:var(--line); color:var(--ink-3); pointer-events:none}
.store svg{width:16px; height:16px; fill:currentColor}
@media (max-width:1000px){
  .svc .row{grid-template-columns:1fr; gap:52px}
  .svc .div{height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); align-self:auto}
}

/* ---------- 번외편 — 목록 ---------- */
.side ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.side li{display:grid; grid-template-columns:minmax(180px,.9fr) 2fr auto; gap:12px 32px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line)}
.side .name{font-family:"Gowun Batang",serif; font-weight:700; font-size:clamp(20px,1.8vw,24px); line-height:1.3}
html[lang="en"] .side .name{font-family:"Cormorant Garamond",serif; font-weight:500}
.side .name small{display:block; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:.62em; letter-spacing:.08em; color:var(--ink-3); margin-top:2px}
.side .line{color:var(--ink-2); font-size:16px; margin:0; max-width:none}
html[lang="en"] .side .line{font-size:18.5px}
@media (max-width:760px){.side li{grid-template-columns:1fr; gap:8px} .side .st{margin-top:2px}}

/* ---------- 안전 한 줄 ---------- */
.safety{padding:80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-deep)}
.safety .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.safety h2{font-size:clamp(24px,2.6vw,34px); margin-bottom:0}
.safety p{color:var(--ink-2); font-size:16px; margin:0}
.safety b{font-weight:400; color:var(--ink)}
@media (max-width:760px){.safety .wrap{grid-template-columns:1fr; gap:24px}}

/* ---------- 푸터 ---------- */
footer{padding:64px 0 72px; font-size:14px; color:var(--ink-3)}
footer .wrap{display:grid; grid-template-columns:1.4fr .7fr .7fr; gap:36px}
footer h4{margin:0 0 12px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); font-weight:400}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
footer a{text-decoration:none} footer a:hover{color:var(--seal)}
footer .biz{margin:16px 0 0; max-width:44ch; line-height:1.7}
footer .mail{margin:8px 0 0}
footer .copy{grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:13px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr; gap:28px}}

/* ---------- 문의 (/support) ---------- */
.support{padding:clamp(72px,12vh,140px) 0 120px}
.support .wrap{max-width:720px}
.support h1{font-size:clamp(32px,4.4vw,52px); line-height:1.2; margin:18px 0 28px}
.support .lead{color:var(--ink-2); margin-bottom:40px}
.support dl{margin:0; border-top:1px solid var(--line)}
.support .item{display:grid; grid-template-columns:minmax(120px,.5fr) 1fr; gap:8px 28px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline}
.support dt{font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.support dd{margin:0; font-weight:400}
.support dd a{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold-2)}
.support dd a:hover{color:var(--seal)}
.support .links-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.support .note{margin:40px 0 0; padding:24px 26px; background:var(--paper-deep); border-left:2px solid var(--seal); color:var(--ink-2); font-size:16px; max-width:none}
.support .note b{font-weight:400; color:var(--ink)}
.support .op{margin-top:36px; font-size:14px; color:var(--ink-3)}
@media (max-width:600px){.support .item{grid-template-columns:1fr}}