:root{
    --navy:#4A2F22;
    --navy-2:#5C3B2A;
    --navy-3:#2E1D15;
    --gold:#B8875A;
    --gold-light:#E3C39A;
    --gold-pale:#F3E4D0;
    --teal:#6B4A38;
    --teal-light:#F3E4D0;
    --cream:#FBF6EF;
    --ink:#2A1D17;
    --muted:#7A6B5D;
    --line:#E6DCC8;
    --white:#FFFFFF;
    --radius:18px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Noto Sans KR', sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{ font-family:'Noto Serif KR', serif; font-weight:700; color:var(--navy); letter-spacing:-0.01em;}
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold);
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}
  section{ padding:96px 0; }
  @media (max-width:720px){ section{padding:64px 0;} }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(74,47,34,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .nav-inner{ max-width:1180px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:10px; color:var(--white); font-family:'Noto Serif KR',serif; font-weight:700; font-size:19px; letter-spacing:.02em;}
  .brand img{ height:30px; width:auto; display:block; }
  .brand span{color:var(--gold-light); font-size:13px; font-weight:500; font-family:'Noto Sans KR',sans-serif; border-left:1px solid rgba(255,255,255,.25); padding-left:10px; margin-left:2px;}
  nav.links{ display:flex; gap:28px; }
  nav.links a{ color:#C9CEDC; font-size:14px; font-weight:500; }
  nav.links a:hover{ color:var(--white); }
  .nav-cta{
    background:var(--gold); color:var(--navy-3)!important; font-weight:700; font-size:14px;
    padding:10px 20px; border-radius:999px;
  }
  .nav-toggle{ display:none; background:none; border:none; color:var(--white); font-size:22px; cursor:pointer; }
  @media (max-width:840px){
    nav.links{ display:none; }
    .nav-toggle{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--navy);
    color:var(--white);
    overflow:hidden;
    padding:92px 0 76px 0;
  }
  .hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
  @media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } }
  .hero h1{
    color:var(--white); font-size:44px; line-height:1.28; margin:22px 0 20px;
    letter-spacing:-0.01em;
  }
  .hero h1 em{ font-style:normal; color:var(--gold-light); }
  @media (max-width:520px){ .hero h1{ font-size:32px; } }
  .hero p.lead{ color:#C9CEDC; font-size:14.5px; max-width:520px; margin-bottom:32px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 26px; border-radius:999px; font-weight:700; font-size:15px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-gold{ background:var(--gold); color:var(--navy-3); box-shadow:0 10px 30px -10px rgba(201,151,62,.6);}
  .btn-outline{ border:1.5px solid rgba(255,255,255,0.35); color:var(--white); }
  .btn-outline:hover{ border-color:var(--gold-light); }

  .hero-stats{ display:flex; gap:0; border-top:1px solid rgba(255,255,255,.14); padding-top:26px; }
  .hero-stats .stat{ flex:1; padding-right:18px; }
  .hero-stats .stat + .stat{ border-left:1px solid rgba(255,255,255,.14); padding-left:18px; }
  .hero-stats .num{ font-family:'Noto Serif KR',serif; font-size:25px; font-weight:700; color:var(--gold-light); }
  .hero-stats .lbl{ font-size:12.5px; color:#9BA4B8; margin-top:4px; }

  .hero-visual{ position:relative; display:flex; justify-content:center; }
  .hero-visual .frame{
    position:relative; width:100%; max-width:360px; aspect-ratio:1/1;
    border-radius:24px; overflow:hidden;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.12);
    background:var(--navy-2);
  }
  .hero-visual .frame img{ width:100%; height:100%; object-fit:cover; }
  .hero-visual .badge{
    position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
    background:var(--white); color:var(--navy); font-weight:700; font-size:13px;
    padding:10px 18px; border-radius:999px; box-shadow:0 14px 30px -12px rgba(0,0,0,.35);
    white-space:nowrap;
    display:flex; align-items:center; gap:8px;
  }
  .hero-visual .badge .qr{ width:16px; height:16px; }

  /* steam signature */
  .steam{
    position:absolute; pointer-events:none; opacity:.5;
  }
  .steam svg{ width:140px; height:220px; }

  /* ---------- SECTION HEAD ---------- */
  .section-head{ max-width:640px; margin-bottom:46px; }
  .section-head h2{ font-size:32px; margin-top:12px; line-height:1.32; }
  .section-head p{ color:var(--muted); font-size:15.5px; margin-top:14px; }
  @media (max-width:520px){ .section-head h2{ font-size:26px; } }

  /* ---------- WHY (problem) ---------- */
  .why{ background:var(--cream); }
  .why-flow{ display:flex; gap:20px; flex-wrap:wrap; }
  .flow-card{
    flex:1; min-width:250px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 26px;
  }
  .flow-card .k{ font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--gold); text-transform:uppercase;}
  .flow-card h3{ font-size:18px; margin:10px 0 10px; }
  .flow-card p{ color:var(--muted); font-size:14px; }
  .flow-arrow{ display:flex; align-items:center; color:var(--line); font-size:22px; }
  @media (max-width:820px){ .flow-arrow{ display:none; } }

  /* ---------- PRODUCT ---------- */
  .product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  @media (max-width:800px){ .product-grid{ grid-template-columns:1fr; } }
  .product-card{
    border:1px solid var(--line); border-radius:24px; overflow:hidden;
    background:var(--white);
    box-shadow:0 20px 50px -34px rgba(74,47,34,.35);
  }
  .product-card .photo{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--gold-pale);}
  .product-card .photo img{ width:100%; height:100%; object-fit:contain; }
  .product-card .fiber-badge{
    position:absolute; top:16px; right:16px;
    background:var(--navy); color:var(--gold-light); font-size:12.5px; font-weight:700;
    padding:8px 14px; border-radius:999px;
  }
  .product-card .body{ padding:26px 26px 30px; }
  .product-card h3{ font-size:21px; margin-bottom:8px; }
  .product-card .tag{ color:var(--teal); font-size:13px; font-weight:700; margin-bottom:12px; display:block;}
  .product-card p{ color:var(--muted); font-size:14.5px; }
  .product-card ul{ margin-top:16px; padding-left:0; list-style:none; }
  .product-card li{ font-size:13.5px; color:var(--ink); padding:6px 0 6px 22px; position:relative; }
  .product-card li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:700; }

  .lineup{ margin-top:40px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--white); box-shadow:0 20px 50px -34px rgba(74,47,34,.3); }
  .lineup-photo{ width:100%; background:var(--cream); }
  .lineup-photo img{ width:100%; height:auto; display:block; object-fit:contain; }
  .lineup-info{ padding:32px 30px 36px; }
  .lineup-info .tag{ color:var(--gold); font-size:13px; font-weight:700; letter-spacing:.04em; display:block; }
  .lineup-info h3{ font-size:21px; margin:10px 0 10px; }
  .lineup-info p{ color:var(--muted); font-size:14.5px; max-width:680px; }
  .flavor-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .chip{ background:var(--cream); border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px; }
  .chip.flagship{ background:var(--navy); border-color:var(--navy); color:var(--gold-light); }
  .chip.flagship::after{ content:" · 식이섬유 5g"; font-weight:500; opacity:.85; font-size:11px; }

  /* ---------- CASES ---------- */
  .cases{ background:var(--navy); color:var(--white); }
  .cases .section-head h2{ color:var(--white); }
  .cases .section-head p{ color:#AEB6C8; }
  .case-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:22px; }
  @media (max-width:900px){ .case-grid{ grid-template-columns:1fr; } }
  .case-highlight{
    background:var(--gold);
    border-radius:22px; padding:34px 30px; color:var(--navy-3);
    display:flex; flex-direction:column; justify-content:center;
  }
  .case-highlight .big{ font-family:'Noto Serif KR',serif; font-size:46px; font-weight:900; line-height:1; }
  .case-highlight .cap{ font-size:14px; font-weight:700; margin-top:10px; }
  .case-card{
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
    border-radius:22px; overflow:hidden;
  }
  .case-card .photo{ aspect-ratio:16/10; overflow:hidden; background:rgba(255,255,255,0.06);}
  .case-card .photo img{ width:100%; height:100%; object-fit:contain; }
  .case-card .photo img.fill{ object-fit:cover; }
  .case-card .body{ padding:20px 22px 24px; }
  .case-card h4{ color:var(--white); font-size:16.5px; margin-bottom:6px; }
  .case-card p{ color:#AEB6C8; font-size:13.5px; }
  .case-logos{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
  .case-logos span{
    border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:9px 18px;
    font-size:13px; color:#C9CEDC;
  }
  .partner-showcase{ margin-top:44px; }
  .partner-showcase h4{ color:var(--white); font-size:15px; font-weight:700; margin-bottom:16px; }
  .partner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:820px){ .partner-grid{ grid-template-columns:1fr; } }
  .partner-card{
    background:var(--white); border-radius:16px; overflow:hidden; padding:14px;
    box-shadow:0 20px 45px -22px rgba(0,0,0,.5);
  }
  .partner-card img{ width:100%; height:auto; display:block; border-radius:8px; }

  /* ---------- PLATFORM (tech / teal) ---------- */
  .platform{ background:var(--teal-light); }
  .platform .eyebrow{ color:var(--teal); }
  .platform .eyebrow .dot{ background:var(--teal); }

  .flow-steps{ list-style:none; padding-left:0; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:16px; }
  @media (max-width:1000px){ .flow-steps{ list-style:none; padding-left:0; grid-template-columns:repeat(3,1fr); } }
  @media (max-width:620px){ .flow-steps{ list-style:none; padding-left:0; grid-template-columns:repeat(2,1fr); } }
  .step{
    background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px 12px;
    text-align:center; position:relative;
  }
  .step .n{
    width:26px; height:26px; border-radius:50%; background:var(--teal); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
    margin:0 auto 10px;
  }
  .step p{ font-size:12px; color:var(--ink); line-height:1.45; }

  .platform-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
  @media (max-width:900px){ .platform-benefits{ grid-template-columns:repeat(2,1fr); } }
  .pb-card{ background:var(--white); border-radius:16px; padding:22px 20px; border:1px solid var(--line); }
  .pb-card .ic{ font-size:22px; margin-bottom:10px; }
  .pb-card h4{ font-size:14.5px; margin-bottom:6px; }
  .pb-card p{ font-size:12.5px; color:var(--muted); }

  /* ---------- PRICING ---------- */
  .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
  @media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
  .price-card{
    border:1px solid var(--line); border-radius:22px; padding:34px 28px;
    display:flex; flex-direction:column;
  }
  .price-card.reco{
    border-color:var(--gold); background:var(--gold-pale);
    box-shadow:0 30px 60px -30px rgba(201,151,62,.5);
    position:relative;
  }
  .price-card.reco::before{
    content:"추천"; position:absolute; top:-13px; right:28px;
    background:var(--gold); color:var(--navy-3); font-size:12px; font-weight:700;
    padding:5px 14px; border-radius:999px;
  }
  .price-card .tier{ font-family:'Noto Serif KR',serif; font-size:22px; color:var(--navy); font-weight:700; }
  .price-card .usage{ font-size:13px; color:var(--muted); margin:8px 0 22px; }
  .price-line{ display:flex; justify-content:space-between; font-size:13.5px; padding:10px 0; border-top:1px dashed var(--line); }
  .price-line:first-of-type{ border-top:none; }
  .price-line b{ color:var(--navy); }
  .price-card .incl{ margin-top:18px; font-size:12px; color:var(--teal); font-weight:700; }

  .pricing-note{ margin-top:22px; font-size:12.5px; color:var(--muted); }

  /* ---------- SPEC ---------- */
  .spec{ background:var(--cream); }
  .spec-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; }
  @media (max-width:860px){ .spec-wrap{ grid-template-columns:1fr; } }
  .spec-visual{ border-radius:22px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(74,47,34,.35); }
  .spec-table{ width:100%; border-collapse:collapse; }
  .spec-table tr{ border-bottom:1px solid var(--line); }
  .spec-table tr:last-child{ border-bottom:none; }
  .spec-table td{ padding:13px 6px; font-size:13.5px; }
  .spec-table td:first-child{ color:var(--muted); width:38%; }
  .spec-table td:last-child{ color:var(--ink); font-weight:600; }

  /* ---------- TRUST ---------- */
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
  .trust-card{ text-align:left; }
  .trust-card .ic{
    width:50px; height:50px; border-radius:14px; background:var(--gold-pale);
    display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px;
  }
  .trust-card h4{ font-size:15px; margin-bottom:8px; }
  .trust-card p{ font-size:13px; color:var(--muted); }

  .company-strip{
    margin-top:56px; border-top:1px solid var(--line); padding-top:36px;
    display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;
  }
  .company-strip .item{ min-width:140px; }
  .company-strip .item .num{ font-family:'Noto Serif KR',serif; font-size:26px; font-weight:700; color:var(--navy); }
  .company-strip .item .lbl{ font-size:12.5px; color:var(--muted); margin-top:4px; }

  /* ---------- CTA / FOOTER ---------- */
  .cta{
    background:var(--navy-3);
    color:var(--white); text-align:center;
  }
  .cta h2{ color:var(--white); font-size:34px; max-width:640px; margin:0 auto 18px; line-height:1.35;}
  .cta p{ color:#AEB6C8; max-width:520px; margin:0 auto 34px; font-size:15.5px; }
  .cta .btn-gold{ font-size:16px; padding:17px 34px; }

  footer{ background:var(--navy-3); color:#8890A4; padding:40px 0; }
  .footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; font-size:13px; }
  .footer-inner .fb{ color:var(--gold-light); font-family:'Noto Serif KR',serif; font-weight:700; font-size:16px; margin-bottom:8px; display:block;}
  .footer-links{ display:flex; gap:22px; flex-wrap:wrap; }

  ::selection{ background:var(--gold-light); color:var(--navy-3); }

  /* ---------- MODAL ---------- */
  button{ font-family:inherit; }
  .btn{ border:none; cursor:pointer; }
  .modal-overlay{
    position:fixed; inset:0; z-index:200; display:none;
    align-items:center; justify-content:center; padding:20px;
    background:rgba(46,29,21,.55); backdrop-filter:blur(3px);
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    background:var(--white); border-radius:22px; padding:38px 34px;
    max-width:440px; width:100%; position:relative;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.45);
    max-height:88vh; overflow-y:auto;
  }
  .modal-close{
    position:absolute; top:16px; right:16px; width:32px; height:32px;
    border:none; background:var(--cream); border-radius:50%; color:var(--muted);
    font-size:18px; cursor:pointer; line-height:1;
  }
  .modal-box h3{ font-size:23px; margin:6px 0 8px; padding-right:20px;}
  .modal-desc{ font-size:13.5px; color:var(--muted); margin-bottom:22px; line-height:1.6;}
  #inquiryForm label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:14px;}
  #inquiryForm .req{ color:#B23B20; font-weight:400;}
  #inquiryForm input, #inquiryForm select{
    display:block; width:100%; margin-top:7px; padding:12px 14px;
    border:1px solid var(--line); border-radius:10px; font-size:14px;
    font-family:inherit; color:var(--ink); background:var(--cream);
  }
  #inquiryForm input:focus, #inquiryForm select:focus{ outline:none; border-color:var(--gold); background:var(--white); }
  .modal-submit{ width:100%; justify-content:center; margin-top:6px; font-size:15px; padding:14px 22px;}
  .success-box{ text-align:center; padding:10px 0 4px; }
  .success-ic{
    width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
    background:var(--gold-pale); color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;
  }
  .btn-outline-dark{
    border:1.5px solid var(--line); color:var(--ink); background:none;
    padding:12px 26px; border-radius:999px; font-weight:700; font-size:14px; cursor:pointer;
  }
  .error-note{ font-size:12.5px; color:#B23B20; background:#FBEAE4; border:1px solid #F1C7B8; padding:10px 14px; border-radius:10px; margin-bottom:16px; line-height:1.6;}

  @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

.skip-link{position:fixed;left:12px;top:-80px;z-index:999;background:#fff;color:#111;padding:10px 16px;border-radius:8px}.skip-link:focus{top:12px}:focus-visible{outline:3px solid #1473e6;outline-offset:3px}body.modal-open{overflow:hidden}.nav-toggle{min-width:44px;min-height:44px}@media(max-width:840px){.nav-toggle{display:block}nav.links.open{display:flex;position:absolute;top:100%;left:0;right:0;padding:18px 28px;background:#4A2F22;flex-direction:column;align-items:stretch}.nav.links.open a{min-height:44px;display:flex;align-items:center}}.modal-submit:disabled{opacity:.65;cursor:wait}

/* Accessibility and resilient interaction */
[hidden]{display:none!important}
#main:focus{outline:none}
.field-help{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:400}
.privacy-consent{display:grid!important;grid-template-columns:auto 1fr;align-items:start;gap:8px;line-height:1.5}
.privacy-consent input{width:18px!important;height:18px;margin:2px 0 0!important}
.table-scroll{max-width:100%;overflow-x:auto}
.spec-table caption{text-align:left;padding:0 6px 12px;font-weight:700;color:var(--navy)}
.spec-table th{padding:13px 6px;text-align:left;font-size:13.5px;color:var(--muted);width:38%;font-weight:500}
.nav-cta,.btn,.modal-close,.btn-outline-dark{min-height:44px}
img{height:auto}
@media(max-width:520px){
  .hero-stats{display:grid;grid-template-columns:1fr;gap:12px}
  .hero-stats .stat{padding:0}
  .hero-stats .stat+.stat{border-left:0;padding-left:0}
  .platform-benefits,.trust-grid{grid-template-columns:1fr}
  .modal-box{padding:34px 20px 24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.flow-title{margin-top:8px;font-size:20px}.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}.footer-logo{height:26px;width:auto}

.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}