/* ============================================================
   KittyChat — shared site styles
   Linked by every page as /static/styles.css
   Page-specific rules remain in a small inline <style> per page.
   ============================================================ */

/* SUITE Variable — used for headings & titles */
  @font-face{
    font-family:'SUITE Variable';
    src:url('/static/fonts/SUITE-Variable.woff2') format('woff2-variations'),
        url('/static/fonts/SUITE-Variable.woff2') format('woff2');
    font-weight:100 900;font-style:normal;font-display:swap;
  }

/* Manrope — English pages' text font. Light covers weight 400 and below;
   Bold covers weight 500 and above, so bold text uses the real Bold face
   instead of a synthesized one. */
  @font-face{
    font-family:'Manrope';
    src:url('/static/fonts/manrope.light.otf') format('opentype');
    font-weight:100 400;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Manrope';
    src:url('/static/fonts/manrope.bold.otf') format('opentype');
    font-weight:500 900;font-style:normal;font-display:swap;
  }

/* English pages: everything is Manrope; the big titles keep Bebas Neue via each
   EN page's inline override (which uses !important on the font-family). */
  html[lang="en"]{
    --font-body:'Manrope',system-ui,sans-serif;
    --font-display:'Manrope',system-ui,sans-serif;
  }

/* Spanish pages are Latin script like the English ones, so they run on the
   same self-hosted Manrope and load no extra webfont. */
  html[lang="es"],
  html[lang="pt"]{
    --font-body:'Manrope',system-ui,sans-serif;
    --font-display:'Manrope',system-ui,sans-serif;
  }

  html[lang="es"] .plan-name,
  html[lang="pt"] .plan-name{
    font-family:'Bebas Neue','Manrope',system-ui,sans-serif;
    letter-spacing:.01em;
  }

/* English pages: plan names in Bebas Neue, like the other titles */
  html[lang="en"] .plan-name{
    font-family:'Bebas Neue','Manrope',system-ui,sans-serif;
    letter-spacing:.01em;
  }

/* Japanese pages: headers use Noto Sans JP (loaded via Google Fonts on each
   ja page); body text uses the Yu Gothic system font at a light weight,
   falling back to Noto Sans JP Light where Yu Gothic isn't available. */
  html[lang="ja"]{
    --font-body:'Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
    --font-display:'Noto Sans JP','Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN',sans-serif;
  }
  html[lang="ja"] body{font-weight:300}

/* body sets word-break:keep-all, which suits Korean and English because both
   break at spaces. Japanese has no spaces, so keep-all leaves no legal break
   point and a sentence becomes one unbreakable run — it overflowed its grid
   column instead of wrapping. `normal` restores standard CJK line breaking
   (kinsoku), letting Japanese wrap between characters as it should. */
  html[lang="ja"] body{word-break:normal}

:root{
    --bg:#F4F2E9;
    --bg-warm:#EAE6D7;
    --ink:#1A2418;
    --ink-soft:#4F594B;
    --line:#D9D2BC;
    --card:#FFFFFF;
    --primary:#16A34A;
    --primary-ink:#FFFFFF;
    --accent:#E0A33A;
    --accent-2:#C8BFA3;
    --pink:#DCEBD3;
    --ig-grad:linear-gradient(45deg,#F09433 0%,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888 100%);
    --shadow:0 1px 0 rgba(0,0,0,.04), 0 14px 30px -16px rgba(40,50,30,.18);
    --shadow-lg:0 1px 0 rgba(0,0,0,.04), 0 30px 60px -30px rgba(40,50,30,.28);
    --radius:18px;
    --radius-sm:12px;
    --radius-lg:28px;
    /* Korean pages run entirely on the self-hosted SUITE Variable, so they load
       no webfont beyond it. SUITE covers the 2,350-syllable common Hangul set;
       rarer syllables, CJK and dashes fall through to the OS Korean face. */
    --font-body:'SUITE Variable','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
    --font-display:'SUITE Variable','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  }

/* Apply SUITE to all headings & display-type elements */
  h1, h2, h3, h4, h5, h6,
  .hero-title, .sec-title,
  .feat-title, .step h3,
  .tess-body, .who .n,
  .plan-name, .price-amt,
  .cta-card h2,
  .qa summary,
  .panel h4,
  .stat .v,
  .logo,
  .float-2 .n,
  .rotator{
    font-family: var(--font-display);
    letter-spacing:-.025em;
  }

*{box-sizing:border-box}

html,body{margin:0;padding:0;background:#F4F2E9}

html{background:var(--bg)}

body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.55;
    overflow-x:hidden;
    word-break:keep-all;
    letter-spacing:-.01em;
  }

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}

.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em;margin-left:25px}

.logo img{height:32px;width:auto;display:block}

.nav-links{display:flex;gap:32px;font-size:15px;font-weight:700;color:var(--ink-soft)}

.nav-links a:hover{color:var(--ink)}

.nav-links a{text-decoration:none;color:inherit}

/* nav dropdown (use cases) */
  .nav-dd{position:relative}

.nav-dd-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--ink-soft);font:inherit;background:none;border:0;padding:0}

.nav-dd-toggle:hover{color:var(--ink)}

.nav-dd-toggle .dd-caret{font-size:10px;opacity:.6;transition:transform .2s ease}

.nav-dd.open .nav-dd-toggle{color:var(--ink)}

.nav-dd.open .nav-dd-toggle .dd-caret{transform:rotate(180deg)}

.nav-dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(26,36,24,.16);padding:8px;min-width:248px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:60}

.nav-dd::before{content:"";position:absolute;top:100%;left:0;right:0;height:18px}

.nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.nav-dd-menu a{display:block;padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}

.nav-dd-menu a:hover{background:var(--bg)}

.nav-cta{display:flex;align-items:center;gap:14px}

/* mobile hamburger nav */
  .nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink);padding:0;-webkit-tap-highlight-color:transparent}

.nav-burger span{position:relative;display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:background .15s ease}

.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease}

.nav-burger span::before{top:-7px}

.nav-burger span::after{top:7px}

.nav-burger.open span{background:transparent}

.nav-burger.open span::before{transform:translateY(7px) rotate(45deg)}

.nav-burger.open span::after{transform:translateY(-7px) rotate(-45deg)}

.nav-mobile{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 44px rgba(26,36,24,.16);display:none;z-index:55;max-height:calc(100vh - 66px);overflow-y:auto}

.nav-mobile.open{display:block}

.nav-mobile .nm-wrap{display:flex;flex-direction:column;gap:2px;padding:14px 28px 26px}

.nav-mobile a{display:block;text-decoration:none;color:var(--ink);font-weight:700;font-size:16px;padding:13px 2px;border-radius:10px}

.nav-mobile a:active{background:var(--bg)}

.nav-mobile .nm-label{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;padding:16px 2px 4px}

.nav-mobile .nm-sub{padding-left:18px;font-size:15px;font-weight:600;color:var(--ink-soft)}

.nav-mobile .nm-divider{height:1px;background:var(--line);margin:12px 2px}

.nav-mobile .nm-login{font-weight:800}

.nav-mobile .nm-start{margin-top:10px;background:var(--primary);color:var(--primary-ink);text-align:center;border-radius:999px;font-weight:800;box-shadow:0 4px 0 rgba(0,0,0,.12);padding:14px 2px}

