/* ===========================================================
   Thé de Young — PARIS MASTER TEA RESIDENCY 2026
   Design tokens per DESIGN.md / SKILLS.md (2026-09-10)
   =========================================================== */
:root {
    --dark:#1C2621; --accent:#7D8A82; --base:#F5F5F3; --surface:#EFEEE8;
    --text:#23302A; --muted:#8B948C; --line:#E1E1D9;
    --gold:#B9975B; --gold-soft:#D9C79A;
    --font-sans:"Noto Sans KR",-apple-system,sans-serif;
    --font-serif:"Noto Serif KR",serif;
    --font-en:"Cormorant",serif;
    --container:1200px;
    --space-section:7rem; --space-section-sm:5rem;
    --ease:cubic-bezier(0.25,1,0.5,1);
    --ease-editorial:cubic-bezier(0.77,0,0.175,1);
    --ease-soft:cubic-bezier(0.22,1,0.36,1);
    --ease-out:cubic-bezier(0.16,1,0.3,1);
    --dur-fast:0.3s; --dur-medium:0.6s; --dur-slow:1s; --dur-cinematic:1.6s;
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:auto; }
html, body { overflow-x:hidden; }
body {
    margin:0; background:var(--base); color:var(--text);
    font-family:var(--font-sans); font-weight:300;
    line-height:1.75; word-break:keep-all;
    -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-serif); font-weight:500; margin:0; color:var(--dark); word-break:keep-all; }
p { margin:0; }
ul { margin:0; padding:0; list-style:none; }
button { font-family:inherit; background:none; border:none; cursor:pointer; padding:0; color:inherit; }

.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
.full-bleed { width:100%; }

