/* =========================================================================
   BAR ACTX — style.css   v5.0  [ SEOUL GIRLY / 日本語主体 ]
   トークンは tokens.css。ここでは生の色値を書かない(var() のみ)。
   発光の宣言は .lit-1 / .lit-2 / .lit__on の3本だけ。
   セクションは .t-dark / .t-light が意味論トークンを差し替える。
   v5 の方針: 細かい英字ラベルを全廃し、大見出し(英字)+ハングル+日本語本文で構成する。
   ========================================================================= */

/* ===== 1. リセット ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--plum-900);
  color: var(--d-mid);
  font-family: var(--font-jp);
  font-weight: var(--w-base);
  font-size: var(--t-body);
  line-height: var(--lh-jp);
  letter-spacing: var(--tr-jp);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p, h1, h2, h3, h4, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
iframe { border: 0; display: block; }
summary::-webkit-details-marker { display: none; }

/* ===== 2. UI 語彙 ===== */

/* --- 2-1. 発光。宣言はこの3本のみ。白を芯に含む柔らかい光 --- */
.lit-1  { text-shadow: var(--glow-1); }
.lit-2  { text-shadow: var(--glow-2); }
.lit__on{
  text-shadow: var(--glow-3);
  position: absolute; inset: 0; color: inherit;
  opacity: 0; transition: opacity var(--d-4) var(--ease-out);
  pointer-events: none;
}
.is-lit .lit__on{ opacity: 1; }
.lit--rose{ --glow-1: var(--glow-1-rose); --glow-2: var(--glow-2-rose); --glow-3: var(--glow-3-rose); color: var(--neon-rose); }
.lit--ice { --glow-1: var(--glow-1-ice);  --glow-2: var(--glow-2-ice);  --glow-3: var(--glow-3-ice);  color: var(--neon-ice); }

/* --- 2-2. ボタン --- */
.act{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-block-size: 54px; padding-inline: 26px;
  border: 1px solid var(--rule-ui); border-radius: var(--r-md);
  background: var(--veil-w-04);
  font-family: var(--font-jp); font-weight: var(--w-mid);
  font-size: var(--t-sm); letter-spacing: var(--tr-jp);
  color: var(--fg); text-decoration: none;
  transition: background var(--d-2) var(--ease-out),
              border-color var(--d-2) var(--ease-out),
              box-shadow var(--d-2) var(--ease-out),
              transform var(--d-2) var(--ease-out);
}
.t-light .act{ background: var(--veil-w-55); }
.act--lit{ border-color: var(--accent-ink); }
.act:active{ transform: translateY(1px); }

/* --- 2-3. 矢印 --- */
.arw{
  position: relative; display: inline-block;
  inline-size: 20px; block-size: 1px; background: currentColor; flex: none;
  transform-origin: left; transition: transform var(--d-2) var(--ease-out);
  opacity: .85;
}
.arw::after{
  content: ""; position: absolute; right: 0; top: 50%;
  inline-size: 6px; block-size: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg); transform-origin: 100% 0;
}

/* --- 2-4. 罫線・小物 --- */
.rule{ block-size: 1px; background: var(--rule-2); border: 0; margin: 0; }
.vr{
  display: inline-block; inline-size: 1px; block-size: 9px;
  background: var(--rule-2); margin-inline: var(--s-3); vertical-align: -1px;
}
.chip{
  display: inline-block; inline-size: 6px; block-size: 6px; border-radius: var(--r-pill);
  margin-inline-end: var(--s-2); vertical-align: 1px; flex: none;
}
.chip--mint{ background: var(--neon-mint); }
.num{
  font-family: var(--font-en); font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--w-mid);
}

/* --- 2-5. タップ領域 / フォーカス --- */
/* タップ領域の下限。:where() で詳細度0にし、コンポーネント側の指定を潰さない。
   (素の a:not(.skip) は詳細度 0,1,1 で .veil__a 等に勝ってしまい、
    66px の設計値が 44px に縮む事故を起こしていた) */
:where(a:not(.skip), button, summary){
  display: inline-flex; align-items: center; min-block-size: var(--tap);
}
:focus-visible{ outline: 2px solid var(--neon-lav); outline-offset: 3px; transition: none; }
.t-light :focus-visible{ outline-color: var(--lav-ink); }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip{
  position: absolute; left: -999px; top: var(--s-2); z-index: var(--z-cursor);
  background: var(--milk); color: var(--l-hi); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5); text-decoration: none;
}
.skip:focus{ left: var(--s-4); }
body.is-menu-open{ overflow: hidden; touch-action: none; }

/* ===== 3. 共通装置 ===== */
.shell{
  max-inline-size: var(--shell); margin-inline: auto;
  padding-inline: var(--pad-x); position: relative;
}

