/* =====================================================
   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;
  }
  .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%);
  }
  .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)}

  /* ==================================================================
     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}
  .item .meta{position:relative; z-index:2}
  .item .meta .name{
    font-family:'Fraunces',serif; font-weight:500; font-size:13px; line-height:1.18;
    color:var(--navy);
  }
  .item .meta .ko{
    font-family:'Noto Serif KR',serif; font-size:9px; color:var(--navy-deep);
    margin-top:2px; letter-spacing:.06em; opacity:.7;
  }
  .item .meta .price{
    font-family:'Fraunces',serif; font-style:italic;
    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: 10px; 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: 280px; 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% - 24px);
    margin: -32px 12px 0;
    padding: 26px 22px 22px;
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    text-align: left;
    color: inherit;
    z-index: 5;
  }
  .hero .hero-tile::after {
    left: 22px; right: auto; transform: none;
    font-size: 11px; padding: 5px 11px;
  }
  .hero-title,
  .hero[data-hero-layout="text-only"] .hero-title { color: var(--navy); font-size: 36px; line-height: 1.02; margin-top: 12px; }
  .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: 10px; padding-top: 12px; margin-top: 14px;
  }
  .hero-meta p { max-width: 100%; font-size: 13px; 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 .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: 9px; }
  .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; }
}