/* 클라이언트 제공 폰트: Avenir Black (2차 피드백 row5)
   weight 400~900 전 구간을 이 파일로 매핑 → 기존 600/700 선언이 합성볼드 없이 렌더 */
@font-face{
  font-family:'Avenir Black';
  src:url('../fonts/AvenirBlack.woff2') format('woff2'),
      url('../fonts/AvenirBlack.woff') format('woff'),
      url('../fonts/AvenirBlack.ttf') format('truetype');
  font-weight:400 900;font-style:normal;font-display:swap;
}

/* ============================================================
   MUKAI — Design System v3 "Deck Exact"
   팔레트·서체 출처: 클라이언트 PPTX 원본에서 직접 추출
   · Navy  #0D1C2D  (슬라이드 XML)
   · Gold  #E1BC62  (로고 픽셀 158,887개 중앙값 = XML 골드와 동일)
   · Blue  #073763  (라이트 슬라이드 제목/본문)
   · Light 배경 = 순백 #FFFFFF
   · Fonts: Quicksand(디스플레이) + Mulish(본문) — 덱 내장 폰트
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --navy-950:#08121D;
  --navy-900:#0D1C2D;            /* 덱 네이비 원본 */
  --navy-850:#13263C;
  --gold:#E1BC62;                /* 덱/로고 골드 원본 */
  --gold-soft:#ECD399;           /* 골드 라이트 (네이비 위 대형 악센트) */
  --gold-deep:#8F7330;           /* 골드 딥 (흰 배경 위 텍스트용, AA 4.5:1) */
  --paper:#FFFFFF;               /* 라이트 섹션 = 덱과 동일한 순백 */
  --card:#FFFFFF;
  --ink:#0D1C2D;                 /* 흰 배경 위 최강조 텍스트 = 브랜드 네이비 */
  --sea:#073763;                 /* 덱 블루 — 라이트 섹션 헤딩 */
  --body:#2C557A;                /* 본문 (덱 블루 15% 라이트) */
  --body-d:#C6D2E0;              /* 다크 배경 본문 */
  --hair:rgba(225,188,98,.40);
  --hair-ink:rgba(13,28,45,.12);

  --serif:'Avenir Black','Jost','Quicksand','Segoe UI',sans-serif; /* 클라이언트 제공 Avenir Black (2차 row5) */
  --sans:'Mulish','Segoe UI',sans-serif;       /* 본문/UI */
  --jp:'Shippori Mincho','Yu Mincho',serif;    /* 한자 악센트 */

  --sec-pad:clamp(80px,10vw,140px);
  --wrap:1180px;
  --r:48px 6px;                  /* 대각 라운드 (덱 이미지 모서리 모티프) */
  --head-h:96px;
}

/* ---------- 2. BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:16px;line-height:1.9;font-weight:400;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--navy-950)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* 이탤릭 없는 서체 → em은 컬러 악센트로 */
h1 em,h2 em,.h-display em,.lede .em{font-style:normal;font-weight:inherit}

/* ---------- 3. 공용 컴포넌트 ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold-deep);
}
.eyebrow .jp{font-family:var(--jp);font-size:14px;letter-spacing:.38em;font-weight:600}
.page-hero .eyebrow,.duo .eyebrow,.ritual .eyebrow,
.visit .eyebrow,.join .eyebrow{color:var(--gold)}

.h-display{
  font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;line-height:1.35;
  font-size:clamp(22px,2.8vw,34px);color:var(--sea);
}
.h-display em{color:var(--gold-deep)}

.lede{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(20px,2.6vw,30px);line-height:1.6;color:var(--ink);
}

.btn{
  display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;padding:16px 42px;
  border:1px solid var(--gold);color:var(--gold);background:transparent;
  transition:background .35s,color .35s,border-color .35s;
}
.btn:hover{background:var(--gold);color:var(--navy-950)}
.btn--ink{border-color:var(--sea);color:var(--sea)}
.btn--ink:hover{background:var(--sea);color:#fff}
.btn--solid{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.btn--solid:hover{background:var(--sea);border-color:var(--sea)}

.more{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
}
.more::after{content:"";width:38px;height:1px;background:currentColor;transition:width .35s}
.more:hover::after{width:62px}
.more--gold{color:var(--gold)}
.more--gold:hover{color:var(--gold-soft)}
.more--ink{color:var(--sea)}
.more--ink:hover{color:var(--gold-deep)}

/* 사진 프레임 모티프: 대각 라운드 + 골드 헤어라인 오프셋 */
.frame{position:relative;z-index:0;overflow:visible}
.frame img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--r);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.frame::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border:1px solid var(--hair);border-radius:var(--r);
  transform:translate(14px,14px);
}
.frame--l::after{transform:translate(-14px,14px)}
a:hover .frame img,.card-link:hover .frame img{transform:scale(1.03)}