.ambient{ position: fixed; inset: 0; z-index: var(--z-under); pointer-events: none; }
.ambient__grain{
  position: absolute; inset: 0; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient__bloom{
  position: absolute; inset: 0; opacity: .6;
  transition: opacity var(--d-house) var(--ease-out);
  background:
    radial-gradient(48% 32% at 86% 4%,  var(--bloom-rose), transparent 70%),
    radial-gradient(42% 28% at 6% 44%,  var(--bloom-lav),  transparent 72%),
    radial-gradient(38% 26% at 92% 78%, var(--bloom-ice),  transparent 74%);
}
.house-2 .ambient__bloom{ opacity: .76; }
.house-3 .ambient__bloom{ opacity: .9; }
.house-4 .ambient__bloom{ opacity: 1; }

/* 光の粒。四芒星 */
.sparkle{
  position: absolute; pointer-events: none; z-index: var(--z-base);
  inline-size: 16px; block-size: 16px; opacity: .75;
  background: currentColor;
  -webkit-mask-image: radial-gradient(closest-side at 50% 0%, var(--mask-on) 0, transparent 100%),
                      radial-gradient(closest-side at 50% 100%, var(--mask-on) 0, transparent 100%),
                      radial-gradient(closest-side at 0% 50%, var(--mask-on) 0, transparent 100%),
                      radial-gradient(closest-side at 100% 50%, var(--mask-on) 0, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 0%, var(--mask-on) 0, transparent 100%),
                      radial-gradient(closest-side at 50% 100%, var(--mask-on) 0, transparent 100%),
                      radial-gradient(closest-side at 0% 50%, var(--mask-on) 0, transparent 100%),
                      radial-gradient(closest-side at 100% 50%, var(--mask-on) 0, transparent 100%);
  -webkit-mask-size: 100% 52%, 100% 52%, 52% 100%, 52% 100%;
          mask-size: 100% 52%, 100% 52%, 52% 100%, 52% 100%;
  -webkit-mask-position: top, bottom, left, right;
          mask-position: top, bottom, left, right;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity var(--d-5) var(--ease-out);
}
.js .sparkle{ opacity: 0; }
.js .is-lit .sparkle{ opacity: .75; }
.sparkle--sm{ inline-size: 9px; block-size: 9px; }
.sparkle--rose{ color: var(--neon-rose); }
.sparkle--ice { color: var(--neon-ice); }
.sparkle--lav { color: var(--neon-lav); }
.t-light .sparkle--rose{ color: var(--rose-ink); }
.t-light .sparkle--lav { color: var(--lav-ink); }
.sparkle--p1{ top: 22%; right: 14%; }
.sparkle--p2{ top: 34%; right: 26%; }
.sparkle--p3{ top: 12%; right: 10%; }
.sparkle--p4{ top: 8%;  right: 8%;  }
.sparkle--p5{ top: 18%; left: 12%;  }
.sparkle--p6{ top: 14%; right: 12%; }

/* セクションの器 */
.sec{ position: relative; padding-block: var(--sec-y); overflow: clip; }
.sec__head{ display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4); margin-block-end: var(--s-10); }
.sec__h{
  font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--tr-h2);
  color: var(--fg); overflow-wrap: anywhere; min-inline-size: 0;
}
.sec__h--x{ font-size: var(--t-h2x); letter-spacing: var(--tr-h1); }
.sec__kr{
  font-family: var(--font-kr); font-weight: var(--w-thin); font-size: var(--t-kr-h);
  line-height: var(--lh-kr); letter-spacing: var(--tr-kr); color: var(--accent-ink);
}
.sec__ghost{
  position: absolute; inset-block-start: calc(var(--sec-y) * .45);
  inset-inline-start: calc(var(--pad-x) * -.15);
  font-family: var(--font-kr); font-weight: var(--w-thin);
  font-size: 22vw; line-height: .95; letter-spacing: var(--tr-kr);
  color: var(--fg); opacity: 0;
  pointer-events: none; white-space: nowrap; z-index: var(--z-under);
  transition: opacity var(--d-5) var(--ease-out);
}
.is-lit .sec__ghost{ opacity: .05; }