@media (max-width:960px){
    .nav-burger{display:inline-flex}
    .nav-cta > a{display:none}
    .logo img{height:29px}
    .logo{margin-left:15px}
    .foot-grid li a{font-size:12.5px}
  }

.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 22px;border-radius:999px;font-weight:800;font-size:15px;
    border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease;
    font-family:inherit;letter-spacing:-.01em;
  }

.btn:hover{transform:translateY(-1px)}

.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 4px 0 rgba(0,0,0,.12)}

.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

.btn-ghost:hover{background:var(--ink);color:var(--bg)}

.btn-soft{background:var(--card);color:var(--ink);border-color:var(--line)}

.btn-lg{padding:16px 28px;font-size:17px}

/* ---------- HERO ---------- */
  .hero{position:relative;padding:96px 0 80px;overflow:hidden;text-align:center}

.hero-inner{display:flex;flex-direction:column;align-items:center;gap:0;max-width:1040px;margin:0 auto}

.pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    background:var(--pink);color:#7A2E18;font-weight:800;font-size:13px;
    border:1px solid rgba(122,46,24,.12);
  }

.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--primary)}

h1.hero-title{
    font-size:clamp(40px, 5.8vw, 78px);
    line-height:1.22;letter-spacing:-.035em;font-weight:800;
    margin:22px 0 26px;text-wrap:balance;
  }

/* Japanese hero title runs long enough that the 78px desktop cap wraps to
   3 lines at typical widths (1280px+); a slightly lower cap keeps it to 2
   without touching the vw-scaled behavior on mobile. */
  html[lang="ja"] h1.hero-title{
    font-size:clamp(40px, 5.8vw, 74px);
  }

/* Rotating word */
  .rotator{
    position:relative;display:inline-block;vertical-align:bottom;
    overflow:hidden;height:1.22em;line-height:1.22em;
    color:var(--primary);
  }

.rotator::after{
    content:"";position:absolute;left:-4%;right:-4%;bottom:.18em;height:.24em;
    background:var(--pink);z-index:-1;border-radius:8px;transform:rotate(-1.2deg);
  }

.rotator-inner{
    display:flex;flex-direction:column;
    animation: rotate 7.5s cubic-bezier(.7,.05,.3,1) infinite;
  }

.r-word{height:1.22em;line-height:1.22em;white-space:nowrap;display:block}

@keyframes rotate{
    0%, 26%   { transform: translateY(0); }
    33%, 59%  { transform: translateY(-1.22em); }
    66%, 92%  { transform: translateY(-2.44em); }
    100%      { transform: translateY(-3.66em); }
  }

@media (prefers-reduced-motion: reduce){
    .rotator-inner{animation:none}
  }

.hero-sub{font-size:18px;color:var(--ink-soft);max-width:600px;margin:0 auto 34px;line-height:1.7}

.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}

.hero-meta{display:flex;gap:28px;margin-top:32px;font-size:13px;color:var(--ink-soft);font-weight:700;flex-wrap:wrap;justify-content:center}

.hero-meta .stars{color:#E8A33A;letter-spacing:1px}

.hero-meta b{color:var(--ink)}

/* Hero illustration: phone with chat */
  .hero-art{position:relative;margin:60px auto 0;width:340px}

.phone{
    width:340px;background:var(--ink);border-radius:42px;padding:14px;
    box-shadow:var(--shadow-lg);position:relative;
  }

.phone-screen{
    background:var(--bg);border-radius:30px;padding:18px 16px;min-height:560px;
    display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
  }

.phone-notch{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    width:110px;height:28px;background:var(--ink);border-radius:0 0 14px 14px;z-index:2;
  }

.ig-bar{display:flex;align-items:center;justify-content:space-between;padding:24px 4px 8px;border-bottom:1px solid var(--line)}

.ig-bar .who{display:flex;align-items:center;gap:10px}

.ig-bar .av{width:36px;height:36px;border-radius:50%;background:var(--ig-grad);position:relative}

.ig-bar .av::after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,#FFD4C4,#FF6A3D)}

.ig-bar .name{font-weight:800;font-size:14px}

.ig-bar .sub{font-size:11px;color:var(--ink-soft);font-weight:700}

.ig-bar .icons{display:flex;gap:10px;color:var(--ink-soft)}

.ig-bar .icons span{width:4px;height:18px;background:currentColor;box-shadow:8px 0 0 currentColor, -8px 0 0 currentColor;border-radius:50%}

.chat{display:flex;flex-direction:column;gap:10px;padding:8px 2px 0;flex:1}

.msg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:13.5px;line-height:1.45;font-weight:500}