/* ---- Type scale (fluid) ---- */
.type-display-xl { font-size:clamp(3.2rem, 9vw, 9rem); line-height:0.98; letter-spacing:0.01em; }
.type-display-l { font-size:clamp(2.4rem, 7vw, 6.5rem); line-height:1.02; }
.type-h1 { font-size:clamp(2rem, 5vw, 4.5rem); line-height:1.08; }
.type-h2 { font-size:clamp(1.75rem, 3.5vw, 3.25rem); line-height:1.15; }
.type-body-l { font-size:clamp(1.05rem, 1.4vw, 1.3rem); font-weight:300; }
.type-caption { font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.type-en { font-family:var(--font-en); font-style:italic; }

/* ---- Reveal motion system (2-stage safety) ---- */
@keyframes vt-reveal-up {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0); }
}
.reveal {
    animation:vt-reveal-up 0.9s var(--ease-soft) both;
    animation-play-state:running;
}
html.gsap-ready .reveal { animation:none; opacity:0; transform:translateY(28px); }
html.gsap-ready .reveal.is-revealed { opacity:1; transform:translateY(0); transition:opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft); }
@supports (animation-timeline:view()) {
    html:not(.gsap-ready) .reveal {
        animation: vt-reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}
@media (prefers-reduced-motion:reduce) {
    .reveal, html.gsap-ready .reveal { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ---- Header ---- */
.site-header {
    position:fixed; top:0; left:0; width:100%; z-index:100;
    padding:28px 0; transition:background var(--dur-medium) var(--ease), padding var(--dur-medium) var(--ease);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; }
.site-header.is-solid { background:rgba(245,245,243,0.94); padding:16px 0; border-bottom:1px solid var(--line); }
.brand-mark { font-family:var(--font-en); font-style:italic; font-size:1.1rem; letter-spacing:0.02em; color:var(--dark); }
.site-header.is-transparent .brand-mark,
.site-header.is-transparent .main-nav a { color:#F5F5F3; }
.main-nav { display:flex; gap:36px; align-items:center; }
.main-nav a { font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; position:relative; padding-bottom:4px; }
.main-nav a::after {
    content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 0.4s var(--ease-out);
}
.main-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.main-nav a.apply-link { border:1px solid currentColor; padding:8px 18px; }
.nav-toggle { display:none; }

/* ---- Hero ---- */
.hero {
    position:relative; min-height:100svh; display:flex; flex-direction:column;
    justify-content:flex-end; padding:0 0 64px; background:var(--dark); color:#F5F5F3; overflow:hidden;
}
.hero-media {
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(160deg,#1C2621 0%,#2B3830 55%,#3C4A3F 100%);
}
.hero-media .img-slot { width:100%; height:100%; }
.hero-content { position:relative; z-index:2; }
.hero-eyebrow { color:var(--gold-soft); margin-bottom:20px; }
.hero-title { color:#F8F5EF; }
.hero-project-name { margin-top:16px; color:var(--gold-soft); letter-spacing:0.04em; }
.hero-meta { display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:36px; }
.hero-meta-card {
    background:rgba(28,38,33,0.82); padding:16px 22px; border:1px solid rgba(245,245,243,0.18);
}
.hero-meta-card .label { display:block; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:6px; }
.hero-meta-card .value { font-family:var(--font-serif); font-size:1.05rem; }
.hero-scroll-cue { position:absolute; bottom:28px; left:24px; z-index:2; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(245,245,243,0.7); }
.hero-scroll-cue::before { content:''; display:inline-block; width:1px; height:32px; background:rgba(245,245,243,0.5); margin-right:10px; vertical-align:middle; }

/* ---- Section shell ---- */
section.act { padding:var(--space-section) 0; }
section.act.is-sm { padding:var(--space-section-sm) 0; }
.act-surface { background:var(--surface); }
.act-dark { background:var(--dark); color:#F5F5F3; }
.act-dark h2, .act-dark h3 { color:#F5F5F3; }

/* ---- Brand message ---- */
.brand-message { text-align:center; }
.brand-message .type-h2 { max-width:780px; margin:0 auto; }
.texture-strip { height:2px; width:64px; background:var(--gold); margin:36px auto 0; }

/* ---- Program bridge ---- */
.program-bridge { text-align:center; }
.bridge-phase { padding:16px 0; }
.bridge-phase .type-en { display:block; color:var(--gold); margin-bottom:10px; }
.bridge-arrow { font-family:var(--font-en); font-size:1.6rem; color:var(--muted); margin:8px 0; }

/* ---- Day program (Editorial grid) ---- */
.day-program-head { margin-bottom:48px; }
.day-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); }
.day-col {
    padding:32px 20px; border-right:1px solid var(--line);
}
.day-col:last-child { border-right:none; }
.day-num { font-family:var(--font-en); font-size:2.2rem; color:var(--gold); display:block; margin-bottom:14px; }
.day-col h3 { font-size:1.05rem; margin-bottom:10px; }
.day-col p { font-size:0.92rem; color:var(--muted); margin-bottom:18px; }
.day-figure { aspect-ratio:3/4; }

/* ---- Highlights / What You Experience ---- */
.highlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.highlight-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px) { .highlight-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) { .highlight-grid.cols-4 { grid-template-columns:1fr; } }
.highlight-item { background:var(--base); padding:40px 32px; }
.highlight-item .type-en { color:var(--gold); display:block; margin-bottom:14px; }

/* ---- FAQ ---- */
.faq-list { max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); padding:26px 0; }
.faq-item h3 { font-size:1.05rem; margin-bottom:10px; cursor:default; }
.faq-item p { color:var(--muted); font-size:0.95rem; }

/* ---- Closing ---- */
.closing { position:relative; background:var(--dark); color:#F5F5F3; }
.closing-top { display:grid; grid-template-columns:1fr 1fr; }
.closing-media { min-height:420px; background:linear-gradient(200deg,#23302A,#1C2621 70%); }
.closing-copy { padding:64px 48px; display:flex; flex-direction:column; justify-content:center; }
.closing-copy .type-en { color:var(--gold-soft); margin-bottom:20px; }
.closing-band { background:#171F1B; padding:56px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.closing-band .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.closing-facts { text-align:right; font-size:0.85rem; color:var(--muted); line-height:2; }
.logo-band { padding:32px 0; text-align:center; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }

/* ---- CTA ---- */
.vip-cta, .vip-cta-plain {
    display:inline-block; padding:16px 40px; border:1px solid var(--gold);
    color:var(--gold); font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase;
    position:relative; overflow:hidden; transition:color 0.5s var(--ease-out);
}
.vip-cta::before {
    content:''; position:absolute; inset:0; background:var(--gold); transform:translateX(-101%);
    transition:transform 0.5s var(--ease-out); z-index:-1;
}
.vip-cta:hover { color:var(--dark); }
.vip-cta:hover::before { transform:translateX(0); }
.vip-cta-plain { border-color:var(--line); color:var(--text); }
.vip-cta-plain:hover { border-color:var(--gold); color:var(--gold); }
.cta-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:36px; }

/* ---- Mobile sticky CTA ---- */
.mobile-cta {
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--dark); color:#F5F5F3; text-align:center;
    padding:14px; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
    display:none;
}
@media (max-width:768px) { .mobile-cta { display:block; } body { padding-bottom:52px; } }

/* ---- Footer ---- */
.site-footer { background:var(--dark); color:rgba(245,245,243,0.75); padding:64px 0 32px; font-size:0.85rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(245,245,243,0.15); }
.footer-grid h4 { color:#F5F5F3; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:18px; font-family:var(--font-sans); }
.footer-grid ul li { margin-bottom:10px; }
.footer-grid ul a:hover { color:var(--gold-soft); }
.footer-bottom { padding-top:24px; font-size:0.78rem; color:rgba(245,245,243,0.5); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }

/* ---- Image slot (placeholder-safe, replaced by real photography later) ---- */
.img-slot {
    position:relative; width:100%; aspect-ratio:var(--ar, 4/5);
    background:linear-gradient(150deg,var(--surface),var(--line));
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.img-slot img { width:100%; height:100%; object-fit:cover; object-position:var(--fp, center); }
.img-slot .img-slot-label {
    font-size:0.68rem; letter-spacing:0.08em; color:var(--muted); text-align:center; padding:0 16px;
}

/* ---- Detail page components (output_spec 1) ---- */
.detail-hero { padding:calc(var(--space-section-sm) + 60px) 0 var(--space-section-sm); background:var(--surface); }
.detail-hero .breadcrumb { margin-bottom:22px; font-size:0.78rem; color:var(--muted); }
.detail-hero .breadcrumb a:hover { color:var(--gold); }
.detail-intro { max-width:760px; }
.detail-figure { margin:var(--space-section-sm) 0; }
.detail-figure figcaption { margin-top:14px; font-size:0.82rem; color:var(--muted); }

.split-grid { display:grid; grid-template-columns:5fr 7fr; gap:60px; align-items:start; margin:var(--space-section-sm) 0; }
.split-grid.is-reverse { grid-template-columns:7fr 5fr; }
.split-grid.is-reverse .split-media { order:2; }

.info-rows {
    display:grid; grid-template-columns:1fr 2fr; gap:0 20px;
    border-top:1px solid var(--line); margin:0;
}
.info-rows dt, .info-rows dd { padding:18px 0; border-bottom:1px solid var(--line); }
.info-rows dt { font-size:0.85rem; color:var(--muted); }
.info-rows dd { margin:0; font-size:0.98rem; }
@media (max-width:768px) {
    .info-rows { grid-template-columns:1fr; }
    .info-rows dt { border-bottom:none; padding-bottom:4px; }
}

.step-list, .proc-list { display:flex; list-style:none; margin:var(--space-section-sm) 0; padding:0; }
.proc-step { flex:1; position:relative; padding:0 12px; text-align:center; }
.proc-step:not(:last-child)::after {
    content:''; position:absolute; top:24px; left:50%; width:100%; height:2px; background:var(--line); z-index:0;
}
.proc-num {
    position:relative; z-index:1; margin:0 auto 14px; width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line);
    font-family:var(--font-en); color:var(--gold);
}
.proc-step p { font-size:0.88rem; }
@media (max-width:768px) {
    .proc-list { flex-direction:column; gap:10px; }
    .proc-step { padding:24px 0; }
    .proc-step::after { display:none; }
}

.icon-list, .check-list { margin:var(--space-section-sm) 0; }
.icon-list li, .check-list li {
    display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:0.95rem;
}
.icon-list li .mark, .check-list li .mark { color:var(--gold); flex-shrink:0; }

.callout {
    margin:var(--space-section-sm) 0; padding:32px 36px; background:var(--surface);
    border-left:2px solid var(--gold);
}
.callout p { font-size:0.98rem; color:var(--text); }

.compare-cards { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin:var(--space-section-sm) 0; }
.compare-cards .card { background:var(--base); padding:32px; }
.compare-cards .card h3 { margin-bottom:14px; font-size:1.1rem; }

.related-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:var(--space-section-sm);
    padding-top:var(--space-section-sm); border-top:1px solid var(--line);
}
.related-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px) { .related-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
.related-card.is-pending { opacity:0.55; }
.related-card.is-pending .img-slot-label::after { content:' (발행 예정)'; }
.related-grid .related-card figure { margin:0 0 14px; }
.related-grid .related-card h3 { font-size:1rem; margin-bottom:6px; }
.related-grid .related-card p { font-size:0.85rem; color:var(--muted); }

/* ---- Gallery ---- */
.gallery-filter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.gallery-filter a { padding:8px 18px; border:1px solid var(--line); font-size:0.78rem; letter-spacing:0.08em; }
.gallery-filter a.is-active { border-color:var(--gold); color:var(--gold); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ---- Sitemap page ---- */
.sitemap-list { columns:2; gap:60px; }
.sitemap-list li { break-inside:avoid; padding:10px 0; border-bottom:1px solid var(--line); }

/* ---- Consultation ---- */
.consult-card { max-width:520px; margin:0 auto; text-align:center; padding:56px 40px; background:var(--surface); }
.consult-card .phone { font-family:var(--font-en); font-size:2.4rem; color:var(--dark); display:block; margin:20px 0 30px; }
.consult-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
    .day-grid { grid-template-columns:repeat(3,1fr); }
    .day-col:nth-child(3) { border-right:none; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
    .main-nav { display:none; }
    .day-grid, .highlight-grid, .compare-cards, .related-grid, .gallery-grid { grid-template-columns:1fr; }
    .day-col, .highlight-item { border-right:none; border-bottom:1px solid var(--line); }
    .day-figure { --ar:16/9 !important; }
    section.act { padding:var(--space-section-sm) 0; }
    section.act.is-sm { padding:3rem 0; }
    .split-grid, .split-grid.is-reverse { grid-template-columns:1fr; gap:28px; }
    .split-grid.is-reverse .split-media { order:0; }
    .closing-top { grid-template-columns:1fr; }
    .closing-facts { text-align:left; }
    .footer-grid { grid-template-columns:1fr; gap:32px; }
    .info-rows .row { grid-template-columns:1fr; gap:6px; }
    .sitemap-list { columns:1; }
}