/* ===== 4. 上部バー / ナビ ===== */
.bar{
  position: fixed; inset-inline: 0; inset-block-start: 0; z-index: var(--z-sticky);
  block-size: calc(60px + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--pad-x); padding-block-start: env(safe-area-inset-top);
  color: var(--d-hi);
}
.bar::after{
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
  block-size: 140%; z-index: var(--z-under); pointer-events: none;
  background: linear-gradient(180deg, var(--scrim-1), transparent);
  transition: opacity var(--d-2) var(--ease-out);
}
.bar::before{
  content: ""; position: absolute; inset: 0; z-index: var(--z-under);
  background: var(--plum-950); opacity: 0;
  border-block-end: 1px solid var(--rule-d);
  transition: opacity var(--d-2) var(--ease-out);
}
.is-scrolled .bar::before{ opacity: .92; }
.is-scrolled .bar::after{ opacity: 0; }
.bar__brand{
  font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: 14px; letter-spacing: var(--tr-label); color: var(--d-hi);
  text-decoration: none; white-space: nowrap;
}
.nav{ display: none; align-items: center; gap: 28px; }
.nav__a{
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  text-decoration: none; position: relative; white-space: nowrap; padding-block: 6px;
}
.nav__en{
  font-family: var(--font-en); font-weight: var(--w-base);
  font-size: 13.5px; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--d-mid); transition: color var(--d-2) var(--ease-out);
}
.nav__a::after{
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px;
  border-radius: var(--r-pill);
  background: var(--neon-rose); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-2) var(--ease-out);
}
.nav__a--ig .nav__en{ color: var(--neon-rose); }
.bar__burger{
  inline-size: 44px; block-size: 44px; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--d-hi);
  padding: 0; margin-inline-end: -10px;
}
.bar__burger-box{ display: grid; gap: 5px; inline-size: 18px; }
.bar__burger-box i{ display: block; block-size: 1px; border-radius: var(--r-pill); background: currentColor; }
@media (min-width: 60rem){
  .bar{ block-size: 76px; }
  .nav{ display: flex; }
  .bar__burger{ display: none; }
}

/* ===== 5. 全画面メニュー ===== */
.veil{
  position: fixed; inset: 0; z-index: var(--z-veil);
  display: grid; grid-template-rows: 1fr auto; align-content: center;
  padding: calc(env(safe-area-inset-top) + 76px) var(--pad-x) calc(env(safe-area-inset-bottom) + var(--s-8));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: none; color: var(--d-hi);
  background:
    radial-gradient(80% 50% at 50% 0%, var(--bloom-rose), transparent 72%),
    radial-gradient(70% 44% at 10% 100%, var(--bloom-lav), transparent 74%),
    var(--plum-950);
}
.veil::-webkit-scrollbar{ display: none; }
.veil[hidden]{ display: none; }
.veil__mark{
  position: absolute; inset-block-end: -2vw; inset-inline-start: -8vw;
  font-family: var(--font-kr); font-weight: var(--w-thin); font-size: 40vw; line-height: .8;
  color: var(--d-hi); opacity: .05;
  pointer-events: none; z-index: var(--z-under); white-space: nowrap;
}
.veil__close{
  position: absolute; inset-block-start: calc(env(safe-area-inset-top) + 8px);
  inset-inline-end: calc(var(--pad-x) - 10px);
  inline-size: 44px; block-size: 44px; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--d-hi); padding: 0;
}
.veil__close span{ position: relative; display: block; inline-size: 18px; block-size: 18px; }
.veil__close span::before, .veil__close span::after{
  content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0;
  block-size: 1px; border-radius: var(--r-pill); background: currentColor;
}
.veil__close span::before{ transform: rotate(45deg); }
.veil__close span::after { transform: rotate(-45deg); }
.veil__nav{ display: grid; align-content: center; }
.veil__a{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--s-4); min-block-size: 66px; text-decoration: none;
  border-block-start: 1px solid var(--rule-d);
}
.js .veil__a{ opacity: 0; transform: translateY(12px); }
.veil__a:last-of-type{ border-block-end: 1px solid var(--rule-d); }
.veil:not([hidden]) .veil__a{
  animation: veil-in 460ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 46ms);
}
@keyframes veil-in{ to{ opacity: 1; transform: translateY(0); } }
.veil__en{
  font-family: var(--font-en); font-weight: var(--w-thin);
  font-size: clamp(1.9rem, 8.4vw, 2.4rem); letter-spacing: var(--tr-h2);
  color: var(--d-hi); line-height: 1.2;
}
.veil__kr{
  font-family: var(--font-kr); font-weight: var(--w-thin); font-size: 13px;
  letter-spacing: var(--tr-kr); color: var(--neon-rose); opacity: .85;
}
.veil__foot{ display: grid; gap: var(--s-3); }
.veil__ig{
  display: inline-flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: 15px; letter-spacing: var(--tr-label); text-decoration: none;
  min-block-size: 52px; color: var(--neon-ice);
}
.veil__at{
  font-family: var(--font-en); font-weight: var(--w-base);
  font-size: 12.5px; letter-spacing: var(--tr-label); color: var(--d-low);
}
.veil__info{ font-size: var(--t-xs); color: var(--d-faint); line-height: 1.9; }
@media (max-height: 640px){
  .veil__a{ min-block-size: 54px; }
  .veil__en{ font-size: 1.6rem; }
}

