/* ═══════════════════════════════════════════════════════
   운향재 雲香齋
   ═══════════════════════════════════════════════════════ */

:root{
  /* 먹빛 · 상아 · 황동 · 청자 */
  --ink:        #16130F;
  --ink-soft:   #241F19;
  --ink-line:   #332C24;

  --paper:      #F4F0E7;
  --paper-warm: #EAE3D5;
  --paper-dim:  #D8D0BF;

  --brass:      #A98850;
  --brass-lit:  #C9A96B;
  --celadon:    #8B9A8C;

  --txt-on-dark:      #EDE7DA;
  --txt-on-dark-mute: #A79E8E;
  --txt-on-light:     #241F19;
  --txt-on-light-mute:#6B6255;

  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --disp:  "Cormorant Garamond", "Noto Serif KR", serif;
  --sans:  "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;

  --shell: 1180px;
  --pad:   clamp(1.25rem, 5vw, 4rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--txt-on-light);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem, .35vw + .88rem, 1.0625rem);
  line-height:1.9;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.01em;
  margin:0;
  word-break:keep-all;
}

p{ margin:0; word-break:keep-all; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.85rem;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:1px solid var(--brass);
  outline-offset:3px;
}

/* ── 스크롤 리빌 ──────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity var(--slow) var(--ease) var(--d,0s),
    transform var(--slow) var(--ease) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ═══ HEADER ═════════════════════════════════════════ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(22,19,15,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(169,136,80,.22);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  height:5rem;
}

.brand{
  text-decoration:none; color:var(--txt-on-dark);
  display:flex; flex-direction:column; line-height:1;
}
.brand-ko{
  font-family:var(--serif); font-size:1.15rem; font-weight:400;
  letter-spacing:.32em; text-indent:.32em;
}
.brand-en{
  font-family:var(--disp); font-size:.55rem; font-weight:400;
  letter-spacing:.42em; text-indent:.42em;
  color:var(--brass-lit); margin-top:.45rem;
}

.nav{ display:flex; gap:clamp(1.4rem,2.6vw,2.75rem); }
.nav a{
  position:relative;
  text-decoration:none;
  color:var(--txt-on-dark);
  font-size:.82rem; font-weight:300; letter-spacing:.16em;
  padding-block:.4rem;
  opacity:.82; transition:opacity .4s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--brass-lit);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-toggle{
  display:none;
  width:2.5rem; height:2.5rem;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:.4rem;
}
.nav-toggle span{
  display:block; height:1px; width:100%;
  background:var(--txt-on-dark);
  transition:transform .45s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(.7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-.7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:5rem 0 auto 0;
    flex-direction:column; gap:0;
    background:rgba(22,19,15,.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(169,136,80,.2);
    padding:1rem var(--pad) 2.25rem;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .6s var(--ease);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav a{
    font-size:1rem; padding-block:1rem;
    border-bottom:1px solid rgba(169,136,80,.14);
    letter-spacing:.22em;
  }
  .nav a::after{ display:none; }
}

/* ═══ HERO ═══════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  background:var(--ink);
  color:var(--txt-on-dark);
  overflow:hidden;
  isolation:isolate;
}

.hero-veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(169,136,80,.14) 0%, transparent 55%),
    radial-gradient(90% 60% at 78% 88%, rgba(139,154,140,.10) 0%, transparent 60%),
    linear-gradient(180deg, #100E0B 0%, var(--ink) 45%, #1B1712 100%);
}

/* 향의 잔상 */
.hero-smoke{ position:absolute; inset:0; z-index:-1; opacity:.5; }
.hero-smoke span{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  mix-blend-mode:screen;
  animation:drift 26s var(--ease) infinite alternate;
}
.hero-smoke span:nth-child(1){
  width:44vw; height:44vw; left:6%; top:14%;
  background:radial-gradient(circle, rgba(169,136,80,.34), transparent 68%);
}
.hero-smoke span:nth-child(2){
  width:38vw; height:38vw; right:4%; top:34%;
  background:radial-gradient(circle, rgba(139,154,140,.30), transparent 68%);
  animation-duration:34s; animation-delay:-8s;
}
.hero-smoke span:nth-child(3){
  width:30vw; height:30vw; left:38%; bottom:4%;
  background:radial-gradient(circle, rgba(201,169,107,.22), transparent 70%);
  animation-duration:30s; animation-delay:-16s;
}
@keyframes drift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(3vw,-5vh,0) scale(1.14); }
  100% { transform:translate3d(-4vw,4vh,0) scale(.94); }
}

.hero-inner{ position:relative; padding-block:9rem 7rem; }

.hero-eyebrow{
  font-family:var(--disp);
  font-size:.7rem; letter-spacing:.48em; text-indent:.48em;
  color:var(--brass-lit);
  margin-bottom:2.25rem;
}