.msg.in{background:#EEE7DA;color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}

.msg.out{background:var(--primary);color:#fff;border-bottom-right-radius:6px;align-self:flex-end;font-weight:700}

.msg .tag{font-size:10px;font-weight:800;opacity:.8;display:block;margin-top:4px;letter-spacing:.04em}

.typing{display:flex;gap:4px;align-self:flex-start;background:#EEE7DA;padding:12px 14px;border-radius:18px;border-bottom-left-radius:6px}

.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:bounce 1.2s infinite ease-in-out;display:inline-block}

.typing i:nth-child(2){animation-delay:.15s}

.typing i:nth-child(3){animation-delay:.3s}

@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

.float-card{
    position:absolute;background:var(--card);border-radius:16px;
    padding:12px 14px;box-shadow:var(--shadow);border:1px solid var(--line);
    display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;
  }

.float-card .dot-g{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(123,174,127,.2)}

.float-1{top:80px;left:-180px;transform:rotate(-4deg)}

.float-2{bottom:100px;right:-160px;transform:rotate(3deg);padding:14px 16px}

.float-2 .n{font-size:22px;color:var(--primary);font-weight:800;line-height:1}

.float-2 .l{font-size:11px;color:var(--ink-soft);letter-spacing:.04em;font-weight:800;margin-top:4px}

.paw{position:absolute;width:42px;height:42px;opacity:.55}

.paw .toe{position:absolute;width:8px;height:10px;border-radius:50%;background:var(--accent-2)}

.paw .pad{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:18px;height:14px;border-radius:50% 50% 45% 45%;background:var(--accent-2)}

.paw .t1{top:8px;left:4px;transform:rotate(-18deg)}

.paw .t2{top:0;left:14px}

.paw .t3{top:0;right:14px}

.paw .t4{top:8px;right:4px;transform:rotate(18deg)}

/* Sub-features under 자동 DM 기능 */
  .subfeat-wrap{margin-top:48px;position:relative}

.subfeat-label{
    display:flex;align-items:center;gap:14px;justify-content:center;
    margin-bottom:32px;
  }

.subfeat-label .line{display:none}

.subfeat-label .badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 18px;border-radius:999px;
    background:var(--card);border:1.5px solid var(--ink);
    font-family:var(--font-display);font-weight:800;font-size:13px;
    letter-spacing:-.01em;color:var(--ink);
    box-shadow:var(--shadow);
  }

.subfeat-label .badge::before{
    content:"⤷";font-size:18px;line-height:1;color:var(--primary);
  }

.subfeat-grid{
    /* minmax(0,1fr) not 1fr: a bare 1fr is minmax(auto,1fr) and refuses to
       shrink below the column's min-content, which made the Japanese copy
       produce unequal columns (351/512/443) that overflowed the grid and
       threw the connector lines — positioned as fixed % of the grid — out of
       alignment with the card centres. */
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
    position:relative;
  }

.subfeat-grid::before{
    content:"";position:absolute;left:50%;top:-32px;width:1.5px;height:18px;
    background:#6B6358;transform:translateX(-50%);
  }

/* Horizontal beam that branches left/right to cards 1 and 3 */
  .subfeat-grid::after{
    content:"";position:absolute;
    left:calc((100% - 36px) / 6 - 0.75px); right:calc((100% - 36px) / 6 - 0.75px);
    top:-14px;height:1.5px;
    background:#6B6358;
  }

.subfeat{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;display:flex;flex-direction:column;gap:10px;
    box-shadow:var(--shadow);
    position:relative;
  }

.subfeat::before{
    content:"";position:absolute;left:50%;top:-14px;width:1.5px;height:14px;
    background:#6B6358;transform:translateX(-50%);
  }

/* Connector lines from row 1 down to row 2 (3-col desktop layout) */
  .subfeat:nth-child(-n+3)::after{
    content:"";position:absolute;left:50%;bottom:-18px;width:1.5px;height:18px;
    background:#6B6358;transform:translateX(-50%);
  }

/* With seven cards the last one sits alone on a third row. Centre it under the
   middle column and bring the connector down from the card directly above, so
   the diagram still reads as one tree instead of leaving an orphaned stub.
   Both selectors are written to match only a grid of exactly seven, which
   leaves the four-card TikTok grid alone. */
  .subfeat:nth-child(7):last-child{grid-column:2}

.subfeat:nth-child(5):nth-last-child(3)::after{
    content:"";position:absolute;left:50%;bottom:-18px;width:1.5px;height:18px;
    background:#6B6358;transform:translateX(-50%);
  }

.subfeat:hover,
  .subfeat:focus-within{z-index:5}

.subfeat-icon{
    width:36px;height:36px;border-radius:10px;
    display:grid;place-items:center;font-weight:800;font-size:16px;
    background:var(--pink);color:var(--primary);
  }

.subfeat-icon.sage{background:rgba(123,174,127,.22);color:#345B40}

.subfeat-icon.dark{background:var(--ink);color:var(--bg)}

.subfeat h4{
    font-family:var(--font-display);font-weight:800;font-size:17px;
    letter-spacing:-.02em;margin:0;line-height:1.25;
  }

.subfeat p{font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin:0}

.subfeat-tags{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}

.subfeat-tags span,.subfeat-tags a.subfeat-link{
    font-size:11px;font-weight:800;color:var(--ink-soft);
    background:var(--bg-warm);border:1px solid var(--line);
    padding:4px 9px;border-radius:999px;letter-spacing:.02em;
  }

.subfeat-tags a.subfeat-link{transition:background .15s ease,color .15s ease}

.subfeat-tags a.subfeat-link:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Tooltip on subfeat-tag */
  .subfeat-tags .tip{position:relative;cursor:help}

.subfeat-tags .tip::after{
    content:"";position:absolute;left:50%;bottom:calc(100% + 6px);
    transform:translateX(-50%) rotate(45deg);
    width:10px;height:10px;background:var(--ink);
    opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;
    z-index:11;
  }

.subfeat-tags .tip-bubble{
    position:absolute;left:50%;bottom:calc(100% + 14px);
    transform:translateX(-18%);
    width:320px;max-width:80vw;
    background:var(--ink);color:var(--bg);
    padding:26px 30px;border-radius:10px;
    font-size:14.5px;font-weight:300;line-height:1.65;
    letter-spacing:-.005em;text-align:left;
    border:0;
    box-shadow:0 16px 32px -12px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease,visibility .15s ease,transform .15s ease;
    z-index:10;
  }

.subfeat-tags .tip-bubble .tip-li{
    display:block;position:relative;padding-left:14px;
    background:transparent;border:0;
    font-size:14.5px;font-weight:300;
    letter-spacing:-.005em;color:var(--bg);
    border-radius:0;
  }

.subfeat-tags .tip-bubble .tip-li + .tip-li{margin-top:10px}

/* Video modal (sample video lightbox) */
  .video-modal{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:center;justify-content:center;
    background:rgba(20,16,10,.78);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
    padding:32px;
  }

.video-modal.open{opacity:1;visibility:visible}

.video-modal-inner{
    position:relative;width:min(1100px, 100%);
    aspect-ratio:16/9;
    background:#000;border-radius:14px;overflow:hidden;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  }

.video-modal-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.video-modal-close{
    position:absolute;top:-48px;right:0;
    width:38px;height:38px;border-radius:50%;
    background:var(--bg);color:var(--ink);border:0;cursor:pointer;
    font-size:18px;font-weight:800;display:grid;place-items:center;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  }

.video-modal-close:hover{background:var(--primary);color:#fff}

body.modal-open{overflow:hidden}

.video-trigger{cursor:pointer}

/* Inline feature info tooltip button */
  .feat-info{
    display:inline-flex;align-items:center;justify-content:center;
    width:17px;height:17px;margin-left:1px;padding:0;
    border:none;border-radius:50%;
    background:var(--primary);color:#fff;
    font-size:11px;font-weight:800;font-style:italic;line-height:1;
    font-family:Georgia,'Times New Roman',serif;
    cursor:pointer;vertical-align:middle;
    transform:translateY(-1px);
    transition:transform .15s ease,filter .15s ease;
  }

.feat-info:hover{transform:translateY(-1px) scale(1.12);filter:brightness(1.08)}

.plan.featured .feat-info{background:var(--primary);color:#fff}

/* Image lightbox */
  .img-modal{
    position:fixed;inset:0;z-index:120;
    display:flex;align-items:center;justify-content:center;
    background:rgba(20,16,10,.78);backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
    padding:32px;
  }

.img-modal.open{opacity:1;visibility:visible}

.img-modal-inner{position:relative;max-width:min(440px,100%);max-height:90vh}

.img-modal-inner img{
    display:block;width:100%;height:auto;max-height:90vh;object-fit:contain;
    filter:drop-shadow(0 30px 80px rgba(0,0,0,.5));
  }

.img-modal-close{
    position:absolute;top:-46px;right:0;
    width:38px;height:38px;border-radius:50%;
    border:none;background:#fff;color:var(--ink);
    font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  }

.img-modal-close:hover{background:var(--primary);color:#fff}

.subfeat-tags .tip:hover .tip-bubble,
  .subfeat-tags .tip:focus .tip-bubble,
  .subfeat-tags .tip:focus-visible .tip-bubble{
    opacity:1;visibility:visible;
  }

.subfeat-tags .tip:hover::after,
  .subfeat-tags .tip:focus::after{
    opacity:1;visibility:visible;
  }

@media (max-width:1080px){
    .subfeat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* 2-col: beam spans cells 1 and 2 (gap=18px, 2 cols) */
    .subfeat-grid::after{left:calc((100% - 18px) / 4); right:calc((100% - 18px) / 4)}
    /* In 2-col layout, only the first 2 cards are row-1 */
    .subfeat:nth-child(-n+3)::after{display:none}
    .subfeat:nth-child(-n+4):nth-child(-n+4)::after{
      content:"";position:absolute;left:50%;bottom:-18px;width:1.5px;height:18px;
      background:#6B6358;transform:translateX(-50%);
    }
    /* Hide ::after on the last 2 cards (they're the bottom row) */
    .subfeat:nth-last-child(-n+2)::after{display:none}
    /* At two columns the 7th card already falls directly under the 5th, so it
       keeps its natural placement rather than the centred one. */
    .subfeat:nth-child(7):last-child{grid-column:auto}
  }

@media (max-width:860px){
    .subfeat-grid{grid-template-columns:minmax(0,1fr);gap:14px}
    .subfeat-grid::before,
    .subfeat-grid::after{display:none}
    .subfeat::before{display:none}
    .subfeat::after{display:none}
  }

/* ---------- SHOWCASE SECTIONS (이전 슬라이드 재활용) ---------- */
  .showcase{padding:80px 0;position:relative}

.showcase.showcase-alt{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.showcase-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  }

.showcase-grid.reverse .showcase-text{order:2}

.showcase-grid.reverse .showcase-media{order:1}

.showcase-text{display:flex;flex-direction:column;gap:14px;max-width:520px}

.slide-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--primary);text-transform:uppercase}

.showcase-title{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(30px, 3.6vw, 44px);
    letter-spacing:-.025em;line-height:1.15;margin:0;color:var(--ink);
  }

.showcase-sub{font-size:16px;color:var(--ink-soft);line-height:1.7;margin:0}

.showcase-sub .highlight{color:var(--ink);font-weight:700}

.showcase-media{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:24px;box-shadow:var(--shadow-lg);overflow:hidden;
    aspect-ratio: 16 / 11;
    display:flex;align-items:center;justify-content:center;
  }

.showcase-media.bare{
    background:none;border:none;box-shadow:none;padding:0;
    aspect-ratio:auto;overflow:visible;position:relative;
  }

.replay-btn{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
    width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(20,16,10,.62);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
    z-index:3;
  }

.replay-btn svg{width:32px;height:32px;fill:#fff}

.replay-btn:hover{background:rgba(20,16,10,.78)}

.replay-btn.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

#showcase-1 .showcase-grid{grid-template-columns:1fr 1fr}

#showcase-2 .showcase-grid{grid-template-columns:1fr 1fr}

#showcase-2.showcase-alt{background:#e7e2d1;border-bottom:none}

#showcase-3 .showcase-grid{grid-template-columns:1fr 1fr}

#showcase-3.showcase-alt{background:#fbfbeb;border-bottom:none}

.showcase-media.bare .slide-video{
    height:auto;border-radius:var(--radius-lg);background:transparent;
  }

.vimeo-embed{width:100%;border-radius:var(--radius-lg);overflow:hidden;line-height:0}

.vimeo-embed iframe,.vimeo-embed div{display:block;width:100%;border:0}

.slide-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}

.slide-list li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:15px;font-weight:700;color:var(--ink);line-height:1.5;
  }

.slide-list li::before{
    content:"";width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;
    background:var(--accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  }

.slide-list li.hl-red::before{
    background-color:#E14B3F;
  }

.slide-video{
    width:100%;height:100%;display:block;
    object-fit:contain;background:#fff;
    border-radius:14px;
  }

/* ---------- LOGO STRIP ---------- */
  .strip{padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-warm)}

.strip-inner{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:space-between}

.strip-label{font-weight:800;color:var(--ink-soft);font-size:13px;letter-spacing:.04em}

.strip-logos{display:flex;gap:48px;align-items:center;flex-wrap:wrap;opacity:.7}

.strip-logos b{font-size:20px;font-weight:800;letter-spacing:-.02em}

.strip-logos b:nth-child(2){font-family:Georgia,serif;font-style:italic;font-weight:400}

.strip-logos b:nth-child(3){letter-spacing:.3em;font-size:14px}

.strip-logos b:nth-child(4){text-transform:lowercase}

.strip-logos b:nth-child(5){font-weight:300}

/* ---------- SECTION SHELL ---------- */
  section{position:relative}

.sec-head{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto 56px;text-align:center;align-items:center}

.eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--primary)}

.sec-title{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.2;margin:0;text-wrap:balance}

.sec-sub{font-size:18px;color:var(--ink-soft);margin:0;line-height:1.6;text-wrap:pretty}

/* ---------- FEATURES ---------- */
  .features{padding:110px 0}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.feat{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:28px;display:flex;flex-direction:column;gap:14px;min-height:280px;
    box-shadow:var(--shadow);transition:transform .2s ease;
  }

.feat:hover{transform:translateY(-4px)}

.feat.big{grid-column:span 2;background:var(--ink);color:var(--bg);border-color:var(--ink)}

.feat.big .feat-icon{background:var(--primary)}

.feat.big .feat-desc{color:rgba(255,255,255,.72)}

.feat.warm{background:var(--accent-2);border-color:var(--accent-2)}

.feat-icon{
    width:48px;height:48px;border-radius:14px;background:var(--pink);
    display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--primary);
  }