/* ===== 6. HERO ===== */
.hero{
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: 88vh; min-block-size: 88svh;
  display: grid; align-content: end;
  padding: 0 var(--pad-x) calc(env(safe-area-inset-bottom) + 44px);
  color: var(--d-hi);
  --fg: var(--d-hi); --fg-2: var(--d-mid); --fg-3: var(--d-low); --fg-4: var(--d-faint);
  --rule-2: var(--rule-d-2); --accent-ink: var(--neon-rose);
}
.hero__pic{ position: absolute; inset: 0; z-index: var(--z-under); display: block; }
.hero__img{
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: calc(.62 + .2 * var(--hero-t));
  transform: scale(calc(1.05 - .05 * var(--hero-t)));
}
.hero__scrim{
  position: absolute; inset: 0; z-index: var(--z-under); pointer-events: none;
  background:
    radial-gradient(110% 52% at var(--wing-x) var(--wing-y), var(--veil-w-16), transparent 62%),
    radial-gradient(120% 60% at 18% 90%, var(--bloom-lav), transparent 70%),
    linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 74%, var(--plum-900) 100%);
}
.hero__coord{ display: none; }
.hero__body{ position: relative; z-index: var(--z-base); }
.wm{ position: relative; }
.wm__bar{
  display: block; font-family: var(--font-en); font-weight: var(--w-base);
  font-size: 13px; letter-spacing: var(--tr-label);
  color: var(--d-low); margin-block-end: var(--s-2);
}
.wm__block{ position: relative; display: block; }
.wm__main{
  display: block; font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: var(--t-mark); line-height: var(--lh-mark);
  letter-spacing: var(--tr-mark); color: var(--d-hi); white-space: nowrap;
}
.wm__x{ position: relative; display: inline-block; color: var(--neon-rose); }
.wm__echo{
  display: block; font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: var(--t-mark); line-height: var(--lh-mark);
  letter-spacing: var(--tr-mark); color: var(--d-hi); white-space: nowrap;
  transform: scaleY(-1); opacity: .07; margin-block-start: -.14em;
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-on), transparent 44%);
          mask-image: linear-gradient(to bottom, var(--mask-on), transparent 44%);
}
@media (max-height: 700px){ .wm__echo{ display: none; } }
.wm__kr{
  margin-block-start: var(--s-3); font-family: var(--font-kr); font-weight: var(--w-thin);
  font-size: var(--t-kr-lock); line-height: var(--lh-kr);
  letter-spacing: var(--tr-kr); color: var(--d-hi); opacity: .92;
}
.hero__jp{
  margin-block-start: var(--s-4); font-size: var(--t-body); color: var(--d-mid);
  letter-spacing: var(--tr-jp); line-height: 1.7;
}
.hero__open{
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-block-start: var(--s-6); flex-wrap: wrap;
}
.hero__t{ font-size: 26px; font-weight: var(--w-mid); letter-spacing: var(--tr-h3); }
.hero__last{ font-size: 17px; color: var(--neon-ice); font-family: var(--font-en); letter-spacing: var(--tr-label); }
.hero__jp-open{ font-size: var(--t-sm); color: var(--d-mid); }
.hero__cue{
  position: relative; z-index: var(--z-base);
  display: flex; align-items: center; margin-block-start: var(--s-8);
}
.hero__cue-line{
  position: relative; display: block; inline-size: 1px; block-size: 32px;
  border-radius: var(--r-pill);
  background: linear-gradient(to bottom, var(--rule-d-ui), transparent); overflow: hidden;
}
.hero__cue-line::after{
  content: ""; position: absolute; inset-inline: 0; block-size: 7px; border-radius: var(--r-pill);
  background: var(--neon-rose); animation: cue 2.6s ease-in-out 5;
}
@keyframes cue{ from{ transform: translateY(-9px); opacity: 0; } 34%{ opacity: .9; } to{ transform: translateY(32px); opacity: 0; } }

@media (min-width: 60rem){
  .hero{ min-block-size: 100vh; min-block-size: 100svh; align-content: center; padding-block-end: 0; }
  .hero__body{ max-inline-size: var(--shell); margin-inline: auto; inline-size: 100%; transform: translateY(3vh); }
  .hero__coord{
    display: block; position: absolute; z-index: var(--z-base);
    inset-block-start: 116px; inset-inline-end: var(--pad-x);
    font-size: 19px; color: var(--neon-rose); opacity: .85;
    letter-spacing: var(--tr-kr); font-family: var(--font-kr); font-weight: var(--w-thin);
  }
  .hero__cue{ position: absolute; inset-block-end: 76px; inset-inline-end: var(--pad-x); margin: 0; }
  .hero__cue-line{ block-size: 46px; }
}