.hero-title{
  font-size:clamp(2.6rem, 8.2vw, 6rem);
  font-weight:200;
  line-height:1.22;
  letter-spacing:-.02em;
  margin-bottom:1.75rem;
}
.hero-title span{ display:block; }

.hero-hanja{
  font-family:var(--serif);
  font-size:clamp(.85rem,1.6vw,1.05rem);
  font-weight:300;
  letter-spacing:.7em; text-indent:.7em;
  color:var(--brass);
  margin-bottom:2.5rem;
}

.hero-lede{
  max-width:34ch;
  color:var(--txt-on-dark-mute);
  font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:2.1;
  margin-bottom:3.25rem;
}

.scroll-cue{
  position:absolute; left:50%; bottom:2.5rem;
  transform:translateX(-50%);
  width:1px; height:4rem;
  background:linear-gradient(180deg, transparent, rgba(201,169,107,.5));
  overflow:hidden;
}
.scroll-cue span{
  position:absolute; inset:0;
  background:var(--brass-lit);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%   { transform:translateY(-100%); }
  60%,100% { transform:translateY(100%); }
}

/* ── 버튼 ─────────────────────────────────────────────── */
.btn-ghost{
  display:inline-flex; align-items:center; gap:1rem;
  text-decoration:none;
  font-size:.8rem; letter-spacing:.24em;
  color:inherit;
  padding-block:.5rem;
}
.btn-line{
  display:block; width:3.25rem; height:1px;
  background:currentColor; opacity:.55;
  transition:width .55s var(--ease), opacity .4s;
}
.btn-ghost:hover .btn-line{ width:5rem; opacity:1; }

.btn-solid{
  appearance:none; cursor:pointer;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  font-family:var(--sans); font-size:.82rem; font-weight:400;
  letter-spacing:.24em;
  padding:1.15rem 2.75rem;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.btn-solid:hover{ background:transparent; color:var(--ink); }

/* ═══ INTRO ══════════════════════════════════════════ */
.intro{
  background:var(--ink);
  color:var(--txt-on-dark);
  padding-block:clamp(6rem,14vw,11rem);
  border-top:1px solid var(--ink-line);
}
.intro-text{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(1.35rem,3.4vw,2.35rem);
  line-height:1.95;
  letter-spacing:-.01em;
  max-width:26ch;
}
.intro-text em{
  font-style:normal;
  color:var(--brass-lit);
}
.br-m{ display:none; }
@media (max-width:640px){ .br-m{ display:inline; } }

/* ═══ SECTION 공통 ═══════════════════════════════════ */
.section{ padding-block:clamp(5.5rem,12vw,9.5rem); }

.sec-head{
  display:flex; align-items:baseline; gap:1.5rem;
  flex-wrap:wrap;
  padding-bottom:1.75rem;
  border-bottom:1px solid var(--paper-dim);
  margin-bottom:clamp(2.75rem,6vw,4.5rem);
}
.sec-num{
  font-family:var(--disp);
  font-size:.85rem; letter-spacing:.2em;
  color:var(--brass);
}
.sec-title{
  font-size:clamp(1.6rem,3.6vw,2.25rem);
  letter-spacing:.14em; text-indent:.14em;
  margin-right:auto;
}
.sec-en{
  font-family:var(--disp);
  font-size:.72rem; letter-spacing:.4em;
  color:var(--txt-on-light-mute);
}

.sec-lede{
  max-width:44ch;
  color:var(--txt-on-light-mute);
  margin-bottom:clamp(2.5rem,5vw,4rem);
  font-size:1.02rem;
}

/* ═══ 01 PHILOSOPHY ══════════════════════════════════ */
.philosophy{ background:var(--paper); }

.phil-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:880px){ .phil-grid{ grid-template-columns:1fr; } }

.phil-lead h3{
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  font-weight:200;
  line-height:1.6;
  margin-bottom:1.75rem;
}
.phil-lead p{
  color:var(--txt-on-light-mute);
  margin-bottom:1.35rem;
  max-width:46ch;
}

.phil-list{ list-style:none; margin:0; padding:0; }
.phil-list li{
  padding:1.75rem 0;
  border-top:1px solid var(--paper-dim);
  display:grid;
  grid-template-columns:3rem 1fr;
  gap:0 1.25rem;
}
.phil-list li:last-child{ border-bottom:1px solid var(--paper-dim); }
.phil-idx{
  font-family:var(--disp);
  font-size:.95rem; font-style:italic;
  color:var(--brass);
  padding-top:.35rem;
}
.phil-list h4{
  font-size:1.08rem; font-weight:400;
  letter-spacing:.04em;
  margin-bottom:.5rem;
}
.phil-list p{
  grid-column:2;
  color:var(--txt-on-light-mute);
  font-size:.94rem; line-height:1.85;
}