.feat-icon.sage{background:rgba(123,174,127,.22);color:#345B40}

.feat-icon.dark{background:var(--ink);color:var(--bg)}

.feat-title{font-weight:800;font-size:22px;letter-spacing:-.02em;margin:0;line-height:1.3}

.feat-desc{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.65}

.feat.big .feat-title{font-size:28px}

.feat-tags{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}

.feat-tag{
    display:inline-flex;align-items:center;font-size:11px;font-weight:800;
    color:var(--ink-soft);background:var(--bg-warm);border:1px solid var(--line);
    padding:5px 10px;border-radius:999px;letter-spacing:.02em;
  }

.feat.big .feat-tag{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.12)}

.feat.warm .feat-tag{background:rgba(255,255,255,.45);border-color:rgba(122,46,24,.1);color:#7A2E18}

/* mini visual: bulk DM cascade for big card #2 */
  .bulk-stack{display:flex;flex-direction:column;gap:6px;margin-top:8px}

.bulk-row{
    display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);
    border-radius:8px;padding:8px 10px;font-size:12px;font-weight:700;color:rgba(255,255,255,.85);
  }

.bulk-row .bav{width:18px;height:18px;border-radius:50%;background:var(--ig-grad);flex:none}

.bulk-row .b-status{margin-left:auto;font-size:10px;color:var(--accent-2);font-weight:800}

/* mini bars for big card #1 */
  .mini-bars{display:flex;gap:8px;align-items:flex-end;height:64px;margin-top:6px}

.mini-bars i{flex:1;background:var(--primary);border-radius:6px 6px 0 0;display:block;opacity:.85}

.feat.big .mini-bars i{background:var(--accent-2)}

/* ---------- HOW IT WORKS ---------- */
  .how{padding:110px 0;background:var(--bg-warm);border-bottom:1px solid var(--line);position:relative}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}

.step{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:32px 28px;position:relative;box-shadow:var(--shadow);
  }

.step-num{
    position:absolute;top:-22px;left:24px;
    width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);
    display:grid;place-items:center;font-weight:800;font-size:18px;
    border:4px solid var(--bg-warm);
  }