/* ===== 7. NEWS ===== */
.sec--news{ padding-block: var(--s-18) var(--s-24); }
.nw{ display: grid; gap: var(--s-4); }
.nw__a{
  display: grid; gap: var(--s-3); align-content: center;
  min-block-size: var(--tap-row); padding: var(--s-5);
  border-radius: var(--r-md); text-decoration: none;
  background: var(--veil-w-50); border: 1px solid var(--rule);
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.js .nw__a{ opacity: 0; }
.is-lit .nw__a{ animation: soft-in 560ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes soft-in{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } }
.nw__meta{ display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.nw__date{ font-size: 12.5px; font-weight: var(--w-mid); color: var(--accent-2); letter-spacing: .06em; }
.nw__tag{
  display: inline-flex; align-items: center;
  padding: 3px 12px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: var(--w-mid); letter-spacing: .08em;
}
.nw__tag--event  { color: var(--rose-ink); background: var(--tint-rose-16); }
.nw__tag--info   { color: var(--l-mid);    background: var(--tint-ink-08); }
.nw__tag--new    { color: var(--lav-ink);  background: var(--tint-lav-16); }
.nw__tag--recruit{ color: var(--rose-ink); background: var(--tint-warm-20); }
.nw__tag--special{ color: var(--lav-ink);  background: var(--tint-lav-12); }
.nw__t{ font-size: var(--t-body); color: var(--fg); line-height: 1.8; }
.nw__a .arw{ color: var(--accent-ink); justify-self: start; }
.nw__arch{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-block-size: 56px; margin-block-start: var(--s-4);
  text-decoration: none; color: var(--fg-2);
  border-block-start: 1px solid var(--rule-2); padding-block-start: var(--s-4);
}
.nw__arch-t{ font-size: var(--t-sm); }
.nw__arch .arw{ color: var(--accent-ink); }

@media (min-width: 60rem){
  .sec--news .shell{ display: grid; grid-template-columns: 320px 1fr; column-gap: var(--s-14); align-items: start; }
  .sec--news .sec__head{ grid-column: 1; position: sticky; inset-block-start: 128px; display: block; margin-block-end: 0; }
  .sec--news .sec__kr{ display: block; margin-block-start: var(--s-3); }
  .nw, .nw__arch{ grid-column: 2; }
  .nw__a{ grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-6); padding: var(--s-6); }
  .nw__meta, .nw__t{ grid-column: 1; }
  .nw__a .arw{ grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}

/* ===== 8. INSTAGRAM(NEWS直後) ===== */
.ig-sec{ position: relative; padding-block: var(--s-18); overflow: clip; }
.ig-sec__a{
  display: grid; justify-items: center; gap: var(--s-4);
  text-decoration: none; text-align: center; padding-block: var(--s-4);
}
.ig-sec__tile{
  display: grid; place-items: center;
  inline-size: 92px; block-size: 92px; border-radius: 26px;
  background: linear-gradient(140deg, var(--rose-ink), var(--lav-ink));
  color: var(--milk); box-shadow: var(--lift-2);
  transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.ig-sec__tile svg{ inline-size: 48px; block-size: 48px; }
.ig-sec__at{
  font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: 21px; letter-spacing: var(--tr-label); color: var(--fg);
}
.ig-sec__note{ font-size: var(--t-sm); color: var(--fg-2); max-inline-size: 22em; }
@media (min-width: 60rem){
  .ig-sec__tile{ inline-size: 104px; block-size: 104px; }
  .ig-sec__tile svg{ inline-size: 54px; block-size: 54px; }
}

/* ===== 9. MENU ===== */
.mn__sign{
  position: relative; isolation: isolate;
  border: 1px solid var(--rule-d-2); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--tint-rose-10), transparent 66%),
    var(--plum-850);
  box-shadow: var(--lift-2), var(--halo-rose);
  padding: var(--s-8) var(--s-5);
}
.mn__big{
  font-size: clamp(24px, 6.6vw, 32px); line-height: 1.5; letter-spacing: .04em;
  font-weight: var(--w-mid); color: var(--d-hi);
}
.mn__kr{
  font-family: var(--font-kr); font-weight: var(--w-thin); font-size: 13px;
  letter-spacing: var(--tr-kr); color: var(--neon-rose); opacity: .9;
  margin-inline-start: var(--s-3);
}
.mn__big2{
  display: block; font-size: var(--t-sm); font-weight: var(--w-base);
  color: var(--d-mid); margin-block-start: var(--s-2); letter-spacing: var(--tr-jp);
}

/* 2択を対等に横並びにする */
.mn__two{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3); margin-block-start: var(--s-6);
  padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule-d);
}
.mn__plan{
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-4) var(--s-2); border-radius: var(--r-md);
  background: var(--veil-w-025); border: 1px solid var(--rule-d);
  text-align: center;
}
.mn__plan-n{ font-size: var(--t-xs); color: var(--d-mid); white-space: nowrap; }
.mn__plan-p{
  position: relative; display: inline-block; justify-self: center;
  font-size: clamp(23px, 7.4vw, 38px); line-height: 1.15;
  font-weight: var(--w-mid); letter-spacing: .01em; color: var(--neon-rose);
}
.mn__note{ margin-block-start: var(--s-5); font-size: var(--t-xs); color: var(--d-low); line-height: 1.9; }