/* ═══ 02 COLLECTION ══════════════════════════════════ */
.collection{
  background:var(--paper-warm);
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(275px,1fr));
  gap:1px;
  background:var(--paper-dim);
  border:1px solid var(--paper-dim);
}

.card{
  background:var(--paper);
  display:flex; flex-direction:column;
  transition:background .6s var(--ease);
}
.card:hover{ background:#FBF8F1; }

.card-visual{
  aspect-ratio:3/3.4;
  display:grid; place-items:center;
  padding:2.25rem 2rem 0;
  overflow:hidden;
}
.card-visual svg{
  height:100%; width:auto;
  transition:transform 1.1s var(--ease);
}
.card:hover .card-visual svg{ transform:translateY(-8px) scale(1.03); }

.card-body{ padding:1.75rem 1.85rem 2.25rem; }

.card-hanja{
  font-family:var(--serif);
  font-size:.85rem; letter-spacing:.35em;
  color:var(--brass);
  margin-bottom:.7rem;
}
.card-name{
  font-size:1.3rem; font-weight:400;
  letter-spacing:.06em;
  margin-bottom:.8rem;
}
.card-name span{
  font-family:var(--disp);
  font-size:.78rem; font-style:italic;
  letter-spacing:.1em;
  color:var(--txt-on-light-mute);
  margin-left:.5rem;
}
.card-scene{
  color:var(--txt-on-light-mute);
  font-size:.9rem; line-height:1.8;
  margin-bottom:1.5rem;
}

.notes{ margin:0 0 1.5rem; }
.notes > div{
  display:grid;
  grid-template-columns:4.5rem 1fr;
  gap:.75rem;
  padding:.5rem 0;
  border-top:1px solid var(--paper-warm);
}
.notes dt{
  font-family:var(--disp);
  font-size:.62rem; letter-spacing:.22em;
  color:var(--brass);
  padding-top:.25rem;
}
.notes dd{
  margin:0;
  font-size:.85rem;
  color:var(--txt-on-light);
}

.card-meta{
  font-size:.8rem; letter-spacing:.05em;
  color:var(--txt-on-light-mute);
  padding-top:1rem;
  border-top:1px solid var(--paper-dim);
}

.card-note{
  background:var(--ink);
  color:var(--txt-on-dark);
  justify-content:center;
}
.card-note:hover{ background:var(--ink-soft); }
.card-note .card-body{ padding-block:3.5rem; }
.card-note .card-hanja{ color:var(--brass-lit); }
.card-note .card-scene{ color:var(--txt-on-dark-mute); margin-bottom:1.75rem; }
.card-note .card-name span{ color:var(--txt-on-dark-mute); }
.card-link{
  text-decoration:none;
  font-size:.82rem; letter-spacing:.18em;
  color:var(--brass-lit);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.card-link:hover{ border-bottom-color:var(--brass-lit); }

.line-items{ margin-top:clamp(3rem,6vw,4.5rem); }
.line-items h3{
  font-size:.78rem; font-family:var(--sans); font-weight:400;
  letter-spacing:.28em;
  color:var(--txt-on-light-mute);
  margin-bottom:1.25rem;
}
.line-items ul{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 2.5rem;
}
.line-items li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--paper-dim);
  font-size:.92rem;
}
.line-items em{
  font-style:normal;
  font-family:var(--disp);
  font-size:1rem;
  color:var(--txt-on-light-mute);
}
.line-note{
  font-size:.85rem;
  color:var(--txt-on-light-mute);
}

/* ═══ 03 CRAFT ═══════════════════════════════════════ */
.craft{
  background:var(--ink);
  color:var(--txt-on-dark);
}
.craft .sec-head{ border-bottom-color:var(--ink-line); }
.craft .sec-en{ color:var(--txt-on-dark-mute); }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  background:var(--ink-line);
  border:1px solid var(--ink-line);
}
.steps li{
  background:var(--ink);
  padding:2.5rem 1.85rem 3rem;
  transition:background .6s var(--ease);
}
.steps li:hover{ background:var(--ink-soft); }

.step-num{
  display:block;
  font-family:var(--disp);
  font-size:2.5rem; font-weight:300;
  line-height:1;
  color:var(--brass);
  opacity:.55;
  margin-bottom:1.5rem;
}
.steps h3{
  font-size:1.12rem; font-weight:400;
  letter-spacing:.04em;
  margin-bottom:.85rem;
}
.steps p{
  color:var(--txt-on-dark-mute);
  font-size:.9rem; line-height:1.9;
}