.step h3{margin:18px 0 10px;font-size:22px;font-weight:800;letter-spacing:-.02em}

.step p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.65}

.step-preview{
    margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;
    display:flex;flex-direction:column;gap:8px;font-size:13px;
  }

.kv{display:flex;justify-content:space-between;align-items:center;gap:8px}

.kv span:first-child{color:var(--ink-soft);font-weight:700}

.kv span:last-child{font-weight:800;text-align:right}

.chip{display:inline-flex;padding:3px 10px;border-radius:999px;background:var(--pink);color:#7A2E18;font-weight:800;font-size:11px;letter-spacing:.02em}

.chip.sage{background:rgba(123,174,127,.25);color:#345B40}

.chip.dark{background:var(--ink);color:var(--bg)}

/* ---------- DASHBOARD ---------- */
  .dash{padding:110px 0}

.dash-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);overflow:hidden;
  }

.dash-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}

.dash-tabs{display:flex;gap:6px}

.dash-tabs i{width:11px;height:11px;border-radius:50%;display:block;background:#F4B7A4}

.dash-tabs i:nth-child(2){background:#F2D88F}

.dash-tabs i:nth-child(3){background:#A8D6AC}

.dash-url{font-size:13px;color:var(--ink-soft);font-weight:700;background:var(--bg-warm);padding:6px 14px;border-radius:999px}

.dash-body{display:grid;grid-template-columns:240px 1fr;min-height:520px}

.dash-side{background:var(--bg);border-right:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column;gap:4px}

.side-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--ink-soft);cursor:default}

.side-item.active{background:var(--ink);color:var(--bg)}

.side-item .ic{width:18px;height:18px;border-radius:5px;background:currentColor;opacity:.4}

.side-item.active .ic{opacity:1;background:var(--primary)}

.side-sec{font-size:11px;letter-spacing:.04em;color:var(--ink-soft);font-weight:800;padding:14px 12px 6px}

.dash-main{padding:26px 28px;display:flex;flex-direction:column;gap:22px;background:var(--bg)}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}

.stat .l{font-size:12px;color:var(--ink-soft);font-weight:800;letter-spacing:.02em}

.stat .v{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:6px}

.stat .d{font-size:12px;font-weight:800;color:var(--accent);margin-top:4px}