/* 등장 애니메이션 */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}

/* 물결 헤어라인 오너먼트 (다크 섹션 코너) */
.ripple{position:relative}
.ripple::before{
  content:"";position:absolute;left:-160px;bottom:-160px;width:560px;height:560px;
  border-radius:50%;pointer-events:none;opacity:.45;
  background:repeating-radial-gradient(circle at center,transparent 0 34px,var(--hair) 34px 35px);
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 71%);
          mask-image:radial-gradient(circle,#000 55%,transparent 71%);
}

/* ---------- 4. HEADER + 풀스크린 내비 (햄버거 = PC/모바일 공통, udonshin 방식) ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--head-h);
  display:flex;align-items:center;
  transition:height .4s;
  background:linear-gradient(180deg,rgba(8,18,29,.55),rgba(8,18,29,0)); /* 밝은 배경 대비 안전 스크림 */
}
/* ⚠ 버그픽스: backdrop-filter를 헤더 본체가 아닌 ::before에 —
   본체에 걸면 헤더가 fixed 자식(.nav)의 containing block이 되어
   풀스크린 오버레이가 헤더 높이 안에 클리핑됨 */
.site-head::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(13,28,45,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(225,188,98,.28);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.site-head.is-scrolled{height:70px}
.site-head.is-scrolled::before{opacity:1}
.head-in{
  position:relative;z-index:2;
  width:100%;max-width:none;padding-inline:clamp(14px,2vw,26px); /* 3차 #1: 좌우 맨 끝 배치 */
  display:flex;align-items:center;justify-content:space-between;
}
.brand{position:relative;z-index:120}
.brand img{width:auto;transition:height .4s}


/* WP 어드민바 오프셋 */
body.admin-bar .site-head{top:32px}
@media(max-width:782px){body.admin-bar .site-head{top:46px}}

/* 토글: 모든 해상도에서 표시 */
.nav-toggle{
  display:block;background:none;border:0;cursor:pointer;
  padding:12px;position:relative;z-index:120;
}
.nav-toggle span{
  display:block;width:28px;height:2px;background:var(--gold);
  margin:7px 0;transition:transform .35s,opacity .35s;
}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* 풀스크린 오버레이 내비 */
.nav{
  position:fixed;inset:0;z-index:110;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.4vh,32px);
  background:rgba(8,18,29,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s .45s;
}
body.nav-open .nav{opacity:1;visibility:visible;transition:opacity .45s ease}
body.nav-open{overflow:hidden}

/* WP 기본 마크업(ul>li>a)도 동일 레이아웃으로 흡수 */
.nav ul{display:contents}
.nav li{list-style:none;margin:0}

.nav a{
  position:relative;font-family:var(--serif);
  font-size:clamp(20px,2.6vw,30px);font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:#EDF2F7;
  padding:6px 4px;transition:color .3s;
  opacity:0;transform:translateY(16px);
}
body.nav-open .nav a{
  opacity:1;transform:none;
  transition:color .3s,
    opacity .5s ease var(--nd,0s),
    transform .5s cubic-bezier(.22,.61,.36,1) var(--nd,0s);
}
.nav > a:nth-of-type(1),.nav li:nth-child(1) a{--nd:.06s}
.nav > a:nth-of-type(2),.nav li:nth-child(2) a{--nd:.12s}
.nav > a:nth-of-type(3),.nav li:nth-child(3) a{--nd:.18s}
.nav > a:nth-of-type(4),.nav li:nth-child(4) a{--nd:.24s}
.nav > a:nth-of-type(5),.nav li:nth-child(5) a{--nd:.30s}
.nav > a:nth-of-type(6),.nav li:nth-child(6) a{--nd:.36s}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.nav a:hover{color:var(--gold)}
.nav a:hover::after,
.nav a.is-active::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after{transform:scaleX(1)}
.nav a.is-active,
.nav .current-menu-item > a,
.nav .current_page_item > a{color:var(--gold)}

.nav::after{ /* 로고는 이미지로 (텍스트 조판 금지) */
  content:"";position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  width:230px;height:34px;opacity:.9;
  background:url(../img/logo-mark.png) center/contain no-repeat;
}

/* ---------- 5. 서브페이지 히어로 ---------- */
.page-hero{
  position:relative;overflow:hidden;background:var(--navy-900);color:var(--body-d);
  padding:calc(var(--head-h) + clamp(64px,9vw,120px)) 0 clamp(72px,8vw,112px);
}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero h1{
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(38px,5.4vw,68px);line-height:1.12;max-width:14em;letter-spacing:.01em;
}
.page-hero h1 em{color:var(--gold)}
.ph-sub{margin-top:24px;max-width:600px;font-size:clamp(15px,1.5vw,17.5px)}
.wm{
  position:absolute;top:50%;right:clamp(6px,5vw,80px);transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--jp);font-weight:600;
  font-size:clamp(96px,15vw,200px);line-height:1;letter-spacing:.08em;
  color:rgba(225,188,98,.10);pointer-events:none;user-select:none;
}

/* ---------- 6. HOME: 히어로 트립틱 ---------- */
.hero{position:relative;height:100svh;min-height:660px;background:var(--navy-950);overflow:hidden}
.hero-triptych{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(225,188,98,.32);
}
.panel{overflow:hidden;position:relative}
.panel img{width:100%;height:100%;object-fit:cover;animation:kenburns 17s ease-in-out infinite alternate}
.panel:nth-child(2) img{animation-delay:-6s}
.panel:nth-child(3) img{animation-delay:-11s}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,18,29,.66) 0%,rgba(8,18,29,.34) 46%,rgba(8,18,29,.84) 100%)}
.hero-core{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 22px;
}
.hero-kicker{
  color:var(--gold);font-size:11px;font-weight:700;
  letter-spacing:.52em;text-transform:uppercase;margin-bottom:30px;
}
.hero-title{
  font-family:var(--serif);font-weight:600;color:#fff;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,54px);line-height:1.32;letter-spacing:.08em;
  text-shadow:0 2px 34px rgba(4,10,18,.55);
}
.hero-title em{color:var(--gold)}
.hero-sub{color:#E8EDF3;max-width:none;margin:26px auto 24px;font-size:clamp(12.5px,1.28vw,16px);white-space:nowrap;letter-spacing:.01em}
.hero-jp{
  display:flex;flex-wrap:wrap;justify-content:center;
  color:var(--gold-soft);font-size:13.5px;letter-spacing:.16em;margin-bottom:46px;
}
.hero-jp .jp{font-family:var(--jp);margin-left:.5em}
.hero-jp .sep{margin:0 clamp(12px,2vw,24px);color:rgba(225,188,98,.5)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 34px}
.scroll-cue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;
  color:var(--gold);font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-cue::after{
  content:"";width:1px;height:46px;
  background:linear-gradient(var(--gold),transparent);
  animation:drip 2.2s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 7. HOME: 인트로 ---------- */
.intro{background:var(--paper);padding:var(--sec-pad) 0}
.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(44px,7vw,110px);align-items:end}
.intro .lede{font-size:clamp(24px,3.4vw,40px);font-weight:600;line-height:1.45;letter-spacing:.005em}
.intro .lede strong{font-weight:700;color:var(--sea)}
.intro-side p{color:var(--body);margin-bottom:28px}

/* ---------- 8. HOME: One Bowl. Two Experiences. ---------- */
.duo{background:var(--navy-900);color:var(--body-d);padding:var(--sec-pad) 0;overflow:hidden}
.duo-head{text-align:center;max-width:900px;margin:0 auto clamp(52px,6vw,80px)}
.duo-head .eyebrow{justify-content:center;margin-bottom:20px}
.duo-head h2{font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(30px,4.6vw,54px);line-height:1.16}
.duo-head h2 em{color:var(--gold)}
.duo-head p{margin-top:22px;font-size:clamp(13.5px,1.32vw,15.5px)}
.duo-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,84px);max-width:920px;margin:0 auto;
}
.duo-card figure{aspect-ratio:4/4.4}
.duo-card figcaption{margin-top:22px}
.dc-tag{display:flex;align-items:center;gap:12px;color:var(--gold);
  font-size:11px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;margin-bottom:8px}
.dc-tag .jp{font-family:var(--jp);font-size:15px}
.duo-card figcaption p{color:var(--body-d);font-size:clamp(12.5px,1.32vw,15px);max-width:none;white-space:nowrap} /* 3차 #13/14: 한 줄 */
.duo-foot{max-width:880px;margin:clamp(52px,6vw,76px) auto 0;text-align:center}
.duo-foot p{margin-bottom:26px;font-size:clamp(13.5px,1.32vw,15.5px)}