/* ═══ 04 SPACE ═══════════════════════════════════════ */
.space{ background:var(--paper); }

.space-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:880px){ .space-grid{ grid-template-columns:1fr; } }

.space-lead h3{
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  font-weight:200; line-height:1.6;
  margin-bottom:1.75rem;
}
.space-lead p{
  color:var(--txt-on-light-mute);
  max-width:44ch;
  margin-bottom:2.25rem;
}

.space-list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;
  background:var(--paper-dim);
  border:1px solid var(--paper-dim);
}
.space-list li{
  background:var(--paper);
  padding:1.85rem 1.5rem 2.15rem;
}
.space-list h4{
  font-size:1rem; font-weight:400;
  letter-spacing:.06em;
  margin-bottom:.7rem;
  color:var(--brass);
}
.space-list p{
  font-size:.88rem; line-height:1.85;
  color:var(--txt-on-light-mute);
}

/* ═══ QUOTE ══════════════════════════════════════════ */
.quote{
  background:var(--paper-warm);
  padding-block:clamp(5rem,11vw,8rem);
  border-block:1px solid var(--paper-dim);
}
.quote blockquote{ margin:0; }
.quote p{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(1.25rem,3vw,2rem);
  line-height:1.9;
  letter-spacing:-.01em;
  max-width:30ch;
  margin-bottom:1.75rem;
}
.quote cite{
  font-family:var(--disp);
  font-style:normal;
  font-size:.72rem; letter-spacing:.34em;
  color:var(--brass);
}

/* ═══ 05 CONTACT ═════════════════════════════════════ */
.contact{ background:var(--paper); }

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.75rem; }
.field label{
  display:block;
  font-size:.72rem; letter-spacing:.22em;
  color:var(--txt-on-light-mute);
  margin-bottom:.7rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--paper-dim);
  padding:.7rem 0;
  font-family:var(--sans);
  font-size:1rem; font-weight:300;
  color:var(--txt-on-light);
  border-radius:0;
  transition:border-color .45s var(--ease);
}
.field textarea{ resize:vertical; line-height:1.8; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
                   linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 12px) center, calc(100% - 7px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:0;
  border-bottom-color:var(--brass);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-bottom-color:#9A5B4B; }

.form-status{
  margin-top:1.25rem;
  font-size:.88rem;
  color:var(--brass);
  min-height:1.5rem;
}
.form-status.is-error{ color:#9A5B4B; }

.contact-info{ font-style:normal; }
.contact-info div{
  padding:1.35rem 0;
  border-top:1px solid var(--paper-dim);
}
.contact-info div:last-child{ border-bottom:1px solid var(--paper-dim); }
.contact-info h4{
  font-size:.7rem; font-family:var(--sans); font-weight:400;
  letter-spacing:.22em;
  color:var(--brass);
  margin-bottom:.6rem;
}
.contact-info p{
  font-size:.94rem; line-height:1.85;
  color:var(--txt-on-light-mute);
}
.contact-info a{
  text-decoration:none;
  border-bottom:1px solid var(--paper-dim);
  transition:border-color .4s var(--ease);
}
.contact-info a:hover{ border-bottom-color:var(--brass); }

/* ═══ FOOTER ═════════════════════════════════════════ */
.site-footer{
  background:var(--ink);
  color:var(--txt-on-dark);
  padding-block:clamp(3.5rem,7vw,5rem) 2.5rem;
}
.foot-top{
  display:flex; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap;
  padding-bottom:3rem;
  border-bottom:1px solid var(--ink-line);
}
.foot-brand .brand-ko{
  display:block;
  font-family:var(--serif); font-size:1.15rem;
  letter-spacing:.32em; text-indent:.32em;
}
.foot-brand .brand-en{
  display:block;
  font-family:var(--disp); font-size:.58rem;
  letter-spacing:.42em; text-indent:.42em;
  color:var(--brass-lit);
  margin-top:.5rem;
}
.foot-brand p{
  margin-top:1.25rem;
  font-size:.85rem;
  color:var(--txt-on-dark-mute);
}

.foot-nav{ display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-content:start; }
.foot-nav a{
  text-decoration:none;
  font-size:.8rem; letter-spacing:.16em;
  color:var(--txt-on-dark-mute);
  transition:color .4s var(--ease);
}
.foot-nav a:hover{ color:var(--brass-lit); }

.foot-legal{
  padding-top:2rem;
  display:flex; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
}
.foot-legal p{
  font-size:.72rem; line-height:1.9;
  color:var(--txt-on-dark-mute);
  opacity:.75;
}

/* ═══ 선택 영역 ══════════════════════════════════════ */
::selection{ background:var(--brass); color:var(--ink); }

/* 인라인 스프라이트는 화면에서 제외 */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }