/* =====================================================
   SunSuBing — Production styles
   ===================================================== */

/* Reset stage wrapper for production: remove side-by-side layout */
.page{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  position: relative;
}
@media (min-width: 900px){
  .page{ padding: 40px 32px 80px; }
}

/* hide elements that are mockup-only — only the top-level mockup labels, not in-page .label classes */
.page > .label, .browser{ display:none !important; }
.frame{ box-shadow: 0 1px 0 rgba(61,86,121,.06), 0 30px 60px -30px rgba(61,86,121,.20); }

/* utility */
[hidden]{ display:none !important; }
a{ color:inherit; }

/* ====================================================== */

:root{
    /* ============ NEW BRAND PALETTE ============ */
    /* Brand cups colors */
    --pink:#FFC0BB;        /* soft pink */
    --pink-light:#FFD8D4;
    --pink-pale:#FFE9E5;
    --coral:#F28F8B;       /* coral */
    --coral-deep:#D9706B;
    --blue:#8CA5C4;        /* powder blue */
    --blue-light:#B8C7DC;
    --blue-pale:#D8E0EB;
    --navy:#3D5679;        /* deep navy — primary ink */
    --navy-deep:#2A3D5A;
    --navy-darker:#1E2C42;

    /* paper system (cool ivory pulled toward pink/blue rather than cream) */
    --bg:#F4E5E2;
    --paper:#FBEDEA;
    --paper-2:#F5DDD8;
    --ivory:#FFF6F4;

    /* text */
    --ink:var(--navy-darker);
    --ink-2:var(--navy-deep);
    --sub:#6B7E96;          /* dusty blue sub-text */
    --muted:#A89AA0;

    /* accent → coral replaces brass */
    --accent:var(--coral);
    --accent-deep:var(--coral-deep);
    --accent-soft:var(--pink);

    /* hairlines */
    --hairline:#EDC8C2;
    --hairline-2:#E0AFA7;
    --hairline-blue:#C8D2E0;

    --shadow-1: 0 1px 0 rgba(61,86,121,.08), 0 2px 4px rgba(61,86,121,.06);
    --shadow-2: 0 2px 0 rgba(61,86,121,.06), 0 30px 60px -20px rgba(61,86,121,.22), 0 12px 30px -12px rgba(61,86,121,.14);
    --shadow-frame: 0 1px 0 rgba(61,86,121,.06), 0 40px 80px -30px rgba(61,86,121,.32), 0 20px 40px -20px rgba(61,86,121,.22);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    background:#E8DDE5;
    font-family:'Outfit',sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  /* page-level paper grain texture */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.34  0 0 0 0 0.48  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity:.55; mix-blend-mode:multiply;
  }

  .stage{
    position:relative;
    display:flex; gap:54px;
    padding:64px 56px;
    width:1640px;
    background:
      radial-gradient(1100px 700px at 18% -10%, #FFE9E5 0%, transparent 55%),
      radial-gradient(900px 600px at 95% 95%, #C8D2E0 0%, transparent 55%),
      linear-gradient(180deg, #F4E5E2 0%, #E8DDE5 100%);
  }
  /* subtle vignette */
  .stage::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(61,86,121,.18) 100%);
  }

  .label{
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-weight:400;
    color:#5b4631;
    font-size:17px;
    letter-spacing:.02em;
    margin-bottom:18px;
    display:flex; align-items:baseline; gap:12px;
  }
  .label .num{
    font-family:'Fraunces',serif;
    font-style:normal; font-weight:500;
    font-size:11px; letter-spacing:.32em;
    color:var(--coral-deep);
    padding:4px 10px;
    border:1px solid var(--hairline-2);
    border-radius:99px;
    background:rgba(255,246,244,.55);
  }
  .label .ornament{color:var(--coral); font-size:14px}

  /* ==================================================================
     PAGE FRAME
     ================================================================== */
  .frame{
    background:var(--paper);
    border-radius:6px;
    box-shadow:var(--shadow-frame);
    overflow:hidden;
    border:1px solid #ECC0BA;
    position:relative;
  }
  /* soft inner page texture */
  .frame::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.56  0 0 0 0 0.55  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity:.6; mix-blend-mode:multiply;
  }
  .frame > *{position:relative; z-index:2}

  .frame .browser{
    height:36px; background:#F5DDD8; display:flex; align-items:center; gap:6px; padding:0 16px;
    border-bottom:1px solid #E0AFA7;
  }
  .browser .dot{width:9px;height:9px;border-radius:50%;background:#E0AFA7}
  .browser .dot:nth-child(2){background:#E5BAB2}
  .browser .dot:nth-child(3){background:#EBC4BD}
  .browser .url{
    margin-left:14px; font-family:'Fraunces',serif; font-style:italic; font-size:11px;
    color:var(--coral-deep);
    background:#FBEDEA; padding:4px 14px; border-radius:99px; border:1px solid #E0AFA7;
    letter-spacing:.05em;
  }

  .col-a{width:740px}
  .col-b{width:740px; display:flex; flex-direction:column; gap:36px}

  /* ==================================================================
     NAV
     ================================================================== */
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 38px 22px;
    border-bottom:1px solid var(--hairline);
    background:linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%);
  }
  .logo{
    font-family:'Fraunces',serif;
    font-weight:500; font-size:26px; letter-spacing:-.015em;
    display:flex; align-items:baseline; gap:11px;
    color:var(--navy);
  }
  .logo .ko{
    font-family:'Noto Serif KR',serif; font-weight:500;
    font-size:18px; color:var(--coral); letter-spacing:.04em;
  }
  .logo .star{
    color:var(--coral); font-size:11px; margin-right:2px;
  }
  .nav-links{display:flex; gap:24px; align-items:center}
  .nav-links a{
    font-family:'Fraunces',serif; font-size:13px; color:var(--ink);
    text-decoration:none; letter-spacing:.04em; font-weight:400;
    position:relative; padding-bottom:3px;
  }
  .nav-links a.active{color:var(--coral-deep)}
  .nav-links a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--coral);
  }
  .nav-cta{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
    background:var(--navy); color:var(--ivory); padding:11px 20px; border-radius:2px;
    border:1px solid var(--navy);
    box-shadow:0 1px 0 rgba(0,0,0,.15), inset 0 1px 0 rgba(201,168,106,.18);
    white-space:nowrap;
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1;                 /* tight line box so caps sit centered */
    text-indent:.28em;             /* offset the trailing letter-spacing so text is optically centered */
  }
  /* The CTA is an <a> inside .nav-links, so ".nav-links a" (color:var(--ink),
     dark) was overriding the light CTA text on specificity. Pin it explicitly. */
  .nav-links a.nav-cta{ color:var(--ivory); }
  .nav-links a.nav-cta:hover{ color:var(--ivory); }
  .nav-links{flex-wrap:nowrap}

  /* language toggle pill */
  .lang-toggle{
    display:flex; align-items:center;
    border:1px solid var(--hairline-2); border-radius:99px;
    padding:3px;
    background:var(--ivory);
    margin-right:6px;
  }
  .lang-toggle .opt{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.18em;
    padding:5px 11px; border-radius:99px;
    color:var(--sub); cursor:pointer;
    display:flex; align-items:center; gap:5px;
  }
  .lang-toggle .opt.on{
    background:var(--navy); color:var(--ivory);
    box-shadow:0 1px 0 rgba(0,0,0,.12);
  }
  .lang-toggle .opt .flag{
    font-size:9px; opacity:.85;
  }
  .lang-toggle .divider{
    width:1px; height:14px; background:var(--hairline-2); margin:0 1px;
  }

  /* ==================================================================
     HERO — moody, warm, candlelit
     ================================================================== */
  .hero-video{
    position:absolute; inset:0;
    overflow:hidden;
    background:
      radial-gradient(circle at 30% 75%, rgba(242,143,139,.45) 0%, transparent 50%),
      radial-gradient(circle at 65% 30%, rgba(140,165,196,.35) 0%, transparent 55%),
      linear-gradient(170deg, #2A3D5A 0%, #15233A 100%);
  }
  /* When a real video URL is set, the <video> fills the box and covers the
     animated-gradient fallback. It sits below the reel overlays (z-index 0). */
  .hero-video video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hero-video::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,228,222,.7), transparent 50%),
      radial-gradient(1.5px 1.5px at 60% 50%, rgba(255,228,222,.5), transparent 50%),
      radial-gradient(2px 2px at 80% 20%, rgba(255,228,222,.6), transparent 50%),
      radial-gradient(1px 1px at 30% 70%, rgba(255,228,222,.4), transparent 50%),
      radial-gradient(2px 2px at 70% 80%, rgba(255,228,222,.7), transparent 50%),
      radial-gradient(1.5px 1.5px at 45% 25%, rgba(255,228,222,.5), transparent 50%),
      radial-gradient(1px 1px at 90% 60%, rgba(255,228,222,.5), transparent 50%);
  }
  /* warm "candle" glow at bottom */
  .hero-video::after{
    content:""; position:absolute; left:-20%; right:-20%; bottom:-40%;
    height:60%;
    background:radial-gradient(ellipse at center top, rgba(255,192,187,.5) 0%, transparent 60%);
    filter:blur(20px);
  }
  .reel-info{
    position:absolute; left:24px; bottom:22px; color:rgba(255,246,244,.92);
    font-family:'Fraunces',serif; font-style:italic; font-size:12px; letter-spacing:.02em;
    z-index:3;
  }
  .reel-info span{
    display:block; font-style:normal; font-size:10px; letter-spacing:.32em; opacity:.7; margin-top:3px;
    font-family:'Outfit'; font-weight:300;
  }
  .play-btn{
    position:absolute; left:24px; bottom:78px;
    width:52px;height:52px;border-radius:50%;
    border:1px solid rgba(255,228,222,.45);
    background:rgba(30,44,66,.4);
    backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center;
    z-index:3;
  }
  .play-btn::after{
    content:""; width:0; height:0;
    border-left:11px solid rgba(241,210,150,.95);
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    margin-left:4px;
  }
  .corner-mark{
    position:absolute; left:24px; top:20px;
    color:#FFD8D4; font-size:10px; letter-spacing:.32em;
    font-family:'Fraunces',serif; font-weight:400;
    z-index:3;
  }
  .crest{
    position:absolute; right:24px; top:20px;
    color:rgba(255,216,212,.85); font-size:10px; letter-spacing:.4em;
    font-family:'Fraunces',serif; font-style:italic;
    z-index:3;
  }
  .crest::before, .crest::after{
    content:"◇"; margin:0 10px; font-style:normal;
  }

  /* ========== FLOATING HERO TILE ========== */
  .hero{
    position:relative;
    height:540px;
    border-bottom:1px solid var(--hairline);
    overflow:visible;  /* allow tile to bleed below */
  }
  .hero-tile{
    position:absolute;
    top:38px; right:-14px;
    width:54%;
    background:#FFFFFF;
    border-radius:8px;
    border:1px solid var(--hairline);
    padding:46px 44px 40px;
    z-index:5;
    margin-bottom:-90px;  /* spill into next section */
    box-shadow:
      0 50px 100px -30px rgba(20,28,45,.55),
      0 24px 50px -20px rgba(20,28,45,.35),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
  .hero-tile::before{
    content:""; position:absolute; inset:7px; border-radius:5px;
    border:1px solid rgba(255,192,187,.32);
    pointer-events:none;
  }
  /* a small coral seal in the corner — the brand stamp */
  .hero-tile::after{
    content:"순수빙"; position:absolute; top:-14px; left:44px;
    font-family:'Noto Serif KR',serif; font-weight:600; font-size:13px;
    color:#FFFFFF; background:var(--coral);
    padding:6px 14px; border-radius:99px;
    letter-spacing:.18em;
    box-shadow:0 4px 10px rgba(217,112,107,.35);
  }
  .eyebrow{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:13px; letter-spacing:.02em; color:var(--coral-deep);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:""; width:24px; height:1px; background:var(--coral); display:inline-block;
  }
  .hero-title{
    font-family:'Fraunces',serif;
    font-weight:400; font-size:68px; line-height:.95;
    letter-spacing:-.025em; margin-top:22px;
    color:var(--navy);
  }
  .hero-title em{
    font-family:'Cormorant Garamond',serif;
    font-style:italic; font-weight:300; color:var(--navy-deep);
  }
  .hero-meta{
    display:flex; justify-content:space-between; align-items:end;
    margin-top:22px; gap:18px;
    padding-top:20px; border-top:1px solid var(--hairline);
  }
  .hero-meta p{
    font-family:'Fraunces',serif; font-size:13px; color:var(--sub); max-width:280px; line-height:1.65;
    font-weight:400;
  }
  .scroll-ind{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:11px; color:var(--sub); writing-mode:vertical-rl;
    transform:rotate(180deg); letter-spacing:.06em;
  }

  /* ==================================================================
     FEATURED PRODUCT — like a museum vitrine
     ================================================================== */
  .featured{
    padding:48px 38px 54px;
    border-bottom:1px solid var(--hairline);
    position:relative;
    background:
      radial-gradient(circle at 70% 30%, rgba(255,192,187,.12) 0%, transparent 60%),
      var(--paper);
  }
  .feat-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:22px;
  }
  .feat-tag{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep); font-size:18px;
    display:flex; align-items:center; gap:8px;
  }
  .feat-tag::before{content:"§"; color:var(--coral); font-size:14px}
  .feat-count{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.32em;
    color:var(--sub);
  }

  /* the single unified white tile holding text + image */
  .feat-tile{
    background:#FFFFFF;
    border-radius:6px;
    border:1px solid var(--hairline);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 20px 50px -25px rgba(61,86,121,.18),
      0 8px 20px -10px rgba(61,86,121,.10);
    display:grid; grid-template-columns: 1fr 1.05fr;
    overflow:hidden;
    position:relative;
  }
  .feat-tile-text{
    padding:36px 32px 28px;
    display:flex; flex-direction:column; justify-content:space-between;
    border-right:1px solid var(--hairline);
  }
  .feat-tile-img{
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    min-height:380px;
    background:#FFFFFF;
  }

  .feat-info .roman{
    font-family:'Fraunces',serif; font-size:13px; color:var(--coral);
    letter-spacing:.3em; margin-bottom:14px;
  }
  .feat-info h3{
    font-family:'Fraunces',serif; font-weight:400; font-size:42px;
    line-height:1.02; letter-spacing:-.015em; margin-bottom:20px;
    color:var(--navy);
  }
  .feat-info h3 em{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
    color:var(--coral-deep);
  }
  .feat-info p{
    font-family:'Fraunces',serif; font-size:13.5px; line-height:1.75;
    color:var(--sub); margin-bottom:26px; max-width:300px;
  }
  .feat-info .price{
    font-family:'Fraunces',serif; font-weight:400; font-size:24px;
    color:var(--navy); margin-bottom:22px;
    border-top:1px solid var(--hairline); padding-top:18px;
    display:flex; align-items:baseline; gap:12px;
  }
  .feat-info .price small{
    font-size:10px; color:var(--coral-deep); letter-spacing:.32em;
  }
  .arrows{display:flex; gap:10px; align-items:center}
  .arrow{
    width:42px;height:42px;border:1px solid var(--hairline-2); border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--navy);
    font-family:'Fraunces',serif; font-size:18px;
    background:var(--ivory);
  }
  .arrow.active{background:var(--navy); color:var(--ivory); border-color:var(--navy)}
  .dots{display:flex; gap:6px; margin-left:14px; align-items:center}
  .dots span{width:5px;height:5px;border-radius:50%;background:var(--hairline-2)}
  .dots span.on{background:var(--coral); width:22px; border-radius:99px; height:5px}

  /* brass corner ornaments — now positioned on the right (image) half of the unified tile */
  .feat-tile-img .corner{
    position:absolute; width:18px; height:18px;
    border:1px solid var(--coral);
  }
  .feat-tile-img .corner.tl{top:14px; left:14px; border-right:none; border-bottom:none}
  .feat-tile-img .corner.tr{top:14px; right:14px; border-left:none; border-bottom:none}
  .feat-tile-img .corner.bl{bottom:14px; left:14px; border-right:none; border-top:none}
  .feat-tile-img .corner.br{bottom:14px; right:14px; border-left:none; border-top:none}
  .stamp{
    position:absolute; top:20px; left:50%; transform:translateX(-50%);
    font-family:'Fraunces',serif; font-style:italic;
    font-size:10px; letter-spacing:.3em; color:var(--coral-deep);
    background:rgba(251,244,222,.85); padding:6px 14px; border-radius:99px;
    border:1px solid var(--hairline-2);
  }

  /* ==================================================================
     LOCATION — boutique hotel feel
     ================================================================== */
  .location{
    padding:54px 38px;
    border-bottom:1px solid var(--hairline);
    background:var(--paper);
  }
  .loc-head{
    display:flex; align-items:end; justify-content:space-between; margin-bottom:28px;
  }
  .loc-head .left small{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep); font-size:16px;
  }
  .loc-head h3{
    font-family:'Fraunces',serif; font-weight:400; font-size:38px;
    color:var(--navy); line-height:1.05; letter-spacing:-.015em;
    margin-top:6px;
  }
  .loc-head h3 em{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    font-weight:300; color:var(--coral-deep);
  }
  .loc-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
  .loc-card{
    border-radius:4px; overflow:hidden; position:relative;
    height:240px;
    border:1px solid #2A3D5A;
    box-shadow:var(--shadow-2);
  }
  .loc-card.cp{
    background:
      linear-gradient(180deg, rgba(30,44,66,.0) 30%, rgba(30,44,66,.92) 100%),
      radial-gradient(ellipse at 35% 35%, #FFC0BB 0%, #D9706B 50%, #6B3D52 100%);
  }
  .loc-card.gc{
    background:
      linear-gradient(180deg, rgba(30,44,66,.0) 30%, rgba(30,44,66,.95) 100%),
      radial-gradient(ellipse at 65% 45%, #8CA5C4 0%, #3D5679 55%, #1E2C42 100%);
  }
  .loc-card .pattern{
    position:absolute; inset:0; opacity:.15;
    background-image:
      radial-gradient(1px 1px at 10% 20%, #fff, transparent 50%),
      radial-gradient(1px 1px at 30% 60%, #fff, transparent 50%),
      radial-gradient(1px 1px at 50% 30%, #fff, transparent 50%),
      radial-gradient(1px 1px at 80% 70%, #fff, transparent 50%),
      radial-gradient(1px 1px at 65% 15%, #fff, transparent 50%);
  }
  /* warm window-light */
  .loc-card.cp::after, .loc-card.gc::after{
    content:""; position:absolute; left:25%; top:30%;
    width:50%; height:35%;
    background:radial-gradient(ellipse at center, rgba(255,228,222,.32) 0%, transparent 60%);
    filter:blur(8px);
  }
  .loc-card .info{
    position:absolute; left:22px; right:22px; bottom:22px;
    color:#FFF6F4; z-index:2;
  }
  .loc-card .info .ko-name{
    font-family:'Noto Serif KR',serif; font-style:normal;
    font-size:12px; letter-spacing:.18em; color:#FFD8D4;
    margin-bottom:6px; font-weight:500;
  }
  .loc-card .info h4{
    font-family:'Fraunces',serif; font-weight:400; font-size:26px;
    letter-spacing:-.01em;
  }
  .loc-card .info p{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:12px; opacity:.75; margin-top:4px;
  }
  .loc-card .dir{
    margin-top:16px; display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,246,244,.96); color:var(--navy);
    padding:10px 16px; border-radius:99px;
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.22em;
    border:1px solid rgba(255,192,187,.4);
  }
  .loc-card .dir::after{content:"↗"; font-size:13px; letter-spacing:0; color:var(--coral-deep)}
  .loc-card .badge{
    position:absolute; top:18px; left:18px; z-index:2;
    color:var(--blue-light); font-size:10px; letter-spacing:.32em;
    font-family:'Fraunces',serif; font-style:italic;
    display:flex; align-items:center; gap:7px;
  }
  .loc-card .badge::before{
    content:""; width:18px; height:1px; background:var(--blue-light);
  }

  /* ==================================================================
     MENU CATEGORIES (landing footer area)
     ================================================================== */
  .menu-row{
    padding:48px 38px;
    border-bottom:1px solid var(--hairline);
    background:var(--paper);
  }
  .menu-row .heading{
    display:flex; align-items:end; justify-content:space-between; margin-bottom:28px;
  }
  .menu-row .heading .left small{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep); font-size:16px;
  }
  .menu-row .heading h3{
    font-family:'Fraunces',serif; font-weight:400; font-size:34px;
    color:var(--navy); margin-top:4px; letter-spacing:-.01em;
  }
  .menu-row .heading h3 em{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; color:var(--coral-deep)}
  .menu-row .heading a{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.28em;
    color:var(--coral-deep); border-bottom:1px solid var(--coral);
    padding-bottom:3px;
  }
  .cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
  .cat{
    aspect-ratio:1/1.18; border-radius:4px; padding:16px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
    border:1px solid var(--hairline-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -30px 40px rgba(61,86,121,.1);
  }
  .cat .roman{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:13px; letter-spacing:.06em; color:var(--coral-deep);
    border-bottom:1px solid var(--coral); padding-bottom:5px; width:fit-content;
  }
  .cat-top{
    display:flex; align-items:flex-start; justify-content:space-between;
  }
  .cat-ic{
    width:32px; height:32px; color:var(--coral-deep);
    opacity:.85;
  }
  .cat.coffee .cat-ic{color:#FFF6F4}
  .cat .name{
    font-family:'Fraunces',serif; font-weight:500; font-size:15px; line-height:1.2;
    color:var(--navy);
  }
  .cat .ko{
    font-family:'Noto Serif KR',serif; font-size:10px; color:var(--navy-deep);
    margin-top:3px; letter-spacing:.05em; opacity:.65;
  }
  .cat.matcha{background:linear-gradient(170deg,#FFE9E5 0%,#FFC0BB 100%)}
  .cat.regular{background:linear-gradient(170deg,#FFD8D4 0%,#F28F8B 100%)}
  .cat.toast{background:linear-gradient(170deg,#F28F8B 0%,#D9706B 100%)}
  .cat.toast .name, .cat.toast .roman{color:#FFF6F4}
  .cat.toast .ko{color:rgba(255,246,244,.75); opacity:1}
  .cat.toast .roman{border-color:rgba(255,246,244,.6)}
  .cat.tea{background:linear-gradient(170deg,#D8E0EB 0%,#8CA5C4 100%)}
  .cat.tea .roman{border-color:var(--navy)}
  .cat.coffee{background:linear-gradient(170deg,#3D5679 0%,#1E2C42 100%)}
  .cat.coffee .name, .cat.coffee .roman{color:#FFF6F4}
  .cat.coffee .ko{color:rgba(255,246,244,.75)}
  .cat.coffee .roman{border-color:var(--blue-light)}

  /* ── Photo-cover variant: cover image fills the card, text overlaid ── */
  .cat.has-pic{ border-color:rgba(61,86,121,.15); }
  .cat.has-pic .cat-pic{ position:absolute; inset:0; z-index:0; }
  .cat.has-pic .cat-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* dark gradient from the bottom so the label is readable on any photo */
  .cat.has-pic::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top,
      rgba(31,43,61,.82) 0%, rgba(31,43,61,.35) 42%, rgba(31,43,61,.05) 70%, rgba(31,43,61,.18) 100%);
  }
  .cat.has-pic .cat-top,
  .cat.has-pic .cat-label{ position:relative; z-index:2; }
  /* force light text/icons over the photo regardless of tone class */
  .cat.has-pic .name,
  .cat.has-pic .roman,
  .cat.has-pic .cat-ic{ color:#FFF6F4; }
  .cat.has-pic .ko{ color:rgba(255,246,244,.82); opacity:1; }
  .cat.has-pic .roman{ border-color:rgba(255,246,244,.65); }
  .cat.has-pic .cat-ic{ opacity:.95; }
  /* subtle lift on hover, matching the menu boxes */
  .cat{ transition:transform .18s ease, box-shadow .18s ease; }
  .cat:hover{ transform:translateY(-3px); }

  /* ==================================================================
     INSTAGRAM STRIP
     ================================================================== */
  .ig-strip{
    padding:48px 38px 40px;
    background:var(--paper);
    border-bottom:1px solid var(--hairline);
  }
  .ig-strip .heading{
    display:flex; align-items:end; justify-content:space-between;
    margin-bottom:24px;
  }
  .ig-strip .heading .left small{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep); font-size:16px;
  }
  .ig-strip .heading h3{
    font-family:'Fraunces',serif; font-weight:400; font-size:30px;
    color:var(--navy); margin-top:4px; letter-spacing:-.01em;
  }
  .ig-strip .heading h3 em{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
    color:var(--coral-deep);
  }
  .ig-strip .follow{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.28em;
    color:var(--coral-deep); border-bottom:1px solid var(--coral);
    padding-bottom:3px; display:inline-flex; align-items:center; gap:8px;
  }
  .ig-strip .follow::before{
    content:""; width:14px; height:14px; border-radius:3px;
    background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  }
  .ig-grid{
    display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  }
  .ig-post{
    aspect-ratio:1/1; border-radius:4px; overflow:hidden;
    position:relative;
    border:1px solid var(--hairline);
    background:#FFFFFF;
    display:flex; align-items:center; justify-content:center;
  }
  .ig-post .placeholder{
    width:75%; opacity:.85;
  }
  .ig-post .overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(20,28,45,.7) 100%);
    opacity:0; transition:opacity .2s;
  }
  .ig-post .overlay.show{opacity:1}
  .ig-post .stats{
    position:absolute; bottom:9px; left:10px;
    color:#FFF; font-family:'Fraunces',serif; font-size:11px; letter-spacing:.04em;
    display:flex; gap:8px; align-items:center; z-index:2;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .ig-post .ig-mark{
    position:absolute; top:8px; right:8px;
    width:18px; height:18px; border-radius:4px;
    background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
    z-index:2; opacity:.92;
  }
  /* tinted "photo" placeholders matching brand */
  .ig-post.t1{background:linear-gradient(160deg,#FFE9E5 0%,#FFC0BB 100%)}
  .ig-post.t2{background:linear-gradient(160deg,#FFD8D4 0%,#F28F8B 100%)}
  .ig-post.t3{background:linear-gradient(160deg,#D8E0EB 0%,#8CA5C4 100%)}
  .ig-post.t4{background:linear-gradient(160deg,#FFC0BB 0%,#D9706B 100%)}
  .ig-post.t5{background:linear-gradient(160deg,#8CA5C4 0%,#3D5679 100%)}
  .ig-post.t6{background:linear-gradient(160deg,#FFE9E5 0%,#F28F8B 100%)}
  .foot{
    padding:42px 38px 30px;
    background:linear-gradient(180deg, var(--navy) 0%, var(--navy-darker) 100%);
    color:var(--pink-light);
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap:24px;
    position:relative;
  }
  /* warm glow at top */
  .foot::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--coral), transparent);
  }
  .foot .brand-block{display:flex; flex-direction:column; gap:14px}
  .foot .brand-block .logo{flex-wrap:nowrap; white-space:nowrap; color:#FFF6F4}
  .foot .brand-block .logo .ko{color:var(--blue-light)}
  .foot .brand-block p{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:13px; line-height:1.7; color:var(--blue-light); max-width:220px;
  }
  .foot h5{
    font-family:'Fraunces',serif; font-weight:400; font-size:11px; letter-spacing:.3em;
    color:var(--blue-light); text-transform:uppercase; margin-bottom:16px;
    padding-bottom:10px; border-bottom:1px solid rgba(255,192,187,.3);
  }
  .foot ul{list-style:none; display:flex; flex-direction:column; gap:9px}
  .foot ul a{
    color:var(--pink); text-decoration:none; font-size:14px;
    font-family:'Fraunces',serif; font-weight:400;
  }
  .foot .row-bottom{
    grid-column:1/-1; border-top:1px solid rgba(255,192,187,.25); margin-top:30px; padding-top:20px;
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Fraunces',serif; font-style:italic;
    font-size:12px; color:var(--blue-light); letter-spacing:.04em;
  }
  .foot .row-bottom .ornament{color:var(--coral); margin:0 8px}

  /* ==================================================================
     MENU PAGE
     ================================================================== */
  .menu-head{
    display:flex; align-items:end; justify-content:space-between;
    padding:42px 38px 26px;
    border-bottom:1px solid var(--hairline);
    background:linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%);
  }
  .menu-head .left .ko{
    font-family:'Noto Serif KR',serif; font-size:13px;
    color:var(--coral-deep); letter-spacing:.15em;
  }
  .menu-head .left small{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--sub); font-size:15px; display:block; margin-top:6px;
  }
  .menu-head .left h2{
    font-family:'Fraunces',serif; font-weight:400; font-size:72px;
    line-height:1; letter-spacing:-.025em;
    color:var(--navy);
    margin-top:8px;
  }
  .menu-head .left h2 em{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
    color:var(--coral-deep);
  }
  .menu-head .filters{display:flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:340px; justify-content:flex-end}
  .filter{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.22em;
    color:var(--navy);
    padding:8px 14px; border:1px solid var(--hairline-2); border-radius:99px;
    text-transform:uppercase; background:var(--ivory);
  }
  .filter.on{background:var(--navy); color:var(--ivory); border-color:var(--navy)}

  .menu-grid{
    padding:32px 38px 36px;
    display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;
    background:var(--paper);
  }
  .item{
    background:#FFFFFF; border-radius:4px; overflow:hidden;
    position:relative; aspect-ratio:1/1.22;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:14px; border:1px solid var(--hairline);
    box-shadow: 0 4px 12px -6px rgba(61,86,121,.12);
  }
  .item .pic{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
  /* Readable frosted panel behind the text so name + price stay legible
     over any photo (light, dark, or busy). Sits inside the card padding,
     pinned to the bottom, with a soft top fade into the image. */
  .item .meta{
    position:relative; z-index:2;
    margin:0 -14px -14px;          /* bleed to the card edges (cancels .item padding) */
    padding:12px 14px 13px;
    background:linear-gradient(180deg,
      rgba(255,246,244,0) 0%,
      rgba(255,246,244,.86) 26%,
      rgba(255,246,244,.96) 100%);
    -webkit-backdrop-filter:blur(7px) saturate(112%);
    backdrop-filter:blur(7px) saturate(112%);
    border-top:1px solid rgba(237,200,194,.55);
  }
  /* Browsers without backdrop-filter: fall back to a solid-enough panel. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .item .meta{
      background:linear-gradient(180deg,
        rgba(255,246,244,0) 0%,
        rgba(255,246,244,.96) 24%,
        rgba(255,246,244,1) 100%);
    }
  }
  .item .meta .name{
    font-family:'Fraunces',serif; font-weight:600; font-size:13px; line-height:1.18;
    color:var(--navy-deep);
  }
  .item .meta .ko{
    font-family:'Noto Serif KR',serif; font-size:9px; color:var(--navy-deep);
    margin-top:2px; letter-spacing:.06em; opacity:.78;
  }
  .item .meta .price{
    font-family:'Fraunces',serif; font-style:italic; font-weight:500;
    font-size:12px; color:var(--coral-deep); margin-top:4px;
  }

  /* slim brand-color flavor strip at the top of each menu item to keep identity */
  .item::after{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--coral); z-index:2;
  }
  .item.b-matcha::after{background:#A8C49A}
  .item.b-strawberry::after{background:#F28F8B}
  .item.b-injeolmi::after{background:#FFC0BB}
  .item.b-mango::after{background:#F2B872}
  .item.b-oreo::after{background:#3D5679}
  .item.b-cookies::after{background:#D9706B}
  .item.b-pat::after{background:#8B3D5E}
  .item.b-yogurt::after{background:#8CA5C4}

  .item.featured{outline:1px solid var(--coral); outline-offset:-2px}
  .item.featured::before{
    content:"◆ FEATURED"; position:absolute; top:11px; left:11px;
    font-family:'Fraunces',serif; font-size:8px; letter-spacing:.28em;
    background:var(--navy); color:var(--blue-light);
    padding:4px 9px; border-radius:99px; z-index:3;
  }
  .item .tag{
    position:absolute; top:11px; right:11px; z-index:3;
    font-family:'Fraunces',serif; font-style:italic;
    font-size:9px; letter-spacing:.18em; padding:3px 8px; border-radius:99px;
    background:rgba(251,244,222,.92); color:var(--coral-deep);
    border:1px solid var(--hairline-2);
  }

  .item.b-matcha{background:#FFFFFF}
  .item.b-strawberry{background:#FFFFFF}

  .item.b-injeolmi{background:#FFFFFF}
  .item.b-mango{background:#FFFFFF}
  .item.b-oreo{background:#FFFFFF}
  /* removed */
  /* removed */
  .item.b-oreo .ko{color:var(--blue-light)}
  .item.b-cookies{background:#FFFFFF}

  .item.b-pat{background:#FFFFFF}
  /* removed */
  /* removed */
  /* removed */
  .item.b-yogurt{background:#FFFFFF}

  /* ==================================================================
     UNIFIED DETAIL SHOWCASE TILE
     ================================================================== */
  .detail-divider{
    text-align:center; padding:24px 0 22px;
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep);
    font-size:14px; letter-spacing:.06em;
    background:var(--paper);
    position:relative;
    border-top:1px solid var(--hairline);
  }
  .detail-divider::before{
    content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
    width:100px; height:2px; background:var(--paper);
  }
  .detail-divider span::before{content:"◇ "; color:var(--coral)}
  .detail-divider span::after{content:" ◇"; color:var(--coral)}

  /* the showcase wrapper holds the tile + below-tile sections */
  .showcase{
    padding:30px 38px 42px;
    background:var(--paper);
    display:flex; flex-direction:column; gap:28px;
  }

  /* =============== MAIN PRODUCT TILE =============== */
  .product-tile{
    background:
      radial-gradient(ellipse at 50% 65%, rgba(255,228,222,.45) 0%, transparent 65%),
      linear-gradient(170deg, #FFE9E5 0%, #F28F8B 100%);
    border-radius:6px; overflow:hidden; position:relative;
    border:1px solid #D9706B;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -80px 120px rgba(217,112,107,.32),
                0 30px 60px -25px rgba(217,112,107,.4);
    padding:32px 38px 30px;
  }
  /* brass corner ornaments */
  .product-tile .corner{
    position:absolute; width:24px; height:24px;
    border:1px solid rgba(255,255,255,.65);
    z-index:5;
  }
  .product-tile .corner.tl{top:14px; left:14px; border-right:none; border-bottom:none}
  .product-tile .corner.tr{top:14px; right:14px; border-left:none; border-bottom:none}
  .product-tile .corner.bl{bottom:14px; left:14px; border-right:none; border-top:none}
  .product-tile .corner.br{bottom:14px; right:14px; border-left:none; border-top:none}

  /* tile header row */
  .tile-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:12px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(217,112,107,.3);
  }
  .tile-head .ko{
    font-family:'Noto Serif KR',serif; font-size:13px;
    color:var(--coral-deep); letter-spacing:.18em;
    display:flex; align-items:center; gap:10px;
  }
  .tile-head .ko::before{
    content:""; width:24px; height:1px; background:var(--coral);
  }
  .tile-head h1{
    font-family:'Fraunces',serif; font-weight:400; font-size:46px;
    line-height:1.0; letter-spacing:-.025em;
    margin-top:8px; color:var(--navy);
  }
  .tile-head h1 em{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--navy-deep); font-weight:300;
  }
  .tile-head .badge{
    font-family:'Fraunces',serif; font-style:italic;
    color:var(--navy); font-size:10px; letter-spacing:.32em;
    background:rgba(255,246,244,.92); padding:6px 14px; border-radius:99px;
    border:1px solid rgba(217,112,107,.45);
    align-self:flex-start;
    text-transform:uppercase;
  }

  /* hero stage where the bingsu sits */
  .stage-area{
    position:relative;
    height:340px;
    display:flex; align-items:flex-end; justify-content:center;
    margin:8px 0 0;
    background:#FFFFFF;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px -10px rgba(61,86,121,.18);
  }
  /* circular spotlight pad */
  .stage-area::before{
    content:""; position:absolute;
    bottom:36px; left:50%; transform:translateX(-50%);
    width:380px; height:46px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(61,86,121,.3) 0%, transparent 70%);
    filter:blur(8px);
  }
  /* faint ring on stage floor */
  .stage-area::after{
    content:""; position:absolute;
    bottom:48px; left:50%; transform:translateX(-50%);
    width:340px; height:18px; border-radius:50%;
    border:1px dashed rgba(255,255,255,.55);
  }
  .stage-area .bowl-display{
    position:relative; width:380px; z-index:2;
    transform:translateY(20px);
  }
  /* angle hint - rotation icon */
  .rotate-hint{
    position:absolute; right:18px; top:8px;
    z-index:4;
    font-family:'Fraunces',serif; font-style:italic;
    font-size:10px; letter-spacing:.18em; color:var(--coral-deep);
    background:rgba(251,244,222,.85); padding:6px 11px; border-radius:99px;
    border:1px solid rgba(255,192,187,.4);
    display:flex; align-items:center; gap:6px;
  }
  .rotate-hint::before{
    content:"↻"; font-style:normal; font-size:13px; color:var(--coral);
  }

  /* angle navigation row: arrow / thumbs / arrow */
  .angle-row{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:6px;
  }
  .angle-arrow{
    width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(217,112,107,.5);
    background:rgba(255,246,244,.75);
    display:flex; align-items:center; justify-content:center;
    color:var(--navy); font-family:'Fraunces',serif; font-size:18px;
  }
  .thumb-strip{display:flex; gap:10px}
  .thumb{
    width:62px; height:62px; border-radius:6px;
    background:#FFFFFF;
    border:1px solid rgba(217,112,107,.35);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .thumb.active{
    border:1.5px solid var(--coral);
    background:#FFFFFF;
    box-shadow:0 4px 10px rgba(217,112,107,.22), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .thumb.active::after{
    content:""; position:absolute; top:-1px; right:-1px;
    width:0; height:0;
    border-top:14px solid var(--coral);
    border-left:14px solid transparent;
  }
  .thumb svg{width:80%}
  .thumb .num{
    position:absolute; bottom:3px; left:5px;
    font-family:'Fraunces',serif; font-size:8px; letter-spacing:.15em;
    color:var(--coral-deep); font-style:italic;
  }
  .thumb.active .num{color:var(--navy)}

  /* size selector */
  .size-row{
    margin-top:24px;
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  .size-card{
    background:rgba(255,246,244,.75);
    border:1px solid rgba(217,112,107,.35);
    border-radius:5px;
    padding:16px 18px;
    display:flex; flex-direction:column; gap:4px;
    position:relative;
    backdrop-filter:blur(2px);
  }
  .size-card.selected{
    background:var(--ivory);
    border:1.5px solid var(--coral);
    box-shadow:0 6px 16px rgba(217,112,107,.22);
  }
  .size-card .row1{
    display:flex; align-items:center; justify-content:space-between;
  }
  .size-card .radio{
    width:14px; height:14px; border-radius:50%;
    border:1.5px solid var(--coral-deep);
    background:transparent;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .size-card.selected .radio{border-color:var(--coral)}
  .size-card.selected .radio::after{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--coral);
  }
  .size-card .label{
    font-family:'Fraunces',serif; font-weight:500; font-size:16px;
    color:var(--navy);
    display:flex; align-items:center; gap:9px;
  }
  .size-card .price{
    font-family:'Fraunces',serif; font-size:16px; color:var(--navy);
  }
  .size-card .meta{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:11px; color:var(--coral-deep); margin-top:2px;
    margin-left:23px;
  }
  .size-card .pop{
    font-family:'Fraunces',serif; font-size:8px; letter-spacing:.25em;
    color:var(--coral-deep); padding:2px 7px; border:1px solid var(--coral);
    border-radius:99px; margin-left:8px; text-transform:uppercase;
  }

  /* description */
  .tile-desc{
    margin-top:20px; padding-top:18px;
    border-top:1px solid rgba(217,112,107,.3);
    display:flex; gap:24px; align-items:flex-start; justify-content:space-between;
  }
  .tile-desc p{
    font-family:'Fraunces',serif; font-size:13.5px; line-height:1.7;
    color:var(--navy); flex:1; max-width:440px;
  }
  .tile-desc p::first-letter{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    font-size:22px; color:var(--coral-deep); margin-right:1px;
  }
  .tile-cta{
    flex-shrink:0;
    background:var(--navy); color:var(--blue-light);
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.28em;
    padding:13px 22px; border-radius:99px;
    border:1px solid var(--navy-deep);
    text-transform:uppercase;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 4px 12px rgba(61,86,121,.32), inset 0 1px 0 rgba(255,192,187,.3);
  }
  .tile-cta::after{content:"→"; letter-spacing:0; font-size:13px}

  /* =============== BELOW-TILE: GET DIRECTION =============== */
  .below-section .head{
    display:flex; align-items:end; justify-content:space-between;
    margin-bottom:14px;
  }
  .below-section .head small{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep); font-size:14px; display:block;
  }
  .below-section .head h4{
    font-family:'Fraunces',serif; font-weight:400; font-size:24px;
    color:var(--navy); letter-spacing:-.01em; margin-top:2px;
  }
  .below-section .head h4 em{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    color:var(--coral-deep); font-weight:300;
  }
  .below-section .head .roman{
    font-family:'Fraunces',serif; font-size:11px; letter-spacing:.32em;
    color:var(--coral-deep);
  }

  .dir-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .dir-card{
    border-radius:5px; overflow:hidden; position:relative;
    height:160px;
    border:1px solid #2A3D5A;
    box-shadow: 0 12px 28px -12px rgba(61,86,121,.32);
  }
  .dir-card.cp-mini{
    background:
      linear-gradient(180deg, rgba(30,44,66,.0) 30%, rgba(30,44,66,.92) 100%),
      radial-gradient(ellipse at 35% 35%, #FFC0BB 0%, #D9706B 50%, #6B3D52 100%);
  }
  .dir-card.gc-mini{
    background:
      linear-gradient(180deg, rgba(30,44,66,.0) 30%, rgba(30,44,66,.95) 100%),
      radial-gradient(ellipse at 65% 45%, #8CA5C4 0%, #3D5679 55%, #1E2C42 100%);
  }
  .dir-card::after{
    content:""; position:absolute; left:25%; top:25%;
    width:50%; height:35%;
    background:radial-gradient(ellipse at center, rgba(255,228,222,.32) 0%, transparent 60%);
    filter:blur(8px);
  }
  .dir-card .info{
    position:absolute; left:18px; right:18px; bottom:16px;
    color:#FFF6F4; z-index:2;
    display:flex; align-items:flex-end; justify-content:space-between;
  }
  .dir-card .info .left .ko{
    font-family:'Noto Serif KR',serif; font-size:10px;
    color:#FFD8D4; letter-spacing:.18em; font-weight:500;
    margin-bottom:4px;
  }
  .dir-card .info .left h5{
    font-family:'Fraunces',serif; font-weight:400; font-size:20px;
    letter-spacing:-.01em;
  }
  .dir-card .info .left p{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:11px; opacity:.8; margin-top:2px;
  }
  .dir-card .info .arrow-go{
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,246,244,.96); color:var(--navy);
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    border:1px solid rgba(255,192,187,.4);
  }
  .dir-card .badge-mini{
    position:absolute; top:14px; left:16px; z-index:2;
    color:var(--blue-light); font-size:9px; letter-spacing:.32em;
    font-family:'Fraunces',serif; font-style:italic;
  }
  .dir-card .badge-mini::before{
    content:""; width:14px; height:1px; background:var(--blue-light);
    display:inline-block; margin-right:7px; vertical-align:middle;
  }
  .dir-card .hours{
    position:absolute; top:14px; right:16px; z-index:2;
    color:#FFD8D4; font-size:9px; letter-spacing:.18em;
    font-family:'Fraunces',serif;
  }

  /* =============== BELOW-TILE: SOCIALS =============== */
  .social-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  }
  .social-card{
    border-radius:5px;
    border:1px solid var(--hairline-2);
    background:var(--ivory);
    padding:14px 14px 13px;
    position:relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    display:flex; flex-direction:column; gap:8px;
    min-height:108px;
  }
  .social-card .icon{
    width:32px; height:32px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:15px;
    box-shadow:0 2px 6px rgba(61,86,121,.2);
  }
  .social-card .icon.ig{background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
  .social-card .icon.tt{background:linear-gradient(135deg,#25F4EE,#000,#FE2C55)}
  .social-card .icon.yt{background:linear-gradient(135deg,#FF0000,#CC0000)}
  .social-card .icon.em{background:linear-gradient(135deg,var(--coral),var(--coral-deep))}
  .social-card .platform{
    font-family:'Fraunces',serif; font-style:italic;
    font-size:10px; letter-spacing:.22em; color:var(--coral-deep);
    text-transform:uppercase;
    margin-top:auto;
  }
  .social-card .handle{
    font-family:'Fraunces',serif; font-weight:500; font-size:14px;
    color:var(--navy);
  }
  .social-card .arrow-out{
    position:absolute; top:14px; right:14px;
    color:var(--coral-deep); font-size:14px;
  }

  .bowl-wrap{ position:relative; width:78%; }
/* ============================================================
   SunSuBing — RESPONSIVE FIX + HERO LAYOUT VARIANTS
   This block REPLACES everything from "/* === RESPONSIVE ==="
   onwards in your styles.css. Paste at the end of styles.css
   AFTER deleting the old responsive block.
   ============================================================ */

/* Prevent iOS text-zoom from breaking layout */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; min-height: 100vh; overflow-x: hidden; }
body::before { background-attachment: fixed; }

/* ============ HERO LAYOUT VARIANTS ============
   Pick one by setting data-hero-layout="..." on the .hero element
*/

/* Layout 1: floating tile RIGHT (default — what you have now) */
.hero[data-hero-layout="floating-right"] .hero-tile {
  position: absolute; top: 38px; right: -14px;
  width: 54%;
}

/* Layout 2: floating tile LEFT */
.hero[data-hero-layout="floating-left"] .hero-tile {
  position: absolute; top: 38px; left: -14px; right: auto;
  width: 54%;
}

/* Layout 3: centered overlay (text in middle of video) */
.hero[data-hero-layout="centered"] .hero-tile {
  position: absolute; top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  width: 70%; max-width: 720px;
  text-align: center;
  margin-bottom: 0;
}
.hero[data-hero-layout="centered"] .hero-tile .eyebrow,
.hero[data-hero-layout="centered"] .hero-tile .hero-meta {
  justify-content: center;
}
.hero[data-hero-layout="centered"] .hero-tile .hero-meta {
  flex-direction: column; align-items: center; text-align: center;
}
.hero[data-hero-layout="centered"] .hero-tile::after { left: 50%; transform: translateX(-50%); }

/* Layout 4: full-bleed text only (no white tile) */
.hero[data-hero-layout="text-only"] .hero-tile {
  position: absolute; left: 38px; right: 38px; bottom: 38px;
  background: transparent; border: none; box-shadow: none;
  padding: 0; width: auto; margin: 0;
}
.hero[data-hero-layout="text-only"] .hero-tile::before,
.hero[data-hero-layout="text-only"] .hero-tile::after { display: none; }
.hero[data-hero-layout="text-only"] .hero-title { color: #FFF6F4; }
.hero[data-hero-layout="text-only"] .hero-title em { color: #FFD8D4; }
.hero[data-hero-layout="text-only"] .eyebrow { color: #FFD8D4; }
.hero[data-hero-layout="text-only"] .eyebrow::before { background: #FFD8D4; }
.hero[data-hero-layout="text-only"] .hero-meta p { color: rgba(255, 246, 244, 0.85); }
.hero[data-hero-layout="text-only"] .hero-meta { border-top-color: rgba(255, 192, 187, 0.3); }

/* Layout 5: split (50/50 video left, white right) */
.hero[data-hero-layout="split"] { height: 540px; }
.hero[data-hero-layout="split"] .hero-video { right: 50%; }
.hero[data-hero-layout="split"] .hero-tile {
  position: absolute; top: 0; right: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0; border: none; border-left: 1px solid var(--hairline);
  box-shadow: none; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}

/* ============ TABLET (≤ 1024px) ============ */
@media (max-width: 1024px) {
  .page { max-width: 100%; padding: 16px 12px 60px; }

  .nav { padding: 16px 20px; flex-wrap: wrap; gap: 10px; }
  .nav-links { gap: 16px; flex-wrap: wrap; }
  .logo { font-size: 22px; }

  .hero { height: 460px; }
  .hero[data-hero-layout="floating-right"] .hero-tile,
  .hero[data-hero-layout="floating-left"] .hero-tile {
    width: 60%; padding: 32px 28px 26px; margin-bottom: -60px;
  }
  .hero[data-hero-layout="floating-right"] .hero-tile { right: 16px; }
  .hero[data-hero-layout="floating-left"] .hero-tile { left: 16px; }
  .hero-title { font-size: 48px; }

  .featured { padding: 32px 20px 36px; }
  .feat-tile { grid-template-columns: 1fr; }
  .feat-tile-text { border-right: none; border-bottom: 1px solid var(--hairline); }
  .feat-tile-img { min-height: 280px; }
  .feat-info h3 { font-size: 36px; }

  .location { padding: 32px 20px; }
  .loc-head h3 { font-size: 30px; }
  .menu-row { padding: 32px 20px; }
  .menu-row .heading h3 { font-size: 28px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-head { padding: 28px 20px 20px; }
  .menu-head .left h2 { font-size: 56px; }
  .menu-head .filters { max-width: 100%; }
  .menu-grid { padding: 22px 20px 24px; grid-template-columns: repeat(3, 1fr); }
  .ig-strip { padding: 32px 20px 28px; }
  .ig-grid { grid-template-columns: repeat(4, 1fr); }
  .product-tile { padding: 24px 20px 22px; }
  .tile-head h1 { font-size: 38px; }
  .stage-area { height: 280px; }
  .below-section .head h4 { font-size: 22px; }
  .dir-grid { grid-template-columns: 1fr 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .foot { padding: 30px 20px 22px; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
  .showcase { padding: 22px 20px 32px; }
}

/* ============ MOBILE (≤ 720px) ============ */
@media (max-width: 720px) {
  .page { padding: 0 0 30px; }
  .frame { border: none; box-shadow: none; border-radius: 0; }
  .frame::before { display: none; }

  /* NAV — stack into 2 rows: logo+lang on top, links + CTA below */
  .nav {
    padding: 14px 16px 12px;
    flex-direction: column; align-items: stretch; gap: 12px;
    background: var(--ivory);
  }
  .logo { font-size: 20px; gap: 8px; flex-wrap: nowrap; }
  .logo .ko { font-size: 14px; }
  .nav-links {
    width: 100%; gap: 14px;
    justify-content: space-between; align-items: center;
    flex-wrap: nowrap; overflow-x: auto;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: 12px; padding: 4px 0;
    white-space: nowrap; flex-shrink: 0;
  }
  .lang-toggle { margin: 0; flex-shrink: 0; }
  .lang-toggle .opt { padding: 4px 8px; font-size: 10px; }
  .nav-cta {
    padding: 8px 12px; font-size: 8px; letter-spacing: .2em;
    flex-shrink: 0;
  }

  /* HERO — ALL layouts collapse to: video on top, white tile below */
  .hero,
  .hero[data-hero-layout="floating-right"],
  .hero[data-hero-layout="floating-left"],
  .hero[data-hero-layout="centered"],
  .hero[data-hero-layout="text-only"],
  .hero[data-hero-layout="split"] {
    height: auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: visible;
  }
  .hero-video,
  .hero[data-hero-layout="split"] .hero-video {
    position: relative !important; inset: auto;
    width: 100%; height: 420px; right: auto;
    flex-shrink: 0;
  }
  .corner-mark, .crest {
    font-size: 9px; letter-spacing: .2em;
  }
  .crest { top: 12px; right: 12px; }
  .corner-mark { top: 12px; left: 12px; }
  .play-btn { width: 42px; height: 42px; left: 14px; bottom: 56px; }
  .reel-info { left: 14px; bottom: 16px; font-size: 11px; }

  /* All hero-tile variants on mobile = same: full-width card sliding under video */
  .hero .hero-tile,
  .hero[data-hero-layout="floating-right"] .hero-tile,
  .hero[data-hero-layout="floating-left"] .hero-tile,
  .hero[data-hero-layout="centered"] .hero-tile,
  .hero[data-hero-layout="text-only"] .hero-tile,
  .hero[data-hero-layout="split"] .hero-tile {
    position: relative;
    top: auto; right: auto; left: auto; bottom: auto;
    transform: none; height: auto;
    width: calc(100% - 56px);    /* narrower — clear margins on both sides */
    max-width: 360px;
    margin: -200px auto 0;       /* float higher onto the galaxy, centered */
    padding: 20px 20px 18px;     /* tighter padding */
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    text-align: left;
    color: inherit;
    z-index: 5;
  }
  .hero .hero-tile::after {
    left: 20px; right: auto; transform: none;
    font-size: 10px; padding: 4px 10px;
  }
  .hero .eyebrow { font-size: 11px; }
  .hero-title,
  .hero[data-hero-layout="text-only"] .hero-title { color: var(--navy); font-size: 30px; line-height: 1.05; margin-top: 10px; }
  .hero[data-hero-layout="text-only"] .hero-title em { color: var(--navy-deep); }
  .eyebrow, .hero[data-hero-layout="text-only"] .eyebrow { color: var(--coral-deep); justify-content: flex-start; }
  .hero[data-hero-layout="text-only"] .eyebrow::before { background: var(--coral); }
  .hero-meta {
    flex-direction: column; align-items: flex-start;
    gap: 8px; padding-top: 10px; margin-top: 12px;
  }
  .hero-meta p { max-width: 100%; font-size: 12px; line-height: 1.55; color: var(--sub); }
  .hero[data-hero-layout="text-only"] .hero-meta p { color: var(--sub); }
  .hero[data-hero-layout="text-only"] .hero-meta { border-top: 1px solid var(--hairline); }
  .scroll-ind { writing-mode: horizontal-tb; transform: none; align-self: flex-end; }

  /* FEATURED */
  .featured { padding: 32px 16px 36px; }
  .feat-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .feat-tile { grid-template-columns: 1fr; }
  .feat-tile-text { border-right: none; border-bottom: 1px solid var(--hairline); padding: 26px 20px 20px; }
  .feat-tile-img { min-height: 260px; }
  .feat-info h3 { font-size: 30px; line-height: 1.05; margin-bottom: 14px; }
  .feat-info p { font-size: 13px; max-width: 100%; }
  .feat-info .price { font-size: 20px; }
  .arrow { width: 36px; height: 36px; }

  /* LOCATIONS */
  .location { padding: 28px 16px 32px; }
  .loc-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
  .loc-head h3 { font-size: 26px; line-height: 1.1; }
  .loc-grid { grid-template-columns: 1fr; gap: 12px; }
  .loc-card { height: 200px; }
  .loc-card .info h4 { font-size: 22px; }

  /* CATEGORIES */
  .menu-row { padding: 28px 16px 32px; }
  .menu-row .heading { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .menu-row .heading h3 { font-size: 24px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cat { padding: 12px; }
  .cat .name { font-size: 13px; }
  .cat-ic { width: 24px; height: 24px; }

  /* MENU */
  .menu-head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 16px 18px; }
  .menu-head .left h2 { font-size: 40px; }
  .menu-head .filters { max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .filter { padding: 6px 12px; font-size: 10px; }
  .menu-grid { padding: 16px 16px 20px; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .item { padding: 12px; }
  .item .meta { margin: 0 -12px -12px; padding: 10px 12px 11px; }
  .item .meta .name { font-size: 12px; }
  .item.featured::before { font-size: 7px; padding: 3px 7px; top: 9px; left: 9px; }

  /* SHOWCASE */
  .showcase { padding: 18px 16px 28px; gap: 22px; }
  .product-tile { padding: 20px 16px 18px; }
  .tile-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tile-head h1 { font-size: 30px; }
  .stage-area { height: 220px; }
  .stage-area .bowl-display { width: 86%; }
  .rotate-hint { font-size: 9px; padding: 5px 9px; right: 10px; }
  .angle-row { gap: 8px; }
  .angle-arrow { width: 32px; height: 32px; font-size: 16px; }
  .thumb { width: 50px; height: 50px; }
  .size-row { grid-template-columns: 1fr; gap: 10px; }
  .size-card .label { font-size: 14px; }
  .size-card .price { font-size: 14px; }
  .tile-desc { flex-direction: column; align-items: stretch; gap: 14px; }
  .tile-cta { align-self: stretch; text-align: center; padding: 14px 20px; }

  .below-section .head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .below-section .head h4 { font-size: 20px; }
  .dir-grid { grid-template-columns: 1fr; gap: 10px; }
  .dir-card { height: 130px; }
  .social-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .social-card { padding: 12px; min-height: 90px; }
  .social-card .handle { font-size: 12px; }

  /* INSTAGRAM */
  .ig-strip { padding: 28px 16px 24px; }
  .ig-strip .heading { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .ig-strip .heading h3 { font-size: 22px; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* FOOTER */
  .foot {
    padding: 26px 18px 22px;
    grid-template-columns: 1fr 1fr; gap: 22px 18px;
  }
  .foot .brand-block { grid-column: 1 / -1; }
  .foot .brand-block p { max-width: 100%; }
  .foot h5 { font-size: 10px; margin-bottom: 12px; padding-bottom: 8px; }
  .foot ul a { font-size: 13px; }
  .foot .row-bottom {
    flex-direction: column; align-items: flex-start; gap: 8px;
    font-size: 11px; padding-top: 16px; margin-top: 22px;
  }
}

/* ============ SMALL PHONES (≤ 380px) ============ */
@media (max-width: 380px) {
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 11px; }
  .nav-cta { padding: 7px 10px; font-size: 8px; }
  .lang-toggle .opt { padding: 3px 7px; font-size: 9px; }
  .hero-title { font-size: 32px; }
  .menu-head .left h2 { font-size: 34px; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-head h1 { font-size: 26px; }
  .feat-info h3 { font-size: 26px; }
}

/* ============================================================
   FLUID HERO — scales smoothly between viewport sizes (>720px)
   Replaces the breakpoint-based hero tile sizing with clamp()
   ============================================================ */

@media (min-width: 721px) {
  /* Hero container scales with viewport */
  .hero {
    height: clamp(420px, 36vw + 60px, 600px);
  }

  /* Floating tile variants — width grows fluidly */
  .hero[data-hero-layout="floating-right"] .hero-tile,
  .hero[data-hero-layout="floating-left"] .hero-tile {
    width: clamp(380px, 48vw + 30px, 660px);
    padding: clamp(28px, 3vw + 10px, 46px)
             clamp(26px, 2.8vw + 10px, 44px)
             clamp(24px, 2.6vw + 8px, 40px);
    top: clamp(20px, 2.5vw + 5px, 42px);
    margin-bottom: clamp(-90px, -6vw - 10px, -50px);
  }
  .hero[data-hero-layout="floating-right"] .hero-tile {
    right: clamp(-14px, -1vw + 4px, 16px);
    left: auto;
  }
  .hero[data-hero-layout="floating-left"] .hero-tile {
    left: clamp(-14px, -1vw + 4px, 16px);
    right: auto;
  }

  /* Centered overlay scales too */
  .hero[data-hero-layout="centered"] .hero-tile {
    width: clamp(420px, 60vw + 20px, 720px);
    padding: clamp(28px, 3vw + 10px, 46px);
  }

  /* Hero title scales fluidly */
  .hero-title {
    font-size: clamp(40px, 4vw + 16px, 68px);
    line-height: 0.96;
    margin-top: clamp(14px, 1.6vw + 4px, 22px);
  }

  /* Eyebrow + description scale gently */
  .eyebrow {
    font-size: clamp(11px, 0.4vw + 9px, 13px);
  }
  .hero-meta {
    margin-top: clamp(14px, 1.4vw + 4px, 22px);
    padding-top: clamp(12px, 1.2vw + 4px, 20px);
  }
  .hero-meta p {
    font-size: clamp(12px, 0.4vw + 10px, 13px);
    max-width: clamp(220px, 22vw + 60px, 320px);
  }

  /* Korean coral pill stays proportional */
  .hero-tile::after {
    font-size: clamp(11px, 0.4vw + 8px, 13px);
    padding: clamp(5px, 0.3vw + 3px, 6px) clamp(11px, 1vw + 5px, 14px);
    left: clamp(28px, 2.6vw + 8px, 44px);
    top: clamp(-12px, -0.4vw - 7px, -14px);
  }
  .hero-tile::before {
    inset: clamp(5px, 0.3vw + 3px, 7px);
  }

  /* Hero video corner UI scales too */
  .play-btn {
    width: clamp(42px, 1vw + 32px, 52px);
    height: clamp(42px, 1vw + 32px, 52px);
    left: clamp(16px, 1.2vw + 6px, 24px);
    bottom: clamp(60px, 2vw + 40px, 78px);
  }
  .corner-mark, .crest {
    font-size: clamp(9px, 0.2vw + 7.5px, 10px);
    top: clamp(14px, 0.6vw + 8px, 20px);
  }
  .corner-mark { left: clamp(16px, 1.2vw + 6px, 24px); }
  .crest { right: clamp(16px, 1.2vw + 6px, 24px); }
  .reel-info {
    font-size: clamp(11px, 0.2vw + 9px, 12px);
    left: clamp(16px, 1.2vw + 6px, 24px);
    bottom: clamp(16px, 0.8vw + 10px, 22px);
  }
}

/* ============================================================
   STORY TILE (landing page) + ABOUT PAGE
   ============================================================ */

/* ===== STORY TILE — single landing-page section ===== */
.story-section{
  padding: 54px 38px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
.story-tile{
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 20px 50px -25px rgba(61,86,121,.18),
    0 8px 20px -10px rgba(61,86,121,.10);
  position: relative;
}
.story-tile-img{
  position: relative;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,228,222,.4) 0%, transparent 60%),
    linear-gradient(160deg, #FFE9E5 0%, #FFD8D4 50%, #8CA5C4 100%);
  min-height: 380px;
  overflow: hidden;
}
/* Inset Korean characters as massive watermark */
.story-tile-img::before{
  content: "순수빙";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Serif KR', serif;
  font-weight: 600;
  font-size: clamp(120px, 14vw, 220px);
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: -.04em;
  line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
}
.story-tile-img::after{
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  pointer-events: none;
}
.story-tile-img .stamp-corner{
  position: absolute;
  top: 28px; left: 28px;
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--navy);
  font-size: 11px; letter-spacing: .32em;
  background: rgba(255, 246, 244, 0.92);
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid rgba(255, 192, 187, .5);
}

.story-tile-text{
  padding: 44px 40px 38px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 1px solid var(--hairline);
}
.story-tile-text small{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--coral-deep);
  font-size: 16px;
  display: flex; align-items: center; gap: 10px;
}
.story-tile-text small::before{
  content: ""; width: 24px; height: 1px; background: var(--coral);
}
.story-tile-text h3{
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw + 8px, 36px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 14px 0 18px;
}
.story-tile-text h3 em{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  color: var(--coral-deep);
}
.story-tile-text .tagline{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--coral-deep);
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.story-tile-text p.preview{
  font-family: 'Fraunces', serif;
  font-size: 14px; line-height: 1.75;
  color: var(--sub);
  margin-bottom: 26px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.story-tile-text p.preview::first-letter{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 32px;
  color: var(--coral-deep);
  margin-right: 2px;
  line-height: 1;
}
.story-tile-text .read-more{
  font-family: 'Fraunces', serif;
  font-size: 11px; letter-spacing: .28em;
  color: var(--ivory); background: var(--navy);
  padding: 13px 22px; border-radius: 99px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  border: 1px solid var(--navy-deep);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(61,86,121,.32), inset 0 1px 0 rgba(255,192,187,.3);
  transition: transform .15s ease;
}
.story-tile-text .read-more:hover{ transform: translateX(2px); }
.story-tile-text .read-more::after{ content: "→"; letter-spacing: 0; font-size: 13px; }


/* ===== ABOUT PAGE ===== */
.about-hero{
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 60px) clamp(36px, 5vw, 60px);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.about-hero::before{
  content: "순수빙";
  position: absolute;
  bottom: -40px; right: -20px;
  font-family: 'Noto Serif KR', serif;
  font-weight: 600;
  font-size: clamp(180px, 22vw, 320px);
  color: rgba(255, 192, 187, 0.22);
  letter-spacing: -.04em;
  line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.about-hero > *{ position: relative; z-index: 1; }
.about-hero .ko-label{
  font-family: 'Noto Serif KR', serif;
  font-size: 14px; color: var(--coral-deep);
  letter-spacing: .15em;
  display: flex; align-items: center; gap: 12px;
}
.about-hero .ko-label::before{
  content: ""; width: 30px; height: 1px; background: var(--coral);
}
.about-hero h1{
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw + 16px, 80px);
  line-height: 1.0;
  letter-spacing: -.025em;
  margin: 16px 0 24px;
  color: var(--navy);
  max-width: 12ch;
}
.about-hero h1 em{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  color: var(--coral-deep);
}
.about-hero .tagline{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(15px, 0.6vw + 12px, 19px);
  color: var(--coral-deep);
  margin-bottom: 26px;
  letter-spacing: .01em;
}
.about-hero .intro{
  font-family: 'Fraunces', serif;
  font-size: clamp(15px, 0.5vw + 12px, 18px);
  line-height: 1.7;
  color: var(--ink);
  max-width: 620px;
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
  margin-top: 16px;
}

/* CHAPTERS */
.about-chapters{
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 60px);
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
}
.chapter{
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(24px, 4vw, 60px);
  max-width: 880px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  padding-bottom: clamp(36px, 4vw, 50px);
  border-bottom: 1px solid var(--hairline);
}
.chapter:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.chapter .num{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(38px, 3vw + 16px, 56px);
  color: var(--coral);
  font-weight: 300;
  line-height: 1;
  text-align: right;
}
.chapter h2{
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(26px, 2vw + 12px, 38px);
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -.015em;
  margin-bottom: 18px;
}
.chapter .body{
  font-family: 'Fraunces', serif;
  font-size: clamp(14px, 0.4vw + 12px, 16px);
  line-height: 1.8;
  color: var(--sub);
}
.chapter .body p{ margin-bottom: 1.2em; }
.chapter .body p:first-of-type::first-letter{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(36px, 2vw + 16px, 48px);
  color: var(--coral-deep);
  float: left;
  line-height: 0.9;
  margin: 6px 8px -2px 0;
}

/* VALUES */
.about-values{
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 60px);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.about-values .head{
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 44px);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.about-values .head small{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--coral-deep);
  font-size: 16px;
  display: block;
  margin-bottom: 6px;
}
.about-values .head h3{
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(28px, 2vw + 12px, 40px);
  color: var(--navy);
  letter-spacing: -.015em;
}
.values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.value-card{
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: clamp(24px, 2vw + 12px, 36px);
  position: relative;
  box-shadow: 0 4px 16px -8px rgba(61,86,121,.12);
}
.value-card .ic-wrap{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--pink-pale), var(--pink));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--coral-deep);
  border: 1px solid var(--hairline-2);
}
.value-card .ic-wrap svg{ width: 24px; height: 24px; }
.value-card h4{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 4px;
}
.value-card .ko-mini{
  font-family: 'Noto Serif KR', serif;
  font-size: 11px;
  color: var(--coral-deep);
  letter-spacing: .12em;
  margin-bottom: 14px;
}
.value-card p{
  font-family: 'Fraunces', serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sub);
}

/* CLOSING */
.about-closing{
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 60px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}
.about-closing .ko-label{
  font-family: 'Noto Serif KR', serif;
  font-size: 13px; color: var(--coral-deep);
  letter-spacing: .18em;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.about-closing .ko-label::before,
.about-closing .ko-label::after{
  content: "◇"; color: var(--coral); font-style: normal;
}
.about-closing h2{
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(32px, 3vw + 14px, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-bottom: 24px;
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}
.about-closing h2 em{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  color: var(--coral-deep);
}
.about-closing .body{
  font-family: 'Fraunces', serif;
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  line-height: 1.8;
  color: var(--ink);
  max-width: 540px;
  margin: 0 auto 32px;
}
.about-closing .body p{ margin-bottom: 1em; }
.about-closing .cta{
  font-family: 'Fraunces', serif;
  font-size: 12px; letter-spacing: .28em;
  color: var(--ivory); background: var(--navy);
  padding: 16px 32px; border-radius: 99px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--navy-deep);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(61,86,121,.32), inset 0 1px 0 rgba(255,192,187,.3);
}
.about-closing .cta::after{ content: "→"; letter-spacing: 0; font-size: 14px; }


/* ===== STORY TILE — TABLET ===== */
@media (max-width: 1024px){
  .story-section{ padding: 36px 24px; }
  .story-tile{ grid-template-columns: 1fr; }
  .story-tile-img{ min-height: 240px; }
  .story-tile-img::before{ font-size: clamp(80px, 14vw, 140px); }
  .story-tile-text{ border-left: none; border-top: 1px solid var(--hairline); padding: 32px 28px 28px; }
}

/* ===== MOBILE ===== */
@media (max-width: 720px){
  .story-section{ padding: 28px 16px; }
  .story-tile-img{ min-height: 200px; }
  .story-tile-img::before{ font-size: 88px; }
  .story-tile-img .stamp-corner{ top: 16px; left: 16px; font-size: 10px; padding: 5px 10px; }
  .story-tile-text{ padding: 26px 22px 22px; }
  .story-tile-text h3{ font-size: 24px; }
  .story-tile-text p.preview{ font-size: 13px; }
  .story-tile-text .read-more{ padding: 12px 20px; font-size: 10px; }

  /* About chapters: stack number above */
  .chapter{
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
  .chapter .num{ text-align: left; }

  /* Values: 1 column */
  .values-grid{ grid-template-columns: 1fr; gap: 12px; }
  .value-card{ padding: 22px; }
}

/* ───────────────────────────────────────────────────────────────
   Logo as link (added when logo became a clickable home button)
   ─────────────────────────────────────────────────────────────── */
a.logo {
  text-decoration: none;
  cursor: pointer;
  transition: opacity .18s ease;
}
a.logo:hover { opacity: .72; }
a.logo:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ───────────────────────────────────────────────────────────────
   Clickable menu filter pills + empty state (category filtering)
   ─────────────────────────────────────────────────────────────── */
.filter { cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; user-select: none; }
.filter:hover:not(.on) { border-color: var(--coral); color: var(--coral); }
.menu-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--navy);
  opacity: .5;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
}

/* Tag filter pills — visually lighter than category pills so the two
   filter types are distinguishable. Category pills keep the default style. */
.filter-tag {
  text-transform: none;
  letter-spacing: .08em;
  font-style: italic;
  border-style: dashed;
  opacity: .92;
}
.filter-tag.on { font-style: normal; border-style: solid; }

/* ───────────────────────────────────────────────────────────────
   Menu category landing boxes (click → filtered item view)
   ─────────────────────────────────────────────────────────────── */
.menu-grid.menu-categories{
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.cat-box{
  position:relative; display:block; overflow:hidden;
  border-radius:6px; aspect-ratio:4/3;
  border:1px solid var(--hairline);
  box-shadow:0 6px 18px -8px rgba(61,86,121,.22);
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cat-box:hover{ transform:translateY(-3px); box-shadow:0 12px 26px -10px rgba(61,86,121,.32); }
.cat-pic{ position:absolute; inset:0; }
.cat-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-pic svg{ width:100%; height:100%; }
.cat-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 18px 16px;
  background:linear-gradient(to top, rgba(31,43,61,.78) 0%, rgba(31,43,61,.35) 55%, rgba(31,43,61,0) 100%);
}
.cat-name{
  font-family:'Fraunces',serif; font-weight:500; font-size:22px; line-height:1.1;
  color:#fff; letter-spacing:.01em;
}
.cat-count{
  font-family:'Outfit',sans-serif; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.82); margin-top:5px;
}
/* color strip per tone, echoing the item cards */
.cat-box::after{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:3;
  background:var(--coral);
}
.cat-box.b-matcha::after{background:#A8C49A}
.cat-box.b-strawberry::after{background:#F28F8B}
.cat-box.b-injeolmi::after{background:#FFC0BB}
.cat-box.b-mango::after{background:#F2B872}
.cat-box.b-oreo::after{background:#3D5679}
.cat-box.b-cookies::after{background:#D9706B}
.cat-box.b-pat::after{background:#8B3D5E}
.cat-box.b-yogurt::after{background:#8CA5C4}

/* Back pill in the head when inside a category */
.back-pill{ cursor:pointer; }
.back-pill:hover{ border-color:var(--coral); color:var(--coral); }

@media (max-width: 980px){
  .menu-grid.menu-categories{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .menu-grid.menu-categories{ grid-template-columns: 1fr; }
  .cat-name{ font-size:20px; }
}

/* ───────────────────────────────────────────────────────────────
   Showcase two-column layout: info left, image stage right
   ─────────────────────────────────────────────────────────────── */
.product-tile.two-col{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:30px;
  align-items:start;
}
.product-tile.two-col .tile-left{
  display:flex; flex-direction:column; gap:18px;
  min-width:0;
}
.product-tile.two-col .tile-right{
  display:flex; flex-direction:column; gap:14px;
  min-width:0;
}
/* In two-col mode the head stacks vertically (Korean + title, then badge) */
.product-tile.two-col .tile-head.col{
  flex-direction:column; align-items:flex-start; gap:14px;
  border-bottom:1px solid rgba(217,112,107,.3);
}
.product-tile.two-col .tile-head.col h1{ font-size:40px; }
.product-tile.two-col .tile-left .size-row{ margin:0; }
/* In the narrow left column the description + CTA must STACK, not sit in a
   side-by-side flex row (the base .tile-desc is a horizontal row, which here
   squeezes the paragraph into a one-word-wide column). Override to vertical:
   full-width paragraph on top, full-width order button below it. */
.product-tile.two-col .tile-left .tile-desc{
  margin-top:auto;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
}
.product-tile.two-col .tile-left .tile-desc p{
  max-width:none;            /* let the copy use the whole column width */
}
.product-tile.two-col .tile-left .tile-cta{
  align-self:flex-start;     /* button hugs its content, sits under the text */
}
/* right column stage fills its width */
.product-tile.two-col .tile-right .stage-area{
  width:100%; height:380px; margin:0;
  align-items:center;        /* center vertically instead of bottom-anchored */
  justify-content:center;
}
.product-tile.two-col .tile-right .stage-area::before,
.product-tile.two-col .tile-right .stage-area::after{
  display:none;              /* drop the bottom spotlight/ring meant for the SVG bowl */
}
.product-tile.two-col .tile-right .bowl-display{
  width:auto; max-width:90%;
  transform:none;            /* remove the bottom-nudge used by the placeholder */
  display:flex; align-items:center; justify-content:center;
}
.product-tile.two-col .tile-right .bowl-display img{
  border-radius:6px; object-fit:contain;
  max-height:340px; max-width:100%; display:block;
}

@media (max-width: 860px){
  .product-tile.two-col{ grid-template-columns: 1fr; }
  .product-tile.two-col .tile-right{ order:-1; }   /* image on top on mobile */
  .product-tile.two-col .tile-right .stage-area{
    height:auto;                 /* frame sizes to the image, not a fixed px */
    max-height:70vh;             /* never taller than most of the viewport */
    overflow:hidden;             /* clip anything that would spill the frame */
    align-items:center; justify-content:center;
    padding:0;                   /* image fills the frame edge-to-edge */
  }
  /* The base .bowl-display is a rigid 380px wide and nudged down 20px, which is
     what burst out of the frame. Make it fill the frame instead. */
  .product-tile.two-col .tile-right .bowl-display{
    width:100%; max-width:100%; max-height:70vh;
    transform:none;
  }
  .product-tile.two-col .tile-right .bowl-display img{
    width:100%; height:auto;
    max-height:70vh;
    object-fit:cover;            /* fill the frame; no white letterbox bands */
    display:block;
    border-radius:6px;
  }
}