/* ============================================================
   여감차 랜딩 페이지 - style.css
   multi.dibud.co.kr 스타일 컨벤션 기반
============================================================ */

/* Reset & Base */
*, *::before, *::after {margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}
body {font-family:var(--font-ko);color:var(--text);background:#fff;line-height:1.65;overflow-x:hidden;word-break:keep-all;-webkit-font-smoothing:antialiased;}
a {text-decoration:none;color:inherit;}
ul, ol {list-style:none;}
img {max-width:100%;height:auto;display:block;}
button {cursor:pointer;border:none;background:none;font-family:inherit;}
em {font-style:normal;color:var(--primary-dark);}
b {font-weight:700;}
:root {
  --primary:#7fc141;
  --primary-dark:#5fa02e;
  --gold:#e8b84b;
  --gold-dark:#d9a23a;
  --dark:#1a1a1a;
  --text:#333;
  --text-light:#666;
  --border:#e3e3e3;
  --bg-light:#f7f7f7;
  --bg-cream:#faf8f1;
  --bg-cream2:#f3ecdc;
  --font-en:'Montserrat', sans-serif;
  --font-ko:'Noto Sans KR', sans-serif;
  --transition:0.3s ease;
  --header-h:74px;
  --radius:16px;
  --shadow:0 18px 40px -18px rgba(40,60,25,0.35);
  --shadow-sm:0 8px 22px -12px rgba(40,60,25,0.3);
}

/* Utility */
.container {max-width:1200px;margin:0 auto;padding:0 24px;overflow-x:hidden;}

/* Buttons */
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:0.95rem;padding:13px 26px;border-radius:999px;transition:transform .2s var(--transition), box-shadow .2s var(--transition), background .2s var(--transition);white-space:nowrap;font-family:inherit;}
.btn-lg {padding:16px 34px;font-size:1rem;}
.btn-block {width:100%;}
.btn-primary {background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 10px 22px -10px rgba(95,160,46,.8);}
.btn-primary:hover {transform:translateY(-2px);box-shadow:0 16px 28px -10px rgba(95,160,46,.9);}
.btn-line {background:rgba(255,255,255,.7);color:var(--primary-dark);border:1.5px solid rgba(95,160,46,.35);}
.btn-line:hover {background:#fff;transform:translateY(-2px);}

/* Header */
.header {position:fixed;top:0;left:0;right:0;height:var(--header-h);background:#fff;box-shadow:0 1px 8px rgba(0,0,0,0.08);z-index:1000;transition:box-shadow var(--transition), height var(--transition);}
.header.scrolled {box-shadow:0 2px 14px rgba(0,0,0,0.1);}
.header-inner {max-width:1200px;width:100%;height:100%;margin:0 auto;display:flex;align-items:center;padding:0 24px;position:relative;}
.header-logo {flex-shrink:0;display:flex;align-items:center;gap:10px;font-weight:800;}
.logo-mark {width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;font-size:19px;background:linear-gradient(135deg, var(--primary), var(--primary-dark));box-shadow:var(--shadow-sm);}
.logo-text {display:flex;flex-direction:column;line-height:1.1;font-size:1.2rem;color:var(--dark);}
.logo-text small {font-size:0.69rem;font-weight:600;color:var(--text-light);letter-spacing:.04em;}
.gnb {position:absolute;left:50%;transform:translateX(-50%);}
.gnb-menu {display:flex;gap:0;}
.gnb-menu li > a {display:block;padding:0 22px;line-height:var(--header-h);font-size:0.95rem;font-weight:600;color:var(--text);letter-spacing:-0.02em;white-space:nowrap;transition:color .2s;}
.gnb-menu li > a:hover {color:var(--primary);}
.header-right {margin-left:auto;display:flex;align-items:center;gap:12px;}
.buy-btn {display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:var(--primary);border:1px solid var(--primary);border-radius:999px;color:#fff;font-size:0.88rem;font-weight:600;transition:all 0.2s;}
.buy-btn:hover {background:var(--primary-dark);border-color:var(--primary-dark);}
.buy-btn svg {flex-shrink:0;}
.hamburger {display:none;flex-direction:column;gap:5px;width:24px;padding:0;}
.hamburger span {display:block;width:100%;height:2px;background:var(--dark);}

/* Main Hero */
.main-hero {position:relative;margin-top:var(--header-h);padding:60px 0 70px;overflow:hidden;}
.hero-bg-pattern {position:absolute;inset:0;z-index:0;background:radial-gradient(800px 500px at 80% -10%, rgba(232,184,75,.28), transparent 60%), radial-gradient(700px 600px at 0% 30%, rgba(127,193,65,.22), transparent 60%), linear-gradient(180deg, var(--bg-cream), var(--bg-cream2));}
.hero-inner {position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;}
.hero-badge {display:inline-block;background:rgba(255,255,255,.8);border:1px solid rgba(95,160,46,.25);color:var(--primary-dark);font-weight:700;font-size:0.81rem;padding:7px 15px;border-radius:999px;margin-bottom:22px;}
.hero-title {font-size:clamp(36px, 6vw, 58px);line-height:1.14;font-weight:800;letter-spacing:-.02em;color:var(--dark);}
.hero-lead {margin:22px 0 30px;font-size:clamp(15px, 2.2vw, 18px);color:var(--text-light);}
.hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;}
.hero-meta {display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.rating {display:flex;align-items:center;gap:7px;font-size:0.88rem;color:var(--text-light);}
.rating strong {font-size:1.1rem;color:var(--text);}
.stars {color:var(--gold);letter-spacing:1px;}
.rating-sub {font-size:0.85rem;}
.meta-divider {width:1px;height:18px;background:rgba(0,0,0,.12);}
.haccp-chip {font-size:0.81rem;font-weight:700;color:var(--primary-dark);background:rgba(127,193,65,.16);padding:6px 13px;border-radius:999px;}

/* Hero visual - tea cup */
.hero-visual {position:relative;display:grid;place-items:center;min-height:360px;}
.cup {position:relative;width:220px;}
.cup-body {position:relative;width:200px;height:150px;margin:0 auto;background:linear-gradient(160deg, #ffffff, #f0ece1);border-radius:14px 14px 90px 90px / 14px 14px 70px 70px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(0,0,0,.04);}
.cup-body::after {content:"";position:absolute;right:-34px;top:34px;width:56px;height:60px;border:12px solid #f0ece1;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;}
.cup-tea {position:absolute;left:8px;right:8px;bottom:8px;height:64%;background:linear-gradient(180deg, var(--gold), var(--gold-dark));border-radius:6px 6px 70px 70px / 6px 6px 55px 55px;box-shadow:inset 0 6px 14px rgba(255,255,255,.35);}
.tea-tag {position:absolute;top:12px;left:50%;transform:translateX(-50%);width:2px;height:70px;background:#cdbf9a;z-index:2;}
.tea-tag span {position:absolute;bottom:-14px;left:50%;transform:translateX(-50%) rotate(45deg);width:18px;height:18px;background:var(--primary-dark);border-radius:2px;}
.cup-saucer {width:250px;height:26px;margin:-6px auto 0;background:linear-gradient(180deg, #ffffff, #e7e1d3);border-radius:50%;box-shadow:var(--shadow);}
.cup-steam {position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:60px;height:50px;}
.cup-steam span {position:absolute;bottom:0;width:8px;height:40px;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85));border-radius:50%;filter:blur(3px);opacity:0;animation:steam 3s ease-in-out infinite;}
.cup-steam span:nth-child(1) {left:8px;animation-delay:0s;}
.cup-steam span:nth-child(2) {left:26px;height:50px;animation-delay:.8s;}
.cup-steam span:nth-child(3) {left:44px;animation-delay:1.5s;}
@keyframes steam {0% {opacity:0;transform:translateY(6px) scaleX(1);} 40% {opacity:.8;} 100% {opacity:0;transform:translateY(-26px) scaleX(1.6);}}
.float-leaf {position:absolute;width:30px;height:30px;border-radius:0 50% 0 50%;opacity:.85;}
.leaf-1 {top:18%;left:12%;background:var(--primary);animation:floaty 6s ease-in-out infinite;}
.leaf-2 {bottom:20%;right:10%;background:var(--primary-dark);width:22px;height:22px;animation:floaty 7s ease-in-out infinite reverse;}
.leaf-3 {top:8%;right:22%;background:var(--gold);width:18px;height:18px;animation:floaty 5.5s ease-in-out infinite .5s;}
@keyframes floaty {0%,100% {transform:translateY(0) rotate(0);} 50% {transform:translateY(-16px) rotate(12deg);}}

/* Trust strip */
.trust-strip {background:var(--dark);color:#fff;padding:26px 0;}
.trust-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;text-align:center;}
.trust-item {display:flex;flex-direction:column;gap:2px;}
.trust-item strong {font-family:var(--font-en);font-size:clamp(22px, 3.4vw, 30px);font-weight:800;color:var(--primary);}
.trust-item span {font-size:0.81rem;color:rgba(255,255,255,.8);}

/* Section base */
.sec {padding:90px 0;}
.about-sec {background:#fff;}
.benefits-sec {background:linear-gradient(180deg, var(--bg-cream), var(--bg-cream2));}
.how-sec {background:#fff;}
.sec-head {max-width:680px;margin:0 auto 50px;text-align:center;}
.sec-eyebrow {font-family:var(--font-en);font-size:0.81rem;font-weight:800;letter-spacing:.16em;color:var(--gold-dark);}
.sec-title {font-size:clamp(26px, 4vw, 38px);font-weight:800;letter-spacing:-.02em;margin:12px 0 16px;color:var(--dark);line-height:1.25;}
.sec-desc {font-size:1rem;color:var(--text-light);}

/* Card grid */
.card-grid {display:grid;gap:24px;}
.card-grid-3 {grid-template-columns:repeat(3, 1fr);}
.card-grid-2 {grid-template-columns:repeat(2, 1fr);}

/* Info card (About) */
.info-card {background:var(--bg-cream);border-radius:var(--radius);padding:36px 28px;border:1px solid rgba(95,160,46,.1);transition:transform .25s var(--transition), box-shadow .25s var(--transition);}
.info-card:hover {transform:translateY(-6px);box-shadow:var(--shadow);}
.info-card-ico {width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(127,193,65,.16);color:var(--primary-dark);margin-bottom:18px;}
.info-card-ico svg {width:28px;height:28px;}
.info-card h3 {font-size:1.25rem;color:var(--dark);margin-bottom:10px;}
.info-card p {font-size:0.94rem;color:var(--text-light);}

/* Benefit card */
.benefit-card {position:relative;background:#fff;border-radius:var(--radius);padding:34px 30px 30px;box-shadow:var(--shadow-sm);overflow:hidden;border-left:4px solid var(--primary);transition:transform .25s var(--transition);}
.benefit-card:hover {transform:translateY(-5px);}
.benefit-num {position:absolute;top:18px;right:24px;font-family:var(--font-en);font-size:44px;font-weight:800;color:rgba(127,193,65,.18);line-height:1;letter-spacing:-.04em;}
.benefit-card h3 {font-size:1.25rem;color:var(--dark);margin-bottom:10px;position:relative;}
.benefit-card p {font-size:0.94rem;color:var(--text-light);position:relative;}
.benefit-card b {color:var(--primary-dark);}
.disclaimer {margin-top:26px;text-align:center;font-size:0.81rem;color:var(--text-light);opacity:.9;}

/* How card */
.how-card {position:relative;background:var(--bg-cream);border-radius:var(--radius);padding:34px 32px;border:1px solid rgba(95,160,46,.12);}
.how-tag {display:inline-block;font-family:var(--font-en);font-size:0.75rem;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--gold-dark);padding:5px 14px;border-radius:999px;margin-bottom:16px;}
.how-tag.cool {background:var(--primary-dark);}
.how-card h3 {font-size:1.3rem;color:var(--dark);margin-bottom:18px;}
.how-steps {counter-reset:step;display:flex;flex-direction:column;gap:14px;}
.how-steps li {position:relative;padding-left:42px;font-size:0.94rem;color:var(--text-light);counter-increment:step;min-height:30px;display:flex;align-items:center;}
.how-steps li::before {content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:700;font-size:0.88rem;}
.how-steps b {color:var(--primary-dark);}
.how-tip {margin-top:28px;text-align:center;font-size:0.95rem;color:var(--text);background:rgba(127,193,65,.14);padding:16px;border-radius:12px;}
.how-tip b {color:var(--primary-dark);}

/* Review */
.review-sec {background:linear-gradient(135deg, var(--primary-dark), #3a6b1f);color:#fff;}
.review-inner {display:grid;grid-template-columns:.4fr .6fr;gap:50px;align-items:center;}
.review-visual {display:grid;place-items:center;}
.quote-mark {font-family:Georgia, serif;font-size:220px;line-height:.8;color:var(--gold);width:200px;height:200px;display:grid;place-items:center;background:rgba(255,255,255,.06);border-radius:50%;padding-top:60px;}
.review-copy .sec-eyebrow {color:var(--gold);}
.review-copy .sec-title {color:#fff;margin-top:10px;}
.review-copy .sec-title em {color:var(--gold);}
.review-text {font-size:1rem;color:rgba(255,255,255,.9);margin-bottom:16px;}
.review-author {display:flex;align-items:center;gap:12px;margin-top:22px;font-size:0.88rem;color:rgba(255,255,255,.75);}

/* Product */
.product-sec {background:var(--bg-cream);}
.product-card {display:grid;grid-template-columns:.85fr 1.15fr;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);}
.product-thumb {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(160deg, #f6e2a8, rgba(127,193,65,.18));min-height:360px;}
.thumb-cup {position:relative;width:120px;height:96px;background:linear-gradient(160deg, #fff, #efe9da);border-radius:10px 10px 60px 60px / 10px 10px 46px 46px;box-shadow:var(--shadow-sm);}
.thumb-cup::before {content:"";position:absolute;left:7px;right:7px;bottom:7px;height:62%;background:linear-gradient(180deg, var(--gold), var(--gold-dark));border-radius:4px 4px 46px 46px / 4px 4px 36px 36px;}
.thumb-cup::after {content:"";position:absolute;right:-22px;top:22px;width:36px;height:40px;border:9px solid #efe9da;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;}
.thumb-steam {position:absolute;top:-26px;width:7px;height:26px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9));filter:blur(2px);animation:steam 3s ease-in-out infinite;}
.thumb-steam:nth-child(1) {left:38px;}
.thumb-steam:nth-child(2) {left:64px;animation-delay:1s;}
.thumb-label {font-weight:800;font-size:1.1rem;color:var(--dark);background:rgba(255,255,255,.7);padding:6px 18px;border-radius:999px;}
.product-detail {padding:42px 40px;}
.product-eyebrow {font-size:0.81rem;font-weight:700;color:var(--gold-dark);}
.product-name {font-size:clamp(21px, 3vw, 27px);color:var(--dark);margin:8px 0 14px;line-height:1.3;}
.product-rating {display:flex;align-items:center;gap:8px;font-size:0.88rem;color:var(--text-light);margin-bottom:18px;}
.product-rating b {color:var(--text);}
.product-price {margin-bottom:22px;}
.price-now {font-family:var(--font-en);font-size:38px;font-weight:800;color:var(--primary-dark);}
.price-now small {font-family:var(--font-ko);font-size:20px;font-weight:700;margin-left:2px;}
.product-spec {border-top:1px solid #eee;margin-bottom:24px;}
.product-spec li {display:flex;gap:14px;padding:11px 0;border-bottom:1px solid #f0f0f0;font-size:0.94rem;}
.product-spec li span {flex:none;width:78px;color:var(--text-light);}
.product-spec li b {color:var(--text);font-weight:600;}
.product-note {margin-top:14px;font-size:0.78rem;color:var(--text-light);}

/* Final CTA */
.cta-sec {background:var(--dark);color:#fff;padding:80px 0;text-align:center;}
.cta-inner h2 {font-size:clamp(24px, 4vw, 34px);font-weight:800;line-height:1.35;margin-bottom:30px;}

/* Footer */
.footer {background:#20281a;color:rgba(255,255,255,.7);padding:46px 0;font-size:0.85rem;}
.footer-inner {max-width:1200px;margin:0 auto;padding:0 24px;}
.footer-cols {display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.footer-col-brand {display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:420px;}
.footer-brand-row {display:flex;align-items:center;gap:13px;}
.footer-col-brand strong {color:#fff;font-size:1.1rem;}
.footer-brand-row p {font-size:0.81rem;}
.footer-col-info {text-align:right;line-height:1.7;max-width:560px;}
.footer-biz {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 0;font-size:0.82rem;color:rgba(255,255,255,.6);}
.footer-biz li {position:relative;padding:0 12px;}
.footer-biz li::after {content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:rgba(255,255,255,.22);}
.footer-biz li:last-child {padding-right:0;}
.footer-biz li:last-child::after {display:none;}
.footer-biz b {color:rgba(255,255,255,.88);font-weight:700;}
.footer-biz a {transition:color .2s;}
.footer-biz a:hover {color:#fff;}
.footer-tel {display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:9px;}
.footer-tel span {font-size:0.8rem;font-weight:600;color:rgba(255,255,255,.55);}
.footer-tel a {font-family:var(--font-en);font-size:1.6rem;font-weight:800;letter-spacing:-0.01em;color:var(--primary);transition:color .2s;}
.footer-tel a:hover {color:#fff;}
.footer-small {font-size:0.75rem;line-height:1.75;opacity:.6;}
.footer-copy {margin-top:6px;font-family:var(--font-en);opacity:.55;}

/* Top button */
.top-btn {position:fixed;right:24px;bottom:24px;z-index:900;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.2);opacity:0;pointer-events:none;transition:opacity 0.3s, background 0.3s;}
.top-btn.is-visible {opacity:1;pointer-events:auto;}
.top-btn:hover {background:var(--primary-dark);}
.top-btn svg {width:20px;height:20px;}

/* Floating buy (mobile) */
.floating-buy {position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(120px);z-index:890;background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;font-weight:800;padding:15px 40px;border-radius:999px;box-shadow:0 14px 30px -8px rgba(95,160,46,.7);transition:transform .35s var(--transition);display:none;}
.floating-buy.is-visible {transform:translateX(-50%) translateY(0);}

/* Mobile Nav */
.mobile-nav {position:fixed;inset:0;background:#20281a;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 0.4s ease;z-index:1100;overflow-y:auto;}
.mobile-nav.open {opacity:1;pointer-events:auto;}
.mobile-nav-close {position:absolute;top:20px;right:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.15);border-radius:50%;transition:background 0.2s;}
.mobile-nav-close:hover {background:rgba(255,255,255,0.25);}
.mobile-nav-close svg {width:24px;height:24px;}
.mobile-nav-hero {padding:90px 28px 40px;}
.mobile-nav-hero-title {font-size:2.4rem;font-weight:800;color:#fff;line-height:1.3;letter-spacing:-0.02em;margin-bottom:8px;}
.mobile-nav-hero-sub {font-family:var(--font-en);font-size:1rem;font-weight:500;color:rgba(255,255,255,0.7);}
.mobile-nav-links {display:flex;flex-direction:column;padding:12px 0;flex:1;}
.mobile-nav-link {display:flex;align-items:center;padding:16px 28px;font-size:1.4rem;font-weight:600;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.1);transition:all 0.2s;}
.mobile-nav-link:hover {color:#fff;background:rgba(255,255,255,0.05);}
.mobile-nav-footer {padding:20px 28px 32px;}
.mobile-nav-footer span {font-size:0.85rem;color:rgba(255,255,255,0.35);}

/* Reveal animation */
.reveal {opacity:0;transform:translateY(28px);transition:opacity .7s var(--transition), transform .7s var(--transition);}
.reveal.is-visible {opacity:1;transform:none;}

/* Responsive: Tablet */
@media (max-width:1024px) {
  .gnb-menu li > a {padding:0 16px;font-size:0.88rem;}
}

/* Responsive: Mobile */
@media (max-width:768px) {
  :root {--header-h:60px;}
  .gnb {display:none;}
  .hamburger {display:flex;}
  .buy-btn {display:none;}
  .header-inner {padding:0 16px;}
  .sec {padding:64px 0;}
  .main-hero {padding:40px 0 50px;}
  .hero-inner {grid-template-columns:1fr;text-align:center;}
  .hero-actions, .hero-meta {justify-content:center;}
  .hero-visual {order:-1;min-height:300px;}
  .card-grid-3, .card-grid-2 {grid-template-columns:1fr;}
  .review-inner {grid-template-columns:1fr;gap:30px;text-align:center;}
  .review-visual {display:none;}
  .review-author {justify-content:center;}
  .product-card {grid-template-columns:1fr;}
  .product-thumb {min-height:240px;}
  .footer-cols {flex-direction:column;text-align:center;}
  .footer-col-info {text-align:center;margin:0 auto;}
  .footer-biz {justify-content:center;}
  .footer-tel {justify-content:center;}
  .footer-col-brand {align-items:center;max-width:none;margin:0 auto;}
  .footer {padding-bottom:96px;}
  .floating-buy {display:block;}
}

/* Responsive: Small Mobile */
@media (max-width:480px) {
  .container {padding:0 16px;}
  .trust-grid {grid-template-columns:repeat(2, 1fr);gap:22px 12px;}
  .product-detail {padding:32px 24px;}
  .hero-actions {flex-direction:column;}
  .btn-lg {width:100%;}
}