/* ---------- 9. HOME: 시그니처 ---------- */
.signature{background:var(--paper);padding:var(--sec-pad) 0}
.sec-head{margin-bottom:clamp(44px,5vw,64px)}
.sec-head .eyebrow{margin-bottom:16px}
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,52px)}
.sig-card figure{aspect-ratio:3/3.5}
.sig-body{padding-top:22px}
.sig-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sig-name h3{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.sig-name .jp{font-family:var(--jp);font-size:13px;color:var(--gold-deep);white-space:nowrap}
.sig-body p{color:var(--body);font-size:14.5px;line-height:1.75;margin-top:8px;max-width:32ch}
.sig-cta{text-align:center;margin-top:clamp(48px,6vw,68px)}

/* ---------- 10. HOME: 방문 밴드 ---------- */
.visit{position:relative;overflow:hidden;background:var(--navy-950);
  color:#fff;text-align:center;padding:clamp(100px,13vw,160px) 0}
.visit-bg{position:absolute;inset:0}
.visit-bg img{width:100%;height:100%;object-fit:cover}
.visit::after{content:"";position:absolute;inset:0;background:rgba(8,18,29,.74)}
.visit .wrap{position:relative;z-index:2}
.visit .eyebrow{justify-content:center;margin-bottom:20px}
.visit h2{font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(24px,3.6vw,42px);line-height:1.3}
.visit-addr{color:var(--body-d);margin:18px 0 40px;font-size:clamp(15px,1.5vw,17px)}
.visit-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 36px}

/* ---------- 11. ABOUT ---------- */
.about-lede{background:var(--paper);padding:var(--sec-pad) 0;text-align:center}
.about-lede .mark{width:clamp(120px,13vw,150px);margin:0 auto 44px}
.about-lede p{max-width:640px;margin:0 auto 24px;color:var(--body);font-size:clamp(15px,1.5vw,17.5px)}
.about-rule{width:56px;height:1px;background:var(--gold);margin:40px auto 0;opacity:.85}

.pillars{background:var(--card);border-top:1px solid var(--hair-ink);padding:var(--sec-pad) 0}
.pillar{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(44px,6.5vw,100px);align-items:center}
.pillar + .pillar{margin-top:clamp(84px,10vw,136px)}
.pillar-photo{aspect-ratio:4/3.1}
.pillar-copy .eyebrow{margin-bottom:18px}
.pillar-copy h2{font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(22px,2.8vw,32px);
  color:var(--sea);margin-bottom:20px;line-height:1.3}
.pillar-copy p{color:var(--body);max-width:46ch}
.pillar-copy p + p{margin-top:14px}
.pillar--flip .pillar-photo{order:2}

.about-close{background:var(--navy-900);text-align:center;padding:clamp(84px,10vw,120px) 0}
.about-close blockquote{
  font-family:var(--serif);font-weight:500;color:#fff;
  font-size:clamp(24px,3.4vw,40px);line-height:1.45;max-width:24em;margin:0 auto 40px;
  letter-spacing:.01em;
}
.about-close blockquote .q{color:var(--gold)}
.about-close-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 40px}

/* ---------- 12. MENU ---------- */
.featured{background:var(--paper);padding:var(--sec-pad) 0}
.mi-price{white-space:nowrap;font-weight:700;color:var(--sea);letter-spacing:.02em}
.sig-name .mi-price{font-size:15px}

.menu-lists{background:var(--card);border-top:1px solid var(--hair-ink);padding:var(--sec-pad) 0}
.mcat + .mcat{margin-top:clamp(64px,8vw,96px)}
.mcat-head{display:flex;align-items:baseline;gap:18px;margin-bottom:34px;
  border-bottom:1px solid var(--hair);padding-bottom:18px}