.stat .d.dn{color:#C46A4F}

.panels{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}

.panel h4{margin:0 0 14px;font-size:14px;font-weight:800;display:flex;justify-content:space-between;align-items:center}

.panel h4 span{font-size:11px;color:var(--ink-soft);font-weight:700}

.chart{position:relative;height:170px}

.chart svg{width:100%;height:100%;display:block}

.legend{display:flex;gap:14px;margin-top:10px;font-size:11px;font-weight:800;color:var(--ink-soft)}

.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

.legend .a i{background:var(--primary)}

.legend .b i{background:var(--accent)}

.convo-list{display:flex;flex-direction:column;gap:10px}

.convo{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}

.convo .av{width:32px;height:32px;border-radius:50%;background:var(--ig-grad);flex:none;position:relative}

.convo .av::after{content:"";position:absolute;inset:2px;border-radius:50%;background:linear-gradient(135deg,#FFD8C9,#FF6A3D)}

.convo .info{flex:1;min-width:0}

.convo .info .n{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.convo .info .m{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.convo .status{font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;background:rgba(123,174,127,.25);color:#345B40}

.convo .status.pending{background:var(--pink);color:#7A2E18}

/* ---------- TESTIMONIALS (Instagram-profile style) ---------- */
  .tess{padding:110px 0}

.tess-viewport{position:relative}

.tess-clip{
    overflow:hidden;
    /* breathing room so card box-shadows aren't clipped */
    padding:4px 0 12px;margin:-4px 0 -12px;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 90px,
      #000 calc(100% - 90px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 90px,
      #000 calc(100% - 90px),
      transparent 100%);
  }

.tess-grid{
    display:flex;gap:22px;
    will-change:transform;
    transition:transform .5s cubic-bezier(.65,.05,.25,1);
  }

.tess-grid > .tess-card{
    flex:0 0 calc((100% - 244px) / 3);
    min-width:280px;
  }

.tess-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border-radius:50%;
    background:var(--card);border:1px solid var(--line);
    box-shadow:var(--shadow);
    z-index:5;cursor:pointer;display:grid;place-items:center;
    transition:background .15s ease,border-color .15s ease;
    font-family:inherit;
  }

.tess-arrow:hover{background:var(--ink);border-color:var(--ink)}

.tess-arrow:hover svg path{stroke:var(--bg)}

.tess-arrow.prev{left:-18px}

.tess-arrow.next{right:-18px}

.tess-arrow svg{width:16px;height:16px}

.tess-arrow svg path{stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s ease}

.tess-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
  }

.ig-header{
    display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);
    background:var(--bg);
  }

.ig-av{
    width:54px;height:54px;border-radius:50%;background:var(--ig-grad);
    padding:2.5px;flex:none;position:relative;
  }

.ig-av::before{
    content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--card);
  }

.ig-av .inner{
    position:absolute;inset:5px;border-radius:50%;
    background:linear-gradient(135deg,#FFD4C4,#FF6A3D);
  }

.ig-av.b .inner{background:linear-gradient(135deg,#A8D6AC,#345B40)}

.ig-av.c .inner{background:linear-gradient(135deg,#FFE5A6,#C8902A)}

.ig-av.d .inner{background:linear-gradient(135deg,#D0BCFF,#6E4FB8)}

.ig-av.e .inner{background:linear-gradient(135deg,#FFCDD2,#C2185B)}

.ig-av.f .inner{background:linear-gradient(135deg,#B3E5FC,#0277BD)}

.ig-av img{position:absolute;inset:5px;border-radius:50%;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:cover;display:block}

.ig-handle a{color:inherit;text-decoration:none}

.ig-handle a:hover{color:var(--primary)}

.ig-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}

.ig-handle{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;letter-spacing:-.01em}

.ig-verify{
    width:16px;height:16px;border-radius:50%;background:#3B82F6;
    display:inline-grid;place-items:center;color:#fff;font-size:10px;font-weight:800;flex:none;
  }

.ig-stats{display:flex;gap:14px;font-size:12px;color:var(--ink-soft);font-weight:700}

.ig-stats b{color:var(--ink);font-weight:800}

.ig-follow{
    margin-left:auto;background:var(--ink);color:var(--bg);
    padding:7px 14px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:-.01em;
  }

.tess-body{padding:24px 22px 14px;font-size:16px;font-weight:700;line-height:1.65;flex:1;text-wrap:pretty;color:var(--ink)}

.tess-body .qm{color:var(--primary);font-weight:800;font-size:18px;margin-right:2px}

/* Featured case-study panel above slider */
  .tess-feature{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);overflow:hidden;margin-bottom:40px;
    display:grid;grid-template-columns:1.05fr .95fr;
  }

.tess-feature .tf-media{
    background:#fff;border-left:1px solid var(--line);
    padding:28px 28px 20px;display:flex;flex-direction:column;
  }

.tess-feature .tf-media .tf-cap{
    font-size:13px;font-weight:800;color:var(--ink-soft);letter-spacing:.02em;
    margin:0 0 14px;display:flex;align-items:center;gap:8px;
  }

.tess-feature .tf-media .tf-cap::before{
    content:"";width:9px;height:9px;border-radius:50%;background:var(--primary);flex:none;
  }

.tess-feature .tf-media img{
    width:100%;height:auto;border-radius:10px;display:block;margin:auto 0;
  }

.tess-feature .tf-body{padding:30px 32px;display:flex;flex-direction:column}

.tess-feature .tf-quote{
    font-size:16px;font-weight:450;line-height:1.7;color:var(--ink);text-wrap:pretty;
    flex:1;margin:22px 0 0;
  }

.tess-feature .tf-quote .qm{color:var(--primary);font-weight:800;font-size:20px;margin-right:2px}

.tess-feature .tf-foot{
    margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;color:var(--ink-soft);font-weight:700;
  }

.tess-feature .tf-foot .name{color:var(--ink);font-weight:800;font-size:13px}

.tess-feature .tf-badge{
    display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
    background:rgba(226,59,46,.08);color:#c8341f;
    padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.01em;
  }

.tess-foot{
    padding:12px 22px 18px;display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);font-weight:700;
  }

.tess-foot .name{color:var(--ink);font-weight:800;font-size:13px}

/* English testimonials: quote text renders in Manrope Light, 15px */
  html[lang="en"] .tess-body,
  html[lang="en"] .tess-feature .tf-quote{font-weight:300;font-size:15px}

.ig-icons{display:flex;gap:14px;color:var(--ink-soft)}

.ig-icons i{
    width:18px;height:16px;border:2px solid currentColor;display:inline-block;border-radius:3px;
  }

.ig-icons i:nth-child(1){border-radius:50% 50% 50% 0;border-color:transparent;background:currentColor;height:14px;width:16px;clip-path:polygon(50% 100%, 0 36%, 18% 12%, 50% 30%, 82% 12%, 100% 36%)}

.ig-icons i:nth-child(2){border-radius:50%;width:16px;height:16px}

.ig-icons i:nth-child(3){clip-path:polygon(0 0, 100% 0, 100% 70%, 70% 70%, 50% 100%, 30% 70%, 0 70%);background:currentColor;border:0;width:16px;height:16px}

/* ---------- PRICING ---------- */
  .price{padding:110px 0;background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}

.price .wrap{max-width:1680px}

.plan{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:32px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow);
  }

.plan.featured{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-12px);box-shadow:var(--shadow-lg);position:relative}

.plan.featured .price-amt{color:var(--primary)}

.plan.featured .price-sub,.plan.featured .plan-desc,.plan.featured .plan-feats li{color:rgba(255,255,255,.7)}

.plan.featured .plan-feats li::before{background:var(--primary) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

.plan-tag{position:absolute;top:-14px;right:24px;background:var(--primary);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.02em}

.plan-tag.free{background:var(--accent);color:#fff}

.plan-name{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ink-soft);margin:0}

.plan.featured .plan-name{color:var(--accent-2)}

.price-amt{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:flex-end;gap:6px}

.price-amt .cur{font-size:20px;align-self:flex-start;margin-top:6px}

.price-amt .per{font-size:15px;color:var(--ink-soft);font-weight:700;margin-bottom:6px}

.plan.featured .price-amt .per{color:rgba(255,255,255,.6)}

.price-sub{font-size:14px;color:var(--ink-soft);font-weight:700}

.plan-desc{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6}

.plan-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:700}

.plan-feats li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}

.plan-feats li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;background:var(--accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

.plan .btn{margin-top:auto;justify-content:center;width:100%}

.plan-feats li.bullet-red::before{background-color:#e23b2e}

.plan-inherit{margin:0;font-size:12px;font-weight:800;letter-spacing:.01em;color:var(--ink-soft)}

.plan.featured .plan-inherit{color:var(--accent-2)}

/* Sub-category label inside a plan (e.g. "안전 기능") */
  .plan-cat{margin:0;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink-soft);
    padding-top:4px;border-top:1px dashed var(--line)}
  .plan.featured .plan-cat{color:var(--accent-2);border-top-color:rgba(255,255,255,.22)}

/* Click-to-toggle text tooltip on a plan feature's info icon.
   The message is hidden by default and revealed only while the .feat-tip
   carries the .open class (added on click by the inline pricing script). */
  .feat-tip{position:relative}
  .feat-tip .feat-info{cursor:pointer}
  .feat-tip-bubble{
    position:absolute;left:0;bottom:calc(100% + 10px);
    width:250px;max-width:78vw;
    background:var(--ink);color:var(--bg);
    padding:14px 16px;border-radius:10px;
    font-size:13px;font-weight:400;line-height:1.6;letter-spacing:-.005em;text-align:left;
    box-shadow:0 16px 32px -12px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease,visibility .15s ease;
    z-index:30;
  }
  .feat-tip.open .feat-tip-bubble{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- FAQ ---------- */
  .faq{padding:110px 0}

.faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start}

.faq-list{display:flex;flex-direction:column;gap:12px}

.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 24px;cursor:default}

.qa summary{
    list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
    font-weight:800;font-size:17px;cursor:default;line-height:1.4;
  }

.qa summary::-webkit-details-marker{display:none}

.qa summary .pl{width:28px;height:28px;border-radius:50%;background:var(--bg-warm);position:relative;flex:none;transition:transform .2s}

.qa summary .pl::before,.qa summary .pl::after{content:"";position:absolute;background:var(--ink);border-radius:1px;left:50%;top:50%;transform:translate(-50%,-50%)}

.qa summary .pl::before{width:12px;height:2px}

.qa summary .pl::after{width:2px;height:12px;transition:transform .2s}

.qa[open] summary .pl::after{transform:translate(-50%,-50%) rotate(90deg)}

.qa p{margin:12px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.7}

/* ---------- CTA ---------- */
  .cta{padding:80px 0 120px}

.cta-card{
    background:var(--ink);color:var(--bg);border-radius:var(--radius-lg);
    padding:72px 56px;text-align:center;position:relative;overflow:hidden;
  }

.cta-card h2{font-size:clamp(36px,4.6vw,56px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;line-height:1.2;text-wrap:balance}

.cta-card h2 em{font-style:normal;color:var(--primary)}

.cta-card p{font-size:18px;color:rgba(255,255,255,.72);margin:0 0 32px;max-width:560px;margin-inline:auto;line-height:1.65}

.cta-card .btn-primary{box-shadow:0 4px 0 rgba(0,0,0,.25)}

.cta-foot{margin-top:18px;font-size:13px;color:rgba(255,255,255,.55);font-weight:700}

.cta-paw{position:absolute;width:90px;height:90px;opacity:.35}

.cta-paw .toe,.cta-paw .pad{background:var(--primary)!important}

.cta-paw .toe{width:16px;height:20px}

.cta-paw .pad{width:36px;height:28px}

.cta-paw.a{top:36px;left:60px;transform:rotate(-22deg)}

.cta-paw.b{bottom:36px;right:80px;transform:rotate(28deg)}

/* ---------- FOOTER ---------- */
  footer{background:var(--bg-warm);padding:64px 0 36px;border-top:1px solid var(--line)}

.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:48px}

.foot-grid h5{margin:0 0 18px;font-size:13px;letter-spacing:.04em;font-weight:800;color:var(--ink-soft)}

.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}

.foot-grid li a{font-weight:700;font-size:12.5px;color:var(--ink)}

.foot-grid li a:hover{color:var(--primary)}

.biz-info{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin:0 0 18px;max-width:300px}

.biz-info dt{display:inline;font-weight:800;color:var(--ink);margin-right:6px}

.biz-info dd{display:inline;margin:0}

.biz-info .row{display:block;margin-bottom:2px}

.meta-blurb{font-size:14px;color:var(--ink-soft);margin:0 0 16px;line-height:1.6;font-weight:700}

.meta-badge{height:42px;width:auto;display:block;opacity:.95}

.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft);font-weight:700;gap:16px;flex-wrap:wrap}

.socials{display:flex;gap:10px}

.socials a{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:12px}

/* ---------- language selector ---------- */
  .lang-select{position:relative}

.lang-btn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-family:inherit;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer;line-height:1}

.lang-btn:hover{border-color:var(--primary)}

.lang-btn svg{width:15px;height:15px;display:block}

.lang-caret{font-size:10px;opacity:.55;transition:transform .2s ease}

.lang-select.open .lang-caret{transform:rotate(180deg)}

.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(26,36,24,.14);padding:6px;min-width:150px;display:none;z-index:60}

.lang-select.open .lang-menu{display:block}

.lang-menu a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;font-weight:800;font-size:14px;color:var(--ink);text-decoration:none}

.lang-menu a:hover{background:var(--bg)}

.lang-menu a.active{color:var(--primary)}

.lang-menu a .lang-check{margin-left:auto;color:var(--primary);font-size:13px;visibility:hidden}

.lang-menu a.active .lang-check{visibility:visible}


/* ============================================================
   KNOWLEDGEBASE (/kb/<lang>/*.html)
   Shared by every KB article, so a new article needs HTML only.
   ============================================================ */

.kb{
    max-width:1200px;margin:0 auto;padding:0 24px 80px;
    display:grid;grid-template-columns:264px minmax(0,1fr);
    gap:48px;align-items:start;
  }

/* ---------- sidebar ---------- */
  .kb-side{position:sticky;top:96px;padding-top:40px}

/* ---------- search ---------- */
  .kb-search{position:relative;margin:0 0 14px}

.kb-search-input{
    width:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    padding:11px 16px;
    font-family:inherit;font-size:14px;color:var(--ink);
    box-shadow:var(--shadow);
    -webkit-appearance:none;appearance:none;
  }

.kb-search-input::placeholder{color:#A9A392}

.kb-search-input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(22,163,74,.15);
  }

.kb-search-input::-webkit-search-cancel-button{cursor:pointer}

/* Results float over the article list rather than pushing it down. */
  .kb-search-results{
    position:absolute;z-index:30;top:calc(100% + 8px);left:0;right:0;
    max-height:min(60vh,420px);overflow-y:auto;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg);
    padding:6px;
  }

