@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('/assets/fonts/pretendard-variable.woff2') format('woff2-variations');
}
  :root{
    --bg:#FFFFFF;
    --surface:#F4F7FB;
    --surface-2:#EAF0F8;
    --card:#FFFFFF;
    --ink:#0E1A2B;
    --ink-soft:#5A6A80;
    --line:#E2E8F1;
    --accent:#1468AE;
    --accent-strong:#0E5088;
    --accent-ink:#FFFFFF;
    --accent-soft:#E8F1F9;
    --marker:#FFD66B;
    --live:#12B886;
    --shadow:0 1px 2px rgba(14,26,43,.04), 0 12px 32px -12px rgba(14,26,43,.14);
    --card-sh:0 1px 1px rgba(14,26,43,.03), 0 2px 4px -1px rgba(14,26,43,.05), 0 10px 18px -12px rgba(14,26,43,.13);
    --card-sh-h:0 1px 2px rgba(14,26,43,.04), 0 4px 8px -3px rgba(14,26,43,.06), 0 16px 26px -14px rgba(14,26,43,.18);
    --grid-dot:rgba(20,104,174,.10);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A111E;
      --surface:#111B2C;
      --surface-2:#0D1626;
      --card:#142034;
      --ink:#EAF0FA;
      --ink-soft:#9DAAC0;
      --line:#223149;
      --accent:#58A8E6;
      --accent-strong:#94CAF2;
      --accent-ink:#06101F;
      --accent-soft:#0F2A42;
      --marker:rgba(255,214,107,.26);
      --live:#38D9A9;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.6);
      --card-sh:0 1px 1px rgba(0,0,0,.25), 0 2px 4px -1px rgba(0,0,0,.25), 0 10px 18px -12px rgba(0,0,0,.5);
      --card-sh-h:0 1px 2px rgba(0,0,0,.3), 0 4px 8px -3px rgba(0,0,0,.3), 0 16px 26px -14px rgba(0,0,0,.6);
      --grid-dot:rgba(88,168,230,.12);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A111E;
    --surface:#111B2C;
    --surface-2:#0D1626;
    --card:#142034;
    --ink:#EAF0FA;
    --ink-soft:#9DAAC0;
    --line:#223149;
    --accent:#58A8E6;
    --accent-strong:#94CAF2;
    --accent-ink:#06101F;
    --accent-soft:#0F2A42;
    --marker:rgba(255,214,107,.26);
    --live:#38D9A9;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.6);
    --card-sh:0 1px 1px rgba(0,0,0,.25), 0 2px 4px -1px rgba(0,0,0,.25), 0 10px 18px -12px rgba(0,0,0,.5);
    --card-sh-h:0 1px 2px rgba(0,0,0,.3), 0 4px 8px -3px rgba(0,0,0,.3), 0 16px 26px -14px rgba(0,0,0,.6);
    --grid-dot:rgba(88,168,230,.12);
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",-apple-system,"Malgun Gothic",sans-serif;
    padding-left:max(20px, env(safe-area-inset-left,0px));
    padding-right:max(20px, env(safe-area-inset-right,0px));
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; text-wrap:balance; }
  a{ color:inherit; }
  img{max-width:100%;}
  .wrap{ max-width:1120px; margin-inline:auto; }
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
  ::selection{ background:var(--accent-soft); color:var(--ink); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1120px; margin-inline:auto;
    display:flex; align-items:center; justify-content:space-between;
    padding-block:14px; gap:16px;
  }
  .brand{ display:flex; align-items:baseline; gap:8px; font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.01em; white-space:nowrap; }
  .brand small{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:500; font-size:.66rem; color:var(--ink-soft); letter-spacing:.08em; }
  nav.links{ display:flex; gap:26px; font-size:.9rem; font-weight:500; }
  nav.links a{ text-decoration:none; color:var(--ink-soft); transition:color .15s; padding-block:4px; border-bottom:1px solid transparent; }
  nav.links a:hover{ color:var(--ink); border-color:var(--accent); }
  nav.links a.active{ color:var(--ink); border-color:var(--accent); }
  .brand-link{ text-decoration:none; }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .tel-inline{ font-weight:700; font-size:.92rem; letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    font-weight:700; font-size:.86rem; letter-spacing:.01em;
    padding:11px 20px; border-radius:3px; border:1px solid var(--accent);
    background:var(--accent); color:var(--accent-ink); text-decoration:none;
    cursor:pointer; transition:transform .15s, background .15s, box-shadow .15s;
    white-space:nowrap;
  }
  .btn:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:translateY(-1px); }
  .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); background:transparent; }
  .menu-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:3px; width:40px; height:36px; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; }
  .menu-toggle svg{ width:18px; height:18px; }

  /* ---------- HOME : HERO ---------- */
  section.hero{
    margin-inline:-20px; padding-inline:20px; position:relative; overflow:hidden;
    background:
      radial-gradient(900px 420px at 88% 0%, var(--accent-soft), transparent 70%),
      radial-gradient(var(--grid-dot) 1.2px, transparent 1.3px) 0 0 / 22px 22px,
      var(--bg);
    border-bottom:1px solid var(--line);
  }
  .hero-inner{
    max-width:1120px; margin-inline:auto; position:relative;
    display:grid; grid-template-columns:1.02fr .98fr; gap:48px;
    padding-block:72px 64px; align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color:var(--accent-strong);
    background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    padding:6px 12px 6px 8px; border-radius:99px; margin-bottom:24px;
  }
  .eyebrow b{ background:var(--accent); color:var(--accent-ink); font-size:.7rem; padding:2px 8px; border-radius:99px; letter-spacing:.02em; }
  .hero h1{
    font-size:clamp(1.867rem, 3.99vw, 3.037rem); line-height:1.32; font-weight:700; letter-spacing:0;
    color:var(--ink); margin:0 0 22px;
  }
  .hero h1 em{
    font-style:normal; color:var(--accent);
    background:linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%);
    background-size:0% 100%; background-repeat:no-repeat; animation:marker 1s .5s cubic-bezier(.6,.1,.2,1) forwards;
    padding-inline:2px; white-space:nowrap;
  }
  @keyframes marker{ to{ background-size:100% 100%; } }
  .hero p.lede{ font-size:1.06rem; line-height:1.75; color:var(--ink-soft); max-width:44ch; margin:0 0 32px; }
  .hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .hero-actions .btn{ padding:14px 22px; font-size:.95rem; }
  .hero-stats{ display:grid; grid-template-columns:repeat(4, auto); justify-content:start; gap:10px 32px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line); }
  .hero-stats div{ display:flex; flex-direction:column; gap:2px; }
  .hero-stats b{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2; }
  .hero-stats b small{ font-size:.95rem; font-weight:700; margin-left:1px; color:var(--accent); }
  .hero-stats span{ font-size:.8rem; color:var(--ink-soft); }

  /* hub visual */
  .hub{ position:relative; max-width:520px; width:100%; justify-self:end; }
  .hub-board{ position:relative; margin-top:18px; border-radius:24px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); padding:10px; }
  .hub svg{ display:block; width:100%; height:auto; }
  .hub .ring{ fill:none; stroke:color-mix(in srgb, var(--accent) 38%, var(--line)); stroke-width:1.5; stroke-dasharray:4 6; stroke-linecap:round; }
  .hub .spin{ transform-box:view-box; transform-origin:260px 215px; animation:spin 57s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .hub .wire{ stroke-width:1.8; fill:none; }
  .hub .pulse{ fill:var(--accent); }
  .hub .node{ transform-box:fill-box; transform-origin:center; transition:transform .25s cubic-bezier(.3,.7,.3,1); }
  .hub .node:hover{ transform:translateY(-3px) scale(1.04); }
  .hub .node rect.card{ fill:var(--card); stroke:var(--line); stroke-width:1.1; }
  .hub .node text{ fill:var(--ink); font-size:15.5px; font-weight:800; letter-spacing:-.02em; font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; }
  .hub .wire{ stroke-width:1.8 !important; }
  .hub .core .glow{ fill:var(--accent); opacity:.14; animation:glow 3.2s ease-in-out infinite; transform-box:view-box; transform-origin:260px 215px; }
  @keyframes glow{ 0%,100%{ transform:scale(1); opacity:.16; } 50%{ transform:scale(1.18); opacity:.04; } }
  .hub .core text{ fill:#fff; font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; }
  .hub .core .t1{ font-size:12px; font-weight:700; letter-spacing:.14em; opacity:.85; }
  .hub .core .t2{ font-size:25.5px; font-weight:800; letter-spacing:-.02em; }
  .hub .core .t1{ font-size:12.5px !important; }
  .hub .core .t2{ font-size:21px; letter-spacing:-.01em; text-rendering:geometricPrecision; }
  .hub .cube{ animation:cubeFloat 5s ease-in-out infinite; }
  .hub .cube-shine{ transform-box:view-box; animation:cubeShine 5.4s ease-in-out infinite; }
  @keyframes cubeShine{ 0%, 60%{ transform:translateX(-96px); } 86%, 100%{ transform:translateX(180px); } }
  @media (prefers-reduced-motion: reduce){ .hub .cube-shine{ animation:none; transform:translateX(52px); opacity:.5; } }
  @keyframes cubeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  .float-card{
    position:absolute; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; box-shadow:var(--shadow); padding:10px 14px; font-size:.8rem; color:var(--ink-soft); white-space:nowrap;
    animation:bob 6s ease-in-out infinite;
  }
  .float-card b{ display:block; color:var(--ink); font-size:.9rem; }
  /* 클릭 가능한 보드: Publishing 진행관리시스템 상세 열기 */
  a.float-card.fc-link{ text-decoration:none; color:inherit; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; }
  a.float-card.fc-link:hover{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow); }
  a.float-card.fc-link:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:3px; }
  .float-card .ic{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#3E93D4,#1468AE); color:#fff; display:grid; place-items:center; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
  .float-card .ic svg{ width:18px; height:18px; }
  .float-card .ic{ position:relative; }
  .float-card .ic-logi{ background:linear-gradient(135deg,#2BD1BC,#0B8F83); }
  /* 아이콘 공통: 광택·입체감 + 반짝임 (배경색은 각 아이콘 고유색 유지) */
  .float-card .ic-shine{ position:relative; border:1px solid rgba(255,255,255,.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.3), inset 1px 0 0 rgba(255,255,255,.25), 0 3px 9px rgba(16,26,40,.3); }
  .float-card .ic-shine > svg{ position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
  .float-card .ic-shine > .live{ z-index:3; }
  .float-card .ic-shine::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:linear-gradient(165deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.2) 36%, rgba(255,255,255,0) 58%); }
  .float-card .ic-shine::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.95) 47%, rgba(255,255,255,.45) 53%, transparent 62%);
    background-size:280% 100%; background-position:138% 0; animation:icShine 4.2s ease-in-out infinite; }
  @keyframes icShine{ 0%,58%{ background-position:138% 0; } 84%,100%{ background-position:-38% 0; } }
  @media (prefers-reduced-motion: reduce){ .float-card .ic-shine::after{ animation:none; background-position:52% 0; opacity:.5; } }
  /* 카드별 반짝임 시차 */
  .float-card.fc1 .ic-shine::after{ animation-delay:-3.1s; }
  .float-card.fc2 .ic-shine::after{ animation-delay:-1.0s; }
  .float-card.fc3 .ic-shine::after{ animation-delay:0s; }
  .float-card.fc4 .ic-shine::after{ animation-delay:-2.1s; }
  /* 대시보드 아이콘: 실버 */
  .float-card .ic-silver{ background:linear-gradient(135deg,#FFFFFF 0%,#E7ECF2 26%,#B9C2CE 58%,#7C8794 100%);
    color:#2A323C; border-color:rgba(255,255,255,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 5px rgba(60,72,88,.35), inset 1px 0 0 rgba(255,255,255,.4), 0 3px 9px rgba(90,104,124,.35); }
  .float-card .ic-silver > svg{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)); }
  .float-card .ic-silver::before{ background:linear-gradient(165deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 36%, rgba(255,255,255,0) 58%); }
  .float-card .ic-gold{ background:linear-gradient(135deg,#FDF0C8 0%,#F0C24E 28%,#D89B1F 62%,#96650A 100%); color:#3E2600; box-shadow:inset 0 1px 0 rgba(255,250,230,.75), inset 0 -3px 5px rgba(78,46,0,.5), inset 1px 0 0 rgba(255,255,255,.25), 0 3px 9px rgba(150,101,10,.4); border:1px solid rgba(255,240,196,.55); }
  .float-card .ic .live{ position:absolute; top:-3px; right:-3px; width:10px; height:10px; border:2px solid var(--card); box-sizing:content-box; }
  .float-card.fc1{ left:-80px; top:-30px; }
  .float-card.fc2{ right:-76px; bottom:-40px; animation-delay:-3s; }
  .float-card.fc3{ right:-58px; top:-30px; animation-delay:-1.5s; }
  @media (max-width:1080px){ .nav-inner .tel-inline{ display:none; } nav.links{ gap:18px; } }
  @media (max-width:1180px) and (min-width:861px){
    .hero-inner{ grid-template-columns:1fr; gap:64px; }
    .hub{ justify-self:center; }
  }
  .float-card.fc4{ left:-64px; bottom:-40px; animation-delay:-4.5s; }
  .hub-floats{ display:contents; }
  .hub{ margin-block:26px; }
  .live{ width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 var(--live); animation:live 2s ease-out infinite; flex:none; }
  @keyframes live{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 100%{ box-shadow:0 0 0 9px transparent; } }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

  /* ---------- HOME : LOGO MARQUEE ---------- */
  .trust{ padding-block:52px 12px; }
  .trust-title{ text-align:center; font-size:.95rem; color:var(--ink-soft); margin:0 0 24px; }
  .trust-title b{ color:var(--ink); }
  .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track{ display:flex; gap:14px; width:max-content; animation:slide 48s linear infinite; }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  @keyframes slide{ to{ transform:translateX(calc(-50% - 7px)); } }
  .m-item{ height:60px; min-width:132px; padding:0 22px; border:1px solid var(--line); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
  .m-item img{ max-height:var(--lh, 26px); max-width:170px; width:auto; height:auto; display:block; }
  a.m-item{ text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s; }
  a.m-item:hover, a.m-item:focus-visible{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 6px 16px -10px rgba(14,26,43,.35); transform:translateY(-1px); }
  .m-item.name{ background:var(--card); font-weight:700; font-size:.95rem; color:var(--ink-soft); letter-spacing:-.01em; }

  /* ---------- HOME : shared section head ---------- */
  .h-sec{ padding-block:88px; }
  .h-head{ text-align:center; max-width:660px; margin:0 auto 52px; }
  .h-kicker{ display:inline-block; font-size:.82rem; font-weight:800; color:var(--accent); margin-bottom:12px; letter-spacing:.02em; }
  .h-head h2{ font-size:clamp(1.6rem, 3vw, 2.35rem); font-weight:800; letter-spacing:-.03em; line-height:1.3; margin:0 0 14px; }
  .h-head p{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.75; }

  /* ---------- HOME : WORKFLOW ---------- */
  .flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; counter-reset:step; position:relative; }
  .flow::before{ content:""; position:absolute; left:8%; right:8%; top:43px; height:2px; background:linear-gradient(90deg, var(--line), var(--accent), var(--line)); opacity:.7; }
  .flow li{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 18px 20px; display:flex; flex-direction:column; gap:10px; transition:transform .2s, box-shadow .2s, border-color .2s; }
  .flow li:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .flow .f-ic{ width:44px; height:44px; border-radius:13px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; position:relative; }
  .flow .f-ic svg{ width:22px; height:22px; }
  .flow .f-no{ font-size:.72rem; font-weight:800; color:var(--accent); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
  .flow h3{ margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }
  .flow p{ margin:0; font-size:.8rem; color:var(--ink-soft); line-height:1.6; }
  .flow-foot{ text-align:center; margin-top:34px; }
  .link-arrow{ font-weight:700; color:var(--accent); text-decoration:none; font-size:.93rem; display:inline-flex; gap:6px; align-items:center; }
  .link-arrow:hover{ text-decoration:underline; }

  /* ---------- HOME : CONNECT ---------- */
  .connect-bg{ background:var(--surface); margin-inline:-20px; padding-inline:20px; border-block:1px solid var(--line); }
  .connect{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  .c-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px 26px; display:flex; flex-direction:column; gap:14px; }
  .c-card .c-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .c-card h3{ margin:0; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
  .c-count{ font-size:.75rem; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:99px; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .c-card > p{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.7; }
  .c-list{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .c-list li{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px; background:var(--surface); font-size:.9rem; font-weight:600; }
  .c-list li small{ margin-left:auto; font-size:.74rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
  .c-list .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

  /* ---------- HOME : WHY ---------- */
  .why{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .why h2{ font-size:clamp(1.5rem, 2.6vw, 2.05rem); font-weight:800; letter-spacing:-.03em; line-height:1.35; margin:0 0 20px; }
  .why p{ color:var(--ink-soft); font-size:.98rem; line-height:1.8; margin:0 0 14px; }
  .quote-card{ margin:0; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:36px 34px; box-shadow:var(--shadow); position:relative; }
  .quote-card::before{ content:"“"; position:absolute; top:4px; left:26px; font-size:5rem; line-height:1; font-weight:800; color:var(--accent); opacity:.18; }
  .quote-card p{ margin:0; font-size:1.12rem; line-height:1.8; font-weight:600; color:var(--ink); position:relative; }
  .quote-card footer{ margin-top:18px; font-size:.82rem; color:var(--ink-soft); }

  /* ---------- HOME : CTA PANEL ---------- */
  .cta-panel{
    border-radius:28px; padding:56px 48px; color:#fff; position:relative; overflow:hidden;
    background:radial-gradient(600px 300px at 90% 10%, rgba(255,255,255,.18), transparent 60%), #1468AE;
    display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center;
  }
  .cta-panel::after{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.3px) 0 0 / 22px 22px; -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000); mask-image:linear-gradient(90deg, transparent 30%, #000); pointer-events:none; }
  .cta-panel h2{ margin:0 0 12px; font-size:clamp(1.5rem, 2.8vw, 2.1rem); font-weight:800; letter-spacing:-.03em; line-height:1.3; color:#fff; }
  .cta-panel p{ margin:0; color:rgba(255,255,255,.82); font-size:.98rem; }
  .cta-side{ display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
  .cta-side .btn{ background:#fff; color:#0E5088; border-color:#fff; justify-content:center; padding:14px 20px; }
  .cta-side .btn:hover{ background:#E8F1F9; border-color:#E8F1F9; }
  .cta-side .btn.line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
  .cta-side .btn.line:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
  .cta-tel{ font-size:.85rem; color:rgba(255,255,255,.85); text-align:center; font-variant-numeric:tabular-nums; }
  .cta-tel b{ color:#fff; font-size:1rem; }

  /* ---------- VIEW / PAGE SWITCHING ---------- */
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---------- SECTION shell ---------- */
  section.page{ padding-block:76px; border-bottom:1px solid var(--line); }
  .view > section.page:last-child{ border-bottom:none; }
  .kicker{
    display:flex; align-items:center; gap:12px; margin-bottom:16px;
  }
  .kicker .bar{ width:3px; height:20px; background:var(--accent); border-radius:2px; }
  .kicker span{ font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
  .sec-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; margin-bottom:44px; align-items:end; }
  .sec-head h2, .sec-head h1{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700; margin:0; }
  .sec-head .desc{ color:var(--ink-soft); font-size:.96rem; }

  /* ---------- PAIN / STORY ---------- */
  .story{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .story p{ color:var(--ink-soft); font-size:.98rem; margin:0 0 16px; }
  .story blockquote{
    margin:0; padding:26px 26px 26px 24px; background:var(--surface); border-left:3px solid var(--accent);
    border-radius:2px; font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-size:1.08rem; line-height:1.75; color:var(--ink);
  }
  .story blockquote footer{ margin-top:14px; font-family:"Noto Sans KR",sans-serif; font-size:.78rem; color:var(--ink-soft); font-weight:500; }

  /* ---------- MODULES ---------- */
  .modules{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
  .module{ background:var(--surface); padding:26px 24px; min-height:168px; display:flex; flex-direction:column; gap:10px; }
  .module .tag{ font-size:.68rem; font-weight:700; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
  .module h3{ font-size:1.02rem; font-weight:700; margin:0; }
  .module p{ font-size:.85rem; color:var(--ink-soft); margin:0; }
  .module.center{ background:var(--accent); color:var(--accent-ink); }
  .module.center .tag{ color:var(--accent-ink); opacity:.8; }
  .module.center p{ color:var(--accent-ink); opacity:.9; }

  /* ---------- PLANS ---------- */
  .plans{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .plan{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:32px 30px; display:flex; flex-direction:column; }
  .plan.featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .plan-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
  .plan h3{ font-size:1.2rem; margin:0; }
  .pill{ font-size:.68rem; font-weight:700; padding:5px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent-strong); letter-spacing:.03em; white-space:nowrap;}
  .plan .price-note{ color:var(--ink-soft); font-size:.85rem; margin:4px 0 22px; }
  .plan ul{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
  .plan li{ display:flex; gap:10px; font-size:.9rem; color:var(--ink); }
  .plan li::before{ content:"—"; color:var(--accent); flex:none; font-weight:700; }
  .env-strip{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .env-card{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:18px 18px; }
  .env-card .tag{ font-size:.68rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:block;}
  .env-card p{ margin:0; font-size:.85rem; color:var(--ink-soft); }

  /* ---------- CLIENTS ---------- */
  .client-years{ display:flex; flex-direction:column; gap:0; }
  .client-row{ display:grid; grid-template-columns:120px 1fr; gap:24px; padding-block:22px; border-top:1px solid var(--line); }
  .client-row:last-child{ border-bottom:1px solid var(--line); }
  .client-row .year{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:700; font-size:1.3rem; color:var(--accent); font-variant-numeric:tabular-nums; }
  .client-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{ font-size:.85rem; padding:8px 14px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--ink); }
  .client-note{ margin-top:20px; font-size:.82rem; color:var(--ink-soft); }

  /* ---------- SUPPORT ---------- */
  .support{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .support-copy{ background:var(--surface); padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
  .support-copy h3{ margin:0; font-size:1.3rem; }
  .support-copy p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
  .support-call{ background:var(--surface-2); padding:40px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
  .call-label{ font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
  .call-number{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; }
  .copy-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .copy-btn{ font-size:.78rem; font-weight:700; padding:8px 14px; border-radius:3px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .15s, color .15s; }
  .copy-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .copy-btn[data-copied="true"]{ border-color:var(--accent); color:var(--accent); }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; }
  .info-list{ display:flex; flex-direction:column; gap:22px; }
  .info-item .label{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
  .info-item .value{ font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums; }
  .info-item .value.small{ font-size:.95rem; font-weight:500; }

  form.consult{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:28px; display:flex; flex-direction:column; gap:16px; }
  form.consult .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }
  .field input, .field textarea{
    font:inherit; padding:11px 12px; border-radius:4px; border:1px solid var(--line);
    background:var(--bg); color:var(--ink); resize:vertical;
  }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
  .consult-note{ font-size:.76rem; color:var(--ink-soft); }
  .success-box{ display:none; align-items:center; gap:10px; background:var(--accent-soft); color:var(--accent-strong); border-radius:4px; padding:12px 14px; font-size:.86rem; font-weight:600; }
  .success-box.show{ display:flex; }

  /* ---------- FOOTER ---------- */
  footer.site{ padding-block:40px; }
  .foot-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
  .foot-brand{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:700; }
  .foot-meta{ font-size:.8rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
  .foot-copy{ font-size:.74rem; color:var(--ink-soft); margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }


  /* ---------- HOME CLIENT STRIP ---------- */
  section.client-strip{ border-bottom:1px solid var(--line); background:var(--surface); margin-inline:-20px; padding-inline:20px; }
  .strip-inner{ display:flex; align-items:center; gap:24px; padding-block:18px; flex-wrap:wrap; }
  .strip-label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--accent); white-space:nowrap; }
  .strip-names{ display:flex; flex-wrap:wrap; gap:6px 22px; flex:1; font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:600; font-size:.95rem; color:var(--ink-soft); }
  .strip-link{ font-size:.82rem; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
  .strip-link:hover{ text-decoration:underline; }

  /* ---------- CLIENTS PAGE ---------- */
  .stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); border-bottom:1px solid var(--line); margin-bottom:56px; }
  .stat{ padding:22px 18px 20px 0; }
  .stat + .stat{ padding-left:18px; border-left:1px solid var(--line); }
  .stat-num{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:700; font-size:2.2rem; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
  .stat-num span{ font-size:1.1rem; margin-left:2px; }
  .stat-label{ font-size:.8rem; color:var(--ink-soft); margin-top:8px; }
  .sub-title{ font-size:1.15rem; margin:0 0 8px; }
  .sub-desc{ margin:0 0 18px; font-size:.88rem; color:var(--ink-soft); }
  h3.sub-title + .hl-grid, h3.sub-title + .filter-tabs{ margin-top:16px; }
  .hl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:56px; }
  .hl-card{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:22px 22px 20px; display:flex; flex-direction:column; gap:8px; }
  .hl-type{ font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--accent); }
  .hl-logo{ align-self:flex-start; box-sizing:border-box; height:40px; display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:4px; padding:7px 11px; margin-bottom:6px; }
  .hl-logos{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
  .hl-logos .hl-logo{ margin-bottom:0; }
  .hl-logo img{ display:block; width:auto; height:auto; max-height:24.2px; max-width:141px; }
  .hl-card h4{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-size:1.08rem; margin:0; }
  .hl-card p{ margin:0; font-size:.86rem; color:var(--ink-soft); flex:1; }
  .mod-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .mod-tags span{ font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:3px; background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
  .mod-tags span.x{ background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
  .hl-grid{ margin-bottom:12px !important; }
  .tag-legend{ display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--ink-soft); margin:0 0 56px; }
  .tag-legend .lg{ width:12px; height:12px; border-radius:2px; border:1px solid var(--line); display:inline-block; }
  .tag-legend .lg.x{ background:var(--accent-soft); border-color:transparent; margin-left:10px; }
  .partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:56px; }
  .partner{ background:var(--surface); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .p-name{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:700; font-size:1rem; }
  .p-clients{ display:block; font-size:.74rem; color:var(--ink-soft); margin-top:3px; }
  .partner{ align-items:flex-start !important; }
  .hl-logi{ font-size:.74rem; font-weight:600; color:var(--ink); border-top:1px dashed var(--line); padding-top:8px; margin-top:2px; }
  .p-badge{ white-space:nowrap; flex:none; }
  .p-badge{ font-size:.66rem; font-weight:700; letter-spacing:.06em; padding:4px 9px; border-radius:3px; background:var(--accent); color:var(--accent-ink); }
  .p-badge.soft{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
  .filter-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
  .ftab{ font:inherit; font-size:.84rem; font-weight:600; padding:8px 16px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; }
  .ftab:hover{ border-color:var(--accent); color:var(--ink); }
  .ftab[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .cat-row{ display:grid; grid-template-columns:120px 1fr; gap:24px; padding-block:20px; border-top:1px solid var(--line); }
  .cat-row:last-child{ border-bottom:1px solid var(--line); }
  .cat-name{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; font-weight:700; font-size:1rem; color:var(--ink); padding-top:6px; }
  .chip em{ font-style:normal; font-size:.68rem; font-weight:600; color:var(--accent-strong); background:var(--accent-soft); padding:2px 7px; border-radius:99px; margin-left:4px; }
  .full-list{ margin-top:32px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
  .full-list-title{ padding:16px 20px 4px; font-weight:700; font-size:.9rem; }
  .full-list ul{ margin:0; padding:4px 20px 20px 38px; columns:2; column-gap:40px; font-size:.84rem; color:var(--ink-soft); }
  .full-list li{ break-inside:avoid; padding-block:4px; }
  /* 분야별 고객사: 글자 1pt 확대 */
  .filter-tabs .ftab{ font-size:.923rem; }
  .cat-list .cat-name{ font-size:1.083rem; }
  .cat-list .chip{ font-size:.933rem; }
  .cat-list .chip em{ font-size:.763rem; }

  /* ---------- NAV REFRESH ---------- */
  header.nav{ position:sticky; transition:background .25s ease, box-shadow .25s ease; }
  header.nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #2BD1BC) 55%, #2BD1BC); opacity:.9; }
  header.nav.scrolled{ background:color-mix(in srgb, var(--bg) 95%, transparent); box-shadow:0 1px 0 var(--line), 0 14px 26px -22px rgba(14,26,43,.55); }
  .nav-inner{ padding-block:16.6px; transition:padding .25s ease; }
  header.nav.scrolled .nav-inner{ padding-block:12.2px; }
  .brand-link{ display:inline-flex; align-items:center; gap:10px; }
  .brand-mark{ flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 62%, #FFFFFF), var(--accent));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
  .brand-mark svg{ width:18px; height:18px; }
  .brand{ flex-direction:column; align-items:flex-start; gap:0; line-height:1.2; }
  .brand small{ font-size:.63rem; letter-spacing:.01em; }
  nav.links{ gap:2px; align-items:center; }
  nav.links > a, .drop-trigger{ padding:8px 13px !important; border-radius:10px; border-bottom:0 !important; transition:background .18s ease, color .18s ease; }
  nav.links > a:hover, .nav-drop:hover .drop-trigger, .nav-drop.open .drop-trigger{ background:var(--surface); color:var(--ink) !important; }
  nav.links > a.active, .drop-trigger.active{ background:var(--accent-soft); color:var(--accent-strong) !important; font-weight:700; }
  .nav-cta{ gap:10px; }
  .tel-inline{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font-size:.86rem;
    background:var(--surface); border:1px solid var(--line); color:var(--ink); }
  .tel-inline svg{ width:14px; height:14px; color:var(--accent); flex:none; }
  header.nav .btn{ border-radius:999px; border-color:transparent; padding:10px 18px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #FFFFFF), var(--accent));
    box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 20px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
  header.nav .btn svg{ width:14px; height:14px; transition:transform .2s ease; }
  header.nav .btn:hover{ transform:translateY(-1px); box-shadow:0 2px 4px color-mix(in srgb, var(--accent) 32%, transparent), 0 14px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
  header.nav .btn:hover svg{ transform:translateX(3px); }
  @media (max-width:1180px){ nav.links > a, .drop-trigger{ padding:8px 10px !important; } }

  /* ---------- MODERN REFRESH (global) ---------- */
  body{ letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word; }
  header.nav{ background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); }
  .brand{ font-weight:800; letter-spacing:-.01em; }
  .brand small{ letter-spacing:.02em; }
  nav.links a{ font-weight:600; }
  nav.links a:hover, nav.links a.active{ color:var(--accent); border-color:transparent; }
  .drop-trigger{ font-weight:600 !important; }
  .nav-drop:hover .drop-trigger, .nav-drop.open .drop-trigger, .drop-trigger.active{ color:var(--accent) !important; border-color:transparent !important; }
  .btn{ border-radius:10px; font-weight:700; padding:11px 18px; box-shadow:0 1px 2px rgba(14,26,43,.08); }
  .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
  .btn.ghost{ background:var(--card); color:var(--ink); border-color:var(--line); box-shadow:none; }
  .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--card); box-shadow:none; }
  .kicker .bar{ display:none; }
  .kicker span{ letter-spacing:.06em; font-weight:800; }
  .sec-head h2, .sec-head h1{ font-weight:800; letter-spacing:-.03em; }
  .modules{ gap:16px; background:transparent; border:0; border-radius:0; overflow:visible; }
  /* ---------- 제품구성 카드: 그라데이션 + 입체감 ---------- */
  .module{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px;
    background:linear-gradient(158deg, var(--card) 0%, color-mix(in srgb, var(--surface) 70%, var(--card)) 62%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
    box-shadow:0 1px 1px rgba(14,26,43,.04), 0 3px 6px -3px rgba(14,26,43,.07), 0 18px 28px -20px rgba(14,26,43,.3);
    transition:transform .22s ease, box-shadow .26s ease, border-color .22s ease; }
  .module::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); opacity:.75; }
  .module::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(165deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%); }
  .module > *{ position:relative; z-index:1; }
  .module:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 26%, var(--line));
    box-shadow:0 2px 3px rgba(14,26,43,.05), 0 6px 12px -5px rgba(14,26,43,.09), 0 28px 40px -24px rgba(14,26,43,.4); }
  .module .tag{ display:inline-block; }
  .module.center{ border-color:transparent; color:var(--accent-ink);
    background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 72%, #FFFFFF) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 78%, #000000) 100%);
    box-shadow:0 2px 4px color-mix(in srgb, var(--accent) 24%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--accent) 34%, transparent), 0 26px 38px -22px color-mix(in srgb, var(--accent) 72%, transparent); }
  .module.center::before{ background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.15)); opacity:.9; }
  .module.center::after{ background:linear-gradient(165deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 46%); }
  .module.center:hover{ box-shadow:0 3px 6px color-mix(in srgb, var(--accent) 28%, transparent), 0 12px 22px -10px color-mix(in srgb, var(--accent) 40%, transparent), 0 36px 50px -26px color-mix(in srgb, var(--accent) 80%, transparent); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .module::after{ background:linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 42%); } }
  :root[data-theme="dark"] .module::after{ background:linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 42%); }
  .plan, .env-card, form.consult, .hl-card, .full-list, .support, .faq-more, .notice-file{ border-radius:18px; }
  .plan{ background:var(--card); }
  /* ---------- 이용요금: 입체 카드형 ---------- */
  #plans .plan li::before{ content:none; }
  #plans .plan li{ align-items:flex-start; gap:11px; font-size:.95rem; line-height:1.62; }
  #plans .plan ul{ gap:14px; }
  #plans .plan .ck{ flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:21px; height:21px; margin-top:2px; border-radius:50%; background:var(--surface); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line); }
  #plans .plan .ck svg{ width:12px; height:12px; }
  #plans .plan-top h3{ font-size:1.45rem; letter-spacing:-.02em; }
  #plans .plans{ gap:26px; }
  #plans .plan{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
    border-radius:22px; padding:36px 32px 30px;
    box-shadow:0 1px 2px rgba(14,26,43,.05), 0 6px 12px -6px rgba(14,26,43,.10), 0 22px 34px -22px rgba(14,26,43,.24);
    transition:transform .22s ease, box-shadow .26s ease; }
  #plans .plan:hover{ transform:translateY(-4px);
    box-shadow:0 2px 4px rgba(14,26,43,.06), 0 10px 18px -8px rgba(14,26,43,.12), 0 32px 46px -26px rgba(14,26,43,.3); }
  #plans .plan::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px;
    background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent), color-mix(in srgb, var(--ink) 10%, transparent)); }
  #plans .plan.featured{ border-color:color-mix(in srgb, var(--accent) 38%, var(--line));
    box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 16%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--accent) 26%, transparent), 0 28px 42px -24px color-mix(in srgb, var(--accent) 60%, transparent); }
  #plans .plan.featured:hover{ box-shadow:0 2px 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 14px 24px -10px color-mix(in srgb, var(--accent) 30%, transparent), 0 38px 54px -28px color-mix(in srgb, var(--accent) 70%, transparent); }
  #plans .plan.featured::before{ background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #FFFFFF)); }
  #plans .plan .price-note{ display:block; margin:10px 0 24px; padding:9px 14px; border-radius:11px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-size:.86rem; font-weight:600; }
  #plans .plan.featured .price-note{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 24%, transparent); color:var(--accent-strong); }
  #plans .plan.featured .ck{ background:var(--accent); color:var(--accent-ink); box-shadow:0 3px 7px -3px color-mix(in srgb, var(--accent) 80%, transparent); }
  #plans .plan .btn{ width:100%; padding:15px 20px; border-radius:13px; font-size:.95rem; }
  #plans .plan.featured .btn{ background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #FFFFFF), var(--accent)); border-color:transparent;
    box-shadow:0 2px 4px color-mix(in srgb, var(--accent) 26%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--accent) 75%, transparent); }
  #plans .env-strip{ margin-top:30px; gap:16px; }
  #plans .env-card{ display:flex; align-items:center; gap:14px; padding:20px; border-radius:16px;
    background:var(--card); border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(14,26,43,.04), 0 12px 20px -14px rgba(14,26,43,.22); transition:transform .2s ease, box-shadow .24s ease; }
  #plans .env-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(14,26,43,.05), 0 20px 30px -18px rgba(14,26,43,.32); }
  #plans .env-card .env-ic{ width:42px; height:42px; flex:none; display:inline-flex; align-items:center; justify-content:center;
    border-radius:13px; background:var(--accent-soft); color:var(--accent-strong); }
  #plans .env-card .env-ic svg{ width:20px; height:20px; }
  #plans .env-card .env-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  #plans .env-card .env-tx .tag{ margin:0; font-size:calc(.68rem + 2px); }
  #plans .env-card .env-tx p{ line-height:1.5; }
  @media (max-width:560px){ #plans .plan{ padding:30px 22px 26px; } #plans .plan-top h3{ font-size:1.3rem; } }
  /* ---------- 이용요금: Lite형 연두 포인트 ---------- */
  :root{ --lt:#5FB52F; --lt-strong:#35771C; --lt-soft:#EEF8E4; --lt-line:#BCE49B; --lt-bar2:#AEE06E; --lt-ink:#1E4D10; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --lt:#7ED957; --lt-strong:#BDEE9C; --lt-soft:rgba(126,217,87,.14); --lt-line:rgba(126,217,87,.34); --lt-bar2:#C6F0A4; --lt-ink:#10310A; } }
  :root[data-theme="dark"]{ --lt:#7ED957; --lt-strong:#BDEE9C; --lt-soft:rgba(126,217,87,.14); --lt-line:rgba(126,217,87,.34); --lt-bar2:#C6F0A4; --lt-ink:#10310A; }
  #plans .plan:not(.featured){ border-color:color-mix(in srgb, var(--lt) 38%, var(--line));
    box-shadow:0 1px 2px color-mix(in srgb, var(--lt) 16%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--lt) 26%, transparent), 0 28px 42px -24px color-mix(in srgb, var(--lt) 58%, transparent); }
  #plans .plan:not(.featured):hover{ box-shadow:0 2px 5px color-mix(in srgb, var(--lt) 20%, transparent), 0 14px 24px -10px color-mix(in srgb, var(--lt) 30%, transparent), 0 38px 54px -28px color-mix(in srgb, var(--lt) 68%, transparent); }
  #plans .plan:not(.featured)::before{ background:linear-gradient(90deg, var(--lt), var(--lt-bar2)); }
  #plans .plan:not(.featured) .pill{ background:var(--lt-soft); color:var(--lt-strong); }
  #plans .plan:not(.featured) .price-note{ background:var(--lt-soft); border-color:var(--lt-line); color:var(--lt-strong); }
  #plans .plan:not(.featured) .ck{ background:var(--lt); color:#FFFFFF; box-shadow:0 3px 7px -3px color-mix(in srgb, var(--lt) 80%, transparent); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #plans .plan:not(.featured) .ck{ color:var(--lt-ink); } }
  :root[data-theme="dark"] #plans .plan:not(.featured) .ck{ color:var(--lt-ink); }
  #plans .plan:not(.featured) .btn.ghost{ border-color:transparent; color:var(--lt-ink);
    background:linear-gradient(135deg, color-mix(in srgb, var(--lt) 55%, #FFFFFF), var(--lt));
    box-shadow:0 2px 4px color-mix(in srgb, var(--lt) 26%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--lt) 72%, transparent); }
  #plans .plan:not(.featured) .btn.ghost:hover{ color:var(--lt-ink); border-color:transparent;
    background:linear-gradient(135deg, color-mix(in srgb, var(--lt) 62%, #FFFFFF), var(--lt)); }
  .hl-card{ background:var(--card); box-shadow:var(--card-sh); transition:box-shadow .25s ease, transform .25s ease; }
  .hl-card:hover{ box-shadow:var(--card-sh-h); transform:translateY(-3px); }
  .hl-logo{ border-radius:10px; }
  .sub-title{ font-size:1.233rem; }
  .hl-card h4, .hl-type{ font-family:'Pretendard Variable','Pretendard',"Noto Sans KR",sans-serif; }
  .partners{ border-radius:18px; }
  .partner{ background:var(--card); }
  .stats-bar{ border-top:0; border:1px solid var(--line); border-radius:18px; background:var(--card); padding-inline:8px; }
  .stat-num{ font-weight:800; letter-spacing:-.02em; }
  .field input, .field textarea{ border-radius:10px; background:var(--card); }
  .pick, .agree{ border-radius:10px; background:var(--card); }
  .copy-btn{ border-radius:8px; }
  .mod-tags span{ border-radius:6px; }
  .notice-search input, .notice-search button, .pager button{ border-radius:8px; }
  .support-call{ background:var(--surface); }
  /* ---------- 원격지원 다운로드 버튼 ---------- */
  .rs-btn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; margin-top:18px;
    padding:20px 24px; border-radius:16px; text-decoration:none; color:var(--accent-ink);
    font-size:1.06rem; font-weight:700; letter-spacing:-.01em; cursor:pointer;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #FFFFFF), var(--accent));
    box-shadow:0 2px 3px color-mix(in srgb, var(--accent) 26%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--accent) 72%, transparent);
    transition:transform .15s ease, box-shadow .2s ease; }
  .rs-btn .rs-ic{ display:flex; }
  .rs-btn svg{ width:22px; height:22px; transition:transform .2s ease; }
  .rs-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 5px color-mix(in srgb, var(--accent) 30%, transparent), 0 20px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
  .rs-btn:hover svg{ transform:translateY(3px); }
  .rs-btn:active{ transform:translateY(1px); }
  /* 클릭 유도: 은은한 파동 링 + 아이콘 끄덕임 (마우스를 올리면 멈춤) */
  .rs-btn{ position:relative; overflow:hidden; isolation:isolate; animation:rsPulse 2.6s cubic-bezier(.4,0,.2,1) infinite; }
  .rs-btn .rs-ic, .rs-btn .rs-txt{ position:relative; z-index:1; }
  .rs-btn .rs-ic{ animation:rsNudge 2.6s ease-in-out infinite; }
  .rs-btn:hover, .rs-btn:focus-visible{ animation:none; }
  .rs-btn:hover .rs-ic, .rs-btn:focus-visible .rs-ic{ animation:none; }
  @keyframes rsPulse{
    0%{ box-shadow:0 2px 3px color-mix(in srgb, var(--accent) 26%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    70%{ box-shadow:0 2px 3px color-mix(in srgb, var(--accent) 26%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
    100%{ box-shadow:0 2px 3px color-mix(in srgb, var(--accent) 26%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }
  @keyframes rsNudge{ 0%,55%,100%{ transform:translateY(0); } 64%{ transform:translateY(3px); } 74%{ transform:translateY(0); } 82%{ transform:translateY(2px); } }
  @media (prefers-reduced-motion: reduce){ .rs-btn, .rs-btn .rs-ic{ animation:none; } }
  .rs-note{ margin:11px 0 0; text-align:center; font-size:.83rem; color:var(--ink-soft); }
  @media (max-width:640px){ .rs-btn{ padding:17px 18px; font-size:.97rem; gap:9px; } .rs-btn svg{ width:19px; height:19px; } }
  /* ---------- 솔루션 하위 메뉴 공통 ---------- */
  .sol-tabs{ margin-bottom:30px; }
  .sub-title.ef-gap{ margin-top:40px; }
  /* 도입효과 */
  .ef-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
  .ef-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px 22px;
    box-shadow:0 1px 2px rgba(14,26,43,.04), 0 14px 22px -16px rgba(14,26,43,.24); transition:transform .2s ease, box-shadow .24s ease; }
  .ef-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(14,26,43,.05), 0 22px 32px -20px rgba(14,26,43,.34); }
  .ef-ic{ width:42px; height:42px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent-strong); margin-bottom:14px; }
  .ef-ic svg{ width:21px; height:21px; }
  .ef-card h4{ margin:0 0 7px; font-size:1.02rem; letter-spacing:-.01em; }
  .ef-card p{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.65; }
  /* 도입 전·후 */
  .ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  .ba-card{ border-radius:18px; padding:24px 22px; border:1px solid var(--line); background:var(--surface); }
  .ba-card.after{ background:var(--card); border-color:color-mix(in srgb, var(--accent) 34%, var(--line));
    box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 14%, transparent), 0 20px 32px -22px color-mix(in srgb, var(--accent) 55%, transparent); }
  .ba-tag{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em; padding:6px 12px; border-radius:99px;
    background:var(--card); border:1px solid var(--line); color:var(--ink-soft); margin-bottom:16px; }
  .ba-card.after .ba-tag{ background:var(--accent); border-color:transparent; color:var(--accent-ink);
    box-shadow:0 3px 8px -4px color-mix(in srgb, var(--accent) 80%, transparent); }
  .ba-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .ba-card li{ display:flex; gap:10px; align-items:flex-start; font-size:.91rem; line-height:1.6; color:var(--ink-soft); }
  .ba-card.after li{ color:var(--ink); }
  .ba-card .m{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:800; background:var(--card); border:1px solid var(--line); color:var(--ink-soft); }
  .ba-card.after .m{ background:var(--accent); border-color:transparent; color:var(--accent-ink); }
  /* 물류유통 연동사 */
  .lg-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
  .lg-item{ display:flex; align-items:center; gap:13px; padding:18px 18px; border-radius:16px; background:var(--card); border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(14,26,43,.04), 0 12px 20px -16px rgba(14,26,43,.22); }
  .lg-ic{ width:40px; height:40px; flex:none; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent-strong); }
  .lg-ic svg{ width:20px; height:20px; }
  .lg-item b{ display:block; font-size:.95rem; letter-spacing:-.01em; }
  .lg-item span:not(.lg-ic){ font-size:.8rem; color:var(--ink-soft); }
  @media (max-width:900px){ .ef-grid, .lg-list{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .ef-grid, .lg-list, .ba-grid{ grid-template-columns:1fr; } }
  /* ---------- 원격지원: 3스텝 카드형 ---------- */
  #support .rs-top{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; align-items:center;
    background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden;
    box-shadow:0 1px 2px rgba(14,26,43,.05), 0 8px 16px -8px rgba(14,26,43,.10), 0 26px 40px -24px rgba(14,26,43,.26); }
  #support .rs-top-l{ padding:34px 32px; }
  #support .rs-badge{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; letter-spacing:.04em;
    padding:7px 13px; border-radius:99px; background:var(--accent-soft); color:var(--accent-strong); }
  #support .rs-badge svg{ width:14px; height:14px; }
  #support .rs-top-l h3, #support .rs-top-l h1{ margin:16px 0 10px; font-size:1.45rem; letter-spacing:-.02em; }
  #support .rs-top-l > p{ margin:0; color:var(--ink-soft); font-size:.93rem; line-height:1.72; }
  #support .rs-top-r{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:34px 32px;
    background:linear-gradient(155deg,#0E2A44 0%, #134A79 55%, #1D81C4 130%); color:#EAF1FF; }
  #support .rs-top-r .call-label{ display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:700; letter-spacing:.05em; color:#A9C0EC; }
  #support .rs-top-r .call-label svg{ width:15px; height:15px; }
  #support .rs-top-r .call-number{ font-size:2.05rem; font-weight:800; letter-spacing:-.02em; margin:4px 0 14px; color:#FFFFFF; }
  #support .rs-top-r .copy-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  #support .rs-top-r .copy-btn{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#FFFFFF; padding:10px 16px; }
  #support .rs-top-r .copy-btn:hover, #support .rs-top-r .copy-btn[data-copied="true"]{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.45); color:#FFFFFF; }
  #support .rs-top-r .rs-hours{ font-size:.8rem; color:#B9C9EC; }
  #support .rs-cards{ margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  #support .rs-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 20px;
    box-shadow:0 1px 2px rgba(14,26,43,.04), 0 14px 22px -16px rgba(14,26,43,.24); transition:transform .2s ease, box-shadow .24s ease; }
  #support .rs-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(14,26,43,.05), 0 22px 32px -20px rgba(14,26,43,.34); }
  #support .rs-ic-sq{ width:40px; height:40px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent-strong); margin-bottom:13px; }
  #support .rs-ic-sq svg{ width:20px; height:20px; }
  #support .rs-card .st{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.09em; color:var(--accent); margin-bottom:4px; }
  #support .rs-card b{ display:block; font-size:.98rem; margin-bottom:6px; letter-spacing:-.01em; }
  #support .rs-card p{ margin:0; font-size:.85rem; color:var(--ink-soft); line-height:1.6; }
  @media (max-width:860px){ #support .rs-top{ grid-template-columns:1fr; } #support .rs-cards{ grid-template-columns:1fr; }
    #support .rs-top-l{ padding:28px 22px; } #support .rs-top-r{ padding:26px 22px; } }
  .drop-menu-inner{ border-radius:14px; }
  .success-box, .form-error{ border-radius:10px; }
  footer.site{ background:var(--surface); margin-inline:-20px; padding-inline:20px; border-top:1px solid var(--line); }
  footer.site .wrap{ max-width:1120px; }
  /* ---------- BRAND LOGO (첨부 로고 이미지 그대로 사용) ---------- */
  .brand-link{ gap:0; align-items:center; }
  .brand-logo{ display:block; width:auto !important; height:35px !important; background:none !important; box-shadow:none !important; border-radius:0 !important; }
  .brand-logo img{ height:35px; width:auto; display:block; }
  .foot-brand .brand-logo, .foot-brand .brand-logo img{ height:42px !important; }
  .brand-logo .lg-d{ display:none; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand-logo .lg-l{ display:none; }
    :root:not([data-theme="light"]) .brand-logo .lg-d{ display:block; } }
  :root[data-theme="dark"] .brand-logo .lg-l{ display:none; }
  :root[data-theme="dark"] .brand-logo .lg-d{ display:block; }
  :root[data-theme="light"] .brand-logo .lg-l{ display:block; }
  :root[data-theme="light"] .brand-logo .lg-d{ display:none; }
  .foot-brand{ display:flex; align-items:center; }
  @media (max-width:520px){ .brand-logo, .brand-logo img{ height:31px !important; } .foot-brand .brand-logo, .foot-brand .brand-logo img{ height:37px !important; } }

  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
    .marquee-track [aria-hidden="true"]{ display:none; }
    .hero h1 em{ animation:none; background-size:100% 100%; }
  }

  /* ---------- LOGISTICS PARTNERS ---------- */
  .partners{ gap:14px; background:transparent; border:0; border-radius:0; overflow:visible; }
  .partner{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; gap:14px; justify-content:flex-start; box-shadow:var(--card-sh); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .partner:hover{ transform:translateY(-3px); box-shadow:var(--card-sh-h); border-color:color-mix(in srgb, #0B8F83 30%, var(--line)); }
  .p-ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#2BD1BC,#0B8F83); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(11,143,131,.55); }
  .p-ic svg{ width:21px; height:21px; }
  .p-body{ flex:1; min-width:0; padding-top:1px; }
  .p-name{ display:block; font-size:1.067rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
  .p-clients{ font-size:.78rem; line-height:1.55; margin-top:5px; }
  .partner .p-badge.soft{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px 4px 8px; letter-spacing:.02em; font-size:.68rem; background:color-mix(in srgb, var(--live) 11%, transparent); color:color-mix(in srgb, var(--live) 72%, var(--ink)); border:1px solid color-mix(in srgb, var(--live) 30%, transparent); }
  .partner .p-badge .live{ width:6px; height:6px; }
  .partner{ min-width:0; }
  @media (max-width:560px){ #clients .partners{ grid-template-columns:1fr; } }

  /* ---------- CLIENTS BY CATEGORY ---------- */
  .filter-tabs{ display:flex; flex-wrap:nowrap; width:fit-content; max-width:100%; overflow-x:auto; gap:4px; padding:5px; margin-bottom:18px; background:var(--surface); border:1px solid var(--line); border-radius:999px; scrollbar-width:none; }
  .filter-tabs::-webkit-scrollbar{ display:none; }
  .filter-tabs .ftab{ flex:none; display:inline-flex; align-items:center; gap:7px; border:0; padding:8px 16px; background:transparent; color:var(--ink-soft); transition:background .2s, color .2s, box-shadow .2s; }
  .filter-tabs .ftab:hover{ color:var(--ink); background:color-mix(in srgb, var(--card) 70%, transparent); }
  .filter-tabs .ftab[aria-pressed="true"]{ background:var(--card); color:var(--ink); border:0; box-shadow:0 1px 2px rgba(14,26,43,.08), 0 4px 10px -4px rgba(14,26,43,.18); }
  .ftab .n{ font-size:.72rem; font-weight:700; min-width:22px; padding:1px 7px; border-radius:99px; background:var(--line); color:var(--ink-soft); text-align:center; }
  .ftab[aria-pressed="true"] .n{ background:var(--accent); color:var(--accent-ink); }
  .cat-list{ display:grid; gap:14px; }
  .cat-row{ grid-template-columns:210px 1fr; gap:28px; padding:24px 26px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--card-sh); }
  .cat-row:last-child{ border-bottom:1px solid var(--line); }
  .cat-row[hidden]{ display:none; }
  .cat-name{ display:flex; align-items:center; gap:12px; padding-top:0; align-self:start; }
  .cat-name b{ display:block; font-weight:800; letter-spacing:-.01em; }
  .cat-name small{ display:block; margin-top:3px; font-size:.78rem; font-weight:600; color:var(--ink-soft); }
  .cat-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(14,26,43,.35); }
  .cat-ic svg{ width:20px; height:20px; }
  .cat-ic.c-trade{ background:linear-gradient(135deg,#3E93D4,#1468AE); }
  .cat-ic.c-edu{ background:linear-gradient(135deg,#FFB547,#F07A1A); }
  .cat-ic.c-academic{ background:linear-gradient(135deg,#A58BFF,#6A45E6); }
  .cat-ic.c-religion{ background:linear-gradient(135deg,#F0C24E,#C38A12); }
  .cat-ic.c-public{ background:linear-gradient(135deg,#2BD1BC,#0B8F83); }
  .cat-list .client-chips{ gap:8px; align-content:flex-start; }
  .cat-list .chip{ background:var(--surface); border-color:transparent; transition:border-color .2s, background .2s; }
  .cat-list .chip:hover{ background:var(--card); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
  @media (max-width:860px){ .cat-row{ padding:20px; } }

  /* ---------- RESPONSIVE ---------- */

  /* ---------- NAV DROPDOWN (고객문의) ---------- */
  .nav-drop{ position:relative; display:flex; align-items:center; }
  .drop-trigger{ font:inherit; font-size:.9rem; font-weight:500; background:none; border:0; border-bottom:1px solid transparent; padding:4px 0; color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:color .15s; }
  .drop-trigger svg{ width:11px; height:11px; transition:transform .15s; }
  .nav-drop:hover .drop-trigger, .nav-drop.open .drop-trigger, .drop-trigger.active{ color:var(--ink); border-color:var(--accent); }
  .nav-drop.open .drop-trigger svg{ transform:rotate(180deg); }
  .drop-menu{ position:absolute; top:100%; right:-14px; padding-top:12px; display:none; z-index:60; }
  .nav-drop:hover .drop-menu, .nav-drop.open .drop-menu{ display:block; }
  .drop-menu-inner{ min-width:184px; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:0 14px 34px rgba(10,14,24,.14); padding:6px; display:flex; flex-direction:column; }
  nav.links .drop-menu a{ padding:10px 12px; border-radius:4px; border-bottom:0; white-space:nowrap; }
  nav.links .drop-menu a:hover, nav.links .drop-menu a.active{ background:var(--accent-soft); color:var(--ink); }
  #mobileLinks .m-group{ padding:12px 0 4px; font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--accent); }
  #mobileLinks .m-sub{ padding:9px 0 9px 14px !important; border-bottom:1px solid var(--line); }

  /* ---------- CUSTOMER CENTER sub tabs ---------- */
  .cs-tabs{ display:flex; border-bottom:1px solid var(--line); margin-bottom:40px; overflow-x:auto; scrollbar-width:none; }
  .cs-tabs a{ padding:12px 20px; text-decoration:none; font-weight:600; font-size:.93rem; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
  .cs-tabs a:hover{ color:var(--ink); }
  .cs-tabs a.active{ color:var(--ink); border-color:var(--accent); }

  /* ---------- NOTICE ---------- */
  .notice-tools{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
  .notice-count{ font-size:.84rem; color:var(--ink-soft); }
  .notice-count b{ color:var(--ink); }
  .notice-search{ display:flex; gap:6px; }
  .notice-search input{ font:inherit; font-size:.86rem; padding:8px 12px; border-radius:4px; border:1px solid var(--line); background:var(--surface); color:var(--ink); width:220px; }
  .notice-search input:focus{ outline:none; border-color:var(--accent); }
  .notice-search button{ flex:none; white-space:nowrap; font:inherit; font-size:.84rem; font-weight:700; padding:8px 14px; border-radius:4px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer; }
  .notice-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
  .notice-list li{ border-bottom:1px solid var(--line); }
  .notice-list a{ display:grid; grid-template-columns:64px 1fr 104px 64px; gap:12px; align-items:center; padding:17px 6px; text-decoration:none; transition:background .12s; }
  .notice-list a:hover{ background:var(--surface); }
  .notice-list a:hover .n-title{ color:var(--accent-strong); }
  .notice-list li.pinned a{ background:color-mix(in srgb, var(--accent-soft) 45%, transparent); }
  .n-no, .n-date, .n-views{ font-size:.82rem; color:var(--ink-soft); text-align:center; font-variant-numeric:tabular-nums; }
  .n-pin{ display:inline-block; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:3px; background:var(--accent); color:var(--accent-ink); }
  .n-title{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:8px; }
  .n-title span{ overflow:hidden; text-overflow:ellipsis; }
  .n-title .n-pin-m{ display:none; flex:none; overflow:visible; }
  .n-clip{ flex:none; width:14px; height:14px; color:var(--ink-soft); }
  .n-head{ display:grid; grid-template-columns:64px 1fr 104px 64px; gap:12px; padding:0 6px 10px; font-size:.76rem; font-weight:700; color:var(--ink-soft); text-align:center; }
  .n-head span:nth-child(2){ text-align:left; }
  .notice-empty, .notice-loading{ padding:56px 0; text-align:center; color:var(--ink-soft); font-size:.92rem; border-bottom:1px solid var(--line); }
  .pager{ display:flex; justify-content:center; gap:4px; margin-top:28px; flex-wrap:wrap; }
  .pager button{ font:inherit; min-width:36px; height:36px; padding:0 10px; border-radius:4px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:.84rem; font-weight:600; cursor:pointer; }
  .pager button:hover:not(:disabled){ border-color:var(--accent); color:var(--ink); }
  .pager button[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
  .pager button:disabled{ opacity:.4; cursor:default; }
  .notice-head{ border-top:2px solid var(--ink); border-bottom:1px solid var(--line); padding:24px 6px 20px; }
  .notice-head h3{ margin:0 0 10px; font-size:1.35rem; line-height:1.4; }
  .notice-meta{ font-size:.82rem; color:var(--ink-soft); display:flex; gap:16px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
  .notice-body{ padding:34px 6px 40px; white-space:pre-wrap; word-break:break-word; line-height:1.9; min-height:160px; font-size:.97rem; }
  .notice-body a{ color:var(--accent-strong); }
  .notice-file{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; margin:0 0 28px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-size:.88rem; }
  .notice-file a{ font-weight:600; color:var(--ink); word-break:break-all; }
  .notice-file small{ color:var(--ink-soft); }
  .notice-nav{ border-top:1px solid var(--line); }
  .notice-nav a, .notice-nav div{ display:grid; grid-template-columns:72px 1fr; gap:12px; padding:14px 6px; border-bottom:1px solid var(--line); text-decoration:none; font-size:.9rem; }
  .notice-nav b{ font-size:.8rem; color:var(--ink-soft); font-weight:700; }
  .notice-nav a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notice-nav a:hover span{ color:var(--accent-strong); }
  .notice-nav div span{ color:var(--ink-soft); }
  .notice-back{ margin-top:28px; }

  /* ---------- FAQ ---------- */
  .faq-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .faq-list{ border-top:2px solid var(--ink); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:28px 1fr auto; gap:12px; padding:20px 6px; align-items:start; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover .faq-qtext{ color:var(--accent-strong); }
  .faq-mark{ font-weight:800; font-size:1.05rem; line-height:1.5; color:var(--accent); }
  .faq-qtext{ font-weight:600; line-height:1.55; }
  .faq-cat{ display:block; font-size:.72rem; font-weight:700; color:var(--ink-soft); letter-spacing:.04em; margin-bottom:3px; }
  .faq-chev{ width:18px; height:18px; margin-top:4px; color:var(--ink-soft); transition:transform .18s; }
  .faq-item[open] .faq-chev{ transform:rotate(180deg); }
  .faq-answer{ display:grid; grid-template-columns:28px 1fr; gap:12px; padding:18px 6px 24px; margin:0 0 0; background:var(--surface); border-top:1px dashed var(--line); }
  .faq-answer .faq-mark{ color:var(--ink-soft); }
  .faq-atext{ white-space:pre-wrap; word-break:break-word; color:var(--ink-soft); line-height:1.8; font-size:.93rem; }
  .faq-more{ margin-top:32px; padding:22px 24px; border:1px solid var(--line); border-radius:6px; background:var(--surface); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
  .faq-more p{ margin:0; font-size:.92rem; color:var(--ink-soft); }
  .faq-more strong{ color:var(--ink); }

  /* ---------- FORM additions ---------- */
  .req{ color:var(--accent); margin-left:2px; font-weight:700; }
  .req.off{ display:none; }
  .reply-pick{ border:0; padding:0; margin:0; min-width:0; }
  .reply-pick legend{ font-size:.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; padding:0; }
  .pick-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .pick{ display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px solid var(--line); border-radius:4px; background:var(--bg); cursor:pointer; font-size:.88rem; font-weight:600; transition:border-color .15s, background .15s; }
  .pick:hover{ border-color:var(--accent); }
  .pick:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
  .pick input{ accent-color:var(--accent); margin:0; width:16px; height:16px; }
  .agree{ border:1px solid var(--line); border-radius:4px; background:var(--bg); padding:12px 14px; font-size:.85rem; }
  .agree > label{ display:flex; gap:9px; align-items:center; font-weight:600; cursor:pointer; }
  .agree > label input{ accent-color:var(--accent); width:16px; height:16px; margin:0; }
  .agree details{ margin-top:8px; }
  .agree summary{ font-size:.78rem; color:var(--ink-soft); cursor:pointer; }
  .agree dl{ margin:10px 0 2px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.78rem; color:var(--ink-soft); }
  .agree dt{ font-weight:700; color:var(--ink); }
  .agree dd{ margin:0; }
  .agree .agree-foot{ margin:8px 0 0; font-size:.76rem; color:var(--ink-soft); }
  .hp-field{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
  .form-error{ display:none; align-items:center; gap:10px; border-radius:4px; padding:12px 14px; font-size:.86rem; font-weight:600; background:color-mix(in srgb, #C62828 11%, var(--surface)); color:#B3261E; }
  :root[data-theme="dark"] .form-error{ color:#F2B8B5; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .form-error{ color:#F2B8B5; } }
  .form-error.show{ display:flex; }
  form.consult button[type="submit"][disabled]{ opacity:.6; cursor:progress; transform:none; }
  .demo-note{ font-size:.76rem; color:var(--ink-soft); margin:0; }
  .cs-info-copy{ font-size:.93rem; color:var(--ink-soft); margin:0; }

  @media (max-width:860px){
    .notice-list a{ grid-template-columns:1fr auto; gap:6px 12px; padding:15px 4px; }
    .notice-list .n-no, .notice-list .n-views, .n-head{ display:none; }
    .notice-list .n-date{ text-align:right; }
    .n-title .n-pin-m{ display:inline-block; }
    .notice-search{ width:100%; }
    .notice-search input{ flex:1; width:auto; }
    .pick-row{ grid-template-columns:1fr; }
    .cs-tabs{ margin-bottom:28px; }
    .cs-tabs a{ padding:12px 14px; }
  }

  @media (max-width:860px){
    nav.links{ display:none; }
    .menu-toggle{ display:flex; }
    .tel-inline{ display:none; }
    .hero-inner{ grid-template-columns:1fr; padding-block:48px 52px; gap:40px; }
    .hub{ justify-self:center; }
    .hub{ margin-block:0; }
    .hub-floats{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }
    .float-card, .float-card.fc1, .float-card.fc2, .float-card.fc3, .float-card.fc4{ position:static; animation:none; white-space:normal; align-items:flex-start; }
    .hero-stats{ grid-template-columns:repeat(2, auto); gap:16px 36px; }
    .flow{ grid-template-columns:repeat(3, 1fr); }
    .flow::before{ display:none; }
    .connect{ grid-template-columns:1fr; }
    .why{ grid-template-columns:1fr; gap:32px; }
    .cta-panel{ grid-template-columns:1fr; padding:40px 28px; }
    .h-sec{ padding-block:64px; }
    .sec-head{ grid-template-columns:1fr; gap:14px; }
    .story{ grid-template-columns:1fr; gap:28px; }
    .modules{ grid-template-columns:1fr 1fr; }
    .plans{ grid-template-columns:1fr; }
    .env-strip{ grid-template-columns:1fr; }
    .support{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; gap:32px; }
    form.consult .row2{ grid-template-columns:1fr; }
    .client-row{ grid-template-columns:1fr; gap:8px; }
    .stats-bar{ grid-template-columns:1fr 1fr; }
    .stat:nth-child(3){ padding-left:0; border-left:none; }
    .stat:nth-child(n+3){ border-top:1px solid var(--line); }
    .hl-grid{ grid-template-columns:1fr; }
    .partners{ grid-template-columns:1fr 1fr; }
    .cat-row{ grid-template-columns:1fr; gap:10px; }
    details.full-list ul{ columns:1; }
  }
  @media (max-width:520px){
    .modules{ grid-template-columns:1fr; }
    .flow{ grid-template-columns:1fr 1fr; }
    .hub-floats{ grid-template-columns:1fr; }
    .float-card .ic{ width:30px; height:30px; }
    .ledger-grid{ grid-template-columns:1fr 1fr; }
  }

  /* ================= 제품구성 카드: 클릭 가능 표시 ================= */
  .modules .module[data-mod]{ cursor:pointer; }
  .modules .module[data-mod]:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:3px; }
  .module .mod-more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px;
    font-size:.8rem; font-weight:700; color:var(--accent-strong); opacity:.78; transition:opacity .2s, gap .2s; }
  a.mod-more{ text-decoration:none; color:inherit; }
  .module .mod-more svg{ width:14px; height:14px; transition:transform .2s ease; }
  .module:hover .mod-more, .module:focus-visible .mod-more{ opacity:1; }
  .module:hover .mod-more svg{ transform:translateX(3px); }
  .module.center .mod-more{ color:var(--accent-ink); opacity:.92; }
  .mod-hint{ margin:-2px 0 16px; font-size:.86rem; color:var(--ink-soft); display:flex; align-items:center; gap:7px; }
  .mod-hint svg{ width:15px; height:15px; color:var(--accent); flex:none; }

  /* ================= 상세 팝업 ================= */
  .md-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:28px 18px;
    background:rgba(8,16,30,.52); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s; }
  .md-overlay.open{ opacity:1; visibility:visible; transition:opacity .22s ease; }
  .md{ --c1:#3894D8; --c2:#11588F; position:relative; width:min(940px, 100%); max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px);
    display:flex; flex-direction:column; background:var(--bg); color:var(--ink); border-radius:24px; overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.12), 0 40px 80px -30px rgba(0,0,0,.55);
    transform:translateY(16px) scale(.985); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  .md-overlay.open .md{ transform:none; }
  .md-scroll{ overflow-y:auto; overscroll-behavior:contain; flex:1; }
  .md-close{ position:absolute; top:16px; right:16px; z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s, transform .2s; }
  .md-close:hover{ background:rgba(255,255,255,.3); transform:rotate(90deg); }
  .md-close svg{ width:18px; height:18px; }

  /* 히어로 */
  .md-hero{ position:relative; padding:40px 44px 74px; color:#fff; overflow:hidden;
    background:radial-gradient(520px 260px at 92% -10%, rgba(255,255,255,.32), transparent 62%), linear-gradient(135deg, var(--c1), var(--c2)); }
  .md-hero::after{ content:''; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg, transparent, rgba(0,0,0,.14)); pointer-events:none; }
  .md-wm{ position:absolute; right:-26px; bottom:-38px; width:230px; height:230px; color:#fff; opacity:.12; transform:rotate(-8deg); pointer-events:none; }
  .md-wm svg{ width:100%; height:100%; }
  .md-hero-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .md-ic{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -10px rgba(0,0,0,.5); }
  .md-ic svg{ width:26px; height:26px; }
  .md-tag{ font-size:.74rem; font-weight:800; letter-spacing:.1em; padding:6px 12px; border-radius:99px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); }
  .md-title{ position:relative; z-index:1; margin:0 0 10px; font-size:clamp(1.15rem, 2.2vw, 1.3rem); font-weight:700; opacity:.92; letter-spacing:-.01em; }
  .md-head{ position:relative; z-index:1; margin:0 0 14px; font-size:clamp(1.45rem, 3.2vw, 2.05rem); line-height:1.32; font-weight:800; letter-spacing:-.03em; max-width:22em; text-wrap:balance; }
  .md-lead{ position:relative; z-index:1; margin:0; max-width:46em; font-size:.98rem; line-height:1.75; color:rgba(255,255,255,.9); }

  /* 핵심 포인트 */
  .md-body{ padding:0 44px 34px; }
  .md-points{ position:relative; z-index:2; margin-top:-46px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .md-pt{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px;
    box-shadow:0 1px 2px rgba(14,26,43,.05), 0 16px 26px -18px rgba(14,26,43,.35); }
  .md-pt b{ display:block; font-size:1.32rem; font-weight:800; letter-spacing:-.02em; line-height:1.25;
    color:color-mix(in srgb, var(--c2) 84%, #000); margin-bottom:5px; }
  .md-pt span{ font-size:.86rem; color:var(--ink-soft); line-height:1.5; }

  /* 섹션 */
  .md-sec{ margin-top:34px; }
  .md-sec h3{ margin:0 0 14px; display:flex; align-items:center; gap:9px; font-size:1.08rem; letter-spacing:-.02em; }
  .md-sec h3::before{ content:''; width:4px; height:18px; border-radius:3px; background:linear-gradient(180deg, var(--c1), var(--c2)); }

  .md-feats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .md-ft{ display:flex; gap:14px; align-items:flex-start; padding:17px 18px; border-radius:16px; border:1px solid var(--line);
    background:linear-gradient(160deg, var(--card), color-mix(in srgb, var(--surface) 70%, var(--card)));
    box-shadow:0 1px 1px rgba(14,26,43,.03), 0 12px 20px -18px rgba(14,26,43,.3); transition:transform .2s ease, box-shadow .24s ease; }
  .md-ft:hover{ transform:translateY(-2px); box-shadow:0 2px 3px rgba(14,26,43,.05), 0 18px 28px -20px rgba(14,26,43,.4); }
  .md-no{ flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:.82rem; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--c1), var(--c2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 12px -6px color-mix(in srgb, var(--c2) 80%, transparent); }
  .md-ft b{ display:block; font-size:.98rem; margin:3px 0 5px; letter-spacing:-.01em; }
  .md-ft p{ margin:0; font-size:.88rem; line-height:1.65; color:var(--ink-soft); }

  .md-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:18px; border-radius:18px;
    background:color-mix(in srgb, var(--c1) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--c1) 22%, var(--line)); }
  .md-step{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line);
    font-size:.88rem; font-weight:700; box-shadow:0 6px 12px -10px rgba(14,26,43,.4); }
  .md-step i{ font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--c1), var(--c2)); }
  .md-sg{ display:inline-flex; align-items:center; gap:8px; }
  .md-arr{ color:color-mix(in srgb, var(--c2) 70%, var(--ink-soft)); display:inline-flex; }
  .md-arr svg{ width:16px; height:16px; }

  .md-menus{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
  .md-mg{ padding:16px 16px 14px; border-radius:16px; border:1px solid var(--line); background:var(--card); }
  .md-mg h4{ margin:0 0 10px; font-size:.86rem; font-weight:800; color:color-mix(in srgb, var(--c2) 84%, var(--ink)); letter-spacing:-.01em; }
  .md-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .md-chips span{ font-size:.78rem; padding:5px 10px; border-radius:99px; background:var(--surface); border:1px solid var(--line); color:var(--ink); white-space:nowrap; }


  /* ---------- 주요 화면 (스크린샷) ---------- */
  .md-shots{ display:grid; gap:20px; margin-bottom:14px; }
  .md-shot{ margin:0; border-radius:18px; overflow:hidden; border:1px solid color-mix(in srgb, var(--c1) 24%, var(--line));
    background:var(--card); box-shadow:0 1px 2px rgba(14,26,43,.04), 0 22px 34px -28px rgba(14,26,43,.45); }
  .md-sbar{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, var(--surface)), var(--surface)); }
  .md-sbar i{ width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--c2) 26%, var(--line)); flex:none; }
  .md-sbar i:first-child{ background:color-mix(in srgb, var(--c1) 70%, transparent); }
  .md-sbar em{ font-style:normal; margin-left:6px; font-size:.78rem; font-weight:700; letter-spacing:-.01em;
    color:color-mix(in srgb, var(--c2) 72%, var(--ink-soft)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .md-sbtn{ display:block; width:100%; padding:0; border:0; background:var(--surface); cursor:zoom-in; position:relative; line-height:0; }
  .md-sbtn img{ display:block; width:100%; height:auto; }
  .md-zoom{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px;
    font-size:.76rem; font-weight:700; line-height:1; color:#fff; background:rgba(10,20,36,.72); backdrop-filter:blur(6px);
    opacity:0; transform:translateY(5px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
  .md-zoom svg{ width:13px; height:13px; }
  .md-sbtn:hover .md-zoom, .md-sbtn:focus-visible .md-zoom{ opacity:1; transform:none; }
  .md-sbtn:focus-visible{ outline:3px solid color-mix(in srgb, var(--c1) 60%, transparent); outline-offset:-3px; }
  .md-shot figcaption{ padding:14px 16px 16px; }
  .md-shot figcaption b{ display:block; font-size:.95rem; letter-spacing:-.01em; margin-bottom:5px;
    color:color-mix(in srgb, var(--c2) 84%, var(--ink)); }
  .md-shot figcaption p{ margin:0; font-size:.87rem; line-height:1.65; color:var(--ink-soft); }

  /* 확대 보기 */
  .md-lb{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:24px;
    background:rgba(6,12,22,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s; cursor:zoom-out; }
  .md-lb.open{ opacity:1; visibility:visible; transition:opacity .2s ease; }
  .md-lb img{ max-width:100%; max-height:100%; width:auto; height:auto; border-radius:12px; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); }
  .md-lb .md-lbcap{ position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:.82rem; color:rgba(255,255,255,.82); padding:0 24px; }
  .md-lbx{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; cursor:pointer; }
  .md-lbx svg{ width:19px; height:19px; }
  /* 터치 기기: 힌트 상시 노출 + 확대 보기에서 원본 크기로 훑어보기 */
  @media (hover:none){ .md-zoom{ opacity:1; transform:none; } }
  @media (max-width:760px){
    .md-lb{ align-items:flex-start; justify-content:flex-start; overflow:auto; -webkit-overflow-scrolling:touch; padding:58px 14px 46px; cursor:default; }
    .md-lb img{ max-width:none; width:1100px; max-height:none; }
    .md-lbx, .md-lb .md-lbcap{ position:fixed; }
    .md-lb .md-lbcap{ bottom:12px; }
  }

  .md-effects{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .md-effects li{ display:flex; gap:11px; align-items:flex-start; padding:16px; border-radius:16px; font-size:.9rem; line-height:1.6;
    background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 12%, var(--card)), var(--card)); border:1px solid color-mix(in srgb, var(--c1) 26%, var(--line)); }
  .md-effects li span.ck{ flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg, var(--c1), var(--c2)); }
  .md-effects li span.ck svg{ width:12px; height:12px; }

  /* 하단 바 */
  .md-foot{ flex:none; display:flex; align-items:center; gap:10px; padding:14px 22px; border-top:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); }
  .md-nav{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card);
    color:var(--ink); font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; transition:border-color .2s, color .2s; max-width:42%; }
  .md-nav span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .md-nav svg{ width:15px; height:15px; flex:none; }
  .md-nav:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); color:var(--accent-strong); }
  .md-foot .sp{ flex:1; }
  .md-foot .btn{ padding:12px 20px; border-radius:12px; }

  @media (max-width:760px){
    .md-overlay{ padding:0; align-items:flex-end; }
    .md{ width:100%; max-height:94vh; max-height:94dvh; border-radius:22px 22px 0 0; }
    .md-hero{ padding:30px 22px 66px; }
    .md-body{ padding:0 18px 26px; }
    .md-points{ grid-template-columns:1fr; gap:10px; }
    .md-feats, .md-effects{ grid-template-columns:1fr; }
    .md-shots{ gap:14px; }
    .md-shot figcaption{ padding:12px 13px 14px; }
    .md-lb{ padding:14px; }
    .md-wm{ width:160px; height:160px; }
    .md-foot{ padding:12px 14px; flex-wrap:wrap; }
    .md-nav{ max-width:48%; }
    .md-foot .sp{ display:none; }
    .md-foot .btn{ order:3; width:100%; justify-content:center; }
  }
  @media (prefers-reduced-motion: reduce){ .md-overlay, .md{ transition:none; } }
  /* 다크 모드: 포인트 색 글자는 밝은 톤으로 */
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .md-pt b, :root:not([data-theme="light"]) .md-mg h4{ color:color-mix(in srgb, var(--c1) 68%, #FFFFFF); } }
  :root[data-theme="dark"] .md-pt b, :root[data-theme="dark"] .md-mg h4{ color:color-mix(in srgb, var(--c1) 68%, #FFFFFF); }

  .foot-links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 4px; font-size:.82rem; }
  .foot-links a{ color:var(--ink-soft); text-decoration:none; }
  .foot-links a:hover{ color:var(--accent-strong); text-decoration:underline; }