.mn__ext{ margin-block-start: var(--s-12); }
.mn__gh{ margin-block-end: var(--s-4); display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.mn__gh-jp{ font-size: var(--t-lead); font-weight: var(--w-mid); color: var(--fg); }
.mn__gh-sub{ font-size: var(--t-xs); color: var(--fg-3); }
.mn__folds{ margin-block-start: var(--s-12); }
.mn__fold{
  border: 1px solid var(--rule); border-radius: var(--r-md);
  margin-block-end: var(--s-3); overflow: hidden;
  background: var(--veil-w-025);
}
.mn__sum{
  min-block-size: 60px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-inline: var(--s-5);
}
.mn__sum-jp{ font-size: var(--t-sm); font-weight: var(--w-mid); color: var(--fg); }
.mn__best{
  display: inline-flex; align-items: center;
  margin-inline-start: var(--s-2);
  padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--tint-rose-16); color: var(--neon-rose);
  font-size: 11px; font-weight: var(--w-mid); letter-spacing: .04em;
}
.mn__pm{ position: relative; inline-size: 18px; block-size: 18px; margin-inline-start: auto; flex: none; }
.mn__pm::before, .mn__pm::after{
  content: ""; position: absolute; inset: 0; margin: auto; border-radius: var(--r-pill);
  background: var(--accent-ink); transition: transform var(--d-2) var(--ease-out);
}
.mn__pm::before{ inline-size: 11px; block-size: 1px; }
.mn__pm::after { inline-size: 1px; block-size: 11px; }
.mn__fold[open] .mn__pm::after{ transform: rotate(90deg); }
.mn__fold--gold .mn__pm::before, .mn__fold--gold .mn__pm::after{ background: var(--neon-lav); }
.mn__body{ padding: 0 var(--s-5) var(--s-6); }
.mn__fine{ margin-block-start: var(--s-4); font-size: var(--t-xs); color: var(--fg-4); }

.pl{ display: grid; gap: var(--s-4); }
.pl li{ display: grid; grid-template-columns: 1fr auto 84px; align-items: baseline; gap: var(--s-2); }
.pl__n{ font-size: var(--t-sm); color: var(--fg-2); }
.pl__kr{ display: inline-flex; align-items: center; gap: var(--s-1); margin-inline-start: var(--s-2); font-family: var(--font-kr); font-weight: var(--w-thin); font-size: 11.5px; letter-spacing: var(--tr-kr); color: var(--accent-ink); }
.pl__d{
  display: block; block-size: 1px;
  background: radial-gradient(circle, var(--rule-2) 1px, transparent 1px);
  background-size: 5px 1px;
}
.pl__p{ text-align: right; font-size: var(--t-sm); color: var(--fg); letter-spacing: .03em; }
.pl--gold .pl__p{ color: var(--neon-lav); }

.mn__cols{ display: grid; gap: var(--s-8); }
.mn__ch{
  font-size: var(--t-sm); font-weight: var(--w-mid); color: var(--fg);
  margin-block-end: var(--s-3); padding-block-end: var(--s-2);
  border-block-end: 1px solid var(--rule);
}
.mn__c ul{ display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); color: var(--fg-2); }
.mn__notes{ margin-block-start: var(--s-10); display: grid; gap: var(--s-2); }
.mn__notes li{ position: relative; padding-inline-start: var(--s-4); font-size: var(--t-xs); color: var(--fg-4); line-height: 1.8; }
.mn__notes li::before{
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .85em;
  inline-size: 3px; block-size: 3px; border-radius: var(--r-pill); background: var(--accent-ink); opacity: .7;
}

@media (min-width: 40rem){ .mn__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem){
  .mn__sign{ padding: var(--s-12) var(--s-10); }
  .mn__two{ gap: var(--s-6); }
  .mn__cols{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-12); }
}