.mcat-head h3{font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(17px,2vw,22px);color:var(--ink)}
.mcat-head .jp{font-family:var(--jp);color:var(--gold-deep);font-size:15px;letter-spacing:.3em}
.mcat-note{margin-left:auto;font-size:12.5px;color:var(--body);letter-spacing:.04em}
.mi-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px clamp(44px,6vw,90px)}
.mi-line{display:flex;align-items:baseline;gap:12px}
.mi-name{font-size:15.5px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.mi-name .jp{font-family:var(--jp);font-weight:600;font-size:12.5px;color:var(--gold-deep);margin-left:8px}
.mi-dots{flex:1;border-bottom:1px dotted rgba(13,28,45,.32);transform:translateY(-4px);min-width:24px}
.mi-desc{font-size:14px;color:var(--body);line-height:1.7;margin-top:5px;max-width:52ch}

.menu-note{background:var(--navy-900);color:var(--body-d);text-align:center;
  padding:clamp(72px,9vw,104px) 0;overflow:hidden}
.menu-note .lede{color:#fff;font-weight:600;font-size:clamp(20px,2.6vw,30px);max-width:26em;margin:0 auto 14px}
.menu-note .lede .em{color:var(--gold)}
.menu-note small{display:block;font-size:13px;letter-spacing:.06em;color:var(--body-d);margin-bottom:34px}

/* ---------- 13. HOW TO ENJOY ---------- */
.tipband{background:var(--paper);padding:var(--sec-pad) 0}
.tip{
  display:grid;grid-template-columns:1.05fr .8fr;align-items:center;
  gap:clamp(34px,5vw,76px);max-width:960px;margin:0 auto;
  background:var(--card);border:1px solid var(--hair-ink);border-radius:10px;
  padding:clamp(30px,4.5vw,60px);
  box-shadow:0 28px 60px -34px rgba(13,28,45,.28);
}
.tip .eyebrow{margin-bottom:16px}
.tip .lede{font-weight:600;font-size:clamp(19px,2.4vw,27px);line-height:1.55}
.tip-photo img{border-radius:12px;width:100%}

.ritual{position:relative;background:var(--navy-900);color:var(--body-d);
  padding:var(--sec-pad) 0;overflow:hidden}
.ritual::after{
  content:"";position:absolute;left:50%;top:130px;bottom:130px;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent);
  opacity:.4;
}
.ritual .wrap{position:relative;z-index:2}
.ritual-kicker{text-align:center;margin-bottom:clamp(60px,8vw,100px)}
.ritual-kicker .eyebrow{justify-content:center;margin-bottom:18px}
.ritual-kicker h2{font-family:var(--serif);font-weight:600;color:#F1F5F9;
  text-transform:uppercase;letter-spacing:.1em;font-size:clamp(18px,2.4vw,27px)}
.step{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,7vw,110px);align-items:center}
.step + .step{margin-top:clamp(80px,10vw,130px)}
.step::before{
  content:"";position:absolute;left:50%;top:58px;width:9px;height:9px;
  margin-left:-4.5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 7px rgba(225,188,98,.16);z-index:3;
}
.step-copy{max-width:420px}
.step--rev .step-copy{order:2;justify-self:start}
.step--rev .step-photo{order:1;justify-self:end}
.step:not(.step--rev) .step-copy{justify-self:end}
.step-photo{width:min(100%,400px);aspect-ratio:4/4.6}
.step-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px}
.step-word{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.2vw,26px);
  color:#fff;letter-spacing:.06em;padding-bottom:12px}
.step-num{font-family:var(--serif);font-weight:300;color:#F1F5F9;
  font-size:clamp(88px,10vw,136px);line-height:.78}
.step-copy p{font-size:clamp(15px,1.6vw,17.5px);max-width:36ch}
.step-copy .em{color:var(--gold)}

.how-close{background:var(--paper);text-align:center;padding:clamp(84px,10vw,120px) 0}
.how-close h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4vw,46px);
  color:var(--ink);line-height:1.16;margin-bottom:16px}
.how-close h2 em{color:var(--sea)}
.how-close p{color:var(--body);max-width:560px;margin:0 auto 36px}

/* ---------- 14. CONTACT ---------- */
.contact-body{background:var(--card);padding:var(--sec-pad) 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,100px);align-items:stretch}
.cb + .cb{margin-top:34px}
.cb h3{font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:15px;color:var(--sea);margin-bottom:8px}
.cb p{color:var(--body);max-width:44ch}
.cb .mail{color:var(--sea);font-weight:700;border-bottom:1px solid var(--hair)}
.cb .mail:hover{color:var(--gold-deep)}
.map{border:1px solid var(--hair);border-radius:10px;overflow:hidden;
  height:250px;margin:34px 0 12px;background:var(--navy-850)}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-link{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--sea)}
.map-link:hover{color:var(--gold-deep)}
.contact-photo{min-height:520px}
.contact-photo img{height:100%}

.join{background:var(--navy-900);text-align:center;color:var(--body-d);
  padding:clamp(80px,10vw,116px) 0;overflow:hidden}
