:root {
            /* KOCO 怨듭떇 CI 異붿텧 ?됱긽 ?쒖뒪??*/
            --koco-blue: #005BAC;         /* ?곷Ц KOCO ?쒓렇?덉쿂 釉붾（ */
            --koco-blue-dark: #004280;    /* ??釉붾（ (?몃쾭?? */
            --koco-blue-light: #EBF4FC;   /* ?뚰봽??釉붾（ 諛곌꼍 */
            
            --koco-orange: #EE591F;       /* 濡쒓퀬 ?곷떒/醫뚯륫 ?쒓렇?덉쿂 ?ㅻ젋吏€ */
            --koco-orange-dark: #D4440D;  /* ???ㅻ젋吏€ (?몃쾭?? */
            --koco-orange-light: #FFF0EB; /* ?뚰봽???ㅻ젋吏€ 諛곌꼍 */
            
            --koco-charcoal: #4A4D4E;     /* ?쒓? 肄붿퐫?뚰깉 ?쒓렇?덉쿂 ?ㅽ겕 李⑥퐳 */
            --koco-charcoal-dark: #232628;/* ??李⑥퐳 (?명꽣/?묐컮?? */
            --koco-gray: #7A8083;         /* ?쒕툕 ?띿뒪??洹몃젅??*/
            --koco-light-gray: #F5F7FA;   /* ?고쉶??諛곌꼍 */
            
            --white: #ffffff;
            --border: #E1E6EB;
            --card-shadow: 0 10px 25px -5px rgba(0, 91, 172, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
            --card-hover: 0 20px 30px -10px rgba(0, 91, 172, 0.16), 0 10px 15px -5px rgba(238, 89, 31, 0.08);
            --site-header-h: 152px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
            overscroll-behavior-x: none;
            scroll-padding-top: var(--site-header-h);
            color-scheme: light;
        }

        body {
            color: var(--koco-charcoal);
            background-color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
            max-width: 100%;
            padding-top: var(--site-header-h);
        }

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

        .container {
            max-width: 1260px;
            margin: 0 auto;
            padding: 0;
        }

        /* ?꾩껜 ?대?吏€ ?€??怨좎젙 踰꾪듉 */
        .capture-btn-fixed {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 10000;
            background: #28a745;
            color: #ffffff;
            padding: 12px 20px;
            border-radius: 50px;
            border: 2px solid #ffffff;
            font-weight: 700;
            font-size: 14px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
        }
        .capture-btn-fixed:hover {
            background: #218838;
            transform: scale(1.05);
        }

        /* Top Bar */
        .top-bar {
            background-color: var(--koco-charcoal-dark);
            color: #d1d7dc;
            font-size: 13px;
            padding: 8px 0;
            border-bottom: 2px solid var(--koco-orange);
        }
        .top-bar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Header */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            background: #fff;
            z-index: 2000;
            overflow: visible;
        }
        .sub-visual {
            position: relative;
            width: 100%;
            overflow: hidden;
            --sub-visual-h: 168px;
            --sub-visual-h-m: 112px;
        }
        .sub-visual--band {
            min-height: 56px;
        }
        .sub-visual--html {
            min-height: 0;
            padding: 22px 0;
        }
        .sub-visual--sized.sub-visual--band {
            min-height: var(--sub-visual-h);
            height: var(--sub-visual-h);
        }
        .sub-visual--sized.sub-visual--html {
            min-height: var(--sub-visual-h);
            padding: 0;
            display: flex;
            align-items: center;
        }
        .sub-visual--sized.sub-visual--html .container {
            width: 100%;
        }
        .sub-visual__img {
            display: block;
            width: 100%;
            height: var(--sub-visual-h, 168px);
            object-fit: cover;
            object-position: center;
        }
        .sub-visual__html {
            position: relative;
            z-index: 1;
        }
        .sub-visual__html img {
            display: inline-block;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            vertical-align: top;
        }
        .sub-visual.section--on-dark .sub-visual__html {
            color: #fff;
        }
        .sub-nav {
            background: #fff;
            border-bottom: 1px solid var(--border);
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
        }
        .sub-nav .container {
            padding-top: 0;
            padding-bottom: 0;
        }
        .sub-nav__list {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .sub-nav__item {
            flex: 0 0 auto;
        }
        .sub-nav__link {
            display: block;
            padding: 14px 18px;
            border-bottom: 3px solid transparent;
            color: #4a5360;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
            text-decoration: none;
            white-space: nowrap;
            transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
        }
        .sub-nav__link:hover,
        .sub-nav__link:focus-visible {
            color: var(--koco-blue);
            background: rgba(0, 82, 155, 0.04);
        }
        .sub-nav__link.is-active {
            color: var(--koco-blue);
            border-bottom-color: var(--koco-blue);
            background: rgba(0, 82, 155, 0.06);
        }
        .header-top {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            min-height: 92px;
            gap: 16px;
            padding-top: 8px;
        }
        .header-top-start {
            justify-self: start;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .nav-toggle,
        .nav-close,
        .nav-sub-toggle {
            border: 0;
            background: transparent;
            color: #3a3f44;
            cursor: pointer;
            padding: 0;
            display: none;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
        .nav-toggle {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
        }
        .nav-toggle i, .nav-toggle svg,
        .nav-close i, .nav-close svg,
        .nav-sub-toggle i, .nav-sub-toggle svg { width: 24px; height: 24px; }
        .nav-backdrop { display: none; }
        .nav-drawer-head,
        .nav-drawer-foot { display: none; }
        .header-icon-phone { display: none; }
        .header-cta-pill {
            background: var(--koco-orange);
            color: #fff;
            border: 0;
            border-radius: 999px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }
        .header-cta-pill:hover { background: var(--koco-orange-dark); color: #fff; }
        .brand-logo-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        .header-logo-img {
            height: 72px;
            width: auto;
            object-fit: contain;
            display: block;
        }
        .header-icons {
            justify-self: end;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .header-phone-box {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--koco-blue);
            color: #fff;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.02em;
            white-space: nowrap;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0, 91, 172, 0.22);
        }
        .header-phone-box:hover { background: var(--koco-blue-dark); color: #fff; }
        .header-phone-box i, .header-phone-box svg { width: 18px; height: 18px; flex-shrink: 0; }
        .header-icon {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #3a3f44;
            border-radius: 50%;
        }
        .header-icon:hover { background: #f3f5f7; color: var(--koco-blue); }
        .header-icon i, .header-icon svg { width: 20px; height: 20px; }
        .header-icons .header-icon-phone { display: none; }
        .header-nav {
            display: flex;
            justify-content: stretch;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0;
            padding: 4px 0 0;
            width: 100%;
            max-width: 1260px;
            margin-left: auto;
            margin-right: auto;
        }
        .nav-links {
            display: flex;
            list-style: none;
            gap: 0;
            justify-content: space-between;
            flex-wrap: nowrap;
            align-items: flex-start;
            width: 100%;
        }
        .nav-item { position: relative; padding-bottom: 18px; }
        .nav-item-row { display: contents; }
        .nav-item.has-sub .nav-item-row > a::after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 6px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid currentColor;
            vertical-align: middle;
            opacity: .45;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .nav-item.has-sub:hover .nav-parent-link,
        .nav-item.has-sub:focus-within .nav-parent-link {
            color: var(--koco-blue);
        }
        .nav-item.has-sub:hover .nav-item-row > a::after,
        .nav-item.has-sub:focus-within .nav-item-row > a::after {
            opacity: 1;
            transform: translateY(1px);
        }
        .nav-sub {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            margin: 0;
            padding: 8px 6px;
            list-style: none;
            z-index: 960;
            background: #fff;
            border: 1px solid color-mix(in srgb, var(--koco-blue) 14%, #e6eaee);
            border-radius: 14px;
            box-shadow:
                0 4px 6px -2px rgba(18, 41, 69, 0.04),
                0 18px 36px -10px color-mix(in srgb, var(--koco-blue) 22%, transparent);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: none;
            transition: opacity 0.15s ease, visibility 0.15s;
        }
        .nav-sub::before {
            content: "";
            position: absolute;
            left: -28px;
            right: -28px;
            top: -18px;
            height: 18px;
        }
        .nav-sub::after {
            content: "";
            position: absolute;
            top: -6px;
            left: 22px;
            width: 12px;
            height: 12px;
            background: #fff;
            border-left: 1px solid color-mix(in srgb, var(--koco-blue) 14%, #e6eaee);
            border-top: 1px solid color-mix(in srgb, var(--koco-blue) 14%, #e6eaee);
            transform: rotate(45deg);
        }
        .nav-item.has-sub:hover > .nav-sub,
        .nav-item.has-sub:focus-within > .nav-sub {
            display: block;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none;
        }
        @media (min-width: 769px) {
            .nav-links > .nav-item:nth-last-child(-n+3) > .nav-sub {
                left: auto;
                right: 0;
            }
            .nav-links > .nav-item:nth-last-child(-n+3) > .nav-sub::after {
                left: auto;
                right: 22px;
            }
        }
        .nav-links .nav-sub a {
            display: block;
            padding: 10px 14px;
            font-size: 14.5px;
            font-weight: 600;
            letter-spacing: -0.02em;
            white-space: nowrap;
            color: #3d4650;
            border-radius: 9px;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .nav-links .nav-sub a:hover,
        .nav-links .nav-sub a:focus-visible {
            background: color-mix(in srgb, var(--koco-blue) 18%, #fff);
            color: var(--koco-blue);
        }
        .nav-sub-group {
            padding: 0;
        }
        .nav-links .nav-sub a.nav-sub-l2 {
            font-size: 14.5px;
            font-weight: 600;
            color: #3d4650;
        }
        .nav-sub-l3 {
            list-style: none;
            margin: 0;
            padding: 0 0 4px 8px;
        }
        .nav-links .nav-sub .nav-sub-l3 a {
            padding: 7px 14px 7px 18px;
            font-size: 13.5px;
            font-weight: 500;
            color: #5a6570;
        }
        .nav-links .nav-sub .nav-sub-l3 a:hover,
        .nav-links .nav-sub .nav-sub-l3 a:focus-visible {
            background: color-mix(in srgb, var(--koco-blue) 18%, #fff);
            color: var(--koco-blue);
        }
        @media (prefers-reduced-motion: reduce) {
            .nav-sub,
            .nav-item.has-sub .nav-item-row > a::after {
                transition: none;
            }
        }
        .nav-links a {
            font-size: 18px;
            font-weight: 700;
            color: #4a4d4e;
            transition: color 0.2s;
            letter-spacing: -0.02em;
        }
        .nav-links a:hover {
            color: var(--koco-blue);
        }

        /* Hero Section */
        .hero {
            background-color: #fff;
            color: inherit;
            padding: 28px 0 0;
            text-align: left;
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        .hero-full-slider {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }
        .hero-full-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.8s ease;
            pointer-events: none;
        }
        .hero-full-slide.is-active {
            opacity: 1;
            pointer-events: auto;
            z-index: 1;
        }
        .hero-full-slider--slide .hero-full-slide {
            opacity: 1;
            transform: translateX(100%);
            transition: transform 0.7s ease;
        }
        .hero-full-slider--slide.is-back .hero-full-slide {
            transform: translateX(-100%);
        }
        .hero-full-slider--slide .hero-full-slide.is-active {
            transform: translateX(0);
            z-index: 2;
        }
        .hero-full-slider--slide .hero-full-slide.is-leave {
            transform: translateX(-100%);
            z-index: 1;
        }
        .hero-full-slider--slide.is-back .hero-full-slide.is-leave {
            transform: translateX(100%);
        }
        .hero-full-arrow {
            position: absolute;
            top: 50%;
            z-index: 6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(15, 23, 42, 0.38);
            color: #fff;
            cursor: pointer;
            pointer-events: auto;
            transform: translateY(-50%);
        }
        .hero-full-arrow:hover {
            background: rgba(15, 23, 42, 0.58);
        }
        .hero-full-arrow svg {
            width: 22px;
            height: 22px;
        }
        .hero-full-arrow--prev { left: 16px; }
        .hero-full-arrow--next { right: 16px; }
        .hero-full-dots {
            position: absolute;
            left: 20px;
            top: 18px;
            z-index: 6;
            display: flex;
            gap: 8px;
            pointer-events: auto;
        }
        .hero-full-dot {
            width: 10px;
            height: 10px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.45);
            cursor: pointer;
        }
        .hero-full-dot.is-active {
            background: #fff;
        }
        .hero-full-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            z-index: 0;
        }
        img.hero-full-bg {
            opacity: var(--hero-full-opacity, 1);
        }
        a.hero-full-bg {
            object-fit: unset;
        }
        a.hero-full-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            opacity: var(--hero-full-opacity, 1);
        }
        .hero--full {
            padding: 0;
            min-height: 520px;
        }
        .hero--full:not(.hero--has-bg):not(.hero--no-copy)::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(90deg, rgba(8, 30, 58, .55) 0%, rgba(8, 30, 58, .18) 48%, rgba(8, 30, 58, 0) 72%);
            pointer-events: none;
        }
        .hero--full .hero-inner {
            position: relative;
            z-index: 3;
            min-height: 520px;
            grid-template-columns: minmax(280px, 0.7fr) 1fr;
            pointer-events: none;
        }
        .hero--full .hero-copy {
            pointer-events: none;
        }
        .hero--full .hero-copy h1 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
        .hero--full .hero-copy p { color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
        .hero--full .hero-copy p:last-child { margin-bottom: 0; }
        .hero--full .hero-btn-outline {
            background: rgba(255,255,255,.95);
        }
        .hero-photo-actions {
            position: absolute;
            left: 50%;
            bottom: 18px;
            z-index: 7;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 10px;
            width: max-content;
            max-width: calc(100% - 24px);
            pointer-events: auto;
        }
        .hero-photo-actions .hero-full-arrow {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            transform: none;
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            background: rgba(15, 23, 42, 0.5);
        }
        .hero-photo-actions .hero-full-arrow--prev,
        .hero-photo-actions .hero-full-arrow--next {
            left: auto;
            right: auto;
        }
        .hero-photo-actions .hero-full-arrow:hover {
            background: rgba(15, 23, 42, 0.7);
        }
        .hero-btn-outline--photo {
            flex-shrink: 0;
            white-space: nowrap;
            box-shadow: 0 8px 20px rgba(8, 30, 58, 0.22);
        }
        .hero-inner {
            display: grid;
            grid-template-columns: minmax(280px, 0.92fr) minmax(340px, 1.08fr);
            align-items: center;
            min-height: 480px;
            position: relative;
            gap: 12px;
        }
        .hero--no-panels .hero-inner {
            grid-template-columns: 1fr;
        }
        .hero-copy {
            position: relative;
            z-index: 3;
            padding: 40px 0 48px;
        }
        .hero--has-person .hero-copy h1 {
            text-shadow: 0 1px 10px rgba(255, 255, 255, 0.75);
        }
        .hero-copy h1 {
            font-size: var(--home-copy-fs, clamp(32px, 4.2vw, 48px));
            font-weight: 900;
            line-height: 1.25;
            margin-bottom: 16px;
            letter-spacing: -0.8px;
            color: var(--koco-blue);
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: keep-all;
        }
        .hero-copy p {
            font-size: var(--home-copy-fs, 16px);
            color: #6b7280;
            max-width: none;
            margin: 0 0 28px;
            line-height: 1.6;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: keep-all;
        }
        .hero--copy-x-center .hero-copy { text-align: center; }
        .hero--copy-x-right .hero-copy { text-align: right; }
        .hero--copy-x-center .hero-copy p { margin-left: auto; margin-right: auto; }
        .hero--copy-x-right .hero-copy p { margin-left: auto; }
        .hero:not(.hero--full).hero--copy-y-top .hero-inner { align-items: start; }
        .hero:not(.hero--full).hero--copy-y-bottom .hero-inner { align-items: end; }
        .hero--no-panels:not(.hero--has-person):not(.hero--full).hero--copy-x-center .hero-copy {
            margin-left: auto;
            margin-right: auto;
        }
        .hero--no-panels:not(.hero--has-person):not(.hero--full).hero--copy-x-right .hero-copy {
            margin-left: auto;
        }
        .hero--full .hero-inner {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            grid-template-columns: none;
        }
        .hero--full.hero--copy-x-center .hero-inner { align-items: center; }
        .hero--full.hero--copy-x-right .hero-inner { align-items: flex-end; }
        .hero--full.hero--copy-y-top .hero-inner { justify-content: flex-start; }
        .hero--full.hero--copy-y-bottom .hero-inner { justify-content: flex-end; }
        .hero--full .hero-copy {
            max-width: min(640px, 100%);
            width: 100%;
            padding-top: 48px;
            padding-bottom: 72px;
        }
        .hero--full.hero--copy-x-right:not(.hero--has-bg):not(.hero--no-copy)::before {
            background: linear-gradient(270deg, rgba(8, 30, 58, .55) 0%, rgba(8, 30, 58, .18) 48%, rgba(8, 30, 58, 0) 72%);
        }
        .hero--full.hero--copy-x-center:not(.hero--has-bg):not(.hero--no-copy)::before {
            background: linear-gradient(180deg, rgba(8, 30, 58, .12) 0%, rgba(8, 30, 58, .42) 50%, rgba(8, 30, 58, .12) 100%);
        }
        .hero-btns {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }
        .hero--copy-x-center .hero-btns { justify-content: center; }
        .hero--copy-x-right .hero-btns { justify-content: flex-end; }
        .hero-btn-outline,
        a.hero-btn-outline:visited {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: var(--koco-blue);
            border: 1px solid var(--koco-blue);
            border-radius: 999px;
            padding: 12px 28px;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            text-decoration: none;
            box-sizing: border-box;
        }
        .hero-btn-outline:hover,
        a.hero-btn-outline:hover,
        a.hero-btn-outline:visited:hover {
            background: var(--koco-blue);
            color: #fff;
        }
        .hero-visual {
            position: relative;
            height: 500px;
        }
        .hero-panels {
            position: absolute;
            right: -20px;
            top: 0;
            width: 78%;
            height: 100%;
            background: linear-gradient(160deg, #0d3d73 0%, #082a52 100%);
            clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
        }
        .hero--has-bg .hero-panels {
            background: none;
        }
        .hero-panel {
            position: absolute;
            left: 18%;
            right: 8%;
            overflow: hidden;
            background: rgba(255,255,255,0.08);
            clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
        }
        .hero-panel a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .hero-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .hero-panel--1 { top: 7%; height: 26%; }
        .hero-panel--2 { top: 37%; height: 26%; }
        .hero-panel--3 { top: 67%; height: 26%; }
        .hero-person {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            pointer-events: none;
        }
        .hero-person a {
            display: block;
            width: 100%;
            height: 100%;
            pointer-events: auto;
        }
        .hero-person img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            filter: drop-shadow(8px 12px 18px rgba(0,0,0,.18));
        }
        .hero-btn-primary {
            background-color: var(--koco-orange);
            color: var(--white);
            padding: 14px 32px;
            border-radius: 8px;
            border: 0;
            font-weight: 800;
            font-size: 15px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .hero-btn-primary:hover {
            background-color: var(--koco-orange-dark);
        }

        /* Quick Portal Cards */
        .quick-portal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .quick-card {
            background: var(--white);
            border-radius: 16px;
            padding: 28px 24px;
            border: 1px solid var(--border);
            box-shadow: var(--card-shadow);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .quick-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--koco-blue);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .quick-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--card-hover);
            border-color: #99c2ea;
        }
        .quick-card:hover::before {
            opacity: 1;
        }
        .quick-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .quick-icon-box {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            background: var(--koco-blue-light);
            color: var(--koco-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .quick-card:hover .quick-icon-box {
            background: var(--koco-blue);
            color: var(--white);
            transform: rotate(-5deg) scale(1.05);
        }
        .quick-sub-badge {
            font-size: 12px;
            font-weight: 700;
            color: var(--koco-orange);
            background: var(--koco-orange-light);
            padding: 4px 10px;
            border-radius: 20px;
        }
        .quick-card-title {
            font-size: 19px;
            font-weight: 800;
            color: #3f464c;
            margin-bottom: 6px;
            letter-spacing: -0.3px;
        }
        .quick-card-desc {
            font-size: 13.5px;
            color: var(--koco-gray);
            margin-bottom: 18px;
            line-height: 1.5;
        }
        .quick-card-action {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 700;
            color: var(--koco-blue);
            padding-top: 14px;
            border-top: 1px solid var(--koco-light-gray);
        }
        .quick-card-action i {
            transition: transform 0.2s ease;
        }
        .quick-card:hover .quick-card-action i {
            transform: translateX(4px);
        }
        .quick-card.dark-theme {
            background: linear-gradient(145deg, var(--koco-charcoal) 0%, var(--koco-charcoal-dark) 100%);
            border-color: #3b3e40;
            color: var(--white);
        }
        .quick-card.dark-theme::before {
            background: var(--koco-orange);
        }
        .quick-card.dark-theme .quick-icon-box {
            background: rgba(255, 255, 255, 0.12);
            color: var(--koco-orange);
        }
        .quick-card.dark-theme:hover .quick-icon-box {
            background: var(--koco-orange);
            color: var(--white);
        }
        .quick-card.dark-theme .quick-card-title { color: var(--white); }
        .quick-card.dark-theme .quick-card-desc { color: #b8bec2; }
        .quick-card.dark-theme .quick-sub-badge {
            background: rgba(238, 89, 31, 0.25);
            color: #ff9166;
        }
        .quick-card.dark-theme .quick-card-action {
            border-top-color: rgba(255, 255, 255, 0.1);
            color: #ff9166;
        }

        /* Section Global */
        .section {
            padding: 56px 0;
        }
        .section-header {
            text-align: left;
            margin-bottom: 24px;
        }
        .section-header.hero--copy-x-left { text-align: left; }
        .section-header.hero--copy-x-center { text-align: center; }
        .section-header.hero--copy-x-right { text-align: right; }
        .section-header.hero--copy-y-top { padding-bottom: 20px; }
        .section-header.hero--copy-y-middle { padding-top: 6px; padding-bottom: 6px; }
        .section-header.hero--copy-y-bottom { padding-top: 20px; }
        .section-nav-head__copy {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
        }
        .section-nav-head__copy.hero--copy-x-left { text-align: left; }
        .section-nav-head__copy.hero--copy-x-center { text-align: center; }
        .section-nav-head__copy.hero--copy-x-right { text-align: right; }
        .section-nav-head__copy.hero--copy-y-top { align-self: flex-start; padding-bottom: 8px; }
        .section-nav-head__copy.hero--copy-y-middle { align-self: center; }
        .section-nav-head__copy.hero--copy-y-bottom { align-self: flex-end; padding-top: 8px; }
        .section-cta-actions {
            text-align: center;
            margin: 0;
        }
        .section-header .sub-title {
            color: var(--koco-orange);
            font-weight: 800;
            font-size: var(--home-copy-fs, 14px);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            display: block;
        }
        .section-header h2 {
            font-size: var(--home-copy-fs, 26px);
            font-weight: 800;
            letter-spacing: -0.4px;
            color: var(--koco-blue);
        }

        /* Category Filter Tabs */
        .category-tab-wrap {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 45px;
        }
        .cat-tab {
            display: inline-flex;
            align-items: center;
            padding: 10px 22px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            color: var(--koco-charcoal);
            background: var(--white);
            border: 1px solid var(--border);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.25s ease;
        }
        .cat-tab:hover {
            background: var(--koco-blue-light);
            color: var(--koco-blue);
            border-color: #99c2ea;
        }
        .cat-tab.active {
            background: var(--koco-blue);
            color: var(--white);
            border-color: var(--koco-blue);
            box-shadow: 0 4px 14px rgba(0, 91, 172, 0.3);
        }
        #products .category-tab-wrap {
            display: grid;
            grid-template-columns: repeat(var(--product-tab-cols, 6), minmax(0, 1fr));
            gap: 0;
            margin-bottom: 36px;
            border-top: 1px solid var(--border);
            border-left: 1px solid var(--border);
            background: #fff;
        }
        #products .cat-tab {
            border: 0;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            border-radius: 0;
            background: #fff;
            box-shadow: none;
            padding: 14px 8px;
            font-size: 16px;
            font-weight: 700;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            justify-content: center;
            text-align: center;
        }
        #products .cat-tab:hover {
            background: #f7faff;
            color: var(--koco-blue);
            border-color: var(--border);
        }
        #products .cat-tab.active {
            background: #f4f8fc;
            color: var(--koco-blue);
            box-shadow: none;
        }

        /* Product Showcase Grid */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            align-items: stretch;
        }
        .product-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            position: relative;
        }
        .product-card__hit {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            color: inherit;
            text-decoration: none;
            min-width: 0;
            min-height: 0;
        }
        .product-card > .product-footer {
            padding: 8px 16px 12px;
            background: #fff;
            margin-top: 0;
        }
        a.inquire-btn {
            text-decoration: none;
            box-sizing: border-box;
        }
        #products .product-card {
            border-radius: 12px;
        }
        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--card-hover);
            border-color: #99c2ea;
        }
        .product-img-box {
            background: #f4f8fc;
            padding: 8px;
            text-align: center;
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--border);
            overflow: hidden;
        }
        .product-img-box img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        .product-card:hover .product-img-box img {
            transform: scale(1.05);
        }
        .brand-watermark {
            display: none;
        }
        .product-body {
            padding: 10px 16px 4px;
            display: flex;
            flex-direction: column;
            flex: 0 0 auto;
            background: #fff;
        }
        .product-tags {
            display: flex;
            flex-wrap: nowrap;
            gap: 6px;
            margin-bottom: 6px;
            overflow: hidden;
        }
        .badge {
            font-size: 11px;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: 6px;
        }
        .badge-color { background-color: var(--koco-orange-light); color: var(--koco-orange); }
        .badge-mono { background-color: #f0f2f4; color: var(--koco-charcoal); }
        .badge-spec { background-color: var(--koco-blue-light); color: var(--koco-blue); }
        .product-title {
            font-size: 17px;
            font-weight: 800;
            color: var(--koco-charcoal);
            margin: 0 0 2px;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-features {
            font-size: 13px;
            color: var(--koco-gray);
            margin: 0;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-features:empty {
            display: none;
        }
        .product-footer {
            margin-top: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-top: 8px;
            border-top: 1px dashed var(--border);
        }
        .product-price-label { font-size: 12px; color: var(--koco-gray); font-weight: 500; }
        .product-price { font-size: 22px; font-weight: 900; color: var(--koco-blue); line-height: 1; }
        .product-price small { font-size: 14px; font-weight: 700; color: var(--koco-charcoal); margin-right: 2px; }
        .inquire-btn {
            background: var(--koco-light-gray);
            color: var(--koco-charcoal);
            border: 1px solid var(--border);
            padding: 8px 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
        .product-card:hover .inquire-btn {
            background: var(--koco-orange);
            color: var(--white);
            border-color: var(--koco-orange);
        }

        /* 媛ㅻ윭由?& 吏곸젒 ?댁뒪 */
        .board-gallery-section {
            background: linear-gradient(180deg, var(--koco-light-gray) 0%, #ffffff 100%);
            border-top: 1px solid var(--border);
        }
        .board-gallery-section.section--has-bg {
            background-image: none;
        }
        .section-nav-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        .section-nav-head__actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .section-header__row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .section-header.hero--copy-x-center .section-header__row {
            justify-content: center;
        }
        .section-header.hero--copy-x-right .section-header__row {
            justify-content: flex-end;
        }
        .section-header__row h2 {
            margin: 0;
            min-width: 0;
        }
        .section-nav-head h3 {
            font-size: var(--home-copy-fs, 26px);
            font-weight: 800;
            color: var(--koco-blue);
            letter-spacing: -0.4px;
        }
        .section-nav-head p {
            font-size: var(--home-copy-fs, 14px);
            color: var(--koco-gray);
            margin-top: 4px;
        }
        .slider-controls {
            display: flex;
            gap: 8px;
        }
        .slider-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: var(--white);
            color: var(--koco-charcoal);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
            transition: all 0.2s;
        }
        .slider-btn:hover {
            background: var(--koco-blue);
            color: var(--white);
            border-color: var(--koco-blue);
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 0;
        }
        .gallery-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            transition: all 0.3s ease;
        }
        #gallery .gallery-card {
            border-radius: 0;
        }
        .gallery-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-hover);
            border-color: #99c2ea;
        }
        .gallery-thumb-wrap {
            position: relative;
            height: 180px;
            overflow: hidden;
            background: #e2e8f0;
        }
        .gallery-thumb-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }
        .gallery-card:hover .gallery-thumb-wrap img {
            transform: scale(1.08);
        }
        .gallery-card-body {
            padding: 18px 16px;
        }
        .gallery-type {
            display: inline-block;
            margin-bottom: 6px;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--koco-blue-light);
            font-size: 12px;
            font-weight: 700;
            color: var(--koco-blue);
            letter-spacing: -0.02em;
        }
        .gallery-title {
            font-size: 15px;
            font-weight: 800;
            color: #3f464c;
            margin-bottom: 4px;
            line-height: 1.4;
        }
        .gallery-desc {
            font-size: 13px;
            color: var(--koco-blue);
            font-weight: 700;
        }
        .news-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .news-item-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 24px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.02);
            transition: all 0.25s ease;
            text-decoration: none;
        }
        #news .news-item-card {
            border-radius: 0;
        }
        .news-item-card:hover {
            transform: translateX(6px);
            border-color: var(--koco-blue);
            box-shadow: 0 8px 20px rgba(0, 91, 172, 0.08);
        }
        .news-thumb {
            width: 130px;
            height: 90px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
            background: #f1f3f5;
        }
        #news .news-thumb {
            border-radius: 0;
        }
        .news-content {
            flex-grow: 1;
        }
        .news-headline {
            font-size: 17px;
            font-weight: 800;
            color: #3f464c;
            margin-bottom: 8px;
            line-height: 1.35;
        }
        .news-summary {
            font-size: 13.5px;
            color: var(--koco-gray);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ?곗륫 ?뚮줈????硫붾돱 */
        .floating-quick-bar {
            position: fixed;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 36px;
            padding: 14px 8px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }
        .floating-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            width: 62px;
            padding: 8px 0;
            border-radius: 18px;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            color: var(--koco-charcoal);
            cursor: pointer;
            border: none;
            background: transparent;
        }
        .floating-icon-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--koco-light-gray);
            color: var(--koco-charcoal);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.25s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.04);
        }
        .floating-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: -0.3px;
            color: var(--koco-gray);
            transition: color 0.2s ease;
        }
        .floating-item.item-top .floating-icon-circle {
            background: var(--koco-charcoal-dark);
            color: #ffffff;
        }
        .floating-item.item-inquiry .floating-icon-circle {
            background: var(--koco-blue);
            color: #ffffff;
        }
        .floating-item.item-inquiry .floating-label {
            color: var(--koco-blue);
        }
        .floating-item.item-channel .floating-icon-circle {
            background: #fae100;
            color: #371d1e;
        }
        .floating-item.item-channel .floating-label {
            color: #3c1e1e;
        }
        .floating-item.item-call .floating-icon-circle {
            background: var(--koco-orange);
            color: var(--white);
        }
        .floating-item.item-call .floating-label {
            color: var(--koco-orange);
        }
        .floating-item:hover {
            transform: translateY(-4px);
        }
        .floating-item:hover .floating-label {
            color: var(--koco-charcoal-dark);
            font-weight: 800;
        }
        .floating-item:hover .floating-icon-circle {
            transform: scale(1.08);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
        }
        .floating-item.item-top:hover .floating-icon-circle {
            background: var(--koco-charcoal-dark);
            color: #ffffff;
        }
        .floating-item.item-inquiry:hover .floating-icon-circle {
            background: var(--koco-blue);
            color: #ffffff;
        }
        .floating-item.item-channel:hover .floating-icon-circle {
            background: #fae100;
            color: #371d1e;
        }
        .floating-item.item-call:hover .floating-icon-circle {
            background: var(--koco-orange);
            color: var(--white);
        }

        .left-quick-bar {
            position: fixed;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 998;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 4px;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        .left-quick-banner {
            display: block;
            width: var(--lq-w, 250px);
            height: auto;
            overflow: hidden;
            border-radius: 10px;
            background: #fff;
            box-shadow: 6px 10px 28px rgba(20, 54, 93, 0.14);
            flex-shrink: 0;
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.28s ease;
        }
        .left-quick-banner:hover {
            transform: translateY(-4px);
            box-shadow: 8px 16px 32px rgba(20, 54, 93, 0.22);
        }
        .left-quick-banner img {
            width: 100%;
            height: auto;
            display: block;
            vertical-align: top;
        }

        /* ============================================================
           [?좉퇋 異붽?] ?⑤씪???뚰깉臾몄쓽 ?앹뾽 紐⑤떖李??ㅽ???
        ============================================================ */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(6px);
            z-index: 100000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.active {
            display: flex;
            opacity: 1;
        }
        .modal-container {
            background: var(--white);
            border-radius: 20px;
            width: 100%;
            max-width: 680px;
            max-height: 90vh;
            max-height: 90dvh;
            overflow-y: auto;
            padding: 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            position: relative;
            transform: scale(0.95);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-overlay.active .modal-container {
            transform: scale(1);
        }
        .modal-close-btn {
            position: absolute;
            top: 24px;
            right: 24px;
            background: #f1f3f5;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--koco-charcoal);
            transition: all 0.2s ease;
        }
        .modal-close-btn:hover {
            background: #e2e8f0;
            color: #000;
            transform: rotate(90deg);
        }
        .modal-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .modal-header h2 {
            font-size: 28px;
            font-weight: 900;
            color: #1b6338;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
        }
        .modal-header p {
            font-size: 15px;
            color: var(--koco-gray);
            font-weight: 500;
        }

        /* ???붿냼 洹몃━??*/
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .form-group.full-width {
            grid-column: span 2;
        }
        .form-label {
            font-size: 14px;
            font-weight: 700;
            color: #1e293b;
        }
        .form-label .required {
            color: #e11d48;
            margin-left: 2px;
        }
        .form-input, .form-textarea {
            width: 100%;
            padding: 13px 16px;
            border-radius: 10px;
            border: 1px solid #cbd5e1;
            background-color: #f8fafc;
            font-size: 14px;
            color: var(--koco-charcoal);
            transition: all 0.2s ease;
            outline: none;
        }
        .form-input:focus, .form-textarea:focus {
            background-color: #ffffff;
            border-color: #1b6338;
            box-shadow: 0 0 0 4px rgba(27, 99, 56, 0.12);
        }
        .form-textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.5;
        }
        .inq-hp {
            position: absolute;
            left: -10000px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        .inq-spam {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .inq-spam__q {
            flex: none;
            font-size: 16px;
            font-weight: 800;
            color: #1e293b;
            letter-spacing: 0.02em;
        }
        .inq-spam .form-input {
            max-width: 120px;
        }
        body.inq-open .floating-quick-bar,
        body.inq-open .left-quick-bar {
            visibility: hidden;
            pointer-events: none;
        }
        .inq-modal-foot {
            margin-top: 4px;
        }
        .inq-privacy {
            margin: 4px 0 0;
        }
        .inq-privacy__row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .inq-privacy__check {
            display: inline-flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
            cursor: pointer;
        }
        .inq-privacy__check input {
            margin: 3px 0 0;
            width: 16px;
            height: 16px;
            flex: none;
            accent-color: #1b6338;
        }
        .inq-privacy__toggle {
            flex: none;
            background: none;
            border: none;
            padding: 0;
            font-size: 13px;
            font-weight: 700;
            color: #1b6338;
            text-decoration: underline;
            cursor: pointer;
        }
        .inq-privacy__panel {
            margin-top: 10px;
            max-height: 160px;
            overflow-y: auto;
            padding: 12px 14px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
            font-size: 12px;
            line-height: 1.55;
            color: #475569;
        }
        .inq-privacy__panel h3 {
            margin: 12px 0 6px;
            font-size: 13px;
            font-weight: 800;
            color: #1e293b;
        }
        .inq-privacy__panel h3:first-child {
            margin-top: 0;
        }
        .inq-privacy__more {
            margin: 12px 0 0;
        }
        .inq-privacy__more a {
            color: #1b6338;
            font-weight: 700;
        }
        .form-submit-btn {
            width: 100%;
            background-color: #1b6338;
            color: var(--white);
            border: none;
            padding: 16px;
            border-radius: 12px;
            font-size: 17px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(27, 99, 56, 0.25);
            margin-top: 10px;
        }
        .form-submit-btn:hover {
            background-color: #144e2b;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(27, 99, 56, 0.35);
        }
        .inq-result-overlay {
            align-items: center;
            z-index: 100001;
        }
        .inq-result-box {
            width: 100%;
            max-width: 420px;
            padding: 32px 24px 24px;
            border-radius: 20px;
            background: #fff;
            text-align: center;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        .inq-result-box h2 {
            margin: 0 0 10px;
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #1b6338;
        }
        .inq-result-box.is-err h2 {
            color: #b42318;
        }
        .inq-result-box p {
            margin: 0 0 22px;
            font-size: 16px;
            line-height: 1.7;
            color: #4a5360;
            word-break: keep-all;
        }
        .inq-result-box .form-submit-btn {
            margin-top: 0;
        }

        /* Footer */
        footer {
            background: var(--koco-charcoal-dark);
            color: #a1a7aa;
            padding: 56px 0;
            font-size: 14px;
            border-top: 4px solid var(--koco-blue);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-brand h3 {
            color: var(--white);
            font-size: 20px;
            margin-bottom: 15px;
            font-weight: 800;
        }
        .footer-brand p {
            line-height: 1.8;
        }
        .footer-bottom {
            border-top: 1px solid #36393b;
            padding-top: 25px;
            text-align: center;
            font-size: 13px;
        }
        .footer-bottom a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .footer-logo {
            display: block;
            margin-bottom: 15px;
        }
        .footer-col-title {
            color: #fff;
            margin: 0 0 12px;
            font-size: 15px;
            font-weight: 700;
        }
        .footer-phone {
            color: #fff;
        }
        .footer-cs {
            font-size: 13px;
            line-height: 2;
        }
        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-links li + li {
            margin-top: 8px;
        }
        .footer-links a {
            color: inherit;
            text-decoration: none;
        }
        .footer-links a:hover {
            color: #fff;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .footer-grid--1 { grid-template-columns: 1fr; }
        .footer-grid--2 { grid-template-columns: 2fr 1fr; }
        .footer-grid--3 { grid-template-columns: 2fr 1fr 1fr; }
        .footer-grid--4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
        .footer-partners {
            display: flex;
            flex-wrap: wrap;
            gap: 16px 28px;
            margin: 0 0 28px;
        }
        .footer-partner {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 13px;
        }
        .footer-partner a {
            color: inherit;
            text-decoration: none;
        }
        .footer-partner a:hover {
            color: #fff;
            text-decoration: underline;
        }
        .footer-badges {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 16px;
            margin: 0 0 24px;
        }
        .footer-badges img {
            display: block;
            height: 40px;
            width: auto;
        }
        .footer-badges a {
            color: inherit;
        }
        .footer-daily-visitors {
            margin: 10px 0 0;
            font-size: 13px;
        }
        .footer-daily-visitors-count {
            color: #fff;
            margin-left: 6px;
        }
        .site-footer.site-footer--light-bg {
            color: #4a4d4e;
            border-top-color: #c5ccd3;
        }
        .site-footer.site-footer--light-bg .footer-col-title,
        .site-footer.site-footer--light-bg .footer-phone,
        .site-footer.site-footer--light-bg .footer-daily-visitors-count {
            color: #232628;
        }
        .site-footer.site-footer--light-bg .footer-bottom {
            border-top-color: #e1e6eb;
        }
        .site-footer.site-footer--light-bg .footer-links a:hover,
        .site-footer.site-footer--light-bg .footer-partner a:hover {
            color: #005bac;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .container {
                padding-left: 16px;
                padding-right: 16px;
            }
            .header-nav {
                padding-left: 16px;
                padding-right: 16px;
                box-sizing: border-box;
            }
            .quick-portal-grid { grid-template-columns: repeat(2, 1fr); }
            .product-grid,
            .gallery-grid,
            .gallery-grid--view {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            .hero-inner { grid-template-columns: 1fr; min-height: 0; }
            .hero-visual { height: 320px; }
            .hero-copy { padding: 24px 0 16px; }
            .hero-person {
                max-width: min(42vw, 200px);
                max-height: 260px;
            }
        }
        @media (max-width: 1280px) {
            #products .cat-tab {
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
                word-break: keep-all;
                overflow-wrap: anywhere;
                line-height: 1.25;
                justify-content: center;
                text-align: center;
                min-height: calc(1.25em * 2 + 28px);
            }
            .floating-quick-bar {
                top: auto;
                right: 0;
                left: 0;
                bottom: 0;
                transform: none;
                width: 100%;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                gap: 0;
                border-radius: 16px 16px 0 0;
                padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
                box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
            }
            .left-quick-bar { display: none; }
            .floating-item {
                width: auto;
                flex: 1;
                padding: 4px 0;
            }
            .floating-item:hover { transform: none; }
            .floating-item:hover .floating-icon-circle {
                transform: none;
                box-shadow: 0 2px 5px rgba(0,0,0,0.04);
            }
            .floating-icon-circle {
                width: 38px;
                height: 38px;
                margin-bottom: 2px;
            }
            body {
                padding-bottom: 88px;
            }
        }
        @media (max-width: 768px) {
            :root {
                --site-header-h: 56px;
            }
            .site-header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                width: 100%;
                z-index: 2000;
                overflow: visible;
                background: #fff;
            }
            .site-header > .container {
                padding-left: 0;
                padding-right: 0;
            }
            .header-top {
                position: relative;
                z-index: 2001;
                min-height: 56px;
                padding: 6px 16px;
                margin: 0;
                gap: 8px;
                background: #fff;
            }
            body.nav-open .header-top {
                border-bottom: 1px solid color-mix(in srgb, var(--koco-blue) 22%, #e6eaee);
                box-shadow: 0 8px 16px -12px rgba(0, 91, 172, 0.28);
            }
            .header-logo-img { height: 48px; }
            .header-cta-pill,
            .header-icon-desktop,
            .header-phone-box,
            .hero-btn-find { display: none; }
            .nav-toggle,
            .header-icons .header-icon-phone { display: inline-flex; }
            .nav-drawer-head { display: none; }
            .nav-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                top: 0;
                background: rgba(15, 23, 42, 0.4);
                z-index: 1990;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.2s ease, visibility 0.2s ease;
            }
            body.nav-open .nav-backdrop {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }
            .header-nav {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                width: 100%;
                max-width: none;
                margin-left: 0;
                margin-right: 0;
                height: auto;
                max-height: min(70vh, calc(100dvh - 56px));
                background: var(--koco-blue-light);
                z-index: 2000;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
                transform: none;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                border-top: 3px solid var(--koco-blue);
                border-bottom: 1px solid color-mix(in srgb, var(--koco-blue) 16%, #d5dde5);
                box-shadow: 0 18px 32px rgba(18, 41, 69, 0.16);
            }
            body.nav-open .header-nav { display: flex; }
            .nav-links {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 4px 8px 8px;
            }
            .nav-item { width: 100%; padding-bottom: 0; border-bottom: 1px solid color-mix(in srgb, var(--koco-blue) 12%, transparent); }
            .nav-item-row {
                position: relative;
                display: flex;
                align-items: center;
            }
            .nav-item-row .nav-parent-link::after,
            .nav-item.has-sub .nav-item-row > a::after {
                content: none;
                display: none;
            }
            .nav-links a {
                font-size: 16px;
                padding: 14px 20px;
                display: block;
            }
            .nav-item-row > a { flex: 1; padding-right: 8px; }
            .nav-sub-toggle {
                display: inline-flex;
                width: 48px;
                min-width: 48px;
                height: 48px;
                flex: 0 0 48px;
                color: #4a4d4e;
            }
            .nav-item.has-sub.is-open .nav-sub-toggle { transform: rotate(180deg); }
            .nav-item.has-sub:hover > .nav-sub,
            .nav-item.has-sub:focus-within > .nav-sub {
                display: none;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }
            .nav-sub {
                position: static;
                transform: none;
                left: auto;
                top: auto;
                min-width: 0;
                display: none;
                border: 0;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(18, 41, 69, 0.06);
                background: #fff;
                margin: 0 8px 10px;
                padding: 6px;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transition: none;
            }
            .nav-sub::before,
            .nav-sub::after { content: none; }
            .nav-item.has-sub.is-open > .nav-sub {
                display: block;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: none;
            }
            .nav-links .nav-sub a {
                font-size: 15px;
                font-weight: 600;
                padding: 11px 20px 11px 28px;
                border-radius: 8px;
                color: #3d4650;
            }
            .nav-links .nav-sub a:hover,
            .nav-links .nav-sub a:focus-visible {
                background: color-mix(in srgb, var(--koco-blue) 18%, #fff);
            }
            .nav-links .nav-sub .nav-sub-l3 a {
                padding-left: 40px;
                font-size: 14px;
            }
            .nav-drawer-foot {
                display: flex;
                flex-direction: row;
                align-items: stretch;
                justify-content: space-between;
                gap: 6px;
                margin-top: auto;
                padding: 10px 12px 8px;
                border-top: 1px solid color-mix(in srgb, var(--koco-blue) 14%, #d5dde5);
            }
            .nav-drawer-foot a {
                display: flex;
                flex: 1;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                min-width: 0;
                padding: 8px 4px;
                font-size: 11px;
                font-weight: 700;
                color: #334155;
                border-radius: 10px;
                background: #fff;
                text-align: center;
            }
            .nav-drawer-foot-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: var(--koco-blue-light);
                color: var(--koco-blue);
            }
            .nav-drawer-foot-icon i,
            .nav-drawer-foot-icon svg {
                width: 18px;
                height: 18px;
            }
            .sub-visual__img { height: var(--sub-visual-h-m, 112px); }
            .sub-visual--html { padding: 14px 0; }
            .sub-visual--band { min-height: 40px; }
            .sub-visual--sized.sub-visual--band {
                min-height: var(--sub-visual-h-m);
                height: var(--sub-visual-h-m);
            }
            .sub-visual--sized.sub-visual--html {
                min-height: var(--sub-visual-h-m);
                padding: 0;
            }
            .sub-nav__link {
                padding: 12px 14px;
                font-size: 14px;
            }
            .section { padding: 32px 0; }
            .section.section--html { padding-top: 0; padding-bottom: 0; }
            footer { padding: 32px 0; }
            .section-header { margin-bottom: 16px; }
            .section-header h2 { font-size: min(18px, var(--home-copy-fs, 26px)); }
            .section-header .sub-title { font-size: min(12px, var(--home-copy-fs, 14px)); margin-bottom: 4px; }
            .section-nav-head { margin-bottom: 16px; align-items: flex-start; flex-wrap: wrap; }
            .section-nav-head h3 { font-size: min(18px, var(--home-copy-fs, 26px)); }
            .section-nav-head p { font-size: min(13px, var(--home-copy-fs, 14px)); }
            .hero { padding: 12px 0 0; }
            .hero-copy h1 { font-size: min(26px, var(--home-copy-fs, 26px)); letter-spacing: -0.5px; }
            .hero-copy p { font-size: min(14px, var(--home-copy-fs, 16px)); }
            .hero-copy { padding: 16px 0 24px; }
            .hero-visual { height: 220px; }
            .hero--full,
            .hero--full .hero-inner {
                min-height: min(48vw, 220px);
            }
            .hero-full-dots {
                left: 12px;
                top: 12px;
            }
            .hero .hero-btn-find {
                display: inline-flex;
            }
            .hero--full > .hero-photo-actions:not(.hero-photo-actions--bgm-only) {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: auto;
                max-width: none;
                transform: none;
                align-items: flex-end;
                justify-content: center;
                gap: 8px;
                padding: 0 10px 12px;
                box-sizing: border-box;
                pointer-events: none;
            }
            .hero--full > .hero-photo-actions:not(.hero-photo-actions--bgm-only) > * {
                pointer-events: auto;
            }
            .hero--full .hero-photo-actions .hero-btn-outline--photo {
                padding: 8px 14px;
                font-size: 13px;
                line-height: 1.2;
            }
            .hero--full .hero-photo-actions .hero-full-arrow {
                position: absolute;
                top: 50%;
                bottom: auto;
                width: 36px;
                height: 36px;
                transform: translateY(-50%);
            }
            .hero--full .hero-photo-actions .hero-full-arrow--prev {
                left: 8px;
                right: auto;
            }
            .hero--full .hero-photo-actions .hero-full-arrow--next {
                right: 8px;
                left: auto;
            }
            .quick-portal-grid,
            .product-grid,
            .gallery-grid,
            .gallery-grid--view {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            .board-gallery-section .section-nav-head p,
            .board-gallery-section .gallery-desc,
            .board-gallery-section .news-summary { display: none; }
            .news-item-card { flex-direction: column; align-items: flex-start; gap: 14px; }
            .news-thumb { width: 100%; height: 160px; }
            .footer-grid { grid-template-columns: 1fr; }
            .category-tab-wrap { justify-content: flex-start; overflow-x: auto; padding-bottom: 10px; }
            .cat-tab { white-space: nowrap; }
            #products .sub-title { display: none; }
            #products .category-tab-wrap {
                display: grid;
                grid-template-columns: repeat(var(--product-tab-cols-m, 5), minmax(0, 1fr));
                gap: 0;
                justify-content: stretch;
                overflow: visible;
                width: 100%;
                max-width: none;
                margin-left: 0;
                margin-right: 0;
                margin-bottom: 20px;
                padding: 0;
                border-top: 1px solid var(--border);
                border-left: 1px solid var(--border);
                background: #fff;
            }
            #products .cat-tab {
                border: 0;
                border-right: 1px solid var(--border);
                border-bottom: 1px solid var(--border);
                border-radius: 0;
                background: #fff;
                box-shadow: none;
                padding: 15px 4px;
                font-size: 15px;
                font-weight: 700;
                min-width: 0;
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
                word-break: keep-all;
                overflow-wrap: anywhere;
                line-height: 1.25;
                justify-content: center;
                text-align: center;
                min-height: calc(1.25em * 2 + 30px);
            }
            #products .cat-tab:hover {
                background: #f7faff;
                color: var(--koco-blue);
                border-color: var(--border);
            }
            #products .cat-tab.active {
                background: #f4f8fc;
                color: var(--koco-blue);
                box-shadow: none;
            }
            .form-grid { grid-template-columns: 1fr; }
            .form-group.full-width { grid-column: span 1; }
            .inq-privacy__row { align-items: flex-start; }
            .modal-overlay {
                align-items: flex-end;
                padding: 0;
                height: 100vh;
                height: 100dvh;
            }
            .modal-container {
                display: flex;
                flex-direction: column;
                padding: 20px 20px 0;
                max-width: 100%;
                border-radius: 20px 20px 0 0;
                max-height: 88vh;
                max-height: 88dvh;
                overflow: hidden;
            }
            .modal-container form {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
            }
            .modal-container .form-grid {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                margin-bottom: 0;
                padding-bottom: 8px;
                -webkit-overflow-scrolling: touch;
            }
            .modal-container .form-textarea {
                min-height: 88px;
            }
            .inq-modal-foot {
                flex: 0 0 auto;
                margin: 0 -20px;
                padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
                border-top: 1px solid #e8eef3;
                background: #fff;
            }
            .inq-privacy {
                margin: 0;
            }
            .modal-overlay.inq-result-overlay {
                align-items: center;
                padding: 20px;
            }
            .inq-result-box {
                max-width: 100%;
                border-radius: 20px;
                padding: 28px 20px 20px;
            }
            .inq-result-box h2 {
                font-size: 20px;
            }
            .inq-result-box p {
                font-size: 15px;
            }
        }

.sec-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 12px;
  min-height: 34px;
  border-radius: 8px;
  background: var(--koco-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(238, 89, 31, 0.38);
}
.sec-edit:hover {
  background: var(--koco-orange-dark);
  color: #fff;
}
.quick-card.is-active {
  border-color: #99c2ea;
  box-shadow: var(--card-hover);
  transform: none;
}
.quick-card.is-active::before { opacity: 1; }
.quick-card.dark-theme.is-active { border-color: #5a5d60; }
.branch-type-grid {
  margin-bottom: 0;
  gap: 12px;
}
.section--branches { padding: 56px 0; }
#branches { scroll-margin-top: 12px; }
#products { scroll-margin-top: 12px; padding-top: 24px; }
#products .section-header {
  margin-bottom: 24px;
  padding-top: 0;
  padding-bottom: 0;
}
.section--branches .section-header p { margin-top: 6px; color: var(--koco-gray); font-size: var(--home-copy-fs, 14px); }
.branch-type-grid .quick-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 12px;
  min-height: 0;
}
.branch-type-grid .quick-card:hover {
  transform: none;
}
.branch-type-grid .quick-card:hover .quick-icon-box {
  transform: none;
}
.branch-type-grid .quick-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}
.branch-type-grid .quick-card-text {
  flex: 1;
  min-width: 0;
}
.branch-type-grid .quick-card-title {
  font-size: 17px;
  margin: 0;
  line-height: 1.3;
}
.branch-type-grid .quick-card-desc {
  font-size: 13.5px;
  margin: 4px 0 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-type-grid .quick-card-action {
  border: 0;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.branch-type-grid .quick-card-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.branch-type-grid .quick-card.is-active .quick-card-action i {
  transform: rotate(180deg);
}
@media (max-width: 768px) {
  .section--branches {
    padding: 32px 0;
    border-bottom: 1px solid #b7cfe3;
  }
  .section--branches:not(.section--has-bg) {
    background: #dceef8;
  }
  #branches { scroll-margin-top: 8px; }
  #products { scroll-margin-top: 8px; }
  .branch-type-grid {
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
  }
  .branch-type-grid .quick-card-desc,
  .branch-type-grid .quick-card-action { display: none; }
  .branch-type-grid .quick-card,
  .branch-type-grid .quick-card.dark-theme {
    padding: 14px 12px;
    gap: 10px;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: none;
    background: #fff;
    color: #232628;
  }
  .branch-type-grid .quick-icon-box,
  .branch-type-grid .quick-card.dark-theme .quick-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--koco-blue-light);
    color: var(--koco-blue);
  }
  .branch-type-grid .quick-icon-box i,
  .branch-type-grid .quick-icon-box svg {
    width: 20px;
    height: 20px;
  }
  .branch-type-grid .quick-card:hover,
  .branch-type-grid .quick-card.dark-theme:hover {
    background: #fff;
    border-color: #99c2ea;
  }
  .branch-type-grid .quick-card.is-active,
  .branch-type-grid .quick-card.dark-theme.is-active {
    background: #fff;
    box-shadow: none;
    border-color: var(--koco-blue);
  }
  .branch-type-grid .quick-card::before { display: none; }
  .branch-type-grid .quick-card-text {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .branch-type-grid .quick-card-title,
  .branch-type-grid .quick-card.dark-theme .quick-card-title {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    text-align: left;
    color: #232628;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .section--branches .branch-reveal.is-open {
    margin: 12px 0 16px;
  }
  .section--branches .branch-panel {
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }
  #products {
    border-top: 1px solid var(--border);
    padding: 16px 0 32px;
  }
  #products .section-header {
    margin-bottom: 16px;
    padding-top: 0;
    padding-bottom: 0;
  }
  #products .product-grid {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 8px;
    padding: 0;
    grid-template-columns: 1fr 1fr;
  }
  #products .product-card {
    box-shadow: none;
  }
  #products .product-img-box {
    min-height: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 4px;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid var(--border);
    background: #f4f8fc;
  }
  #products .product-img-box img {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    max-width: none;
    max-height: none;
    object-fit: contain;
    margin: auto;
  }
  #products .brand-watermark { display: none; }
  #products .product-body { padding: 6px 10px 2px; background: #fff; }
  #products .product-card > .product-footer { padding: 8px 10px 10px; background: #fff; }
  #products .product-tags { margin-bottom: 6px; }
  #products .badge { font-size: 10px; padding: 2px 6px; }
  #products .product-title {
    font-size: 13px;
    margin-bottom: 2px;
    line-height: 1.35;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    min-height: 0;
  }
  #products .product-features { display: none; }
  #products .product-footer { padding-top: 6px; }
  #products .product-price-label { font-size: 11px; }
  #products .product-price { font-size: 15px; }
  #products .product-price small { font-size: 12px; }
  #products .inquire-btn { font-size: 11px; padding: 6px 10px; }
  #gallery .gallery-grid {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 8px;
    padding: 0;
    grid-template-columns: 1fr 1fr;
  }
  #gallery .gallery-card {
    box-shadow: none;
  }
  #news .news-list {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  #news .news-item-card {
    box-shadow: none;
    border-radius: 0;
  }
}
.branch-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.branch-reveal.is-open {
  grid-template-rows: 1fr;
  margin-top: 20px;
}
.branch-reveal-inner {
  overflow: hidden;
  min-height: 0;
}
.branch-map-block { position:relative; margin-bottom:16px; }
.branch-map-wrap { position:relative; z-index:0; height:600px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#e8eef4; }
.branch-map-wrap iframe, .branch-map-canvas { position:relative; z-index:0; width:100%; height:100%; min-height:600px; border:0; }
@media (max-width: 768px) {
  .branch-map-wrap { height: 280px; }
  .branch-map-wrap iframe, .branch-map-canvas { min-height: 280px; }
}
.branch-map-collapse {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  margin: -22px auto 0;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(26, 35, 50, 0.78);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(18, 41, 69, 0.2);
  appearance: none;
  -webkit-appearance: none;
}
.branch-map-collapse:hover {
  background: rgba(26, 35, 50, 0.92);
}
.branch-map-collapse:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.branch-map-fallback { padding:24px; text-align:center; color:#667; }
.branch-map-wrap .leaflet-control-zoom {
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(18, 41, 69, 0.18);
}
.branch-map-wrap .leaflet-control-zoom a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  color: #1a2332;
}
.branch-iw { padding:8px 10px; min-width:180px; max-width:280px; font-size:13px; line-height:1.55; }
.branch-iw strong { display:block; margin-bottom:4px; color:#1a2332; }
.branch-iw p { margin:0; color:#444; }
.branch-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 41, 69, 0.04);
}
.branch-search {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: #f4f7fb;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.branch-search-label {
  font-size: 13px;
  font-weight: 800;
  color: #1a2332;
  margin-right: 4px;
  white-space: nowrap;
}
.branch-search input,
.branch-search select {
  padding: 9px 12px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #1a2332;
  min-height: 40px;
}
.branch-search input { flex: 1; min-width: 180px; }
.branch-search button {
  background: var(--koco-blue);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  min-height: 40px;
  cursor: pointer;
  margin-left: auto;
}
.branch-search button:hover { background: var(--koco-blue-dark); }
.branch-empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--koco-gray); font-size: 14px; }
.branch-table-wrap { overflow-x: auto; }
.branch-pagination {
  margin: 0;
  padding: 16px 12px 18px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.branch-pagination[hidden] {
  display: none;
}
.branch-pagination .section-pagination-meta {
  font-size: 13px;
}
.branch-pagination .pagination-btn {
  min-width: 64px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}
.branch-pagination .pagination-btn--edge {
  min-width: 44px;
}
.branch-pagination .pagination-num {
  min-width: 36px;
  min-height: 36px;
}
button.pagination-btn,
button.pagination-num {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.pagination-btn:hover,
button.pagination-num:hover {
  color: #fff;
  background: var(--koco-blue);
  border-color: var(--koco-blue);
}
.branch-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
  table-layout: fixed;
}
.branch-table th {
  background: #1b3a5a;
  color: #fff;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4em;
  white-space: nowrap;
  text-align: left;
}
.branch-table td {
  padding: 14px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
  color: #334155;
}
.branch-table tbody tr:last-child td { border-bottom: 0; }
.branch-table tbody tr:hover { background: #f7faff; }
.branch-table .is-name { width: 26%; }
.branch-table .is-trade { width: 22%; }
.branch-table .is-addr { width: 10%; text-align: center; }
.branch-table .is-phone { width: 18%; }
.branch-table .is-home { width: 24%; }
.branch-table th.is-addr,
.branch-table th.is-phone,
.branch-table th.is-home { text-align: center; }
.branch-table td.is-phone,
.branch-table td.is-home { text-align: center; }
.branch-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #4a5360;
  letter-spacing: -0.03em;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.branch-region {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #8a94a3;
}
.branch-trade {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #5b6573;
  line-height: 1.4;
}
.branch-phone {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1a2332;
  white-space: nowrap;
}
.branch-phone:hover { color: var(--koco-blue); }
.branch-home-link {
  display: inline-block;
  max-width: 100%;
  color: var(--koco-orange);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.branch-home-link:hover { text-decoration: underline; }
.branch-home-link .branch-home-icon { display: none; }
.branch-dash { color: #c5ccd6; }
.branch-addr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--koco-blue);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 91, 172, 0.22);
}
.branch-addr-btn:hover { background: var(--koco-blue-dark); }
.branch-addr-btn i, .branch-addr-btn svg { width: 16px; height: 16px; }
.article-page { padding:40px 20px 80px; max-width:800px; }
.article-page.article-page--wide { max-width: 1260px; }
.legal-page .legal-body {
  margin-top: 8px;
  line-height: 1.8;
  color: var(--ink);
  word-break: keep-all;
}
.legal-page .legal-sub {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.legal-page .legal-sub h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.article-page .breadcrumb {
  font-size: 13px;
  color: var(--koco-gray);
  margin-bottom: 18px;
}
.article-list-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  border: 1px solid #d7e4f2;
  border-radius: 999px;
  background: #fff;
  color: #4a4d4e;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 14px 8px 12px;
  box-shadow: 0 2px 8px rgba(20, 54, 93, 0.05);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.article-list-back:hover {
  border-color: var(--koco-blue);
  color: var(--koco-blue);
  background: #f3f8fd;
}
.article-list-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.article-list-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.article-list-actions .article-list-back {
  margin-bottom: 0;
}
.article-page .article-head h1 {
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--koco-charcoal);
  letter-spacing: -0.03em;
}
.article-page .subtitle {
  margin: 0 0 14px;
  color: var(--koco-gray);
  font-size: calc(1.05rem + 1pt);
  font-weight: 500;
  line-height: 1.5;
}
.article-page .byline {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--koco-gray);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.article-share {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.article-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.article-share-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.article-share-admin {
  flex: 0 0 auto;
  margin-left: auto;
}
.article-page .public-admin-edit {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 14px;
  min-height: 38px;
  border-radius: 8px;
  background: var(--koco-blue);
  color: #fff;
  text-decoration: none;
}
.article-page .public-admin-edit:hover {
  background: var(--koco-blue-dark);
  color: #fff;
}
.article-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.article-share-btn--kakao {
  gap: 8px;
  padding: 8px 12px;
  background: #fee500;
  color: #191919;
}
.article-share-btn__glyph { display: block; flex-shrink: 0; }
.article-share-btn--band { background: #06cf00; }
.article-share-btn--copy {
  background: #fff;
  color: var(--koco-charcoal);
  border: 1px solid var(--border);
  box-shadow: none;
}
.article-hero {
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
  max-width: 100%;
  width: 100%;
}
.article-hero--align-left {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.article-hero--align-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.article-hero--align-right {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.article-hero img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  object-fit: cover;
  vertical-align: top;
}
.article-hero figcaption {
  font-size: 13px;
  color: var(--koco-gray);
  margin-top: 10px;
}
.article-hero--align-left figcaption {
  text-align: left;
}
.article-hero--align-center figcaption {
  text-align: center;
}
.article-hero--align-right figcaption {
  text-align: right;
}
.article-body {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: #4A4D4E;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  letter-spacing: normal;
  white-space: normal;
  padding-top: 1.7em;
  padding-bottom: 1.7em;
}
.article-body-shell {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
.article-body :first-child { margin-top: 0; }
.article-body :last-child { margin-bottom: 0; }
.article-body > p:first-child { margin-top: 0 !important; }
.article-body > p:last-child { margin-bottom: 0 !important; }
.article-body p,
.article-body .se-text-paragraph,
.article-body .se-component.se-text,
.article-body .se-module-text {
  margin: 0 !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: keep-all;
  line-height: 1.7 !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  white-space-collapse: collapse;
}
.article-body p.article-body-spacer,
.article-body div.article-body-spacer,
.article-body p:empty {
  display: block !important;
  min-height: 1.7em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.7 !important;
  white-space: pre-wrap !important;
  white-space-collapse: preserve !important;
}
.article-body p:has(> br:only-child) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.article-body p.article-body-spacer:has(+ .article-image-duo),
.article-body p:empty:has(+ .article-image-duo),
.article-body p:has(> br:only-child):has(+ .article-image-duo) {
  height: auto;
  min-height: 1.7em;
  line-height: 1.7 !important;
}
.article-body [style*="text-align:justify"],
.article-body [style*="text-align: justify"] {
  text-align: left !important;
}
.article-body h2,
.article-body h3,
.article-body h4 {
  margin: 1.35em 0 0.55em;
  line-height: 1.35;
  font-weight: 800;
  color: var(--koco-charcoal);
}
.article-body ul,
.article-body ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}
.article-body blockquote {
  margin: 1em 0;
  padding: 12px 18px;
  border-left: 4px solid var(--koco-blue);
  background: var(--koco-light-gray);
  color: var(--koco-charcoal);
}
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}
.article-body .article-image-duo {
  display: flow-root;
  margin: 1.7em 0;
  position: relative;
  clear: both;
  max-width: 100%;
  min-width: 0;
}
.product-detail-body .article-body .article-image-duo {
  display: flow-root;
}
.article-body .article-image-duo figure {
  margin: 0 auto;
  width: auto;
  max-width: 100%;
}
.article-body .article-image-duo > figure.image:not(.article-image-duo-pair) {
  display: table;
}
.article-body .article-image-duo img {
  margin: 0;
  width: auto;
  max-width: 100%;
  height: auto;
}
.article-body .article-image-duo figure.article-image-duo-pair img,
.article-body .article-image-duo.article-image-duo--with-text > figure img {
  width: 100%;
}
.article-body .article-image-duo figcaption:empty {
  display: none;
}
.article-body .article-image-duo + p:empty,
.article-body .article-image-duo + p.article-body-spacer {
  height: auto;
  min-height: 1.7em;
  line-height: 1.7 !important;
}
.article-body .article-image-duo + p,
.article-body .article-image-duo + h2,
.article-body .article-image-duo + h3,
.article-body .article-image-duo + h4,
.article-body .article-image-duo ~ p,
.article-body .article-image-duo ~ h2,
.article-body .article-image-duo ~ h3,
.article-body .article-image-duo ~ h4 {
  clear: both;
}
.article-body .article-image-duo figure.article-image-duo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
}
.article-body .article-image-duo figure.article-image-duo-pair figcaption {
  grid-column: 1 / -1;
  text-align: center;
}
.article-body .article-image-duo figure.image.article-image-duo-pair.align-left,
.article-body .article-image-duo figure.image.article-image-duo-pair.align-center,
.article-body .article-image-duo figure.image.article-image-duo-pair.align-right {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  float: none;
}
.article-body .article-image-duo > figure.align-left {
  float: none;
  margin: 0 auto 0 0;
  width: auto;
  max-width: 100%;
}
.article-body .article-image-duo > figure.align-right {
  float: none;
  margin: 0 0 0 auto;
  width: auto;
  max-width: 100%;
}
.article-body .article-image-duo > figure.align-center {
  float: none;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
}
.article-body .article-image-duo > figure.article-image-duo-pair.align-left {
  float: none;
  margin: 0;
}
.article-body .article-image-duo > figure.article-image-duo-pair.align-right {
  float: none;
  margin: 0 0 0 auto;
}
.article-body .article-image-duo > figure.article-image-duo-pair.align-center {
  float: none;
  margin: 0 auto;
}
.article-body .article-image-duo:not(.article-image-duo--with-text) > :is(p, h2, h3, h4, ul, ol, blockquote) {
  clear: both;
  width: 100%;
  max-width: 100%;
}
.article-body .article-image-duo.article-image-duo--with-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  clear: both;
}
.article-body .article-image-duo.article-image-duo--with-text > :is(p, h2, h3, h4, ul, ol, blockquote),
.article-body .article-image-duo.article-image-duo--with-text > div:not(.article-image-duo-text) {
  grid-column: 1 / -1;
  clear: both;
  max-width: 100%;
}
.article-body .article-image-duo.article-image-duo--text-left {
  grid-template-areas: "text photo";
}
.article-body .article-image-duo.article-image-duo--text-right {
  grid-template-areas: "photo text";
}
.article-body .article-image-duo-text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.article-body .article-image-duo-text :is(p, h2, h3, h4, li, blockquote) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.article-body .article-image-duo-text > :first-child {
  margin-top: 0 !important;
}
.article-body .article-image-duo-text > :last-child {
  margin-bottom: 0 !important;
}
.article-body .article-image-duo.article-image-duo--with-text > figure,
.article-body .article-image-duo.article-image-duo--with-text > figure.align-left,
.article-body .article-image-duo.article-image-duo--with-text > figure.align-right,
.article-body .article-image-duo.article-image-duo--with-text > figure.align-center {
  float: none !important;
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: block;
}
.article-body .article-image-duo.article-image-duo--with-text > figure.article-image-duo-pair.align-left,
.article-body .article-image-duo.article-image-duo--with-text > figure.article-image-duo-pair.align-right,
.article-body .article-image-duo.article-image-duo--with-text > figure.article-image-duo-pair.align-center {
  float: none !important;
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: grid;
}
.article-body .article-image-duo.article-image-duo--with-text + *,
.article-body .article-image-duo.article-image-duo--with-text ~ p,
.article-body .article-image-duo.article-image-duo--with-text ~ h2,
.article-body .article-image-duo.article-image-duo--with-text ~ h3,
.article-body .article-image-duo.article-image-duo--with-text ~ h4 {
  clear: both;
  max-width: 100%;
}
.article-body .article-image-duo.article-image-duo--text-left > .article-image-duo-text {
  grid-area: text;
  grid-column: 1 !important;
}
.article-body .article-image-duo.article-image-duo--text-left > figure {
  grid-area: photo;
  grid-column: 2 !important;
}
.article-body .article-image-duo.article-image-duo--text-right > figure {
  grid-area: photo;
  grid-column: 1 !important;
}
.article-body .article-image-duo.article-image-duo--text-right > .article-image-duo-text {
  grid-area: text;
  grid-column: 2 !important;
}
@media (max-width: 767px) {
  .article-body .article-image-duo.article-image-duo--with-text {
    grid-template-columns: 1fr !important;
  }
  .article-body .article-image-duo.article-image-duo--text-left.article-image-duo--with-text {
    grid-template-areas: "photo" "text";
  }
  .article-body .article-image-duo.article-image-duo--text-right.article-image-duo--with-text {
    grid-template-areas: "text" "photo";
  }
  .article-body .article-image-duo.article-image-duo--text-left.article-image-duo--with-text > .article-image-duo-text,
  .article-body .article-image-duo.article-image-duo--text-right.article-image-duo--with-text > .article-image-duo-text,
  .article-body .article-image-duo.article-image-duo--text-left.article-image-duo--with-text > figure,
  .article-body .article-image-duo.article-image-duo--text-right.article-image-duo--with-text > figure {
    grid-column: 1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .article-body .article-image-duo-text {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .article-body .article-image-duo-text :is(p, h2, h3, h4, li, blockquote) {
    width: 100%;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .article-body .article-image-duo figure.article-image-duo-pair {
    grid-template-columns: 1fr;
  }
}
.product-detail-body .article-body .article-image-duo,
.product-detail-body .article-body .article-image-duo.article-image-duo--with-text {
  display: block;
}
.article-body :is(p, div, figure)[style*="text-align:center"] img,
.article-body :is(p, div, figure)[style*="text-align: center"] img {
  margin-left: auto;
  margin-right: auto;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.96rem;
}
.article-body th,
.article-body td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.article-body iframe,
.article-body video {
  max-width: 100%;
}
.menu-category-html {
  margin: 0 0 28px;
}
.menu-html-page .article-body-shell {
  margin-top: 8px;
  overflow: visible;
}
.menu-html-page .article-body {
  overflow: visible;
}
.menu-html-page .article-body img {
  max-width: 100%;
  min-width: 0;
  height: auto;
}
.menu-html-page .article-body .section-html-img-wrap {
  min-width: 0 !important;
}
.article-body .mce-preview-object,
.article-body iframe[src*="youtube"],
.article-body iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
  margin: 1em 0;
  background: transparent;
  color-scheme: light;
}
.menu-html-page .article-body .mce-preview-object,
.menu-html-page .article-body iframe,
.menu-html-page .article-body video,
.section-html iframe,
.section-html video,
.menu-category-html .article-body iframe,
.menu-category-html .article-body video {
  position: relative;
  z-index: 3;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
  color-scheme: light;
}
.menu-html-page .article-body .mce-shim,
.section-html .mce-shim,
.menu-category-html .article-body .mce-shim {
  display: none !important;
}
.menu-html-page .article-body .article-embed,
.section-html .article-embed {
  background: transparent !important;
  overflow: hidden;
}
.menu-html-page .article-body *:has(> iframe),
.menu-html-page .article-body *:has(> video),
.menu-html-page .article-body *:has(> .article-embed),
.menu-html-page .article-body *:has(> .mce-preview-object),
.section-html *:has(> iframe),
.section-html *:has(> video) {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;
  isolation: auto !important;
}
.menu-html-page .article-body *:has(> iframe)::before,
.menu-html-page .article-body *:has(> iframe)::after,
.menu-html-page .article-body *:has(> video)::before,
.menu-html-page .article-body *:has(> video)::after,
.menu-html-page .article-body *:has(> .article-embed)::before,
.menu-html-page .article-body *:has(> .article-embed)::after,
.menu-html-page .article-body *:has(> .mce-preview-object)::before,
.menu-html-page .article-body *:has(> .mce-preview-object)::after,
.section-html *:has(> iframe)::before,
.section-html *:has(> iframe)::after,
.section-html *:has(> video)::before,
.section-html *:has(> video)::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.menu-html-page .article-body *:has(> iframe) > *:not(iframe):not(video):not(figcaption),
.menu-html-page .article-body *:has(> video) > *:not(iframe):not(video):not(figcaption),
.menu-html-page .article-body *:has(> .article-embed) > *:not(iframe):not(video):not(figcaption):not(.article-embed),
.menu-html-page .article-body *:has(> .mce-preview-object) > *:not(iframe):not(video):not(figcaption),
.section-html *:has(> iframe) > *:not(iframe):not(video):not(figcaption),
.section-html *:has(> video) > *:not(iframe):not(video):not(figcaption) {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  pointer-events: none;
  z-index: 0 !important;
}
.menu-html-page .article-body :has(+ iframe),
.menu-html-page .article-body :has(+ video),
.menu-html-page .article-body :has(+ .mce-preview-object),
.menu-html-page .article-body :has(+ .article-embed),
.section-html :has(+ iframe),
.section-html :has(+ video) {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  z-index: 0;
}
@media (max-width: 768px) {
  .article-body-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-body {
    font-size: 16px;
    line-height: 1.65;
  }
}
.news-list { display:flex; flex-direction:column; gap:16px; }
@media (max-width: 768px) {
  .section-landing,
  .article-page {
    padding-left: 4px;
    padding-right: 4px;
  }
  .article-page.article-page--wide {
    padding-left: 16px;
    padding-right: 16px;
  }
  .article-page.article-page--wide .article-body-shell,
  .article-page.article-page--wide .article-body {
    padding-left: 2px;
    padding-right: 2px;
  }
}
.product-detail { padding: 56px 0; }
.product-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 8px 14px 8px 12px;
  border: 1px solid #d7e4f2;
  border-radius: 999px;
  background: #fff;
  color: #4a4d4e;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(20, 54, 93, 0.05);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.product-detail-back:hover {
  border-color: var(--koco-blue);
  color: var(--koco-blue);
  background: #f3f8fd;
}
.product-detail-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.product-detail-head {
  margin-bottom: 24px;
}
.product-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.product-detail-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.product-detail-kicker a { color: var(--koco-blue); }
.product-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.product-detail-title-row h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #232628;
  line-height: 1.3;
}
.product-detail-title-row .sec-edit {
  flex: 0 0 auto;
  margin-top: 2px;
}
.product-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.product-detail-tags .badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.product-detail-tags .badge-color {
  background-color: var(--koco-orange-light);
  color: var(--koco-orange);
}
.product-detail-tags .badge-spec {
  background-color: var(--koco-blue-light);
  color: var(--koco-blue);
}
.product-detail-views {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--koco-gray);
  white-space: nowrap;
}
.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.product-detail-main {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
}
.product-detail-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-detail-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.product-detail-thumb {
  width: 72px;
  height: 72px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.product-detail-thumb.is-active,
.product-detail-thumb:hover {
  border-color: var(--koco-blue);
}
.product-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.product-detail-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
}
.product-detail-edit--plain {
  position: static;
}
.product-detail-price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.product-detail-price-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--koco-gray);
}
.product-detail-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--koco-blue);
  letter-spacing: -0.03em;
}
.product-detail-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #232628;
}
.product-detail-term-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.product-detail-term {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #232628;
  cursor: pointer;
}
.product-detail-term.is-active {
  background: var(--koco-blue);
  border-color: var(--koco-blue);
  color: #fff;
}
.product-detail-specs-panel {
  margin: 0;
  border: 1px solid #d7e4f2;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 54, 93, 0.06);
}
.product-detail-specs-panel__head {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--koco-blue);
  background: linear-gradient(180deg, #f3f8fd 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe6f2;
}
.product-detail-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: #e6edf4;
}
.product-detail-specs__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
}
.product-detail-specs dt {
  flex: 0 0 auto;
  min-width: 54px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f0f5fa;
  font-size: 11px;
  font-weight: 800;
  color: #5c6b7a;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.product-detail-specs dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #232628;
  line-height: 1.35;
  word-break: keep-all;
}
.product-detail-specs__item--ppm {
  grid-column: span 2;
}
.product-ppm-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.product-ppm-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  background: #f3f7fb;
  border: 1px solid #e2ebf3;
  line-height: 1.2;
  white-space: nowrap;
}
.product-ppm-chip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #6b7a88;
}
.product-ppm-chip--mono em { color: var(--koco-blue); }
.product-ppm-chip--color em { color: var(--koco-orange); }
.product-ppm-chip strong {
  font-size: 14px;
  font-weight: 800;
  color: #232628;
}
.product-ppm-chip i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #8a939c;
}
.product-detail-volume-wrap {
  width: 100%;
}
.product-volume-public__overage td {
  background: #fafbfc;
  color: #4a4d4e;
}
.product-volume-public {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.product-volume-public th,
.product-volume-public td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
}
.product-volume-public th {
  background: #f4f7fa;
  font-weight: 800;
}
.product-volume-public th:nth-child(1),
.product-volume-public th:nth-child(2),
.product-volume-public td:nth-child(1),
.product-volume-public td:nth-child(2) {
  text-align: center;
}
.product-detail-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.product-detail-inquire {
  flex: 1 1 0;
  width: auto;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 10px;
  justify-content: center;
}
.product-detail-channel {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #3c1e1e;
  background: #fee500;
  color: #191919;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.product-detail-channel:hover {
  background: #f5dc00;
  color: #191919;
}
.product-detail-body {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.product-detail-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.product-detail-body-head .article-share {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.product-detail-body-head .article-share-row {
  justify-content: flex-start;
}
.product-detail-body__title {
  margin: 0;
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 800;
  color: #232628;
  line-height: 1.2;
}
.plan-table { width:100%; border-collapse:collapse; margin:16px 0; }
.plan-table th, .plan-table td { border:1px solid var(--border); padding:10px; }
.section-masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.section-masthead__copy h1 { margin: 0; }
.section-masthead__copy p { margin: 8px 0 0; }
.section-install-tabs {
  justify-content: flex-start;
  margin: 0 0 28px;
}
.article-install-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--koco-blue-light);
  color: var(--koco-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.section-masthead__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.section-view-switcher { display:flex; align-items:center; gap:6px; }
.section-view-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  color: #4a4d4e;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.section-view-switcher__btn.is-active { background:var(--koco-blue); color:#fff; border-color:var(--koco-blue); }
.gallery-grid--view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-grid--view .gallery-card,
.gallery-grid--view .gallery-card.gallery-card--board {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gallery-grid--view .gallery-card:hover,
.gallery-grid--view .gallery-card.gallery-card--board:hover {
  transform: none;
  border-color: #b5b5b5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.gallery-grid--view .gallery-card:hover .gallery-thumb-wrap img {
  transform: none;
}
.gallery-grid--view .gallery-thumb-wrap {
  height: auto;
  min-height: 140px;
  aspect-ratio: 4 / 3;
  background: #f3f3f3;
}
.gallery-grid--view .gallery-card-body {
  padding: 12px 14px 14px;
  border-top: 1px solid #ececec;
}
.gallery-grid--view .gallery-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.9em;
}
.gallery-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  line-height: 1.3;
}
.news-item-card .gallery-card-meta {
  margin-top: 10px;
  max-width: 280px;
}
.list-view-meta {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  font-size: 13px;
  color: #888;
  font-weight: 500;
}
@media (max-width: 1100px) {
  .gallery-grid--view { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 768px) {
  .gallery-grid--view { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-title,
  .gallery-grid--view .gallery-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
    min-height: 0;
    max-height: calc(1.4em * 2);
  }
  .list-view li { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.section-html > *:first-child { margin-top: 0; }
.section-html > *:last-child { margin-bottom: 0; }
.section.section--html {
  padding-top: 0;
  padding-bottom: 0;
}
.section-html-img-wrap,
.sub-visual__html .section-html-img-wrap,
.article-body .section-html-img-wrap {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
  line-height: 0 !important;
}
.section-html-img-wrap img,
.sub-visual__html .section-html-img-wrap img,
.article-body .section-html-img-wrap img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.section-html-img-wrap--h img,
.sub-visual__html .section-html-img-wrap--h img,
.article-body .section-html-img-wrap--h img {
  width: auto !important;
  height: 100% !important;
}
.section-html-img-wrap--wh img,
.sub-visual__html .section-html-img-wrap--wh img,
.article-body .section-html-img-wrap--wh img {
  width: 100% !important;
  height: 100% !important;
}
.section-html img,
.section-html video {
    display: inline-block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: top;
}
.list-view { list-style:none; }
.list-view li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.list-view a { color: #3f464c; font-weight: 700; text-decoration: none; }
.section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 12px 5px 6px;
    border: 1px solid #d7dee6;
    border-radius: 999px;
    background: #fff;
    color: #3d4348;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
.section-more__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--koco-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.section-more:hover {
    border-color: var(--koco-blue);
    color: var(--koco-blue);
}
.section.section--on-dark .section-header h2,
.section.section--on-dark .section-nav-head h3,
.section.section--on-dark > .container > h2,
#products.section--on-dark .section-header h2 {
    color: #fff;
}
.section.section--on-dark .section-header p,
.section.section--on-dark .section-header .sub-title,
.section.section--on-dark .section-nav-head p,
.section.section--on-dark > .container > p,
.section.section--on-dark.section--branches .section-header p,
#products.section--on-dark .section-header .sub-title {
    color: rgba(255, 255, 255, 0.88);
}
.section.section--sub-ink .section-header .sub-title,
#products.section--sub-ink .section-header .sub-title {
    color: #4a4d4e;
}
.section--on-dark .sec-edit {
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.section--on-dark .section-more {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.section--on-dark .section-more__plus {
    background: #fff;
    color: var(--koco-blue);
}
.section--on-dark .section-more:hover {
    border-color: #fff;
    color: #fff;
}
.section--on-dark .list-view a {
    color: #fff;
}
.section--on-dark .list-view li {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.hero.section--on-dark .hero-copy h1 {
    color: #fff;
}
.hero.section--on-dark .hero-copy p {
    color: rgba(255, 255, 255, 0.88);
}
.hero.section--on-dark .hero-btn-outline {
    background: rgba(255, 255, 255, 0.95);
}
.hero.section--on-dark .hero-btn-outline:hover,
.hero.section--on-dark a.hero-btn-outline:hover,
.hero.section--on-dark a.hero-btn-outline:visited:hover {
    background: var(--koco-blue);
    color: #fff;
}
.theme-dark-header .site-header { background:#1a2332; }
.theme-dark-header .nav-links a, .theme-dark-header .header-icon,
.theme-dark-header .nav-toggle,
.theme-dark-header .nav-sub-toggle { color:#fff; }
.radius-sm { --card-radius: 8px; }
.radius-md { --card-radius: 16px; }
.radius-lg { --card-radius: 22px; }
.product-card, .gallery-card, .quick-card { border-radius: var(--card-radius, 16px); }
#gallery .gallery-card,
#news .news-item-card { border-radius: 0; }
.section.home-banners {
  position: relative;
  padding: 0;
  width: 100%;
}
.home-banners-band {
  width: 100%;
}
.home-banners-band--has-bg {
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}
.home-banners-grid {
  display: grid;
  gap: 0;
  width: 100%;
}
.home-banners-stage {
  position: relative;
}
.home-banners-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  pointer-events: none;
  box-sizing: border-box;
}
.home-banners-copy.hero--copy-x-left { justify-content: flex-start; text-align: left; }
.home-banners-copy.hero--copy-x-center { justify-content: center; text-align: center; }
.home-banners-copy.hero--copy-x-right { justify-content: flex-end; text-align: right; }
.home-banners-copy.hero--copy-y-top { align-items: flex-start; }
.home-banners-copy.hero--copy-y-middle { align-items: center; }
.home-banners-copy.hero--copy-y-bottom { align-items: flex-end; }
.home-banners-copy__inner {
  max-width: min(100%, 720px);
  min-width: 0;
}
.home-banners-copy h2 {
  margin: 0;
  font-size: var(--home-copy-fs, 26px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.3;
  color: var(--koco-blue);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.home-banners-copy p {
  margin: 6px 0 0;
  font-size: var(--home-copy-fs, 14px);
  line-height: 1.5;
  color: #374151;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
@media (max-width: 768px) {
  .home-banners-copy {
    padding: 10px 12px;
  }
  .home-banners-copy h2 {
    font-size: min(18px, var(--home-copy-fs, 26px));
    letter-spacing: -0.2px;
  }
  .home-banners-copy p {
    margin-top: 4px;
    font-size: min(13px, var(--home-copy-fs, 14px));
  }
}
.home-banners-grid--1 { grid-template-columns: 1fr; }
.home-banners-grid--2 {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.home-banners-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.home-banner {
  display: block;
  overflow: hidden;
  min-width: 0;
}
.home-banner img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
@media (max-width: 800px) {
  .product-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .home-banners-grid--2 { gap: 8px; }
  .home-banners-grid--3 { gap: 6px; }
}
@media (max-width: 768px) {
  .product-detail { padding: 32px 0; }
  .product-detail-back,
  .article-list-back {
    margin-bottom: 14px;
    font-size: 12px;
    padding: 7px 12px 7px 10px;
  }
  .article-list-actions .article-list-back {
    margin-bottom: 0;
  }
  .product-detail-head { margin-bottom: 16px; }
  .product-detail-title-row h1 { font-size: 22px; }
  .product-detail-tags { margin-top: 10px; }
  .product-detail-main {
    min-height: 0;
    padding: 5px;
  }
  .product-detail-thumbs { gap: 8px; margin-top: 8px; }
  .product-detail-thumb { width: 56px; height: 56px; }
  .product-detail-info { gap: 16px; }
  .product-detail-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-specs__item {
    padding: 8px 10px;
    min-height: 42px;
    gap: 8px;
  }
  .product-detail-specs dt {
    min-width: 48px;
    padding: 3px 6px;
    font-size: 10px;
  }
  .product-detail-specs dd {
    font-size: 13px;
  }
  .product-detail-specs__item--ppm {
    grid-column: 1 / -1;
  }
  .product-ppm-chip strong { font-size: 13px; }
  .product-detail-price-row { padding-bottom: 16px; }
  .product-detail-price { font-size: 24px; }
  .product-detail-term {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  .product-detail-term-list { display: flex; }
  .product-detail-actions { gap: 8px; }
  .product-detail-inquire,
  .product-detail-channel {
    min-height: 42px;
    font-size: 14px;
    padding: 8px 12px;
  }
  .product-detail-body { margin-top: 32px; padding-top: 20px; }
  .product-detail-body-head {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .product-detail-body__title {
    font-size: 1.05rem;
  }
}
@media (max-width: 768px) {
  .branch-table-wrap {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  .branch-table {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    table-layout: fixed;
  }
  .branch-table th,
  .branch-table td {
    padding: 8px 3px;
  }
  .branch-table td {
    vertical-align: top;
  }
  .branch-table th {
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .branch-table .is-name { width: 26%; }
  .branch-table .is-trade { width: 26%; }
  .branch-table .is-addr { width: 11%; }
  .branch-table .is-phone { width: 26%; }
  .branch-table .is-home { width: 11%; }
  .branch-name {
    font-size: 15px;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .branch-region { display: none; }
  .branch-trade {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  .branch-phone {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.05em;
    white-space: nowrap;
  }
  .branch-addr-btn {
    width: 28px;
    height: 28px;
  }
  .branch-addr-btn i,
  .branch-addr-btn svg {
    width: 14px;
    height: 14px;
  }
  .branch-home-text {
    display: none;
  }
  .branch-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    text-decoration: none;
    color: var(--koco-blue);
  }
  .branch-home-link:hover {
    text-decoration: none;
    color: var(--koco-blue-dark);
  }
  .branch-home-link .branch-home-icon {
    display: block;
    width: 28px;
    height: 28px;
  }
  .branch-search {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 8px;
  }
  .branch-search-label {
    display: none;
  }
  .branch-search input,
  .branch-search select {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 36px;
    padding: 6px 6px;
    font-size: 12px;
    border-radius: 6px;
  }
  .branch-search input {
    flex: 1.35 1 0;
  }
  .branch-search button {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
}

.site-popups {
  position: fixed;
  inset: 0;
  z-index: 90000;
  background: rgba(15, 23, 42, 0.48);
  padding: 40px 16px 24px;
  overflow: auto;
}
.site-popups__layer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: min-content;
}
.site-popups__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-popups__col--left { justify-self: start; }
.site-popups__col--center { justify-self: center; }
.site-popups__col--right { justify-self: end; }
.site-popup {
  position: relative;
  width: min(var(--popup-w, 400px), 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.site-popup.is-floating {
  max-width: calc(100vw - 24px);
}
.site-popup.is-dragging {
  user-select: none;
}
.site-popup__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px 6px 10px;
  background: linear-gradient(180deg, #f3f6fa 0%, #eef2f7 100%);
  border-bottom: 1px solid #dbe3ec;
}
.site-popup__drag {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5c6b7a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.site-popup__drag:active,
.site-popup.is-dragging .site-popup__drag {
  cursor: grabbing;
}
.site-popup__drag-grip {
  letter-spacing: -2px;
  font-size: 14px;
  line-height: 1;
}
.site-popup__drag-label {
  white-space: nowrap;
}
.site-popup__close {
  position: static;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.site-popup__hide {
  cursor: pointer;
}
.site-popup__media { display: block; }
.site-popup__media img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}
.site-popup__html {
  padding: 16px 16px 8px;
  font-size: 15px;
  line-height: 1.55;
  color: #232628;
}
.site-popup__hide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 13px;
  color: #4a5360;
  cursor: pointer;
}
.site-popup__hide input { margin: 0; }
@media (max-width: 768px) {
  .site-popups { padding: 20px 12px; }
  .site-popups__layer {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .site-popups__col {
    width: 100%;
    align-items: center;
  }
  .site-popup { width: min(var(--popup-w, 400px), 100%); }
}

.product-list-empty {
  margin: 24px 0 0;
  color: var(--koco-gray);
  font-size: 15px;
}

.pagination {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 28px 0;
}

.pagination a {
  font-weight: 600;
}

.pagination--section {
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 8px;
}

.pagination--section-numbered {
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.section-pagination-meta {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--koco-gray);
}

.section-pagination-meta strong {
  color: var(--koco-blue);
  font-weight: 800;
}

.section-pagination-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}

.pagination-page-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.pagination-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--koco-blue);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
}

a.pagination-num:hover {
  color: #fff;
  background: var(--koco-blue);
  border-color: var(--koco-blue);
}

.pagination-num.is-current {
  background: var(--koco-blue-light);
  border-color: var(--koco-blue);
  color: var(--koco-blue);
  font-weight: 800;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--koco-blue);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pagination-btn:hover {
  color: #fff;
  background: var(--koco-blue);
  border-color: var(--koco-blue);
}

.pagination-btn--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-btn--edge {
  min-width: 52px;
  padding: 10px 14px;
}

.home-bgm-player {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  max-width: none;
  padding: 6px 10px 6px 6px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
}
.home-bgm-player[hidden] {
  display: none;
}
.home-bgm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.home-bgm-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--koco-light-gray);
  color: var(--koco-charcoal-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-bgm-player.is-playing .home-bgm-btn#home-bgm-toggle {
  background: var(--koco-blue);
  color: #fff;
}
.home-bgm-btn:hover {
  background: var(--koco-blue-light);
}
.home-bgm-player.is-playing .home-bgm-btn#home-bgm-toggle:hover {
  background: var(--koco-blue-dark);
}
.home-bgm-vol {
  flex: none;
  display: flex;
  align-items: center;
  width: 72px;
}
.home-bgm-vol input[type='range'] {
  width: 100%;
  accent-color: var(--koco-blue);
  cursor: pointer;
}
body.inq-open .home-bgm-player,
body.nav-open .home-bgm-player {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 768px) {
  .home-bgm-player {
    left: 10px;
    right: auto;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    padding: 4px;
    gap: 0;
  }
  .home-bgm-player #home-bgm-next,
  .home-bgm-player .home-bgm-vol {
    display: none;
  }
  .hero-photo-actions .home-bgm-player {
    position: absolute;
    left: auto;
    top: 12px;
    right: 12px;
    bottom: auto;
    z-index: 6;
    margin-left: 0;
    transform: none;
  }
  .hero--full > .hero-photo-actions.hero-photo-actions--bgm-only {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    padding: 0;
    align-items: center;
    transform: none;
    pointer-events: none;
  }
  .hero-photo-actions--bgm-only .home-bgm-player {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    margin-left: 0;
    transform: none;
    pointer-events: auto;
  }
}

.koco-way {
  --way-blue: #005BAC;
  --way-navy: #0a3d73;
  --way-sky: #eaf3fb;
  --way-line: #d7e2ee;
  --way-gray: #5b6470;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 16px;
  color: #2c3340;
  font-size: 16px;
  line-height: 1.65;
}
.koco-way * { box-sizing: border-box; }
.koco-way h2,
.koco-way h3,
.koco-way p { margin: 0; }
.koco-way .way-hero {
  padding: 34px 28px;
  border-radius: 18px;
  background: #005BAC;
  color: #fff;
  text-align: center;
}
.koco-way .way-hero em {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.koco-way .way-hero h2 {
  margin-bottom: 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.koco-way .way-hero p { color: rgba(255,255,255,.88); }
.koco-way .way-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 22px;
}
.koco-way .way-map {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--way-line);
  background: #eef3f8;
  min-height: 360px;
}
.koco-way .way-map-canvas {
  width: 100%;
  height: 420px;
}
.koco-way .way-map-fallback {
  margin: 0;
  padding: 24px 18px;
  color: #5b6470;
  font-weight: 700;
  text-align: center;
}
.koco-way .way-card {
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid var(--way-line);
  background: #fff;
}
.koco-way .way-card h3 {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--way-navy);
}
.koco-way .way-addr {
  margin-bottom: 16px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: var(--way-sky);
  font-size: 17px;
  font-weight: 800;
  color: var(--way-navy);
  line-height: 1.55;
}
.koco-way .way-meta { display: grid; gap: 10px; }
.koco-way .way-meta div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--way-line);
}
.koco-way .way-meta div:first-child { border-top: 0; padding-top: 0; }
.koco-way .way-meta b { color: var(--way-blue); font-size: 14px; }
.koco-way .way-meta span { color: var(--way-gray); font-weight: 600; }
.koco-way .way-meta a { color: var(--way-blue); font-weight: 800; text-decoration: none; }
.koco-way .way-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.koco-way .way-links a {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fee500;
  color: #191919;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.koco-way .way-links a:nth-child(2) { background: #03c75a; color: #fff; }
.koco-way .way-links a:nth-child(3) { background: var(--way-navy); color: #fff; }
.koco-way .way-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.koco-way .way-tip {
  padding: 20px 18px;
  border-radius: 14px;
  background: #f6f8fb;
  border: 1px solid var(--way-line);
}
.koco-way .way-tip h3 { margin-bottom: 8px; }
.koco-way .way-tip p { color: var(--way-gray); font-weight: 600; }
@media (max-width: 768px) {
  .koco-way .way-hero h2 { font-size: 24px; }
  .koco-way .way-grid,
  .koco-way .way-tips { grid-template-columns: 1fr; }
  .koco-way .way-map-canvas { height: 280px; }
}

.article-body .koco-biz,
.menu-html-page .koco-biz {
  padding-bottom: 8px;
}
.article-body .koco-biz h2,
.menu-html-page .koco-biz h2 {
  margin: 56px 0 28px;
}
.article-body .koco-biz h2:first-child,
.menu-html-page .koco-biz h2:first-child {
  margin-top: 8px;
}
.article-body .koco-biz .biz-issues,
.menu-html-page .koco-biz .biz-issues {
  gap: 16px;
  margin-top: 28px;
}
.article-body .koco-biz .biz-issue,
.menu-html-page .koco-biz .biz-issue {
  padding: 18px 22px;
}
.article-body .koco-biz .biz-arrow,
.menu-html-page .koco-biz .biz-arrow {
  margin-top: 28px;
}
.article-body .koco-biz .biz-solve,
.menu-html-page .koco-biz .biz-solve {
  margin-top: 40px;
}
.article-body .koco-biz .biz-flow,
.menu-html-page .koco-biz .biz-flow {
  gap: 20px 24px;
  margin-top: 28px;
}
.article-body .koco-biz .biz-pair,
.menu-html-page .koco-biz .biz-pair {
  gap: 24px;
  margin-top: 12px;
}
.article-body .koco-biz .biz-card,
.menu-html-page .koco-biz .biz-card {
  padding: 28px 26px;
}
.article-body .koco-biz .biz-ideas,
.menu-html-page .koco-biz .biz-ideas {
  gap: 20px;
}
.article-body .koco-biz .biz-bar,
.menu-html-page .koco-biz .biz-bar {
  margin-top: 28px;
}
.article-body .koco-biz .biz-rows,
.menu-html-page .koco-biz .biz-rows {
  gap: 14px;
}
.article-body .koco-biz .biz-visions,
.menu-html-page .koco-biz .biz-visions {
  gap: 22px;
}
.article-body .koco-biz .biz-vision p,
.menu-html-page .koco-biz .biz-vision p {
  padding: 20px 20px 24px;
}
@media (min-width: 769px) {
  .article-body .koco-biz h2,
  .menu-html-page .koco-biz h2 {
    margin: 72px 0 32px;
  }
  .article-body .koco-biz .biz-issues,
  .menu-html-page .koco-biz .biz-issues {
    gap: 18px;
    margin-top: 32px;
  }
  .article-body .koco-biz .biz-solve,
  .menu-html-page .koco-biz .biz-solve {
    margin-top: 48px;
  }
  .article-body .koco-biz .biz-pair,
  .menu-html-page .koco-biz .biz-pair {
    gap: 28px;
  }
  .article-body .koco-biz .biz-ideas,
  .menu-html-page .koco-biz .biz-ideas {
    gap: 24px;
  }
  .article-body .koco-biz .biz-rows,
  .menu-html-page .koco-biz .biz-rows {
    gap: 16px;
  }
  .article-body .koco-biz .biz-visions,
  .menu-html-page .koco-biz .biz-visions {
    gap: 26px;
  }
}

.menu-html-page:has(.koco-ci) .section-header,
.koco-ci-page .section-header {
  text-align: center;
  margin-bottom: 8px;
}
.menu-html-page:has(.koco-ci) .section-header h1,
.koco-ci-page .section-header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--koco-charcoal);
}
.koco-ci {
  --ci-blue: #005BAC;
  --ci-navy: #0a3d73;
  --ci-orange: #EE591F;
  --ci-charcoal: #4A4D4E;
  --ci-gray: #6b7280;
  --ci-line: #e6ebf1;
  --ci-soft: #f6f8fb;
  max-width: 920px;
  margin: 0 auto;
  padding: 4px 0 24px;
  color: var(--ci-charcoal);
  font-size: 16px;
  line-height: 1.7;
}
.koco-ci * { box-sizing: border-box; }
.koco-ci h2,
.koco-ci h3,
.koco-ci p { margin: 0; }
.koco-ci a { color: inherit; text-decoration: none; }
.koco-ci img { border: 0; display: block; }
.koco-ci .ci-hero {
  text-align: center;
  padding: 8px 8px 36px;
}
.koco-ci .ci-kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef5fb;
  color: var(--ci-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.koco-ci .ci-hero h2 {
  margin-bottom: 14px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.35;
  color: var(--ci-navy);
}
.koco-ci .ci-hero h2 em {
  font-style: normal;
  color: var(--ci-orange);
}
.koco-ci .ci-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ci-gray);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.koco-ci .ci-logo-card {
  padding: 28px 24px 24px;
  border: 1px solid var(--ci-line);
  border-radius: 22px;
  background: var(--ci-soft);
  text-align: center;
}
.koco-ci .ci-logo-stage,
.koco-ci .ci-mark {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eceff3 25%, transparent 25%),
    linear-gradient(-45deg, #eceff3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceff3 75%),
    linear-gradient(-45deg, transparent 75%, #eceff3 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.koco-ci .ci-logo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 36px 28px;
  border-radius: 16px;
}
.koco-ci .ci-logo-stage img {
  width: auto;
  max-width: min(560px, 100%);
  height: auto;
  max-height: 96px;
  object-fit: contain;
}
.koco-ci .ci-downloads {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.koco-ci .ci-downloads a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.koco-ci .ci-dl-ai {
  border: 1px solid #f3c3ad;
  background: #fff;
  color: var(--ci-orange);
}
.koco-ci .ci-dl-ai:hover {
  background: var(--ci-orange);
  border-color: var(--ci-orange);
  color: #fff;
}
.koco-ci .ci-dl-png {
  border: 1px solid var(--ci-blue);
  background: var(--ci-blue);
  color: #fff;
}
.koco-ci .ci-dl-png:hover {
  background: var(--ci-navy);
  border-color: var(--ci-navy);
}
.koco-ci .ci-meanings {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.koco-ci .ci-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--ci-line);
  border-radius: 18px;
  background: #fff;
}
.koco-ci .ci-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 8px;
  border-radius: 18px;
  overflow: hidden;
}
.koco-ci .ci-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.koco-ci .ci-item h3 {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ci-navy);
}
.koco-ci .ci-item h3 span {
  margin-left: 8px;
  color: var(--ci-gray);
  font-size: 13px;
  font-weight: 700;
}
.koco-ci .ci-item p {
  color: var(--ci-gray);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}
.article-body .koco-ci h2,
.menu-html-page .koco-ci h2 {
  margin: 0 0 14px;
}
.article-body .koco-ci h3,
.menu-html-page .koco-ci h3 {
  margin: 0 0 6px;
}
.article-body .koco-ci p,
.menu-html-page .koco-ci p {
  margin: 0;
}
.article-body .koco-ci .ci-hero p,
.menu-html-page .koco-ci .ci-hero p {
  text-align: center !important;
}
@media (max-width: 768px) {
  .menu-html-page:has(.koco-ci) .section-header h1,
  .koco-ci-page .section-header h1 { font-size: 24px; }
  .koco-ci .ci-hero h2 { font-size: 22px; }
  .koco-ci .ci-logo-card { padding: 18px 14px 16px; }
  .koco-ci .ci-logo-stage { min-height: 140px; padding: 24px 16px; }
  .koco-ci .ci-item {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .koco-ci .ci-mark { width: 72px; height: 72px; border-radius: 14px; }
}