.kb-search-count,.kb-search-empty{
    margin:0;padding:8px 10px;
    font-size:12px;font-weight:800;letter-spacing:.03em;
    color:var(--ink-soft);
  }

.kb-search-hit{
    display:block;padding:10px;border-radius:10px;
    text-decoration:none;color:var(--ink);
  }

.kb-search-hit:hover,.kb-search-hit.on{background:var(--bg-warm)}

.kb-search-cat{
    display:block;font-size:11px;font-weight:800;
    letter-spacing:.04em;color:var(--primary);margin-bottom:3px;
  }

.kb-search-title{display:block;font-size:14px;font-weight:800;line-height:1.45}

/* Clamped rather than truncated in JS: three lines reads the same whether the
   snippet is Korean, Japanese or English. */
  .kb-search-snip{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
    margin-top:4px;
    font-size:12px;line-height:1.6;color:var(--ink-soft);
  }

.kb-search-results mark{
    background:#FCE9A8;color:inherit;
    border-radius:3px;padding:0 1px;
  }

.kb-toc{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:22px 20px;
    box-shadow:var(--shadow);
  }

.kb-toc-sum{
    display:none;cursor:pointer;list-style:none;
    font-weight:800;font-size:15px;
    align-items:center;justify-content:space-between;
  }

.kb-toc-sum::-webkit-details-marker{display:none}

.kb-toc-sum .kb-caret{transition:transform .2s ease;font-size:12px;color:var(--ink-soft)}

.kb-toc[open] .kb-toc-sum .kb-caret{transform:rotate(180deg)}

.kb-toc-title{
    font-weight:800;font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-soft);
    margin:0 0 16px;
  }

.kb-cat{margin-bottom:20px}

.kb-cat:last-child{margin-bottom:0}

.kb-cat-name{font-weight:800;font-size:14px;color:var(--ink);margin:0 0 8px}

.kb-cat ul{list-style:none;margin:0;padding:0}

.kb-cat li{margin:0}

.kb-cat a{
    display:block;padding:6px 10px;margin-left:-10px;
    border-radius:9px;
    font-size:14px;line-height:1.5;color:var(--ink-soft);
    text-decoration:none;
    transition:background .15s ease,color .15s ease;
  }

.kb-cat a:hover{background:var(--bg-warm);color:var(--ink)}

/* The current article is marked by the tint and the green edge alone — no
   weight change, so it stays the same size as its neighbours. */
  .kb-cat a.active{
    background:var(--pink);color:var(--ink);
    box-shadow:inset 2px 0 0 var(--primary);
  }

/* Articles not written yet — shown so the structure is visible, but not links. */
  .kb-cat .soon{
    display:flex;align-items:flex-start;gap:6px;
    padding:6px 0;
    font-size:14px;line-height:1.5;color:#A9A392;
  }

/* "coming soon" pill. The label sits in the HTML, not in `content:`, so each
   language supplies its own wording. */
  .kb-pill{
    display:inline-block;white-space:nowrap;
    font-size:10px;font-weight:800;letter-spacing:.04em;
    color:#B6AF9B;
    border:1px solid #DDD6C2;border-radius:999px;
    padding:1px 6px;vertical-align:2px;
  }

.kb-cat .soon .kb-pill{flex:0 0 auto;margin-top:2px;vertical-align:baseline}

.kb-cat-name .kb-pill{font-weight:800}

/* ---------- article ---------- */
  .kb-main{padding-top:40px;min-width:0;max-width:820px}

.kb-crumb{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    font-size:13px;color:var(--ink-soft);margin:0 0 20px;
  }

.kb-crumb a{color:var(--ink-soft);text-decoration:none}

.kb-crumb a:hover{color:var(--primary);text-decoration:underline}

.kb-crumb .sep{color:var(--accent-2)}

.kb-crumb .here{color:var(--ink);font-weight:800}

.kb-main h1{font-size:40px;line-height:1.25;margin:0 0 28px;letter-spacing:-.03em}

.kb-main p{font-size:16px;line-height:1.8;color:var(--ink);margin:0 0 18px}

.kb-lead{font-size:17px}

/* Section heading inside an article. The rule above it separates long
   step-by-step articles into scannable blocks. */
  .kb-main h2{
    font-size:24px;line-height:1.35;letter-spacing:-.02em;
    margin:44px 0 20px;padding-top:26px;
    border-top:1px solid var(--line);
  }