/* ===== 10. GALLERY(元の3枚をそのまま並べる) ===== */
.gl{ display: grid; gap: var(--s-6); }
.gl__f picture{ display: block; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--lift-1); }
.gl__f img{
  inline-size: 100%; block-size: auto;
  transition: transform var(--d-5) var(--ease-soft), opacity var(--d-5) var(--ease-soft);
}
.js .gl__f img{ transform: scale(1.06); opacity: 0; }
.is-lit .gl__f img{ transform: scale(1); opacity: 1; }
@media (min-width: 60rem){
  .gl{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== 11. ACCESS(店名/営業時間/住所/アクセス) ===== */
.ac{ display: grid; gap: var(--s-10); }
.ac__list{ display: grid; }
.ac__row{
  display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s-4);
  padding-block: var(--s-4); border-block-start: 1px solid var(--rule);
  align-items: baseline;
}
.ac__row:last-child{ border-block-end: 1px solid var(--rule); }
.ac__row dt{ font-size: var(--t-sm); color: var(--fg-3); }
.ac__row dd{ font-size: var(--t-body); color: var(--fg); line-height: 1.7; }
.ac__hours{ font-size: 22px; color: var(--neon-ice); letter-spacing: .02em; }
.ac .act{ margin-block-start: var(--s-6); }
.ac__map{ position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule-2); }
.ac__map iframe{
  inline-size: 100%; aspect-ratio: 4 / 3; max-block-size: 300px;
  filter: invert(.88) hue-rotate(200deg) saturate(.5) brightness(.95) contrast(.95);
}
@media (max-width: 59.99rem){ .ac__map iframe{ pointer-events: none; } }
@media (min-width: 60rem){
  .ac{ grid-template-columns: 1.05fr .95fr; column-gap: var(--s-14); align-items: start; }
  .ac__map iframe{ aspect-ratio: 3 / 2; max-block-size: 420px; }
}

/* ===== 12. RECRUIT ===== */
.rc__l{ margin-block-start: 0; display: grid; gap: var(--s-3); }
.rc__l li{
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); border-radius: var(--r-md);
  background: var(--veil-w-55); border: 1px solid var(--rule);
}
/* 人物シルエット。装飾なので aria-hidden、色は明地用の濃いローズ */
.rc__ic{
  display: grid; place-items: center; flex: none;
  inline-size: 40px; block-size: 40px; border-radius: var(--r-pill);
  background: var(--tint-rose-16); color: var(--rose-ink);
}
.rc__ic svg{ inline-size: 24px; block-size: 24px; }
.rc__jp{ font-size: var(--t-lead); font-weight: var(--w-mid); color: var(--fg); }
.rc__dm{ margin-block-start: var(--s-8); font-size: var(--t-sm); color: var(--fg-2); line-height: 1.9; }
/* 2つのボタンは常に横並び。幅を等分し、はみ出さないよう余白と字送りを詰める */
.rc__acts{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3); margin-block-start: var(--s-6);
}
.rc__acts .act{ padding-inline: var(--s-3); letter-spacing: .01em; text-align: center; }

/* ===== 13. FOOTER ===== */
.ft{ position: relative; overflow: clip; padding-block: var(--s-24) 0; color: var(--d-mid); }
.ft__mark{
  position: absolute; inset-block-end: 8px; inset-inline: 0; text-align: center;
  font-family: var(--font-kr); font-weight: var(--w-thin); font-size: clamp(3.5rem, 21vw, 14rem);
  line-height: .85; color: var(--d-hi); opacity: 0;
  pointer-events: none; z-index: var(--z-under); white-space: nowrap;
  transition: opacity 1200ms var(--ease-out);
}
.ft.is-lit .ft__mark{ opacity: .06; }
.ft .shell{ position: relative; z-index: var(--z-base); padding-block-end: var(--s-18); }
.ft__brand{
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: 20px; letter-spacing: var(--tr-label); color: var(--d-hi);
}
.ft__kr{ font-family: var(--font-kr); font-weight: var(--w-thin); font-size: 13px; letter-spacing: var(--tr-kr); color: var(--neon-rose); opacity: .9; }
.ft__hours{ margin-block-start: var(--s-2); font-size: var(--t-sm); color: var(--d-mid); }
.ft__addr{ margin-block-start: var(--s-2); font-size: var(--t-sm); color: var(--d-mid); }
.ft__ig{
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-block-size: 56px; text-decoration: none; color: var(--neon-rose);
  font-family: var(--font-en); font-weight: var(--w-mid);
  font-size: 17px; letter-spacing: var(--tr-label);
}
.ft__at{ position: relative; display: inline-block; }
.ig{ inline-size: 20px; block-size: 20px; flex: none; }
.ft .rule{ margin-block: var(--s-8); background: var(--rule-d); }
.ft__law{ margin-block-start: var(--s-5); font-size: var(--t-xs); color: var(--d-faint); }
.ft__c{ margin-block-start: var(--s-2); font-size: var(--t-xs); color: var(--d-faint); letter-spacing: var(--tr-label); }
.ft__check{
  block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--tint-rose-16) 22%, var(--tint-lav-16) 52%, var(--bloom-ice) 78%, transparent);
}