.join h2{font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(26px,3.8vw,42px);line-height:1.2;margin-bottom:14px}
.join p{max-width:480px;margin:0 auto 36px}

/* ---------- 15. FOOTER ---------- */
.site-foot{background:var(--navy-950);color:#9FB0C2}
.foot-grid{
  display:grid;grid-template-columns:1.3fr .7fr 1fr 1fr;
  gap:clamp(36px,5vw,72px);padding:clamp(64px,8vw,92px) 0 56px;
}
.foot-brand img{margin-bottom:22px}
.foot-brand p{font-size:14px;line-height:1.8;max-width:26ch}
.foot-col h4{
  font-size:11px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;
}
.foot-col li{margin-bottom:10px}
.foot-col a{font-size:14px;color:#C9D5E2;transition:color .3s}
.foot-col a:hover{color:var(--gold)}
.foot-col p{font-size:14px;line-height:1.8}
.foot-bar{border-top:1px solid rgba(225,188,98,.2);padding:22px 0}
.foot-bar .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;
  font-size:12px;letter-spacing:.08em;color:#61748C}
.foot-bar .jp{font-family:var(--jp);letter-spacing:.3em;color:rgba(225,188,98,.75)}

/* ---------- 16. RESPONSIVE ---------- */
@media(max-width:920px){
  .intro-grid,.contact-grid{grid-template-columns:1fr}
  .contact-photo{min-height:360px}
  .sig-grid{grid-template-columns:1fr 1fr}
  .mi-grid{grid-template-columns:1fr;gap:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .hero-triptych{display:block}
  .panel{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
  .panel.is-on{opacity:1}
  .pillar,.pillar--flip{grid-template-columns:1fr}
  .pillar--flip .pillar-photo{order:0}
  .duo-grid{grid-template-columns:1fr;max-width:440px}
  .sig-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .tip{grid-template-columns:1fr}
  .tip-photo{order:-1}
  .ritual::after,.step::before{display:none}
  .step,.step--rev{grid-template-columns:1fr}
  .step:not(.step--rev) .step-copy{justify-self:start}
  .step--rev .step-copy{order:0}
  .step--rev .step-photo{justify-self:start}
  .step-photo{width:min(100%,440px)}
  .wm{font-size:clamp(72px,20vw,110px);right:2px;opacity:.8}
  .mcat-note{display:none}
  .foot-grid{grid-template-columns:1fr;gap:36px}
}

/* ---------- 17. 접근성: 모션 최소화 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .panel img{animation:none}
  .scroll-cue::after{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .frame img{transition:none}
  .nav,.nav a{transition:none}
}

/* ---------- 18. WP essentials ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--navy-950);padding:12px 20px;font-weight:700;
  letter-spacing:.1em;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.pagination .page-numbers,.nav-links .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 12px;border:1px solid var(--hair-ink);border-radius:4px;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);transition:.3s}
.pagination .page-numbers:hover,.nav-links .page-numbers:hover{border-color:var(--gold);color:var(--sea)}
.pagination .current,.nav-links .current{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

.mi-desc img{max-width:100%;height:auto;border-radius:8px}
.mi-desc h2,.mi-desc h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:1.4em 0 .5em;line-height:1.25}
.mi-desc h2{font-size:1.55em}.mi-desc h3{font-size:1.25em}
.mi-desc p{margin-bottom:1.1em}
.mi-desc a{color:var(--sea);border-bottom:1px solid var(--hair)}
.mi-desc blockquote{border-left:2px solid var(--gold);padding-left:20px;color:var(--ink);margin:1.4em 0}
.aligncenter{margin-inline:auto;display:block}
.alignright{float:right;margin:0 0 1em 1.4em}
.alignleft{float:left;margin:0 1.4em 1em 0}
.wp-caption-text{font-size:13px;color:var(--body);margin-top:6px;text-align:center}

/* ============================================================
   19. 1st Feedback 반영 — 추가 스타일
   ============================================================ */

/* [row3] 히어로 배경 더 어둡게 (텍스트 가독성) */
.hero-veil{
  /* 9차: 전면 딤 제거 — 영상은 밝게 두고 '글자 뒤'에만 소프트 오버레이.
     --hero-veil-o (커스터마이저) 로 전체 세기 조절. */
  background:
    radial-gradient(ellipse 74% 50% at 50% 50%,
      rgba(6,14,22,calc(.50 * var(--hero-veil-o,1))) 0%,
      rgba(6,14,22,calc(.24 * var(--hero-veil-o,1))) 46%,
      rgba(6,14,22,0) 74%),
    linear-gradient(180deg,
      rgba(6,14,22,calc(.34 * var(--hero-veil-o,1))) 0%,
      rgba(6,14,22,calc(.06 * var(--hero-veil-o,1))) 42%,
      rgba(6,14,22,calc(.44 * var(--hero-veil-o,1))) 100%);
}

/* [row4,5,8] TCE 한 줄 + 단어별 색 + 한자 하단 배치 + 자간 축소 */
.hero-tce{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(20px,4.5vw,72px);flex-wrap:nowrap;
  letter-spacing:.04em;              /* [row5] 기존 대비 자간 축소 */
}
.hero-tce .tce{display:flex;flex-direction:column;align-items:center;gap:.28em;line-height:1}
.hero-tce .en{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,3.4vw,44px);letter-spacing:.06em;white-space:nowrap;
}
.hero-tce .jp{
  font-family:var(--jp);font-weight:500;
  font-size:clamp(12px,1.4vw,17px);letter-spacing:.18em;
  color:var(--gold-soft);opacity:.92;
}
/* 단어별 색: Tradition(흰) · Choice(네이비 아님→가독 위해 밝은 네이비 톤) · Experience(골드) */
.hero-tce .tce--t .en{color:#FFFFFF}
.hero-tce .tce--c .en{color:#6C8BAE;text-shadow:0 2px 12px rgba(4,10,18,.5)} /* 6차: 밝은 사진 위 가독 — 흰·골드와 조화되는 스틸 네이비. 커스터마이저 'CHOICE word color'로 조절 */
.hero-tce .tce--e .en{color:var(--gold)}
@media(max-width:620px){
  .hero-tce{gap:16px}
  .hero-tce .en{font-size:clamp(17px,5.4vw,26px)}
}

/* [row12→2차] First/Then: 박스 전체가 확대되도록 변경 */
.duo-card{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.duo-card:hover{transform:scale(1.045);position:relative;z-index:3}

/* 한 줄 강제 유틸 (여러 row: 10,28,29,33,34) */
.nowrap{white-space:nowrap}
@media(max-width:640px){ .nowrap{white-space:normal} } /* 모바일에선 자연 줄바꿈 허용 */

/* [row29,33] 서브카피 폭 제한 해제하여 한 줄 유지 */
.ph-sub--wide{max-width:none}

/* [row35] How-to 클로징 색상 구분 유틸 */
.c-navy{color:var(--sea)}
.c-gold{color:var(--gold)}
.how-close .c-navy{color:var(--sea)}

/* [row28] About 인용구 한 줄 */
.bq-oneline{white-space:nowrap;max-width:none}
@media(max-width:820px){ .bq-oneline{white-space:normal} }

/* [row1] 헤더 로고(가로형 워드마크) — 더 크고 선명하게 */
.brand img{height:72px;width:auto}
.site-head.is-scrolled .brand img{height:52px}
@media(max-width:620px){
  .brand img{height:56px}
  .site-head.is-scrolled .brand img{height:44px}
}

/* [row26] About 상단 중앙 로고 = 풀 락업(세로형) */
.mark--full{width:clamp(150px,17vw,210px);height:auto}

/* [row27] Kaihodon 설명 블록 */
.about-kaiho{max-width:640px;margin:40px auto 0}
.about-kaiho p{color:var(--body);font-size:clamp(15px,1.5vw,17px);margin-bottom:18px}
.about-kaiho .about-kaiho-lead{color:var(--ink);font-weight:600}
.about-kaiho em{font-style:normal;color:var(--gold-deep);font-weight:700}

/* 푸터 로고 — Image #3(가로 워드마크) 원안 확정(3차 #2), 원본 비율 유지·왜곡 금지 */
.foot-brand img.foot-logo{width:clamp(150px,15vw,190px);height:auto;max-width:100%} /* 5차: 로고가 너무 크다 → 축소 */

/* [row31] Menu — View Full Menu 버튼 영역 */
.menu-cta{text-align:center;margin-top:clamp(48px,6vw,72px)}
.menu-cta-hint{display:block;margin-top:14px;font-size:12.5px;color:var(--body);letter-spacing:.02em}

/* [row19,40] Google Maps 아이콘 링크 */
.gmaps-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);transition:color .3s;
}
.gmaps-link:hover{color:var(--gold-soft)}
.gmaps-link .gmaps-ico{flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
/* 라이트 배경(Contact map-link)에서는 텍스트를 진한 색으로 */
.map-link.gmaps-link{color:var(--sea)}
.map-link.gmaps-link:hover{color:var(--gold-deep)}

/* [row23] 푸터 저작권 라인 내 JP · 링크 */
.foot-bar .wrap span:first-child .jp{color:rgba(225,188,98,.85);letter-spacing:.14em;margin:0 2px}
.foot-bar a{color:var(--gold-soft);border-bottom:1px solid rgba(225,188,98,.35);transition:color .3s}
.foot-bar a:hover{color:var(--gold)}

/* 모바일: 한 줄 강제는 데스크톱 한정 (2차 row7/11/15 — "웹페이지 사이징 문제 시 알려달라" 대응) */
@media(max-width:760px){
  .hero-sub{white-space:normal;font-size:14.5px;max-width:520px}
}

/* ============================================================
   20. 3차(Final) 피드백 반영
   ============================================================ */

/* [3차 #12] 사진 hover: 돋보기 커서 + 클릭 시 확대(라이트박스) */
.duo-card .frame{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(8,18,29,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  cursor:zoom-out;animation:lbIn .25s ease;
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{max-width:92vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
body.lb-open{overflow:hidden}

/* 구글맵 핀(제공 이미지) 사이즈 */
.gmaps-ico{width:auto;height:20px;display:inline-block}

/* 캡션 한 줄: 모바일은 자연 줄바꿈 */
@media(max-width:640px){
  .duo-card figcaption p{white-space:normal;font-size:14px}
}

/* [4차] 푸터 Google Maps 링크: 위 주소 텍스트와 동일 사이즈 (아이콘·폰트) */
.foot-col .gmaps-link{font-size:14px;letter-spacing:.14em}
.foot-col .gmaps-link .gmaps-ico{height:22px}

/* [4차] 푸터 태그라인: "Authentic Kaisendon from Shibuya, Tokyo" 한 줄 */
.foot-brand p{white-space:nowrap;max-width:none}
@media(max-width:920px){
  .foot-brand p{white-space:normal;max-width:30ch}
}

/* [6차] 푸터 정렬 — 로고와 각 열 제목(PAGES/VISIT/ENQUIRIES)이 같은 헤더 밴드에 앉도록 */
.foot-grid{align-items:start}
.foot-col h4{height:32px;display:flex;align-items:center;margin:0 0 20px}
.foot-brand img.foot-logo{height:32px;width:auto;margin:0 0 20px}
.foot-brand p{font-size:14px;line-height:1.75}
.foot-col p{line-height:1.75}
.foot-col li{margin-bottom:11px}
.foot-col .gmaps-link{margin-top:10px;font-size:14px;letter-spacing:.14em}
.foot-col .gmaps-link .gmaps-ico{height:17px} /* 6차: 핀이 커 보임 → 축소 */
@media(max-width:760px){
  .foot-col h4{height:auto}
  .foot-brand img.foot-logo{height:28px;margin-bottom:16px}
}

/* ============================================================
   21. 히어로 영상 트립틱 (7차) — Rice · Kaiho Don · Ochazuke
   ============================================================ */
.panel .hero-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:brightness(var(--hero-vid-b,1)) saturate(1.02); /* 9차: 딤 해제(원본 밝기) — 커스터마이저에서 조절 */
}
.panel .hero-vid-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(var(--hero-vid-b,1)) saturate(1.02);z-index:-1; /* 영상 로드 전/미지원 시 */
}
.panel .hero-vid{animation:none} /* 켄번즈 제외 — 영상 자체 모션 사용 */

/* 모션 최소화 설정 시 영상 정지 → 포스터만 */
@media(prefers-reduced-motion:reduce){
  .panel .hero-vid{display:none}
  .panel .hero-vid-fallback{z-index:0}
}

/* [9차] 오버레이를 얇게 한 만큼 히어로 문구에 로컬 가독 보정 */
.hero-kicker{text-shadow:0 1px 10px rgba(4,10,18,.75)}
.hero-tce .en{text-shadow:0 2px 14px rgba(4,10,18,.7),0 0 34px rgba(4,10,18,.45)}
.hero-tce .jp{text-shadow:0 1px 10px rgba(4,10,18,.8)}
.hero-sub{text-shadow:0 1px 12px rgba(4,10,18,.8)}
.hero-cta .btn,.hero-cta .more{text-shadow:0 1px 8px rgba(4,10,18,.6)}
.scroll-cue{text-shadow:0 1px 8px rgba(4,10,18,.7)}