.kb-main h3{
    font-size:18px;line-height:1.45;letter-spacing:-.015em;
    margin:26px 0 12px;
  }

/* Qualifier riding along with a heading — the plan a feature needs, or which
   posts a setting covers. The text carries its own parentheses, so it is set
   plain: lighter weight and colour than the heading, no box around it. */
  .kb-plan{
    margin-left:6px;
    font-size:14px;font-weight:400;letter-spacing:0;
    color:var(--ink-soft);white-space:nowrap;
  }

.kb-main a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}

/* ---------- labelled notes ----------
   "What it does: …", "Where to set it: …" — a label and its explanation. A real
   <dl> so the pairing is in the markup, not just the styling. */
  .kb-def{margin:0 0 24px}

.kb-def > div{margin:0 0 13px}

.kb-def > div:last-child{margin-bottom:0}

/* Body-sized and in the body colour so the label reads as bold text, not as a
   small caption sitting above the sentence. */
  .kb-def dt{
    font-size:16px;font-weight:800;
    color:var(--ink);margin:0 0 2px;
  }

.kb-def dd{margin:0;font-size:16px;line-height:1.75;color:var(--ink)}

/* A short list inside a definition sits tight under its line, not as a
   separate block. */
  .kb-def dd .kb-list{margin:7px 0 0}

.kb-main a:hover{text-decoration-thickness:2px}

/* The literal error text from an email or the API. Monospace and boxed so a
   reader can match it against what they actually received, word for word. */
  .kb-error{
    display:block;
    margin:0 0 16px;padding:14px 16px;
    background:#FBEAE7;
    border:1px solid #F0C4BC;border-left:4px solid #D9534F;
    border-radius:var(--radius-sm);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:14px;line-height:1.65;color:var(--ink);
    overflow-x:auto;
  }

/* ---------- figures & video ---------- */
  .kb-figure{margin:0 0 26px}

.kb-figure img{
    display:block;width:100%;height:auto;
    border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--card);
  }

.kb-figure figcaption{
    margin-top:10px;font-size:13px;color:var(--ink-soft);
  }

/* For artwork that already carries its own background — a device mockup, say.
   A frame around one of those reads as a second, competing border. */
  .kb-figure.plain img{border:0;border-radius:0;background:none}

.kb-figure.narrow{max-width:380px}

.kb-figure.narrow figcaption{text-align:center}

/* Default 16:9. A clip of any other shape sets --kb-ratio inline (e.g.
   style="--kb-ratio:4/5"), so an odd aspect never needs its own class. */
  .kb-video{
    position:relative;width:100%;aspect-ratio:var(--kb-ratio,16/9);
    margin:0 0 26px;
    border:1px solid var(--line);border-radius:var(--radius-sm);
    overflow:hidden;background:#000;
  }

.kb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Portrait (Shorts-style) clips. Without the width cap a tall frame would run
   past the viewport on desktop. */
  .kb-video.portrait{--kb-ratio:9/16;max-width:340px}

/* ---------- reference list ----------
   Unordered notes under a section heading. The items already lead with an
   emoji, so no bullet marker is drawn — a dot next to it would just be noise. */
  .kb-list{list-style:none;margin:0 0 26px;padding:0}

.kb-list > li{margin:0 0 13px;font-size:16px;line-height:1.75}

.kb-list > li:last-child{margin-bottom:0}

/* Add `bullets` when the items do NOT lead with an emoji — without a marker of
   some kind they read as loose lines rather than a list. */
  .kb-list.bullets > li{position:relative;padding-left:19px}

.kb-list.bullets > li::before{
    content:'';position:absolute;left:2px;top:11px;
    width:5px;height:5px;border-radius:50%;
    background:var(--primary);
  }

/* The "→ …" follow-on line many of these notes carry. */
  .kb-list .kb-sub{
    display:block;margin-top:2px;
    font-size:15px;color:var(--ink-soft);
  }

/* One level of nesting — e.g. the actions a single button can perform. */
  .kb-list ul{
    list-style:none;
    margin:6px 0 0;padding:0 0 0 18px;
    border-left:2px solid var(--line);
  }

.kb-list ul > li{margin:0 0 7px;font-size:15px;line-height:1.7}

.kb-list ul > li:last-child{margin-bottom:0}

/* ---------- fact cards ----------
   Short labelled notices that aren't sequential — support hours, policies,
   where to file a ticket. Use .kb-steps when order actually matters. */
  .kb-facts{list-style:none;margin:0 0 26px;padding:0}

.kb-facts > li{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:16px 18px;margin:0 0 10px;
  }

.kb-facts > li:last-child{margin-bottom:0}

.kb-facts .kb-fact-label{
    display:block;margin:0 0 4px;
    font-size:15px;font-weight:800;color:var(--ink);
  }

.kb-facts p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-soft)}

/* ---------- callouts ----------
   Four kinds, named for what they mean rather than what colour they are:
     .required  전제 조건 — "~가 반드시 필요합니다"
     .caution   흔한 오해 / 하지 말아야 할 것
     .tip       알아두면 좋은 것
     .note      부가 설명
   ------------------------------------------------------------ */
  .kb-note{
    border-radius:var(--radius-sm);
    padding:18px 20px;margin:0 0 16px;
    font-size:16px;line-height:1.75;
  }

.kb-note p{margin:0;font-size:inherit;line-height:inherit}

.kb-note p + p{margin-top:10px}

.kb-note.required{
    background:#E7F4E4;
    border:1px solid #BFE0B6;
    border-left:4px solid var(--primary);
  }

.kb-note.caution{
    background:#FBEAE7;
    border:1px solid #F0C4BC;
    border-left:4px solid #D9534F;
  }

.kb-note.tip{
    background:#FCF2DC;
    border:1px solid #EDD8A4;
    border-left:4px solid var(--accent);
  }

.kb-note.note{
    background:#EFECE1;
    border:1px solid var(--line);
    border-left:4px solid #A9A392;
  }

/* ---------- numbered steps ---------- */
  .kb-steps{list-style:none;counter-reset:kbstep;margin:0 0 28px;padding:0}

.kb-steps > li{
    counter-increment:kbstep;
    position:relative;
    padding:0 0 0 46px;
    margin:0 0 18px;
    font-size:16px;line-height:1.75;
  }

.kb-steps > li::before{
    content:counter(kbstep);
    position:absolute;left:0;top:1px;
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    background:var(--primary);color:#fff;
    border-radius:50%;
    font-size:13px;font-weight:800;line-height:1;
  }

.kb-steps b{font-weight:800}

.kb-substep{
    display:block;margin-top:8px;
    padding:10px 14px;
    background:var(--bg-warm);
    border-radius:10px;
    font-size:15px;color:var(--ink-soft);line-height:1.7;
  }

/* ---------- responsive ---------- */
  @media (max-width:960px){
    .kb{grid-template-columns:1fr;gap:0;padding-bottom:56px}
    .kb-side{position:static;padding-top:24px}
    .kb-toc-sum{display:flex}
    .kb-toc[open] .kb-toc-title{margin-top:18px}
    .kb-main{padding-top:28px}
    .kb-main h1{font-size:30px}
  }