/* ===== 14. Instagram フローティング ===== */
.ig-fab{
  position: fixed; z-index: var(--z-sticky);
  inset-inline-end: var(--pad-x);
  inset-block-end: calc(env(safe-area-inset-bottom) + 20px);
  inline-size: 46px; block-size: 46px; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--veil-w-30); color: var(--plum-950);
  background: var(--tint-rose-90); box-shadow: var(--lift-2);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.is-fab .ig-fab{ opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (min-width: 60rem){ .ig-fab{ display: none; } }


/* ===== 16. 入場アニメーション ===== */
.js .sec__head, .js .mn__wrap, .js .mn__ext, .js .mn__folds, .js .mn__notes,
.js .ac, .js .rc__l, .js .rc__dm, .js .rc__acts,
.js .nw__arch, .js .ig-sec__a{
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out);
}
.is-lit .sec__head, .is-lit .mn__wrap, .is-lit .mn__ext, .is-lit .mn__folds,
.is-lit .mn__notes, .is-lit .ac, .is-lit .rc__l,
.is-lit .rc__dm, .is-lit .rc__acts, .is-lit .nw__arch, .is-lit .ig-sec__a{
  opacity: 1; transform: translateY(0);
}

.js .wm__block{ opacity: 0; transform: translateY(14px); }
.is-loaded .wm__block{ animation: mark-in 820ms var(--ease-out) 140ms forwards; }
@keyframes mark-in{ to{ opacity: 1; transform: translateY(0); } }
.js .wm__bar, .js .wm__kr, .js .hero__jp, .js .hero__open, .js .hero__cue, .js .hero__coord{
  opacity: 0; transform: translateY(8px);
}
.is-loaded .wm__bar, .is-loaded .wm__kr, .is-loaded .hero__jp,
.is-loaded .hero__open, .is-loaded .hero__cue, .is-loaded .hero__coord{
  animation: rise 460ms var(--ease-out) forwards;
}
.is-loaded .wm__bar { animation-delay: 160ms; }
.is-loaded .wm__kr  { animation-delay: 860ms; }
.is-loaded .hero__jp{ animation-delay: 920ms; }
.is-loaded .hero__open{ animation-delay: 1000ms; }
.is-loaded .hero__coord{ animation-delay: 1060ms; }
.is-loaded .hero__cue{ animation-delay: 1200ms; }
@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }

.js .hero .lit__on{ opacity: 0; }
.is-loaded .hero .lit__on{ animation: soft-on 900ms var(--ease-out) 720ms forwards; }
@keyframes soft-on{ from{ opacity: 0; } to{ opacity: 1; } }

/* ===== 17. hover(細いポインタのみ) ===== */
@media (hover: hover) and (pointer: fine){
  .nav__a:hover::after{ transform: scaleX(1); }
  .nav__a:hover .nav__en{ color: var(--d-hi); }
  .act:hover{
    background: var(--veil-w-12); border-color: var(--accent-ink);
    box-shadow: var(--halo-rose); transform: translateY(-2px);
  }
  .t-light .act:hover{ background: var(--veil-w-90); }
  .act:hover .arw{ transform: translateX(3px); }
  .nw__a:hover{ transform: translateY(-2px); box-shadow: var(--lift-1); }
  .nw__a:hover .arw, .nw__arch:hover .arw{ transform: translateX(4px); }
  .nw__a:hover .nw__t{ color: var(--accent-ink); }
  .ig-sec__a:hover .ig-sec__tile{ transform: translateY(-3px); box-shadow: var(--lift-2), var(--halo-rose); }
  .gl__f:hover img{ transform: scale(1.015); }
  .veil__a:hover .veil__en{ color: var(--neon-rose); }
  .ft__ig:hover{ color: var(--neon-ice); }
  .mn__sum:hover .mn__sum-jp{ color: var(--accent-ink); }
  .rc__l li:hover{ box-shadow: var(--lift-1); }
}

/* ===== 18. reduced motion(最後に書く) ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .hero__cue-line::after{ display: none; }
  .hero__img{ transform: none; opacity: .72; }
  .gl__f img{ transform: none; opacity: 1; }
  .wm__block{ transform: none; opacity: 1; }
  .nw__a{ opacity: 1; }
}