@charset "utf-8";

/* ===== reset.css ===== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/* =========================
RESET
========================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
    --layout-width: max(100vw, 320px);

    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 62.5%;
}
body {
    min-width: 320px;
    color: #111827;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 1.28;
}

/* =========================
TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

small {
    font-size: 80%;
}

strong {
    font-weight: 600;
}

/* =========================
LIST
========================= */
ul, ol, li {
    list-style: none;
}

li {
    display: block;
    unicode-bidi: normal;
}

/* =========================
LINK
========================= */
a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

/* =========================
MEDIA
========================= */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* =========================
TABLE
========================= */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================
FORM
========================= */
button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
}

input,
textarea,
select {
    background: none;
    outline: none;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
    -webkit-appearance: button;
}

/* =========================
ACCESSIBILITY
========================= */
[hidden] {
    display: none !important;
}

.sr-only {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.blind {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================
MISC
========================= */
hr {
    height: 0;
    overflow: visible;
}

template {
    display: none;
}



/* ===== layout.css ===== */
/* =========================
LAYOUT COMMON
========================= */
#wrap {
    overflow: hidden;
    width: max(100%, 320px);
    min-width: 320px;
}

.inner {
    width: min(calc(100% - 12rem), 160rem);
    margin: 0 auto;
}

/* =========================
HEADER
========================= */
#header {
    z-index: 50;
    inset: 0 0 auto 0;
    position: fixed;
    height: 8.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    background: transparent;
    transform: translateY(0);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease,
        backdrop-filter 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

#header.is-hide {
    transform: translateY(-100%);
}

#header.scrolled {
    border-bottom: 1px solid rgba(216, 227, 236, 0.5);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    box-shadow: 0 1rem 3rem rgba(15, 45, 80, 0.08);
}

#header:has(.gnb-item:hover) {
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    box-shadow: none;
}

#header.scrolled:has(.gnb-item:hover) {
    background: rgba(255, 255, 255, 1);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: min(calc(100% - 6rem), 180rem);
    height: 100%;
    margin: 0 auto;
}

/* =========================
LOGO
========================= */
.logo,
.header-util {
    z-index: 2;
    position: relative;
}

.logo {
    flex: 0 0 auto;
}

.logo a {
    display: block;
    width: 24.2rem;
    height: 4.4rem;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================
HEADER UTIL
========================= */
.header-util {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 2.7rem;
    margin-left: 10rem;
}

/* 문의하기 */
.btn-inquiry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13.6rem;
    height: 4.4rem;
    padding: 0 2rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #005eb8 0%, #003586 50%, #005eb8 100%);
    background-size: 200% 100%;
    background-position: 0 50%;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    transition: background-position 0.45s ease;
}

.btn-inquiry:hover {
    background-position: 100% 50%;
    color: #fff;
}

/* 언어 */
.lang {
    display: flex;
    gap: 1.6rem;
    font-size: 1.4rem;
    font-weight: 500;
}

.lang a {
    position: relative;
    color: #94a3b8;
    transition: all 0.25s ease;
}

.lang a.active {
    font-weight: 700;
    color: #005eb8;
}

.lang a:hover {
    color: #0b172a;
}

.lang a:last-child::after {
    content: "";
    position: absolute;
    top: 2px;
    left: -0.8rem;
    display: block;
    width: 1px;
    height: 12px;
    background: #cbd5e1;
}

/* 모바일 메뉴 버튼 기본값 */
.mo-menu {
    display: none;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.mo-menu span {
    display: block;
    width: 2.4rem;
    height: 2px;
    margin-left: auto;
    background: #1f2937;
}

.mo-menu span+span {
    margin-top: 0.7rem;
}

/* PC에서는 모바일 메뉴 안 빠른 링크/언어 숨김 */
.mo-menu-top,
.mo-lang {
    display: none;
}

/* =========================
GNB
========================= */
.gnb {
    height: 100%;
    margin-left: auto;
}

.gnb-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7.2rem;
    height: 100%;
}

.gnb-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.gnb-item>a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: #1f2937;
    font-size: 1.7rem;
    font-weight: 600;
}

.gnb-item>a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #005eb8;
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.gnb-item:hover>a {
    color: #005eb8;
}

.gnb-item:hover>a::after {
    width: 100%;
}

/* =========================
PC 2DEPTH MENU
========================= */
.depth-wrap {
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: 45;
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(160rem, calc(100vw - 6rem));
    padding: 2rem 0 2.6rem;
    border-top: 0;
    border-bottom: 0;
    background: #fff;
    box-shadow: 0 2.4rem 7rem rgba(15, 45, 80, 0.14);
    transform: translateX(-50%);
    transition: opacity 0.24s ease, visibility 0.24s ease;
    pointer-events: none;
}

.depth-wrap::after {
    content: "";
    z-index: -1;
    opacity: 0.024;
    position: absolute;
    bottom: -9px;
    left: 6rem;
    width: 240px;
    height: 107px;
    background: url("/images/layout/lifetube/common/LFC.png") no-repeat top left;
}

.gnb-item:hover .depth-wrap {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    transform: translateX(-50%);
    pointer-events: auto;
}

.depth-inner {
    position: relative;
    display: grid;
    grid-template-columns: 28rem 1fr;
    gap: 4.8rem;
    width: min(calc(100% - 12rem), 160rem);
    min-height: 24rem;
    margin: 0 auto;
    padding: 3.6rem 0;
}

.depth-title {
    padding-right: 5rem;
    border-right: 1px solid rgba(16, 24, 39, 0.08);
}

.depth-title strong {
    display: block;
    color: #0b172a;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.depth-title p {
    margin-top: 1.4rem;
    color: rgba(16, 24, 39, 0.4);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.65;
    word-break: keep-all;
}

.depth-menu {
    display: grid;
    align-content: start;
    gap: 1.2rem;
}

.depth-menu>li {
    display: block;
    min-height: 0;
}

.depth-menu>li>a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 5.8rem;
    padding: 1.6rem 2rem;
    border: 1px solid transparent;
    border-radius: 1.4rem;
    background: rgba(244, 249, 253, 0.72);
    color: #0b172a;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.35;
    transition: 0.2s ease;
}

.depth-menu>li>a:hover {
    border-color: rgba(0, 109, 204, 0.22);
    background: #eef7fd;
    color: #005eb8;
    transform: translateY(-0.2rem);
}

/* 회사소개 2depth */
.company-depth .depth-menu {
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
}

/* 주요제품 2depth */
.product-depth-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.9fr;
    gap: 2rem;
    height: 100%;
}

.product-depth-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.2rem;
    border: 1px solid #f7fbfe;
    border-radius: 1.8rem;
    background: rgba(247, 251, 254, 0.24);
}

.product-depth-col h3 {
    margin-bottom: 1.4rem;
    color: #005eb8;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.product-depth-col .depth-menu {
    flex: 0 0 auto;
    align-content: start;
}

.product-all {
    background: #08233d;
}

.product-all h3 {
    color: rgba(255, 255, 255, 0.72);
}

.product-all .depth-menu>li>a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.product-all .depth-menu>li>a:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* 제품군 전체보기 버튼 */
.depth-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    margin-top: auto;
    padding: 1.4rem 2rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff 0%, #fff 50%, #005eb8 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    color: #08233d;
    font-size: 1.5rem;
    font-weight: 500;
    transition:
        background-position 0.45s ease,
        color 0.25s ease;
}

.depth-more:hover {
    background-position: 100% 0;
    color: #005eb8;
}

.depth-more::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #005eb8;
    mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    transform: rotate(-45deg);
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.depth-more:hover::after {
    background-color: #fff;
    transform: rotate(0deg);
}

/* 고객센터 2depth */
.customer-depth .depth-menu {
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
}

/* =========================
QUICK MENU
========================= */
.quick-menu {
    z-index: 40;
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    --quick-size: 6.4rem;
    --quick-gap: 0.8rem;
    transform: translateY(calc(var(--quick-size) + var(--quick-gap)));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.quick-menu.is-show-top {
    transform: translateY(0);
}

.quick-link {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 6.4rem;
    height: 6.4rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 53, 134, 0.3);
    color: #fff;
    white-space: nowrap;
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    cursor: pointer;
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        color 0.25s ease,
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.quick-link:not(.top-btn) {
    justify-content: flex-start;
    padding: 0 2.1rem;
    transition:
        width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        gap 0.3s ease,
        padding 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        color 0.25s ease;
}

.quick-link:not(.top-btn):hover {
    gap: 1.4rem;
    padding: 0 2.4rem;
    background: linear-gradient(-90deg, #eaf4ff 0%, #cfe4ff 52%, #9fc8ff 100%);
    box-shadow: 0 0.8rem 1.6rem rgba(2, 24, 44, 0.24);
    color: #005eb8;
}

.inquiry-link:hover {
    width: 15.6rem;
}

.qna-link:hover {
    width: 12.4rem;
}

.store-link:hover {
    width: 18.2rem;
}

/* QUICK MENU TEXT */
.quick-text {
    overflow: hidden;
    opacity: 0;
    width: 0;
    color: #005eb8;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
    transform: translateX(-0.6rem);
    transition:
        width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.quick-link:not(.top-btn):hover .quick-text {
    opacity: 1;
    transform: translateX(0);
}

.inquiry-link:hover .quick-text {
    width: 6.8rem;
}

.qna-link:hover .quick-text {
    width: 3.8rem;
}

.store-link:hover .quick-text {
    width: 9.4rem;
}

/* QUICK MENU ICON */
.quick-icon {
    display: block;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    background-color: currentColor;
}

.inquiry-link .quick-icon {
    mask: url("/images/layout/lifetube/common/ico-inquiry.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-inquiry.svg") center / contain no-repeat;
}

.qna-link .quick-icon {
    mask: url("/images/layout/lifetube/common/ico-qna.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-qna.svg") center / contain no-repeat;
}

.store-link .quick-icon {
    mask: url("/images/layout/lifetube/common/ico-store.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-store.svg") center / contain no-repeat;
}

/* =========================
TOP BUTTON
========================= */
.top-btn {
    opacity: 0;
    visibility: hidden;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    padding: 0;
    gap: 0;
    background: rgba(0, 53, 134, 0.45);
    color: #fff;
    pointer-events: none;
    transform: translateY(1rem);
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.top-btn.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.top-btn:hover {
    padding: 0;
    gap: 0;
    background: linear-gradient(180deg, #005eb8 0%, #003586 100%);
    color: #fff;
    transform: translateY(0);
}

.top-btn .quick-icon {
    width: 1.9rem;
    height: 2.4rem;
    mask: url("/images/layout/lifetube/common/ico-top.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-top.svg") center / contain no-repeat;
}

/* =========================
FOOTER
========================= */
#footer {
    background: #06111f;
    color: #fff;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 60rem 22.5rem;
    gap: 2.4rem;
    width: min(calc(100% - 12rem), 160rem);
    padding: 7.2rem 0 4rem;
}

.footer-logo {
    width: 22.1rem;
    height: 4rem;
    filter: brightness(0) invert(1);
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-slogan {
    margin-top: 3.4rem;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.46;
    letter-spacing: -0.035em;
}

.footer-desc {
    margin-top: 2.6rem;
    color: #a8b6c7;
    font-size: 1.5rem;
    line-height: 1.66;
}

.footer-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.footer-menu h3 {
    display: flex;
    align-items: center;
    height: 6rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.footer-menu a {
    display: block;
    font-size: 1.4rem;
    line-height: 2.28;
    color: #a8b6c7;
    letter-spacing: -0.02em;
    transition: all 0.25s ease;
}

.footer-menu a:hover {
    color: rgba(168, 182, 199, 0.72);
}

/* FOOTER SNS */
.footer-sns {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2.4rem;
    min-width: 0;
}

.footer-sns-link {
    opacity: 1;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    min-width: max-content;
    height: 6rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-sns-link img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.nstore-link img {
    height: 2.2rem;
}

.youtube-link img {
    height: 2.0rem;
}

.footer-sns-link:hover {
    opacity: 0.75;
    transform: translateY(-0.2rem);
}

/* FOOTER BOTTOM */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .inner {
    display: flex;
    align-items: center;
    gap: 6rem;
    height: 9.8rem;
}
.footer-bottom .inner div {
    display: flex;
    align-items: center;
    gap: 6rem;
}

.footer-bottom p {
    position: relative;
    color: #9caabc;
    font-size: 1.4rem;
    letter-spacing: -0.015em;
}

.footer-bottom p.tel::after,
.footer-bottom p.fax::after {
    content: "";
    position: absolute;
    top: 2px;
    left: -3rem;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.footer-bottom .copy {
    margin-left: auto;
    color: #ddeeff;
}

/* =========================
RESPONSIVE - PC
========================= */
@media (max-width: 1280px) {

    /* COMMON */
    .inner,
    .footer-inner {
        width: calc(100% - 6.4rem);
    }

    /* HEADER */
    .header-inner {
        width: calc(100% - 6rem);
    }

    .gnb-list {
        gap: 4.8rem;
    }

    .header-util {
        gap: 2rem;
        margin-left: 5rem;
    }

    /* QUICK MENU */
    .quick-menu {
        right: 1rem;
        bottom: 1rem;
        gap: 0.5rem;
        --quick-size: 5rem;
        --quick-gap: 0.5rem;
    }

    .quick-link {
        width: 5rem;
        height: 5rem;
    }

    .quick-link:not(.top-btn) {
        padding: 0 1.6rem;
    }

    .quick-icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    .top-btn .quick-icon {
        width: 1.6rem;
        height: 1.8rem;
    }

    /* FOOTER */
    .footer-inner {
        display: flex;
        justify-content: space-between;
    }

    .footer-bottom .inner {
        gap: 3.2rem;
    }

    .footer-bottom p.tel::after,
    .footer-bottom p.fax::after {
        left: -1.6rem;
    }
}
@media (max-width: 1119px) {
    .footer-menu {
        width: auto;
        gap: 4rem;
    }
}

/* =========================
RESPONSIVE - TABLET / MOBILE MENU
========================= */
@media (max-width: 1024px) {
    body.is-mo-menu-open {
        overflow: hidden;
    }

    /* 메뉴 열렸을 때 floating quick menu 숨김 */
    body.is-mo-menu-open .quick-menu {
        display: none;
    }

    /* MENU BACKDROP */
    body.is-mo-menu-open #wrap::before {
        content: "";
        z-index: 48;
        position: fixed;
        inset: 0;
        background: rgba(2, 8, 18, 0.42);
        backdrop-filter: blur(0.4rem);
        -webkit-backdrop-filter: blur(0.4rem);
    }

    /* HEADER */
    #header {
        height: 7.6rem;
    }

    #header,
    #header.scrolled,
    body.is-mo-menu-open #header {
        border-bottom: 1px solid rgba(216, 227, 236, 0.65);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(1.2rem);
        -webkit-backdrop-filter: blur(1.2rem);
    }

    #header:has(.gnb-item:hover),
    #header.scrolled:has(.gnb-item:hover) {
        border-bottom: 1px solid rgba(216, 227, 236, 0.65);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 1rem 3rem rgba(15, 45, 80, 0.08);
    }

    .header-inner {
        position: relative;
        width: calc(100% - 4rem);
    }

    .header-util {
        gap: 0;
        margin-left: auto;
    }

    /* 태블릿부터 상단은 로고 + 버거만 노출 */
    .btn-inquiry,
    .lang {
        display: none;
    }

    /* MOBILE MENU BUTTON */
    .mo-menu {
        z-index: 60;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 4.4rem;
        height: 4.4rem;
        border: 1px solid #d8e3ec;
        border-radius: 50%;
        background: #fff;
        transition:
            border-color 0.25s ease,
            background 0.25s ease,
            box-shadow 0.25s ease;
    }

    .mo-menu span {
        display: block;
        width: 2rem;
        height: 2px;
        margin-left: 0;
        border-radius: 999px;
        background: #0b172a;
        transition:
            transform 0.28s ease,
            margin 0.28s ease,
            background 0.28s ease;
    }

    .mo-menu span+span {
        margin-top: 0.6rem;
    }

    .mo-menu.is-active {
        border-color: #08233d;
        background: #08233d;
        box-shadow: 0 0.8rem 2rem rgba(8, 35, 61, 0.18);
    }

    .mo-menu.is-active span {
        background: #fff;
    }

    .mo-menu.is-active span:first-child {
        transform: translateY(0.4rem) rotate(45deg);
    }

    .mo-menu.is-active span:last-child {
        margin-top: 0.6rem;
        transform: translateY(-0.4rem) rotate(-45deg);
    }

    /* MOBILE MENU PANEL */
    .gnb {
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        z-index: 55;
        position: absolute;
        top: calc(100% + 1.2rem);
        right: 0;
        width: min(46rem, calc(var(--layout-width) - 4rem));
        height: auto;
        max-height: calc(100dvh - 9.6rem);
        margin-left: 0;
        border: 1px solid rgba(216, 227, 236, 0.86);
        border-radius: 2.4rem;
        background: #fff;
        box-shadow: 0 2.4rem 6rem rgba(15, 45, 80, 0.2);
        transform: translateY(-1.2rem);
        transition:
            opacity 0.28s ease,
            visibility 0.28s ease,
            transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }

    body.is-mo-menu-open .gnb {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* MOBILE QUICK LINKS */
    .mo-menu-top {
        display: block;
        padding: 2rem;
        border: 0;
        border-radius: 0;
        background: #eef7fd;
    }

    /* 상단 빠른 링크 버튼 */
    .mo-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
        margin-top: 0;
    }

    .mo-action-link {
        overflow: hidden;
        isolation: isolate;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        min-height: 5rem;
        padding: 1.2rem 1.4rem;
        border: 1px solid #dce8f1;
        border-radius: 1.4rem;
        background: rgba(255, 255, 255, 0.88);
        color: #334155;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -0.02em;
        text-align: center;
        box-shadow: 0 0.6rem 1.4rem rgba(15, 45, 80, 0.04);
        transition:
            border-color 0.22s ease,
            background 0.22s ease,
            color 0.22s ease,
            transform 0.22s ease,
            box-shadow 0.22s ease;
    }

    .mo-action-link:hover {
        border-color: rgba(0, 94, 184, 0.26);
        background: #fff;
        color: #005eb8;
        transform: translateY(-0.2rem);
        box-shadow: 0 0.8rem 1.8rem rgba(15, 45, 80, 0.08);
    }

    .mo-action-link:hover::before {
        opacity: 1;
    }

    /* 고객문의: 문의하기 그라데이션 + 고객문의 아이콘 */
    .mo-action-link.is-primary {
        grid-column: 1 / -1;
        min-height: 5.6rem;
        border-color: transparent;
        background:
            radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.34), transparent 34%),
            linear-gradient(135deg, #005eb8 0%, #003586 58%, #0b74d1 100%);
        color: #fff;
        box-shadow: 0 1.2rem 2.8rem rgba(0, 53, 134, 0.24);
    }

    .mo-action-link.is-primary::before,
    .mo-action-link.is-primary::after {
        display: none;
    }

    .mo-action-link.is-primary:hover {
        border-color: transparent;
        color: #fff;
        background:
            radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.36), transparent 34%),
            linear-gradient(135deg, #003586 0%, #005eb8 60%, #2188df 100%);
        box-shadow: 0 1.4rem 3rem rgba(0, 53, 134, 0.28);
    }

    .mo-action-link.is-primary .quick-icon {
        width: 1.9rem;
        height: 1.9rem;
        background-color: currentColor;
    }

    /* 네이버스토어는 아이콘 유지, 과한 포인트는 주지 않음 */
    .mo-action-link.is-store {
        color: #005eb8;
        background: #eef7fd;
    }

    .mo-action-link.is-store:hover {
        background: #e5f3fc;
        color: #005eb8;
    }

    /* 문의하기 외 버튼 아이콘 유지 */
    .mo-action-link .quick-icon {
        position: relative;
        z-index: 1;
        display: block;
        flex: 0 0 auto;
        width: 1.8rem;
        height: 1.8rem;
        background-color: currentColor;
    }

    .mo-icon-customer {
        mask: url("/images/layout/lifetube/common/ico-inquiry.svg") center / contain no-repeat;
        -webkit-mask: url("/images/layout/lifetube/common/ico-inquiry.svg") center / contain no-repeat;
    }

    .mo-icon-qna {
        mask: url("/images/layout/lifetube/common/ico-qna.svg") center / contain no-repeat;
        -webkit-mask: url("/images/layout/lifetube/common/ico-qna.svg") center / contain no-repeat;
    }

    .mo-icon-store {
        mask: url("/images/layout/lifetube/common/ico-store.svg") center / contain no-repeat;
        -webkit-mask: url("/images/layout/lifetube/common/ico-store.svg") center / contain no-repeat;
    }

    /* 언어 선택: 작고 티 안 나게 */
    .mo-lang {
        display: flex;
        justify-content: flex-end;
        gap: 0.4rem;
        width: fit-content;
        margin: 1.2rem 2rem 2rem auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .mo-lang-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3.2rem;
        height: 2.8rem;
        padding: 0 0.8rem;
        border-radius: 999px;
        color: #94a3b8;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        box-shadow: none;
        transition:
            background 0.2s ease,
            color 0.2s ease;
    }

    .mo-lang-link.active {
        background: #edf2f7;
        color: #334155;
        box-shadow: none;
    }

    .mo-lang-link:hover {
        background: #f1f5f9;
        color: #005eb8;
    }

    .mo-lang-link.active:hover {
        color: #334155;
    }

    /* MOBILE GNB LIST */
    .gnb-list {
        display: block;
        height: auto;
        padding: 2rem;
    }

    .gnb-item {
        display: block;
        height: auto;
        padding: 0;
        border-bottom: 1px solid #edf2f7;
    }

    .gnb-item>a {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
        height: auto;
        min-height: 7.2rem;
        padding: 2.8rem 0.4rem 1.8rem;
        color: #0b172a;
        font-size: 2.2rem;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: -0.045em;
        transition:
            color 0.25s ease,
            padding 0.25s ease;
    }

    /* 영문 라벨 */
    .gnb-item>a::before {
        position: absolute;
        top: 1.4rem;
        left: 0.4rem;
        color: #94a3b8;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
    }

    .gnb-item:nth-child(1)>a::before {
        content: "COMPANY";
    }

    .gnb-item:nth-child(2)>a::before {
        content: "PRODUCT";
    }

    .gnb-item:nth-child(3)>a::before {
        content: "CUSTOMER";
    }

    .gnb-item>a::after {
        display: none;
    }

    .gnb-item.has-depth>a::after {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 1rem;
        height: 1rem;
        margin-bottom: 0.35rem;
        border-right: 2px solid #94a3b8;
        border-bottom: 2px solid #94a3b8;
        transform: rotate(45deg);
        transition:
            transform 0.28s ease,
            border-color 0.28s ease;
    }

    .gnb-item.is-depth-open>a {
        padding-left: 1.4rem;
        color: #005eb8;
    }

    .gnb-item.is-depth-open>a::before {
        left: 1.4rem;
        color: #005eb8;
    }

    .gnb-item.is-depth-open>a::after {
        border-color: #005eb8;
        transform: rotate(-135deg);
    }

    /* 열렸을 때 왼쪽 블루 라인 */
    .gnb-item.is-depth-open>a span {
        color: inherit;
    }

    .gnb-item.is-depth-open {
        position: relative;
    }

    .gnb-item.is-depth-open::before {
        content: "";
        position: absolute;
        top: 1.6rem;
        left: 0;
        width: 0.4rem;
        height: 4.4rem;
        border-radius: 999px;
        background: linear-gradient(180deg, #005eb8 0%, #003586 100%);
    }

    /* MOBILE 2DEPTH ACCORDION */
    .depth-wrap,
    .gnb-item:hover .depth-wrap {
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        pointer-events: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition:
            max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.28s ease;
    }

    .gnb-item.is-depth-open .depth-wrap {
        max-height: 90rem;
        padding: 0 0 2rem;
        pointer-events: auto;
    }

    .depth-wrap::after {
        display: none;
    }

    .depth-inner {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 0;
    }

    .depth-title {
        display: none;
    }

    .company-depth .depth-menu,
    .customer-depth .depth-menu,
    .product-depth-grid {
        display: block;
    }

    .product-depth-grid {
        height: auto;
    }

    .product-depth-col {
        display: block;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .product-depth-col+.product-depth-col {
        margin-top: 0.8rem;
    }

    .product-depth-col h3 {
        display: none;
    }

    .product-all {
        background: transparent;
    }

    .company-depth .depth-menu,
    .customer-depth .depth-menu,
    .product-depth-col .depth-menu {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .depth-menu>li>a,
    .product-all .depth-menu>li>a {
        display: flex;
        align-items: center;
        min-height: 4.6rem;
        padding: 1.2rem 1.4rem;
        border: 0;
        border-radius: 1.2rem;
        background: #f5f9fc;
        color: #334155;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.02em;
        transition:
            background 0.22s ease,
            color 0.22s ease;
    }

    .depth-menu>li>a:hover,
    .product-all .depth-menu>li>a:hover {
        background: #edf6fd;
        color: #005eb8;
        transform: none;
    }

    .depth-more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4.6rem;
        margin-top: 0.6rem;
        padding: 1.2rem 1.4rem;
        border-radius: 1.2rem;
        background: #eef6fd;
        color: #005eb8;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .depth-more::after {
        width: 1.2rem;
        height: 1.2rem;
        background-color: #005eb8;
    }

    /* ACCESSIBILITY */
    .mo-menu:focus-visible,
    .mo-lang-link:focus-visible,
    .mo-action-link:focus-visible,
    .gnb-item>a:focus-visible,
    .depth-menu>li>a:focus-visible,
    .depth-more:focus-visible {
        outline: 3px solid rgba(0, 94, 184, 0.32);
        outline-offset: 3px;
    }


    .quick-menu, .footer-menu {
        display: none;
    }

    /* FOOTER */
    .footer-sns {
        justify-content: flex-start;
    }

    .footer-bottom .inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 2.4rem 0;
    }
    .footer-bottom .inner > div {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
        gap: 4rem;
    }
    .footer-bottom p {
        margin-bottom: 0.8rem;
    }

    .footer-bottom p.tel::after,
    .footer-bottom p.fax::after {
        display: none;
    }

    .footer-bottom .copy {
        margin-left: 0;
    }
}

/* =========================
RESPONSIVE - MOBILE
========================= */
@media (max-width: 768px) {

    /* COMMON */
    .inner,
    .footer-inner {
        width: calc(100% - 4rem);
    }

    /* HEADER */
    #header {
        height: 6.8rem;
    }

    .header-inner {
        width: calc(100% - 4rem);
    }

    .logo a,
    .footer-logo {
        width: 18rem;
        height: 3.3rem;
    }

    /* MOBILE MENU PANEL */
    .gnb {
        top: calc(100% + 1rem);
        width: calc(var(--layout-width) - 4rem);
        max-height: calc(100dvh - 8.4rem);
        border-radius: 2rem;
    }

    .mo-menu-top,
    .gnb-list {
        padding: 1.8rem;
    }

    .mo-action-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .mo-action-link.is-primary,
    .mo-action-link.is-store {
        grid-column: auto;
    }

    .gnb-item>a {
        min-height: 6.8rem;
        padding: 2.6rem 0.2rem 1.7rem;
        font-size: 2rem;
    }

    .gnb-item>a::before {
        top: 1.3rem;
        left: 0.2rem;
        font-size: 1rem;
    }

    .gnb-item.is-depth-open>a {
        padding-left: 1.2rem;
    }

    .gnb-item.is-depth-open>a::before {
        left: 1.2rem;
    }


    .quick-menu {
        display: none;
    }

    /* FOOTER */
    .footer-inner {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 4rem;
        padding: 2.4rem 0 2.4rem;
    }
    .footer-slogan {
        margin-top: 2.8rem;
        font-size: 2.3rem;
    }
    .footer-info {
        order: 2;
    }
    .footer-sns {
        order: 1;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .footer-bottom .inner {
        height: auto;
        flex-direction: column;
    }
    .footer-bottom .copy {
        opacity: 0.6;
        font-size: 1.2rem;
    }
}

/* =========================
RESPONSIVE - SMALL MOBILE
========================= */
@media (max-width: 480px) {

    /* COMMON */
    .inner,
    .footer-inner {
        width: calc(100% - 3.2rem);
    }

    /* HEADER */
    .header-inner {
        width: calc(100% - 3.2rem);
    }

    .logo a,
    .footer-logo {
        width: 16.2rem;
        height: 3rem;
    }

    /* MOBILE MENU PANEL */
    .gnb {
        width: calc(var(--layout-width) - 3.2rem);
        min-width: calc(320px - 3.2rem);
    }

    .mo-menu-top,
    .gnb-list {
        padding: 1.6rem;
    }

    .mo-action-link {
        min-height: 4.6rem;
        font-size: 1.4rem;
    }

    .mo-lang {
        margin-top: 1rem;
    }

    .mo-lang-link {
        min-width: 3rem;
        height: 2.4rem;
        padding: 0 0.7rem;
        font-size: 1.1rem;
    }

    .gnb-item>a {
        min-height: 6.4rem;
        padding: 2.5rem 0.2rem 1.6rem;
        font-size: 1.85rem;
    }

    .gnb-item>a::before {
        top: 1.25rem;
        font-size: 0.95rem;
    }

    .depth-menu>li>a,
    .product-all .depth-menu>li>a {
        font-size: 1.4rem;
    }
}



/* ===== main.css ===== */
/* =========================
COMMON SECTION
========================= */
.eyebrow {
    color: #0077c8;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.12em;
}
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2.4rem, 2.6vw, 4rem);
}
.section-head h2 {
    margin-top: clamp(0.8rem, 0.8vw, 1.2rem);
    color: #111827;
    font-size: clamp(3.8rem, 3.5vw, 5.2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.04em;
}
.section-desc {
    margin-top: clamp(2rem, 1.8vw, 2.8rem);
    font-size: clamp(1.6rem, 1.25vw, 1.9rem);
    line-height: 1.65;
    color: #6b7280;
}



/* =========================
MAIN HERO
========================= */
.main-hero {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100dvh;
    background: #f3faff;
}
.hero-bg {
    inset: 0;
    overflow: hidden;
    position: absolute;
}
.hero-bg::after {
    content: "";
    inset: 0;
    opacity: 0.32;
    position: absolute;
    background: linear-gradient(90deg, #f3faff 0%,#fff 72%);
    pointer-events: none;
}
.hero-video {
    inset: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-content {
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-top: clamp(7rem, 6vw, 9.6rem);
    text-align: center;
}
.hero-content .eyebrow {
    font-size: clamp(1.2rem, 1vw, 1.5rem);
}
.hero-content h2 {
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
    font-size: clamp(4.2rem, 4vw, 6.8rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.045em;
    color: #0b172a;
}
.hero-desc {
    margin-top: clamp(2rem, 2vw, 3rem);
    font-size: clamp(1.6rem, 1.4vw, 2.1rem);
    line-height: 1.65;
    letter-spacing: -0.025em;
    color: #4b5563;
}
.hero-btn {
    overflow: hidden;
    isolation: isolate;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: clamp(1.8rem, 2vw, 3rem);
    height: clamp(5.2rem, 4.4vw, 6.5rem);
    margin-top: clamp(3.2rem, 3vw, 4.6rem);
    padding:
        0.8rem
        0.8rem
        0.8rem
        clamp(2.2rem, 2.1vw, 3.2rem);
    border: 1px solid #005eb8;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #005eb8;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 600;
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    transition:
        color 0.5s ease,
        border-color 0.5s ease;
}
.hero-btn-text {
    z-index: 2;
    position: relative;
    font: inherit;
    color: inherit;
}
.hero-btn::after {
    content: "";
    z-index: 1;
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: clamp(3.6rem, 3.2vw, 4.7rem);
    height: clamp(3.6rem, 3.2vw, 4.7rem);
    border-radius: 50%;
    background: #005eb8;
    box-shadow: 0 0 0 0 #005eb8;
    transition:
        background 0.5s ease,
        box-shadow 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(1.85rem, 1.65vw, 2.45rem);
    z-index: 3;
    width: clamp(1.1rem, 0.9vw, 1.4rem);
    height: clamp(1.1rem, 0.9vw, 1.4rem);
    background-color: #fff;
    mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: center;
    transition:
        transform 0.5s ease,
        background-color 0.9s ease;
}
.hero-btn:hover {
    border-color: #005eb8;
    color: #fff;
}
.hero-btn:hover::after {
    background: #005eb8;
    box-shadow: 0 0 0 32rem #005eb8;
}
.hero-btn:hover::before {
    background-color: #fff;
    transform: translateY(-50%) rotate(0deg);
}
/* =========================
MAIN HERO MOTION
========================= */
.hero-content h2 {
    opacity: 0;
}
.hero-content h2.is-split {
    opacity: 1;
}
.hero-content h2 .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(4.2rem);
    animation: heroCharUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}
.hero-content .eyebrow,
.hero-desc,
.hero-btn {
    opacity: 0;
    transform: translateY(2.4rem);
    animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-content .eyebrow {
    animation-delay: 0.08s;
}
.hero-desc {
    animation-delay: 1.05s;
}
.hero-btn {
    animation-delay: 1.25s;
}
@keyframes heroCharUp {
    0% {
        opacity: 0;
        transform: translateY(4.2rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(2.4rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-content h2,
    .hero-content h2 .char,
    .hero-content .eyebrow,
    .hero-desc,
    .hero-btn {
        opacity: 1;
        transform: none;
        animation: none;
    }
}


/* =========================
PRODUCT
========================= */
.product-section {
    overflow: hidden;
    padding: clamp(12rem, 11vw, 18rem) 0 clamp(9rem, 8.5vw, 14rem);
}
.product-section .inner {
    position: relative;
}
.product-control {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.8rem;
}
.product-control::after {
    content: "";
    order: 3;
    flex: 0 0 auto;
    width: 1px;
    height: 2.6rem;
    margin: 0 1.2rem;
    background: #e5edf5;
}
.product-control .btn-more {
    order: 4;
}

/* 이전/다음 버튼 */
.product-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(4.2rem, 3.4vw, 5rem);
    height: clamp(4.2rem, 3.4vw, 5rem);
    border: 1px solid #d7e0ea;
    border-radius: 50%;
    cursor: pointer;
    transition:
        border-color 0.28s ease,
        background 0.28s ease,
        transform 0.28s ease,
        opacity 0.28s ease;
}
.product-nav::before {
    content: "";
    display: block;
    width: 0.8rem;
    height: 1.3rem;
    background-color: #5b6b7d;
    mask: url("/images/layout/lifetube/common/ico-arr2.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr2.svg") center / contain no-repeat;
    transition: background-color 0.25s ease;
}
.product-prev {
    order: 1;
}
.product-prev::before { 
    transform: rotate(180deg);
}
.product-next {
    order: 2;
}
.product-next::before { 
    transform: rotate(0deg);
}
.product-nav:hover {
    border-color: #005eb8;
    background: #f3faff;
}
.product-nav:hover::before {
    background-color: #005eb8;
}
.product-nav:disabled,
.product-nav.is-disabled {
    opacity: 0.32;
    cursor: default;
    pointer-events: none;
    background: transparent;
    border-color: #d7e0ea;
}
.product-nav:disabled::before,
.product-nav.is-disabled::before {
    background-color: #b8c3cf;
}
/* 제품 전체보기 버튼 */
.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.6rem, 1.7vw, 2.5rem);
    height: clamp(4.2rem, 3.4vw, 5rem);
    margin-left: 0;
    padding:
        0
        clamp(1.3rem, 1.1vw, 1.7rem)
        0
        clamp(2rem, 1.8vw, 2.7rem);
    border: 1px solid #c9d4e0;
    border-radius: 999px;
    color: #1a2433;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    transition:
        border-color 0.28s ease,
        background 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
}
.btn-more:hover {
    border-color: #005eb8;
    background: #f3faff;
    color: #005eb8;
}
.btn-more span {
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: url("/images/layout/lifetube/main/ico-more.png") center / contain no-repeat;
    transition: transform 0.28s ease;
}
.btn-more:hover span {
    transform: rotate(90deg);
}
.product-slider {
    overflow: hidden;
    margin-top: clamp(2.4rem, 2.2vw, 3.4rem);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.product-slider.is-dragging {
    cursor: grabbing;
}
.product-slider img,
.product-slider a {
    -webkit-user-drag: none;
    user-select: none;
}
.product-slider img {
    pointer-events: none;
}
.product-track {
    display: flex;
    gap: clamp(1.6rem, 1.6vw, 2.4rem);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.product-card {
    flex: 0 0 calc((100% - clamp(4.8rem, 4.8vw, 7.2rem)) / 4);
    min-width: 0;
}
.product-card a {
    overflow: hidden;
    position: relative;
    display: block;
    height: clamp(38rem, 32vw, 50rem);
    border: 1px solid #e2edf5;
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background: #edf7fc;
    transition:
        border-color 0.32s ease,
        background 0.32s ease,
        box-shadow 0.32s ease;
}
.product-card .thumb {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding:
        clamp(2rem, 2vw, 3rem)
        clamp(1.4rem, 1.4vw, 2rem)
        0;
}
.product-card .thumb img {
    position: absolute;
    top: clamp(7rem, 6.5vw, 10rem);
    left: 35%;
    display: block;
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: clamp(40rem, 36vw, 55rem);
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(0) scale(1);
    transform-origin: center bottom;
    transition:
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
}
.product-info {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    min-height: clamp(14rem, 12.5vw, 19rem);
    padding: clamp(2.2rem, 2.1vw, 3.2rem);
    background: rgba(247, 251, 254, 0.6);
    transition:
        background 0.32s ease,
        backdrop-filter 0.32s ease;
}
.product-info p {
    margin-top: 0;
    color: #111827;
    font-size: clamp(2rem, 1.75vw, 2.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.035em;
    transition: color 0.32s ease;
}
@media (hover: hover) and (pointer: fine) {
    .product-card a:hover {
        border-color: rgba(226, 237, 245, 0.24);
        background: #f1f9ff;
    }
    .product-card a:hover .thumb img {
        transform: translateY(-0.8rem) scale(1.045);
        filter: drop-shadow(0 1.2rem 1.8rem rgba(0, 36, 72, 0.12));
    }
    .product-card a:hover .product-info {
        background: rgba(255, 255, 255, 0.66);
        backdrop-filter: blur(0.8rem);
        -webkit-backdrop-filter: blur(0.8rem);
        box-shadow: 0 -0.8rem 2.4rem rgba(255, 255, 255, 0.2);
    }
    .product-card a:hover .product-info p {
        color: #08233d;
    }
}


/* =========================
PRODUCT SCROLL MOTION
========================= */
.product-section.motion-ready .section-head .eyebrow {
    opacity: 0;
    transform: translateY(1.2rem);
    filter: blur(0.3rem);
    transition:
        opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-section .section-head h2.is-line-split {
    color: transparent;
}
.product-section .section-head h2 .title-line {
    overflow: hidden;
    position: relative;
    display: block;
    width: fit-content;
    color: transparent;
    line-height: 1.25;
}
.product-section .section-head h2 .line-base,
.product-section .section-head h2 .line-fill {
    display: block;
    white-space: nowrap;
}
.product-section .section-head h2 .line-base {
    color: #c8d0da;
}
.product-section .section-head h2 .line-fill {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    color: #111827;
    transition: width 0.96s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--line-delay);
}
.product-section.motion-ready .section-desc,
.product-section.motion-ready .product-control {
    opacity: 0;
    transform: translateY(1.6rem);
    filter: blur(0.28rem);
    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-section.motion-ready .product-card {
    position: relative;
    z-index: var(--card-z, 1);
    opacity: 0;
    transform:
        translateX(var(--card-stack-x, 0px))
        scale(var(--card-start-scale, 0.98));
    transform-origin: left center;
    filter: blur(0.28rem);
    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.08s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--card-delay, 0s);
    will-change: opacity, transform, filter;
}
.product-section.is-motion-active .section-head .eyebrow {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.product-section.is-motion-active .section-head h2 .line-fill {
    width: 100%;
}
.product-section.is-motion-active .section-desc {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 0.9s;
}
.product-section.is-motion-active .product-control {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 0.98s;
}
.product-section.is-motion-active .product-card {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
    .product-section.motion-ready .section-head .eyebrow,
    .product-section.motion-ready .section-desc,
    .product-section.motion-ready .product-control,
    .product-section.motion-ready .product-card {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
    .product-section .section-head h2.is-line-split {
        color: #111827;
    }
    .product-section .section-head h2 .title-line,
    .product-section .section-head h2 .line-base,
    .product-section .section-head h2 .line-fill {
        position: static;
        display: inline;
        width: auto;
        color: inherit;
        transition: none;
    }
}


/* =========================
QUALITY
========================= */
.quality-section {
    overflow: hidden;
    z-index: 2;
    position: relative;
    padding: clamp(12rem, 11vw, 18rem) 0 clamp(9rem, 8.5vw, 14rem);
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background: url("/images/layout/lifetube/main/quality-bg.jpg") center top / cover no-repeat;
}
.quality-inner {
    display: flex;
    justify-content: space-between;
    gap: clamp(4rem, 4vw, 6rem);
}
.quality-section .section-head {
    display: block;
}
.quality-section .section-head h2 {
    color: #fff;
}
.quality-section .section-desc {
    color: rgba(255, 255, 255, 0.74);
}
.quality-list {
    display: flex;
    align-items: center;
    gap: clamp(2.4rem, 3.8vw, 5.7rem);
    margin-top: clamp(6rem, 6vw, 9.6rem);
}
.quality-list li {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: clamp(8.4rem, 7vw, 10.4rem);
    height: clamp(8.4rem, 7vw, 10.4rem);
    border-radius: 50%;
    color: #d8e3f3;
    background: rgba(42, 52, 71, 0.88);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    cursor: pointer;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}
.quality-list li:hover {
    transform: translateY(-0.4rem);
}
.quality-list li.active {
    color: #fff;
    background: #005eb8;
}
.quality-list strong {
    margin-top: 0.7rem;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
}
.quality-card {
    overflow: hidden;
    position: relative;
    flex: 0 0 clamp(48rem, 40vw, 62rem);
    width: clamp(48rem, 40vw, 62rem);
    height: clamp(48rem, 40vw, 62rem);
    border-radius: clamp(4.8rem, 4.8vw, 7.2rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}
.quality-card.is-changing {
    opacity: 0.45;
    transform: translateY(0.8rem);
}
.quality-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.quality-badge {
    z-index: 2;
    position: absolute;
    top: clamp(3rem, 3vw, 4.5rem);
    left: clamp(3rem, 3vw, 4.5rem);
    display: inline-flex;
    align-items: center;
    height: clamp(3.6rem, 3vw, 4.4rem);
    padding: 0 clamp(2rem, 2vw, 3rem);
    border-radius: 999px;
    color: #163354;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 600;
    line-height: 1;
    background: rgba(255, 255, 255, 0.96);
}
.quality-card-text {
    z-index: 2;
    position: absolute;
    left: clamp(3rem, 3vw, 4.5rem);
    bottom: clamp(4.6rem, 4.6vw, 7rem);
    color: #fff;
}
.quality-card-text h3 {
    font-size: clamp(3.4rem, 3vw, 4.6rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -0.025em;
}
.quality-card-text p {
    margin-top: clamp(1.8rem, 1.8vw, 2.6rem);
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.84);
}
/* 아이콘 */
.quality-icon {
    display: block;
    flex: 0 0 auto;
    background-color: currentColor;
}
.quality-list .quality-icon {
    width: clamp(2.4rem, 2vw, 3rem);
    height: clamp(2.4rem, 2vw, 3rem);
}
.quality-card-text .quality-icon {
    width: clamp(4.2rem, 3.8vw, 5.8rem);
    height: clamp(4.2rem, 3.8vw, 5.8rem);
    margin-bottom: clamp(1.1rem, 1.1vw, 1.6rem);
}
/* 정밀 생산 */
.quality-icon-precision {
    mask: url("/images/layout/lifetube/main/ico-quality-precision.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/main/ico-quality-precision.svg") center / contain no-repeat;
}
/* 고객 맞춤 */
.quality-icon-custom {
    mask: url("/images/layout/lifetube/main/ico-quality-custom.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/main/ico-quality-custom.svg") center / contain no-repeat;
}
/* 생산 대응 */
.quality-icon-production {
    mask: url("/images/layout/lifetube/main/ico-quality-production.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/main/ico-quality-production.svg") center / contain no-repeat;
}
/* 기술 성장 */
.quality-icon-growth {
    mask: url("/images/layout/lifetube/main/ico-quality-growth.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/main/ico-quality-growth.svg") center / contain no-repeat;
}

/* =========================
QUALITY SCROLL MOTION
========================= */
.quality-section.motion-ready {
    opacity: 0;
    transform: translateY(8rem);
    clip-path: inset(5rem 0 0 0 round 3.2rem);
    transition:
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, clip-path;
}
.quality-section.motion-ready.is-motion-active {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0 round 3.2rem);
}
.quality-section.motion-ready .section-head .eyebrow,
.quality-section.motion-ready .section-head h2,
.quality-section.motion-ready .section-desc,
.quality-section.motion-ready .quality-list li,
.quality-section.motion-ready .quality-card,
.quality-section.motion-ready .quality-badge,
.quality-section.motion-ready .quality-card-text .quality-icon,
.quality-section.motion-ready .quality-card-text h3,
.quality-section.motion-ready .quality-card-text p {
    opacity: 0;
    transform: translateY(3.6rem);
    filter: blur(0.35rem);
    transition:
        opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
.quality-section.motion-ready .quality-card {
    transform: translateY(6rem) scale(0.97);
}
.quality-section.motion-ready .quality-list li {
    transform: translateY(3.2rem) scale(0.94);
}
.quality-section.is-child-active .section-head .eyebrow,
.quality-section.is-child-active .section-head h2,
.quality-section.is-child-active .section-desc,
.quality-section.is-child-active .quality-list li,
.quality-section.is-child-active .quality-card,
.quality-section.is-child-active .quality-badge,
.quality-section.is-child-active .quality-card-text .quality-icon,
.quality-section.is-child-active .quality-card-text h3,
.quality-section.is-child-active .quality-card-text p {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
.quality-section.is-child-active .section-head .eyebrow {
    transition-delay: 0s;
}
.quality-section.is-child-active .section-head h2 {
    transition-delay: 0.12s;
}
.quality-section.is-child-active .section-desc {
    transition-delay: 0.24s;
}
.quality-section.is-child-active .quality-card {
    transition-delay: 0.2s;
}
.quality-section.is-child-active .quality-list li {
    transition-delay: var(--quality-delay);
}
.quality-section.is-child-active .quality-badge {
    transition-delay: 0.48s;
}
.quality-section.is-child-active .quality-card-text .quality-icon {
    transition-delay: 0.58s;
}
.quality-section.is-child-active .quality-card-text h3 {
    transition-delay: 0.68s;
}
.quality-section.is-child-active .quality-card-text p {
    transition-delay: 0.8s;
}
.quality-section.is-motion-done,
.quality-section.is-motion-done .section-head .eyebrow,
.quality-section.is-motion-done .section-head h2,
.quality-section.is-motion-done .section-desc,
.quality-section.is-motion-done .quality-list li,
.quality-section.is-motion-done .quality-card,
.quality-section.is-motion-done .quality-badge,
.quality-section.is-motion-done .quality-card-text .quality-icon,
.quality-section.is-motion-done .quality-card-text h3,
.quality-section.is-motion-done .quality-card-text p {
    will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
    .quality-section.motion-ready,
    .quality-section.motion-ready .section-head .eyebrow,
    .quality-section.motion-ready .section-head h2,
    .quality-section.motion-ready .section-desc,
    .quality-section.motion-ready .quality-list li,
    .quality-section.motion-ready .quality-card,
    .quality-section.motion-ready .quality-badge,
    .quality-section.motion-ready .quality-card-text .quality-icon,
    .quality-section.motion-ready .quality-card-text h3,
    .quality-section.motion-ready .quality-card-text p {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }
}


/* =========================
SINCE
========================= */
.since-section {
    position: relative;
    margin-top: -32px;
    padding: clamp(15rem, 13vw, 21.2rem) 0 clamp(9rem, 8.5vw, 14rem);
    background: #020807;
}
.since-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(3.2rem, 3.4vw, 5.2rem);
}

/* 왼쪽 영역 */
.since-left {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    isolation: isolate;
}
.since-bg-text {
    z-index: 1;
    position: absolute;
    top: clamp(-7rem, -4.5vw, -4.8rem);
    left: 0;
    font-size: clamp(12rem, 11vw, 18rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    pointer-events: none;
}
.since-img {
    z-index: 2;
    position: relative;
    display: block;
    width: clamp(48rem, 42vw, 64.4rem);
    margin-left: clamp(-5.2rem, -3.4vw, -3rem);
    animation: sinceFloat 3.2s ease-in-out infinite;
    will-change: transform;
}
@keyframes sinceFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1.8rem);
    }
    100% {
        transform: translateY(0);
    }
}
.since-left h2 {
    z-index: 3;
    position: relative;
    margin-top: clamp(-13.2rem, -8.5vw, -9rem);
    font-size: clamp(3.4rem, 3vw, 4.6rem);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.02em;
    color: #fff;
}
.btn-history {
    z-index: 3;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: clamp(18rem, 14vw, 21.2rem);
    height: clamp(5rem, 3.8vw, 5.6rem);
    margin-top: clamp(2.8rem, 2.6vw, 4rem);
    padding: 0 clamp(1.6rem, 1.4vw, 2rem);
    border: 1px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: transparent;
    transition:
        color 0.5s ease,
        border-color 0.5s ease;
}
.btn-history::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    right: 2.6rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #fff;
    transform: translate(50%, -50%) scale(1);
    transform-origin: center;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-history span {
    position: relative;
    z-index: 1;
    display: block;
    width: 12px;
    height: 12px;
    font-size: 0;
    border-radius: 999px;
    background: #fff;
    transition: background 0.5s ease-in-out;
}
.btn-history:hover {
    border-color: #fff;
    color: #020807;
}
.btn-history:hover::before {
    transform: translate(50%, -50%) scale(36);
}
.btn-history:hover span {
    background: #020807;
}

/* 오른쪽 영역 */
.since-stats {
    position: relative;
    flex: 0 0 clamp(42rem, 37vw, 58rem);
    display: flex;
    flex-direction: column;
    gap: clamp(5rem, 4.8vw, 7.2rem);
    padding-left: clamp(3.4rem, 3.2vw, 5rem);
}
.since-stats::before {
    content: "";
    position: absolute;
    top: clamp(-7rem, -4.5vw, -4.5rem);
    bottom: clamp(-14rem, -8vw, -9rem);
    left: 0;
    width: 1px;
    background: rgba(43, 75, 95, 0.58);
}
.stat-item {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2rem, 2.6vw, 4rem);
    color: #fff;
}
.stat-item p::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: calc(clamp(3.4rem, 3.2vw, 5rem) * -1 - 0.35rem);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #4da3ff;
    box-shadow: 0 0 1.4rem rgba(63, 151, 255, 0.7);
    transform: translateY(-50%);
}
.stat-item div {
    flex: 0 0 clamp(15rem, 12vw, 19rem);
    min-width: clamp(15rem, 12vw, 19rem);
    margin-bottom: 1rem;
}
.stat-item p {
    position: relative;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    letter-spacing: -0.05em;
    color: #fff;
}
.stat-item span:not(.stat-num) {
    display: block;
    margin-top: clamp(0.8rem, 0.8vw, 1.2rem);
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}
.stat-item strong {
    flex: 0 0 clamp(24rem, 22vw, 34rem);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: clamp(1.2rem, 1.4vw, 2rem);
    font-family: "SUIT", sans-serif;
    font-size: clamp(18rem, 16vw, 26rem);
    font-weight: 100;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.96);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.stat-num {
    display: block;
    width: 2ch;
    text-align: right;
    font: inherit;
    line-height: inherit;
    color: inherit;
    white-space: nowrap;
    letter-spacing: -0.12em;
}
.stat-item strong.is-rolling {
    opacity: 0.82;
    filter: blur(0.08rem);
}
.stat-item strong::after {
    content: attr(data-unit);
    flex: 0 0 auto;
    margin-bottom: clamp(0.8rem, 0.8vw, 1.2rem);
    font-size: clamp(3rem, 3vw, 4.4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.4);
}

/* =========================
SINCE SCROLL MOTION
========================= */
.since-section.motion-ready .since-bg-text,
.since-section.motion-ready .since-img,
.since-section.motion-ready .since-left h2,
.since-section.motion-ready .btn-history {
    opacity: 0;
    transform: translateY(4.2rem);
    filter: blur(0.35rem);
    transition:
        opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.82s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
.since-section.motion-ready:not(.is-motion-done) .since-img {
    animation: none;
}
.since-section.is-left-active .since-bg-text,
.since-section.is-left-active .since-img,
.since-section.is-left-active .since-left h2,
.since-section.is-left-active .btn-history {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.since-section.is-left-active .since-bg-text {
    transition-delay: 0s;
}
.since-section.is-left-active .since-img {
    transition-delay: 0.28s;
}
.since-section.is-left-active .since-left h2 {
    transition-delay: 0.56s;
}
.since-section.is-left-active .btn-history {
    transition-delay: 0.84s;
}
.since-section.motion-ready .since-left {
    z-index: 3;
}
.since-section.motion-ready .since-stats {
    z-index: 1;
    opacity: 0;
    transform: translateX(-7rem);
    clip-path: inset(-8rem 100% -16rem -2rem);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, clip-path;
}

.since-section.is-stats-active .since-stats {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(-8rem 0 -16rem -2rem);
}
.since-section.motion-ready .stat-item {
    opacity: 0;
    transform: translateX(-3.6rem);
    filter: blur(0.28rem);
    transition:
        opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}
.since-section.is-stats-active .stat-item {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
.since-section.is-stats-active .stat-item:nth-child(1) {
    transition-delay: 0.12s;
}
.since-section.is-stats-active .stat-item:nth-child(2) {
    transition-delay: 0.34s;
}
.since-section.is-motion-done .since-bg-text,
.since-section.is-motion-done .since-img,
.since-section.is-motion-done .since-left h2,
.since-section.is-motion-done .btn-history,
.since-section.is-motion-done .since-stats,
.since-section.is-motion-done .stat-item {
    will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
    .since-section.motion-ready .since-bg-text,
    .since-section.motion-ready .since-img,
    .since-section.motion-ready .since-left h2,
    .since-section.motion-ready .btn-history,
    .since-section.motion-ready .since-stats,
    .since-section.motion-ready .stat-item {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }
}


/* =========================
MAIN LINK
========================= */
.link-section {
    padding: clamp(12rem, 11vw, 18rem) 0 clamp(9rem, 8.5vw, 14rem);
}
.link-title {
    margin-bottom: clamp(2rem, 1.8vw, 2.8rem);
    text-align: center;
    color: #111827;
    font-size: clamp(2rem, 1.75vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}
.link-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 1.6vw, 2.4rem);
}

/* ABOUT */
.link-section .eyebrow {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    letter-spacing: 0.08em;
}
.link-section h3 {
    margin-top: clamp(1.2rem, 1.3vw, 2rem);
    color: #fff;
    font-size: clamp(2.6rem, 2.3vw, 3.4rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.04em;
}
.link-section .desc {
    margin-top: clamp(1.8rem, 1.8vw, 2.8rem);
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1.4rem, 1.05vw, 1.6rem);
    line-height: 1.625;
    letter-spacing: -0.02em;
}
.about-card {
    overflow: hidden;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(46rem, 38vw, 56.4rem);
    padding:
        clamp(4rem, 3.8vw, 5.8rem)
        clamp(3.6rem, 3.4vw, 5.2rem)
        clamp(3.2rem, 2.8vw, 4.2rem);
    border-radius: clamp(2rem, 1.8vw, 2.8rem);
    background: url("/images/layout/lifetube/main/about-bg.jpg") center / cover no-repeat;
    color: #fff;
}
.about-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: auto;
}
.about-links a {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(5.4rem, 4.4vw, 6.4rem);
    padding: 0 clamp(2rem, 2vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    transition:
        border-color 0.28s ease,
        background 0.28s ease,
        transform 0.28s ease;
}
.about-links a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.26),
        rgba(255, 255, 255, 0.06)
    );
    transition: opacity 0.28s ease;
}
.about-links a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
    transform: skewX(-18deg);
    transition: left 0.55s ease;
}
.about-links a span {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0;
    line-height: 1;
    background-color: #fff;
    mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    transform: rotate(-45deg);
    transform-origin: center;
    transition:
        transform 0.28s ease,
        background-color 0.28s ease;
}
.about-links a:hover {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    transform: translateY(-0.3rem);
}
.about-links a:hover::before {
    opacity: 0.7;
}
.about-links a:hover::after {
    left: 130%;
}
.about-links a:hover span {
    transform: rotate(0deg) translateX(0.3rem);
}
.right-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:
        clamp(24rem, 19vw, 28rem)
        clamp(22rem, 18vw, 26rem);
    gap: clamp(1.6rem, 1.6vw, 2.4rem);
}
.customer-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(34rem, 28vw, 49.4rem));
    gap: clamp(2.4rem, 2.4vw, 3.6rem);
    min-height: clamp(24rem, 19vw, 28rem);
    padding: clamp(2.8rem, 2.4vw, 3.6rem);
    border-radius: clamp(2.2rem, 2vw, 3rem);
    color: #fff;
    background:
        linear-gradient(
            -90deg,
            rgba(79, 174, 255, 0.16) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        #08233d;
}
.customer-title {
    position: relative;
    min-width: 12.4rem;
}
.customer-title::before {
    content: "";
    position: absolute;
    bottom: clamp(-1.4rem, -0.9vw, -1rem);
    left: clamp(-2rem, -1.3vw, -1.4rem);
    display: block;
    width: clamp(8rem, 7.2vw, 10.8rem);
    height: clamp(8rem, 7.2vw, 10.8rem);
    margin-top: auto;
    background: url("/images/layout/lifetube/main/ico-customer.svg") center / contain no-repeat;
}
.customer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.8rem, 0.7vw, 1rem);
}
.customer-links a {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: clamp(1.4rem, 1.2vw, 1.8rem);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    transition:
        border-color 0.28s ease,
        background 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
}
.customer-links a::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(
        135deg,
        rgba(79, 174, 255, 0.18),
        rgba(255, 255, 255, 0.04)
    );
    transition: opacity 0.28s ease;
    pointer-events: none;
}
.customer-links a:hover {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-0.3rem);
}
.customer-links a:hover::after {
    opacity: 1;
}
.customer-links a:hover .link-plus {
    border-color: rgba(255, 255, 255, 0.86);
    transform: rotate(90deg);
}
.customer-links a:hover .link-plus::before,
.customer-links a:hover .link-plus::after {
    background: rgba(255, 255, 255, 0.86);
}
.link-plus {
    position: relative;
    display: block;
    width: clamp(1.6rem, 1.4vw, 2rem);
    height: clamp(1.6rem, 1.4vw, 2rem);
    margin-bottom: clamp(1.2rem, 1.2vw, 1.8rem);
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    transition:
        border-color 0.28s ease,
        transform 0.28s ease;
}
.link-plus::before,
.link-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.42);
    transform: translate(-50%, -50%);
    transition: background 0.28s ease;
}
.link-plus::before {
    width: 1rem;
    height: 2px;
}
.link-plus::after {
    width: 2px;
    height: 1rem;
}

/* SMALL CARD */
.small-card {
    overflow: hidden;
    position: relative;
    display: block;
    min-height: clamp(22rem, 18vw, 26rem);
    padding:
        clamp(3rem, 2.5vw, 3.8rem)
        clamp(2.4rem, 2.1vw, 3.2rem);
    border: 1px solid #dce8f1;
    border-radius: clamp(2rem, 1.8vw, 2.8rem);
    background: #f8fbfd;
}
.small-card::after {
    content: "";
    position: absolute;
    top: clamp(3rem, 2.8vw, 4.2rem);
    right: clamp(2.4rem, 2.1vw, 3.2rem);
    display: block;
    width: clamp(3.2rem, 2.7vw, 4rem);
    height: clamp(3.2rem, 2.7vw, 4rem);
    background-color: #283c82;
    transition:
        background-color 0.28s ease,
        transform 0.28s ease;
}
.small-card .eyebrow {
    color: #4a6fa1;
}
.small-card h3 {
    color: #111827;
    font-size: clamp(2rem, 1.6vw, 2.4rem);
}
.small-card .desc {
    color: #667085;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: -0.02em;
}

/* 제품 문의 카드 */
.inquiry-card {
    cursor: pointer;
    background:
        radial-gradient(circle at 0% 0%, rgba(206, 231, 250, 0.8), transparent 46%),
        #f4f9fd;
    transition:
        border-color 0.28s ease,
        transform 0.28s ease;
}
.inquiry-card::after {
    mask: url("/images/layout/lifetube/main/ico-inquiry.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/main/ico-inquiry.svg") center / contain no-repeat;
}
.inquiry-card:hover {
    border-color: rgba(79, 174, 255, 0.45);
}
.inquiry-card:hover::after {
    background-color: #005eb8;
}

/* 전화 상담 카드 */
.contact-card {
    cursor: auto;
    transition: border-color 0.28s ease;
}
.contact-card::after {
    mask: url("/images/layout/lifetube/main/ico-contact.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/main/ico-contact.svg") center / contain no-repeat;
}
.contact-card:hover {
    border-color: rgba(79, 174, 255, 0.45);
}
.contact-card:hover::after {
    background-color: #005eb8;
}
.contact-card .tel {
    margin-top: clamp(-1.34rem, -0.8vw, -0.8rem);
}
.contact-card .tel strong {
    color: #0e4b8f;
    font-size: clamp(2rem, 1.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    transition: color 0.28s ease;
}
.contact-card:hover .tel strong {
    color: #005eb8;
}

/* =========================
LINK SCROLL MOTION
========================= */
.link-section.motion-ready:not(.is-motion-done) .link-title,
.link-section.motion-ready:not(.is-motion-done) .about-card,
.link-section.motion-ready:not(.is-motion-done) .about-card .eyebrow,
.link-section.motion-ready:not(.is-motion-done) .about-card h3,
.link-section.motion-ready:not(.is-motion-done) .about-card .desc,
.link-section.motion-ready:not(.is-motion-done) .about-links a,
.link-section.motion-ready:not(.is-motion-done) .customer-card,
.link-section.motion-ready:not(.is-motion-done) .customer-title .eyebrow,
.link-section.motion-ready:not(.is-motion-done) .customer-title h3,
.link-section.motion-ready:not(.is-motion-done) .customer-title::before,
.link-section.motion-ready:not(.is-motion-done) .customer-links a,
.link-section.motion-ready:not(.is-motion-done) .small-card,
.link-section.motion-ready:not(.is-motion-done) .small-card .eyebrow,
.link-section.motion-ready:not(.is-motion-done) .small-card h3,
.link-section.motion-ready:not(.is-motion-done) .small-card .desc,
.link-section.motion-ready:not(.is-motion-done) .small-card::after {
    opacity: 0;
    transform: translateY(2.8rem);
    filter: blur(0.24rem);
    transition:
        opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.82s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
.link-section.motion-ready:not(.is-motion-done) .about-card {
    transform: translateY(4.4rem) scale(0.988);
    transition-duration: 0.94s;
}
.link-section.motion-ready:not(.is-motion-done) .customer-card {
    transform: translateY(3.8rem) scale(0.99);
    transition-duration: 0.9s;
}
.link-section.motion-ready:not(.is-motion-done) .small-card {
    transform: translateY(3.2rem) scale(0.99);
}
.link-section.motion-ready:not(.is-motion-done) .customer-title::before {
    transform: translateY(2.2rem) scale(0.96);
}
.link-section.is-motion-active:not(.is-motion-done) .link-title,
.link-section.is-motion-active:not(.is-motion-done) .about-card,
.link-section.is-motion-active:not(.is-motion-done) .about-card .eyebrow,
.link-section.is-motion-active:not(.is-motion-done) .about-card h3,
.link-section.is-motion-active:not(.is-motion-done) .about-card .desc,
.link-section.is-motion-active:not(.is-motion-done) .about-links a,
.link-section.is-motion-active:not(.is-motion-done) .customer-card,
.link-section.is-motion-active:not(.is-motion-done) .customer-title .eyebrow,
.link-section.is-motion-active:not(.is-motion-done) .customer-title h3,
.link-section.is-motion-active:not(.is-motion-done) .customer-title::before,
.link-section.is-motion-active:not(.is-motion-done) .customer-links a,
.link-section.is-motion-active:not(.is-motion-done) .small-card,
.link-section.is-motion-active:not(.is-motion-done) .small-card .eyebrow,
.link-section.is-motion-active:not(.is-motion-done) .small-card h3,
.link-section.is-motion-active:not(.is-motion-done) .small-card .desc,
.link-section.is-motion-active:not(.is-motion-done) .small-card::after {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
.link-section.is-motion-active:not(.is-motion-done) .link-title {
    transition-delay: 0s;
}
.link-section.is-motion-active:not(.is-motion-done) .about-card {
    transition-delay: 0.12s;
}
.link-section.is-motion-active:not(.is-motion-done) .about-card .eyebrow {
    transition-delay: 0.3s;
}
.link-section.is-motion-active:not(.is-motion-done) .about-card h3 {
    transition-delay: 0.4s;
}
.link-section.is-motion-active:not(.is-motion-done) .about-card .desc {
    transition-delay: 0.5s;
}
.link-section.is-motion-active:not(.is-motion-done) .about-links a {
    transition-delay: var(--link-about-delay);
}
.link-section.is-motion-active:not(.is-motion-done) .customer-card {
    transition-delay: 0.26s;
}
.link-section.is-motion-active:not(.is-motion-done) .customer-title .eyebrow {
    transition-delay: 0.44s;
}
.link-section.is-motion-active:not(.is-motion-done) .customer-title h3 {
    transition-delay: 0.54s;
}
.link-section.is-motion-active:not(.is-motion-done) .customer-title::before {
    transition-delay: 0.6s;
}
.link-section.is-motion-active:not(.is-motion-done) .customer-links a {
    transition-delay: var(--link-customer-delay);
}
.link-section.is-motion-active:not(.is-motion-done) .small-card {
    transition-delay: var(--link-small-delay);
}
.link-section.is-motion-active:not(.is-motion-done) .small-card .eyebrow {
    transition-delay: calc(var(--link-small-delay) + 0.1s);
}
.link-section.is-motion-active:not(.is-motion-done) .small-card h3 {
    transition-delay: calc(var(--link-small-delay) + 0.18s);
}
.link-section.is-motion-active:not(.is-motion-done) .small-card .desc {
    transition-delay: calc(var(--link-small-delay) + 0.26s);
}
.link-section.is-motion-active:not(.is-motion-done) .small-card::after {
    transition-delay: calc(var(--link-small-delay) + 0.16s);
}
.link-section.is-motion-done .link-title,
.link-section.is-motion-done .about-card,
.link-section.is-motion-done .about-card .eyebrow,
.link-section.is-motion-done .about-card h3,
.link-section.is-motion-done .about-card .desc,
.link-section.is-motion-done .about-links a,
.link-section.is-motion-done .customer-card,
.link-section.is-motion-done .customer-title .eyebrow,
.link-section.is-motion-done .customer-title h3,
.link-section.is-motion-done .customer-title::before,
.link-section.is-motion-done .customer-links a,
.link-section.is-motion-done .small-card,
.link-section.is-motion-done .small-card .eyebrow,
.link-section.is-motion-done .small-card h3,
.link-section.is-motion-done .small-card .desc,
.link-section.is-motion-done .small-card::after {
    opacity: 1;
    filter: none;
    will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
    .link-section.motion-ready .link-title,
    .link-section.motion-ready .about-card,
    .link-section.motion-ready .about-card .eyebrow,
    .link-section.motion-ready .about-card h3,
    .link-section.motion-ready .about-card .desc,
    .link-section.motion-ready .about-links a,
    .link-section.motion-ready .customer-card,
    .link-section.motion-ready .customer-title .eyebrow,
    .link-section.motion-ready .customer-title h3,
    .link-section.motion-ready .customer-title::before,
    .link-section.motion-ready .customer-links a,
    .link-section.motion-ready .small-card,
    .link-section.motion-ready .small-card .eyebrow,
    .link-section.motion-ready .small-card h3,
    .link-section.motion-ready .small-card .desc,
    .link-section.motion-ready .small-card::after {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}





/* =========================
RESPONSIVE
========================= */
/* __________ PC __________ */
@media (max-width: 1280px) {
    /* PRODUCT */
    .product-card {
        flex: 0 0 calc((100% - 4.8rem) / 3);
    }

    /* LINK */
    .customer-card {
        grid-template-columns: minmax(12.5rem, 1fr) minmax(0, 34rem);
    }
    .customer-title {
        min-width: 12.5rem;
    }
}

/* __________ Tablet __________ */
@media (max-width: 1024px) {
    /* COMMON */
    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    /* HERO */
    .main-hero {
        height: 55rem;
        min-height: 55rem;
        padding-top: 7.5rem;
    }
    .hero-content {
        padding: 0 3rem;
    }

    /* PRODUCT */
    .product-card {
        flex: 0 0 calc((100% - 2.4rem) / 2);
    }

    /* QUALITY */
    .quality-inner {
        display: block;
    }
    .quality-list {
        flex-wrap: wrap;
        gap: 1.6rem;
        margin-top: 5.6rem;
    }
    .quality-card {
        width: 100%;
        height: 54rem;
        margin-top: 5.6rem;
    }

    /* SINCE */
    .since-section {
        margin-top: -2.4rem;
    }
    .since-inner {
        gap: 1rem;
    }
    .since-img {
        width: min(56rem, 86vw);
    }
    .since-stats {
        flex: none;
        gap: 5.2rem;
        padding-left: 2rem;
    }
    .since-stats::before {
        top: -3rem;
        bottom: -10rem;
    }
    .stat-item {
        gap: 0;
    }
    .stat-item strong {
        flex: 0 0 auto;
        font-size: clamp(14rem, 18vw, 20rem);
    }

    /* LINK */
    .link-grid {
        grid-template-columns: 1fr;
    }
    .about-card {
        min-height: 50rem;
    }
    .right-grid {
        grid-template-rows: auto;
    }
    .customer-card {
        grid-template-columns: 1fr 45rem;
    }
    .customer-title {
        min-width: 0;
    }
}

/* __________ Mobile __________ */
@media (max-width: 768px) {
    /* COMMON */
    .product-section,
    .quality-section,
    .link-section {
        padding: 8rem 0 6rem;
    }
    .since-section {
        padding: 14rem 0 8rem;
    }
    .section-head {
        gap: 2.4rem;
    }
    .section-head h2 {
        font-size: 3.2rem;
        line-height: 1.28;
    }
    .section-desc {
        font-size: 1.6rem;
    }
    .section-desc br,
    .link-section .desc br {
        display: none;
    }

    /* HERO */
    .main-hero {
        height: 42rem;
        min-height: 42rem;
        padding-top: 6.7rem;
    }
    .hero-content {
        gap: 1.2rem;
        padding: 0 2rem;
    }
    .hero-content h2 {
        margin-top: 0;
        font-size: 3.4rem;
        line-height: 1.3;
    }
    .hero-desc {
        margin-top: 0;
    }
    .hero-btn {
        height: 4.6rem;
        margin-top: 1.2rem;
        padding: 0.7rem 0.7rem 0.7rem 2.4rem;
        font-size: 1.5rem;
    }
    .hero-btn::after {
        width: 3rem;
        height: 3rem;
    }
    .hero-btn::before {
        right: 1.5rem;
    }

    /* PRODUCT : 2개 → 1개 */
    .product-control {
        flex-wrap: wrap;
        width: 100%;
    }
    .product-control::after {
        display: none;
    }
    .product-control .btn-more {
        margin-left: auto;
    }
    .product-card {
        flex: 0 0 100%;
    }
    .product-card a {
        height: 30rem;
        border-radius: 2.4rem;
    }
    .product-card .thumb img {
        top: 3.4rem;
        left: 45%;
        max-height: 35rem;
    }
    .product-info {
        min-height: auto;
        padding: 1.8rem;
    }
    .product-info p {
        font-size: 2.1rem;
    }
    .product-nav,
    .btn-more {
        height: 4.6rem;
    }

    /* QUALITY */
    .quality-section {
        border-radius: 1.8rem;
    }
    .quality-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
    }
    .quality-list li {
        flex-direction: row;
        gap: 1rem;
        width: 100%;
        height: auto;
        padding: 0.8rem 2rem 1.2rem;
        border-radius: 1.6rem;
    }
    .quality-list .quality-icon {
        display: none;
    }
    .quality-card {
        height: 36rem;
        margin-top: 3.2rem;
        border-radius: 3.2rem;
    }
    .quality-badge {
        top: 2.8rem;
        left: 2.8rem;
    }
    .quality-card-text {
        right: 2.8rem;
        left: 2.8rem;
        bottom: 3.8rem;
    }
    .quality-card-text h3 {
        font-size: 3.2rem;
    }
    .quality-card-text p br {
        display: none;
    }

    /* SINCE */
    .since-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4rem;
    }
    .since-bg-text {
        top: -3.8rem;
        font-size: 8.8rem;
    }
    .since-img {
        width: min(42rem, 92vw);
        margin: -6rem -2rem 0 auto;
    }
    .since-left h2 {
        margin-top: -10rem;
        font-size: 3.4rem;
    }
    .since-stats {
        gap: 4.8rem;
        width: 100%;
        padding-left: 3.2rem;
    }
    .since-stats::before {
        display: none;
    }
    .stat-item div {
        flex: none;
        min-width: 0;
        margin-bottom: 0;
    }
    .stat-item span:not(.stat-num) {
        white-space: normal;
    }
    .stat-item strong {
        justify-content: flex-start;
        font-size: 12rem;
    }
    .stat-item strong::after {
        font-size: 3rem;
    }

    /* LINK */
    .link-title {
        margin: 0 2rem 2.4rem;
        font-size: 2.2rem;
        line-height: 1.45;
        word-break: keep-all;
    }
    .link-section h3 {
        font-size: 2.8rem;
    }
    .about-card {
        min-height: auto;
        padding: 4rem 1.8rem 3.2rem;
        border-radius: 2.4rem;
    }
    .about-links {
        grid-template-columns: 1fr;
        margin-top: 5.6rem;
    }
    .right-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .customer-card {
        grid-template-columns: 1fr;
        gap: 3.2rem;
        min-height: auto;
        padding: 3.2rem 1.8rem;
        border-radius: 2.4rem;
    }
    .customer-title::before {
        right: 0;
        bottom: -1rem;
        left: auto;
        width: 7.6rem;
        height: 7.6rem;
    }
    .customer-links {
        grid-template-columns: 1fr;
    }
    .customer-links a {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        min-height: 5.8rem;
        padding: 0 2rem;
    }
    .link-plus {
        margin-right: 1.2rem;
        margin-bottom: 0;
    }
    .small-card {
        min-height: auto;
        padding: 3.2rem 1.8rem;
        border-radius: 2.4rem;
    }
    .small-card::after {
        top: 2rem;
        right: 1.8rem;
    }
    .contact-card .tel {
        margin-top: 0;
    }
    .contact-card .tel strong {
        font-size: 2.2rem;
    }

    /* MOBILE HOVER RESET */
    .product-card a:hover,
    .about-links a:hover,
    .customer-links a:hover,
    .small-card:hover,
    .inquiry-card:hover,
    .contact-card:hover {
        transform: none;
        box-shadow: none;
    }
    .product-card a:hover .thumb img {
        transform: translateY(0) scale(1);
        filter: none;
    }
    .product-card a:hover .product-info {
        background: rgba(247, 251, 254, 0.6);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    .customer-links a:hover .link-plus {
        transform: none;
    }

    /* MOBILE MOTION OFF */
    .product-section.motion-ready :is(.section-head .eyebrow, .section-desc, .product-control, .product-card),
    .quality-section.motion-ready,
    .quality-section.motion-ready :is(.section-head .eyebrow, .section-head h2, .section-desc, .quality-list li, .quality-card, .quality-badge, .quality-card-text .quality-icon, .quality-card-text h3, .quality-card-text p),
    .since-section.motion-ready :is(.since-bg-text, .since-img, .since-left h2, .btn-history, .since-stats, .stat-item),
    .link-section.motion-ready :is(.link-title, .about-card, .about-card .eyebrow, .about-card h3, .about-card .desc, .about-links a, .customer-card, .customer-title .eyebrow, .customer-title h3, .customer-title::before, .customer-links a, .small-card, .small-card .eyebrow, .small-card h3, .small-card .desc, .small-card::after) {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
        will-change: auto;
    }

    .product-section .section-head h2.is-line-split {
        color: #111827;
    }
    .product-section .section-head h2 .title-line,
    .product-section .section-head h2 .line-base {
        position: static;
        width: auto;
        color: inherit;
        transition: none;
    }
    .product-section .section-head h2 .line-fill {
        display: none;
    }
}

/* __________ Small Mobile __________ */
@media (max-width: 480px) {
    /* COMMON */
    .product-section,
    .quality-section,
    .link-section {
        padding: 6rem 0 5rem;
    }
    .section-head h2 {
        font-size: 2.6rem;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .section-desc {
        word-break: keep-all;
        overflow-wrap: normal;
    }

    /* HERO */
    .hero-content h2 {
        font-size: 2.8rem;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .hero-desc {
        margin: 1.2rem 3rem 0;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .hero-desc br {
        display: none;
    }

    /* QUALITY */
    .quality-card {
        height: 32rem;
    }
    .quality-badge {
        top: 1.8rem;
        left: 1.8rem;
        height: 3rem;
        padding: 0 1.2rem;
    }
    .quality-card-text {
        right: 1.8rem;
        left: 1.8rem;
        bottom: 1.8rem;
    }
    .quality-card-text h3 {
        font-size: 2.8rem;
    }

    /* SINCE */
    .since-bg-text {
        margin-top: -3rem;
        font-size: 5.8rem;
    }
    .since-img {
        opacity: 0.6 !important;
    }
    .since-stats {
        gap: 3rem;
        padding-left: 1.6rem;
    }
    .stat-num {
        /* width: 1.4ch; */
        font-size: 8rem;
    }
    .stat-item p::before {
        left: calc(clamp(3.4rem, 3.2vw, 5rem) * -1 - -1.65rem)
    }
    .stat-item strong::after {
        font-size: 2.4rem;
    }

    /* LINK */
    .link-section h3 {
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .link-section h3 br {
        display: none;
    }
    .about-links {
        margin-top: 4rem;
    }
}



/* ===== sub.css ===== */
/* =========================
SUB COMMON
========================= */
.sub-page #container {
    background: #fff;
}



/* =========================
FORM TOKEN
========================= */
.sub-page {
    --form-text-title: #071827;
    --form-text-body: #4b5b6a;
    --form-text-muted: #8a98a6;
    --form-placeholder: #9aa7b4;

    --form-point: #003f8f;
    --form-point-hover: #0050b8;
    --form-required: #d44333;

    --form-bg-input: #fff;
    --form-bg-panel: #f4f8fc;
    --form-bg-soft: #f7fbff;

    --form-line: #dfe9f3;
    --form-line-input: #e5edf5;
    --form-line-focus: #b7d1ec;

    --form-radius-input: clamp(1.4rem, 1.2vw, 1.8rem);
    --form-radius-panel: clamp(3.2rem, 3.2vw, 4.8rem);
    --form-radius-card: clamp(2.2rem, 2.1vw, 3.2rem);
    --form-radius-pill: 999px;

    --form-height: clamp(5.8rem, 5vw, 7.2rem);
    --form-search-height: clamp(4.8rem, 3.8vw, 5.6rem);
    --form-padding-x: clamp(2rem, 2vw, 3rem);

    --form-label-size: clamp(1.6rem, 1.35vw, 2rem);
    --form-label-weight: 700;
    --form-label-line: 1;
    --form-label-letter: -0.02em;

    --form-input-size: clamp(1.4rem, 1.15vw, 1.7rem);
    --form-input-weight: 500;
    --form-input-line: 1.6;
    --form-input-letter: -0.02em;

    --form-help-size: clamp(1.3rem, 1vw, 1.5rem);
    --form-help-weight: 500;
    --form-help-line: 1.6;

    --form-shadow: 0 0.4rem 1.2rem rgba(0, 27, 61, 0.04);
    --form-focus-shadow: 0 0 0 0.4rem rgba(0, 94, 184, 0.08);
}



/* =========================
SUB HEADER COLOR : WHITE
========================= */
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .logo img {
    filter: brightness(0) invert(1);
}
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .gnb-item > a {
    color: #fff;
}
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .gnb-item:hover > a {
    color: #fff;
}
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .gnb-item > a::after {
    background: #fff;
}
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .lang a {
    color: rgba(255, 255, 255, 0.65);
}
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .lang a.active {
    color: #fff;
}
.sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .lang a:last-child::after {
    background: rgba(255, 255, 255, 0.35);
}

.sub-page #header:has(.gnb-item:hover) .logo img,
.sub-page #header.scrolled .logo img {
    filter: none;
}
.sub-page #header:has(.gnb-item:hover) .gnb-item > a,
.sub-page #header.scrolled .gnb-item > a {
    color: #1f2937;
}
.sub-page #header:has(.gnb-item:hover) .gnb-item:hover > a,
.sub-page #header.scrolled .gnb-item:hover > a {
    color: #005eb8;
}



/* =========================
SUB VISUAL
========================= */
.sub-visual {
    --sub-inner-gap: clamp(3rem, 4vw, 6rem);
    --sub-inner-width: min(calc(100% - (var(--sub-inner-gap) * 2)), 144rem);

    overflow: visible;
    position: relative;
    height: clamp(48rem, 42vw, 68rem);
    padding-top: clamp(7rem, 5.8vw, 8.8rem);
}

.sub-visual-bg-wrap {
    overflow: hidden;
    z-index: 0;
    position: absolute;
    inset: 0;
}
.sub-visual-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.08);
    animation: subVisualZoom 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes subVisualZoom {
    0% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* 회사소개 */
.company-page .sub-visual-bg {
    background-image: url("/images/layout/lifetube/common/visual-company.jpg");
}
/* 주요제품 - TUBE SOLUTIONS */
.solution-page .sub-visual-bg {
    background-image: url("/images/layout/lifetube/common/visual-solution.jpg");
}
/* 주요제품 - PRODUCT LINE-UP */
.product-page .sub-visual-bg {
    background-image: url("/images/layout/lifetube/common/visual-product.jpg");
}
/* 고객센터 */
.customer-page .sub-visual-bg {
    background-image: url("/images/layout/lifetube/common/visual-customer.jpg");
}
/* 문의하기 */
.inquiry-page .sub-visual-bg {
    background-image: url("/images/layout/lifetube/common/visual-customer.jpg");
}
.inquiry-page .sub-visual-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7, 24, 39, 0.92) 0%,
            rgba(0, 42, 89, 0.82) 48%,
            rgba(0, 42, 89, 0.58) 100%
        );
}

.sub-visual-inner {
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: var(--sub-inner-width);
    height: 100%;
    margin: 0 auto;
    padding-bottom: clamp(4rem, 4vw, 6rem);
}
.sub-eyebrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
}
.sub-visual h2 {
    margin-top: clamp(1.1rem, 1.1vw, 1.6rem);
    color: #fff;
    font-size: clamp(4rem, 4vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}




/* =========================
SUB LOCATION
========================= */
.sub-location {
    z-index: 5;
    position: absolute;
    right: calc((100% - var(--sub-inner-width)) / 2);
    bottom: clamp(4rem, 4vw, 6rem);
    display: flex;
    align-items: stretch;
    min-width: clamp(38rem, 34vw, 50rem);
    height: clamp(5rem, 4vw, 6rem);
    border-radius: 0.8rem;
    background: rgba(16, 16, 16, 0.3);
    backdrop-filter: blur(1.8rem);
    -webkit-backdrop-filter: blur(1.8rem);
}
.location-home {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 clamp(5rem, 4vw, 6rem);
    width: clamp(5rem, 4vw, 6rem);
    height: 100%;
    color: #fff;
}
.location-home span {
    display: block;
    width: clamp(1.4rem, 1.1vw, 1.7rem);
    height: clamp(1.4rem, 1.1vw, 1.7rem);
    background: url("/images/layout/lifetube/common/home.png") center / contain no-repeat;
}
.location-home,
.location-item {
    position: relative;
}
.location-item {
    flex: 1 1 0;
    min-width: 0;
}
.location-home::after,
.location-item + .location-item::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%);
    pointer-events: none;
}
.location-home::after {
    right: 0;
}
.location-item + .location-item::before {
    left: 0;
}
.location-btn {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 1vw, 1.4rem);
    width: 100%;
    height: 100%;
    padding: 0 clamp(1.6rem, 1.6vw, 2.4rem);
    color: #fff;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
    line-height: 1;
    text-align: left;
}
.location-btn::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.4rem;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}
.location-item.is-open .location-btn::after {
    margin-top: 0.4rem;
    transform: rotate(-135deg);
}
.location-btn .location-text {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.location-menu {
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 20;
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    bottom: auto;
    left: 0;
    padding: 0.8rem;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1.6rem 4rem rgba(10, 18, 29, 0.18);
    transform: translateY(-0.8rem);
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}
.location-item.is-open .location-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.location-menu a,
.location-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(3.8rem, 3vw, 4.4rem);
    padding:
        clamp(1rem, 0.9vw, 1.2rem)
        clamp(1.1rem, 1vw, 1.4rem);
    border: 0;
    border-radius: 0.6rem;
    background: none;
    color: #4b5b6a;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.location-menu a:hover,
.location-menu a.active,
.location-menu button:hover,
.location-menu button.active {
    background: #eef7fd;
    color: #005eb8;
}
.location-menu-label {
    position: relative;
    display: block;
    padding: 1.4rem 1.4rem 0.6rem;
    color: rgba(0, 63, 143, 0.42);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    pointer-events: none;
}
.location-menu-label::after {
    content: "";
    position: absolute;
    bottom: 1.1rem;
    left: -1.4rem;
    width: 2.7rem;
    height: 2px;
    background: rgba(0, 63, 143, 0.24);
}
.location-menu-label:first-child {
    padding-top: 0.8rem;
}



/* =========================
SUB CONTENT COMMON
========================= */
.sub-content {
    min-height: 20rem;
    padding: clamp(10rem, 9vw, 15rem) 0;
}
.sub-content .inner {
    z-index: 1;
    position: relative;
    width: min(calc(100% - clamp(3rem, 4vw, 6rem)), 144rem);
    margin: 0 auto;
}
.sub-content .sub-label {
    margin-bottom: clamp(1.8rem, 1.8vw, 2.6rem);
    color: #003f8f;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.sub-content .sub-title {
    margin-bottom: clamp(3.6rem, 3.6vw, 5.5rem);
    color: #071827;
    font-size: clamp(3.4rem, 3.2vw, 4.8rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
.sub-content .sub-desc {
    color: #4b5b6a;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .sub-list {
    margin-top: clamp(3.6rem, 3.6vw, 5.4rem);
}
.sub-content .sub-list li {
    position: relative;
    padding-left: clamp(2.8rem, 2.6vw, 4rem);
    color: #273747;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: -0.03em;
}
.sub-content .sub-list li + li {
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
}
.sub-content .sub-list li::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    left: 0;
    width: clamp(1.8rem, 1.6vw, 2.4rem);
    height: 2px;
    background: #005eb8;
}



/* =========================
SUB TAB COMMON
========================= */
.sub-tab-wrap {
    margin-bottom: clamp(4rem, 4vw, 6rem);
}
.sub-tab-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    overflow: visible;
    padding: clamp(0.4rem, 0.4vw, 0.6rem);
    border: 1px solid #e5eef5;
    border-radius: clamp(2.2rem, 2vw, 3rem);
    background: #fff;
}
.sub-tab-list::-webkit-scrollbar {
    height: 0;
}
.sub-tab-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: clamp(4rem, 3vw, 4.6rem);
    padding: 0 clamp(1.4rem, 1.4vw, 2rem);
    border: 0;
    border-radius: clamp(1.8rem, 1.7vw, 2.4rem);
    background: transparent;
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    transition:
        background 0.24s ease,
        color 0.24s ease;
}
.sub-tab-list a:hover,
.sub-tab-list a.active {
    background: #0077c8;
    color: #fff;
}



/* =========================
TABLE
========================= */
.data-table {
    overflow: hidden;
    width: 100%;
    border: 1px solid #e2e8ef;
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #fff;
}
.data-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.data-table caption {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
}
.data-table thead th {
    padding:
        clamp(1.2rem, 1.1vw, 1.6rem)
        clamp(1.2rem, 1.4vw, 2rem)
        clamp(1rem, 1vw, 1.4rem);
    background: #f7f9fb;
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: keep-all;
}
.data-table tbody th,
.data-table tbody td {
    padding:
        clamp(1rem, 1vw, 1.3rem)
        clamp(1.2rem, 1.4vw, 2rem)
        clamp(0.9rem, 0.9vw, 1.1rem);
    border-bottom: 1px solid #e6edf3;
    color: #4b5b6a;
    font-size: clamp(1.4rem, 1.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: keep-all;
}
.data-table tr:last-child th,
.data-table tr:last-child td {
    border-bottom: 0;
}
.data-table th,
.data-table td {
    position: relative;
}
.data-table th::after,
.data-table td::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 12px;
    background: #e6edf3;
    transform: translateY(-50%);
}
.data-table th:first-child::after,
.data-table td:first-child::after {
    display: none;
}



/* =========================
CHECKBOX COMMON
========================= */
.privacy-check,
.thumb-check,
.qna-private-switch {
    cursor: pointer;
}
.privacy-check {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.7rem, 0.7vw, 1rem);
    color: var(--form-text-title);
    font-size: var(--form-label-size);
    font-weight: var(--form-label-weight);
    line-height: 1.4;
    letter-spacing: var(--form-label-letter);
}
.privacy-check input {
    appearance: none;
    position: relative;
    flex: 0 0 clamp(1.5rem, 1.2vw, 1.8rem);
    width: clamp(1.5rem, 1.2vw, 1.8rem);
    height: clamp(1.5rem, 1.2vw, 1.8rem);
    border: 1px solid var(--form-line-input);
    border-radius: 0.4rem;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}
.privacy-check input::before {
    content: "";
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(0.7rem, 0.6vw, 0.9rem);
    height: clamp(0.4rem, 0.35vw, 0.5rem);
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -58%) rotate(-45deg);
}
.privacy-check input:checked {
    border-color: var(--form-point);
    background: var(--form-point);
}
.privacy-check input:checked::before {
    opacity: 1;
}
.privacy-check input:focus-visible {
    box-shadow: var(--form-focus-shadow);
    outline: none;
}



/* =========================
SUB MOTION
========================= */
.sub-page.is-sub-motion .sub-visual .sub-eyebrow,
.sub-page.is-sub-motion .sub-visual h2,
.sub-page.is-sub-motion .sub-location {
    opacity: 0;
    transform: translateY(2.4rem);
    filter: blur(0.25rem);
}
.sub-page.is-sub-motion.is-sub-ready .sub-visual .sub-eyebrow {
    animation: subFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.12s;
}
.sub-page.is-sub-motion.is-sub-ready .sub-visual h2 {
    animation: subFadeUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.24s;
}
.sub-page.is-sub-motion.is-sub-ready .sub-location {
    animation: subFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.42s;
}
@keyframes subFadeUp {
    0% {
        opacity: 0;
        transform: translateY(2.4rem);
        filter: blur(0.25rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sub-visual-bg {
        transform: none;
        animation: none;
    }

    .sub-page.is-sub-motion .sub-visual .sub-eyebrow,
    .sub-page.is-sub-motion .sub-visual h2,
    .sub-page.is-sub-motion .sub-location {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}



/* =========================
COMMON CONTENT MOTION
========================= */
html.motion-enabled [data-motion],
html.motion-enabled [data-motion-group] {
    --motion-delay: 0ms;
    --motion-duration: 860ms;
    --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.motion-enabled [data-motion]:not([data-motion-group]):not([data-motion="bg-up"]):not([data-motion="wipe-left"]):not([data-motion="wipe-right"]):not([data-motion="chars"]) {
    transition:
        opacity 560ms ease,
        transform var(--motion-duration) var(--motion-ease);
    transition-delay: var(--motion-delay);
    will-change: opacity, transform;
    overflow: visible;
    clip-path: none;
}
html.motion-enabled [data-motion]:not([data-motion-group]):not([data-motion="bg-up"]):not(.is-motion-active) {
    opacity: 0;
}

/* 아래에서 위 */
html.motion-enabled [data-motion="fade-up"]:not([data-motion-group]):not(.is-motion-active) {
    transform: translateY(2.2rem);
}

/* 위에서 아래 */
html.motion-enabled [data-motion="fade-down"]:not([data-motion-group]):not(.is-motion-active) {
    transform: translateY(-1.6rem);
}

/* 왼쪽에서 오른쪽 */
html.motion-enabled [data-motion="fade-left"]:not([data-motion-group]):not(.is-motion-active) {
    transform: translateX(-2.4rem);
}

/* 오른쪽에서 왼쪽 */
html.motion-enabled [data-motion="fade-right"]:not([data-motion-group]):not(.is-motion-active) {
    transform: translateX(2.4rem);
}

/* wipe 계열 */
html.motion-enabled [data-motion="wipe-left"]:not([data-motion-group]):not(.is-motion-active) {
    transform: translateX(-2rem);
    clip-path: inset(0 100% 0 0);
}
html.motion-enabled [data-motion="wipe-right"]:not([data-motion-group]):not(.is-motion-active) {
    transform: translateX(2rem);
    clip-path: inset(0 0 0 100%);
}
html.motion-enabled [data-motion="wipe-left"].is-motion-active,
html.motion-enabled [data-motion="wipe-right"].is-motion-active {
    opacity: 1;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
}

/* 일반 모션 실행 */
html.motion-enabled [data-motion]:not([data-motion-group]).is-motion-active:not([data-motion="bg-up"]):not([data-motion="wipe-left"]):not([data-motion="wipe-right"]):not([data-motion="chars"]) {
    opacity: 1;
    transform: translate(0, 0);
    clip-path: none;
}
html.motion-enabled [data-motion-group] .motion-child-ready {
    opacity: 0;
    transform: translateY(2.2rem);
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
    will-change: opacity, transform;
}
html.motion-enabled [data-motion-group] .motion-child-ready.is-motion-active {
    opacity: 1;
    transform: translateY(0);
}

/* 배경만 아래에서 위로 */
html.motion-enabled [data-motion="bg-up"]::before {
    transition:
        opacity 680ms ease,
        transform 920ms cubic-bezier(0.22, 0.61, 0.36, 1),
        clip-path 920ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
    will-change: opacity, transform, clip-path;
}
html.motion-enabled [data-motion="bg-up"]:not(.is-motion-active)::before {
    opacity: 0;
    transform: translateY(3.2rem);
    clip-path: inset(3.2rem 0 0 0);
}
html.motion-enabled [data-motion="bg-up"].is-motion-active::before {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
}

/* 한 글자씩 */
html.motion-enabled [data-motion="chars"].is-char-split {
    opacity: 1;
}
html.motion-enabled [data-motion="chars"].is-char-split .char {
    display: inline-block;
    opacity: 0;
    transform: translateX(-0.18rem);
    clip-path: inset(0 100% 0 0);
    transition:
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        clip-path 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--motion-delay) + var(--char-delay));
}
html.motion-enabled [data-motion="chars"].is-motion-active.is-char-split .char {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
}
html.motion-enabled .is-motion-done[data-motion],
html.motion-enabled .is-motion-done[data-motion-group],
html.motion-enabled .is-motion-done[data-motion="chars"] .char,
html.motion-enabled [data-motion-group] .motion-child-ready.is-motion-done {
    will-change: auto;
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
    html.motion-enabled [data-motion],
    html.motion-enabled [data-motion-group],
    html.motion-enabled [data-motion-group] .motion-child-ready,
    html.motion-enabled [data-motion="chars"].is-char-split .char,
    html.motion-enabled [data-motion="bg-up"]::before {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }
}
@media (max-width: 768px) {
    html.motion-enabled [data-motion],
    html.motion-enabled [data-motion-group],
    html.motion-enabled [data-motion-group] .motion-child-ready,
    html.motion-enabled [data-motion="chars"].is-char-split .char,
    html.motion-enabled [data-motion="bg-up"]::before {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* 일반 fade 모션 그림자 잘림 방지 */
html.motion-enabled [data-motion="fade-up"],
html.motion-enabled [data-motion="fade-down"],
html.motion-enabled [data-motion="fade-left"],
html.motion-enabled [data-motion="fade-right"],
html.motion-enabled [data-motion-group],
html.motion-enabled [data-motion-group] .motion-child-ready,
html.motion-enabled [data-motion-group] .motion-child-ready.is-motion-active,
html.motion-enabled [data-motion-group] .motion-child-ready.is-motion-done {
    overflow: visible !important;
    clip-path: none !important;
}



/* =========================
RESPONSIVE
========================= */
/* __________ Tablet __________ */
@media (max-width: 1024px) {
    .sub-page:not(.is-mo-menu-open) #header:not(.scrolled) .logo img,
    .sub-page #header .logo img {
        filter: none;
    }

    /* SUB VISUAL */
    .sub-visual {
        --sub-inner-gap: 4rem;
        height: 54rem;
        padding-top: 7.5rem;
    }
    .sub-visual-inner {
        padding-bottom: 12rem;
    }
    .sub-visual h2 {
        font-size: 4.2rem;
    }

    /* SUB LOCATION */
    .sub-location {
        left: calc((100% - var(--sub-inner-width)) / 2);
        right: calc((100% - var(--sub-inner-width)) / 2);
        bottom: 4rem;
        width: auto;
        min-width: 0;
        height: 5.2rem;
    }
    .location-home {
        flex-basis: 5.2rem;
        width: 5.2rem;
    }
    .location-btn {
        padding: 0 1.8rem;
        font-size: 1.4rem;
    }

    /* TABLE */
    .data-table {
        overflow-x: auto;
    }
    .data-table table {
        min-width: 76rem;
    }
}

/* __________ Mobile __________ */
@media (max-width: 768px) {
    /* SUB VISUAL */
    .sub-visual {
        --sub-inner-gap: 3rem;
        height: 42rem;
        padding-top: 6.8rem;
    }
    .sub-visual-bg {
        animation: none;
        transform: none;
    }
    .sub-visual-inner {
        padding-bottom: 9.6rem;
    }
    .sub-eyebrow {
        font-size: 1.2rem;
        letter-spacing: 0.08em;
    }
    .sub-visual h2 {
        font-size: 3.4rem;
        line-height: 1.18;
        word-break: keep-all;
    }

    /* SUB LOCATION */
    .sub-location {
        bottom: 3rem;
        height: 5rem;
        border-radius: 1.4rem;
        background: rgba(16, 16, 16, 0.42);
    }
    .location-home {
        flex-basis: 5rem;
        width: 5rem;
    }
    .location-btn {
        justify-content: space-between;
        padding: 0 1.4rem;
        font-size: 1.3rem;
    }
    .location-menu {
        top: calc(100% + 0.6rem);
        padding: 0.6rem;
        border-radius: 1.2rem;
    }
    .location-menu a,
    .location-menu button {
        min-height: 3.8rem;
        padding: 1rem 1.2rem;
        border-radius: 0.8rem;
        font-size: 1.3rem;
    }
    .location-menu-label::after {
        display: none;
    }

    /* SUB CONTENT */
    .sub-content {
        padding: 8rem 0;
    }
    .sub-content .inner {
        width: min(calc(100% - 3rem), 144rem);
    }
    .sub-content .sub-title {
        font-size: 3rem;
    }
    .sub-content .sub-title br {
        display: none;
    }
    .sub-content .sub-desc br {
        display: none;
    }

    /* SUB TAB */
    .sub-tab-wrap {
        margin-bottom: 3.6rem;
    }
    .sub-tab-list a {
        height: 4rem;
        padding: 0 1rem;
        font-size: 1.3rem;
    }

    /* TABLE */
    .data-table table {
        min-width: 68rem;
    }
}

/* __________ Small Mobile __________ */
@media (max-width: 480px) {
    /* SUB VISUAL */
    .sub-visual {
        --sub-inner-gap: 2.4rem;
        height: 34rem;
        padding-top: 6.4rem;
    }
    .sub-visual-inner {
        padding-bottom: 8.4rem;
    }
    .sub-eyebrow {
        font-size: 1.1rem;
        letter-spacing: 0.06em;
    }
    .sub-visual h2 {
        font-size: 2.7rem;
        line-height: 1.24;
    }

    /* SUB LOCATION */
    .sub-location {
        bottom: 2.4rem;
        height: 4.6rem;
        border-radius: 1.2rem;
    }
    .location-home {
        display: none;
    }
    .location-btn {
        padding: 0 1.1rem;
        font-size: 1.2rem;
    }
    .location-menu a,
    .location-menu button {
        min-height: 3.4rem;
        padding: 0.9rem 1rem;
        font-size: 1.2rem;
    }

    /* SUB CONTENT */
    .sub-content {
        padding: 6rem 0;
    }
    .sub-content .inner {
        width: min(calc(100% - 2.4rem), 144rem);
    }
    .sub-content .sub-title {
        font-size: 2.5rem;
        line-height: 1.35;
    }
    .sub-content .sub-desc {
        font-size: 1.45rem;
    }

    /* SUB TAB */
    .sub-tab-list {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        border-radius: 1.6rem;
    }
    .sub-tab-list a {
        height: 3.8rem;
        font-size: 1.25rem;
    }

    /* TABLE */
    .data-table table {
        min-width: 62rem;
    }
}




/* ===== contents.css ===== */
/* =========================
회사소개 > 경영이념
========================= */
.sub-content .management-content {
    padding-bottom: 0;
}
/* 인사말 */
.sub-content .greeting {
    padding-bottom: clamp(10rem, 8vw, 15rem);
}
.sub-content .greeting .inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(4rem, 5vw, 10rem);
}
.sub-content .greeting .sub-page-head {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 52rem;
    min-width: 0;
}
.sub-content .greeting .sub-title {
    width: fit-content;
    max-width: 100%;
    font-size: clamp(3.4rem, 3.2vw, 4.8rem);
}
.sub-content .greeting .sub-title.is-line-split {
    color: transparent;
}
.sub-content .greeting .sub-title .title-line {
    overflow: hidden;
    position: relative;
    display: block;
    width: fit-content;
    color: transparent;
    line-height: inherit;
}
.sub-content .greeting .sub-title .line-base,
.sub-content .greeting .sub-title .line-fill {
    display: block;
    white-space: nowrap;
}
.sub-content .greeting .sub-title .line-base {
    color: #c8d0da;
}
.sub-content .greeting .sub-title .line-fill {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    color: #071827;
    transition: width 0.96s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--line-delay);
}
.sub-content .greeting.is-motion-active .sub-title .line-fill {
    width: 100%;
}
.sub-content .greeting .sub-desc {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 82rem;
    padding-top: clamp(3rem, 3.2vw, 5.2rem);
}
.sub-content .greeting .sub-desc p {
    margin: 0;
}
.sub-content .greeting .sub-desc p + p {
    margin-top: 3.2rem;
}
.sub-content .greeting .sign {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.6rem;
    margin-top: 5.2rem;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: right;
}
.sub-content .greeting .sign img {
    display: inline-block;
    width: auto;
    height: 5rem;
    object-fit: contain;
}

html.motion-enabled
.sub-content
.greeting[data-motion-wait-scroll]:not(.is-motion-active)
.sub-title {
    opacity: 0;
    transform: translateY(2.2rem);
}
html.motion-enabled
.sub-content
.greeting[data-motion-wait-scroll]
.sub-title {
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.motion-enabled
.sub-content
.greeting[data-motion-wait-scroll].is-motion-active
.sub-title {
    opacity: 1;
    transform: translateY(0);
}


/* 경영방침 / 품질방침 */
.management-content {
    padding: clamp(10rem, 9vw, 15rem) 0 0;
}
.sub-content .policy-section {
    overflow: hidden;
    position: relative;
    padding: 15rem 0;
    background: none;
}
.sub-content .policy-section::before {
    content: "";
    z-index: 0;
    position: absolute;
    inset: 0;
    background: url("/images/layout/lifetube/contents/bg-management-policy.jpg") center bottom / cover no-repeat;
}

/* 경영방침 */
.sub-content .policy-head .sub-title {
    margin-bottom: 10.6rem;
}
.sub-content .policy-card-list {
    overflow: hidden;
    display: flex;
    /* width: min(160rem, calc(100vw - 6rem)); */
    width: 100%;
    margin-left: 50%;
    border-radius: 3.2rem;
    border: 1px solid #e3edf5;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2.4rem 8rem 0 rgba(15, 23, 42, 0.14);
    transform: translateX(-50%);
}
.sub-content .policy-card {
    overflow: hidden !important;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(30rem, 24vw, 38rem);
    padding:
        clamp(4rem, 4.5vw, 7rem)
        clamp(3rem, 5vw, 8rem)
        clamp(4.5rem, 5vw, 8rem);
}
html.motion-enabled .sub-content [data-motion-group] .policy-card,
html.motion-enabled .sub-content [data-motion-group] .policy-card.motion-child-ready,
html.motion-enabled .sub-content [data-motion-group] .policy-card.is-motion-active,
html.motion-enabled .sub-content [data-motion-group] .policy-card.is-motion-done {
    overflow: hidden !important;
    clip-path: none !important;
}
.sub-content .policy-card + .policy-card {
    border-left: 1px solid #e5eef5;
}
.sub-content .policy-num {
    position: absolute;
    top: -1.5rem;
    right: -0.5rem;
    color: rgba(0, 119, 200, 0.08);
    font-size: clamp(7.2rem, 6.5vw, 10rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
    text-shadow:
        0 0.1rem 0 rgba(255, 255, 255, 0.5),
        0 0.25rem 0.6rem rgba(255, 255, 255, 0.25);
}
.sub-content .policy-icon {
    display: block;
    width: clamp(3.6rem, 3vw, 4.5rem);
    height: clamp(3.6rem, 3vw, 4.5rem);
    margin-bottom: clamp(2rem, 2vw, 3rem);
    object-fit: contain;
}
.sub-content .policy-card .cont-tit {
    position: relative;
    color: #071827;
    font-size: clamp(2.4rem, 2vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.sub-content .policy-card .cont-desc {
    margin-top: clamp(2rem, 2vw, 3rem);
    color: #6b7280;
    font-size: clamp(1.7rem, 1.25vw, 2rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

/* 품질방침 */
.sub-content .quality-head {
    margin-top: 15rem;
    text-align: center;
}
.sub-content .quality-head .sub-title {
    margin-bottom: 10.6rem;
}
.sub-content .quality-card-list {
    display: flex;
    justify-content: center;
    gap: clamp(2.4rem, 3.5vw, 6rem);
}
.sub-content .quality-card {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    max-width: 32rem;
    min-width: 0;
    height: auto;
    padding:
        clamp(2.4rem, 2vw, 3rem)
        clamp(1.6rem, 1.5vw, 2rem)
        clamp(3.6rem, 3vw, 5rem);
    border-radius: 2.4rem;
    background: url("/images/layout/lifetube/contents/quality-card.png") center / 100% 100% no-repeat;
    text-align: center;
    box-shadow: 0 1.8rem 3.2rem 0 rgba(143, 163, 184, 0.26);
}
.sub-content .quality-card::before {
    content: "";
    position: absolute;
    top: -1.2rem;
    left: 50%;
    width: clamp(10rem, 9vw, 14rem);
    height: clamp(1.3rem, 1vw, 1.7rem);
    border-radius: 0.8rem 0.8rem 0 0;
    background: linear-gradient(90deg, #005eb8 0%, #0084df 100%);
    transform: translateX(-50%);
}
.sub-content .quality-num {
    display: block;
    color: #fff;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
}
.sub-content .quality-icon {
    display: block;
    width: 4.7rem;
    height: 4.7rem;
    margin: 5rem auto 3.5rem;
    background-color: transparent;
    object-fit: contain;
}
.sub-content .quality-en {
    color: #5d6b78;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}
.sub-content .quality-tit {
    margin-top: 2rem;
    color: #071827;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}



/* =========================
회사소개 > 조직도
========================= */
.sub-content .organization .sub-page-head {
    margin-bottom: clamp(5rem, 5vw, 8rem);
}
.sub-content .org-chart {
    display: grid;
    grid-template-columns: clamp(14rem, 12vw, 20rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 4vw, 6rem);
    align-items: flex-start;
}
.sub-content .org-ceo {
    padding-top: 0.2rem;
    text-align: center;
}
.sub-content .org-logo {
    width: clamp(11rem, 10vw, 16rem);
    margin: 0 auto clamp(1.4rem, 1.6vw, 2.2rem);
}
.sub-content .org-logo img {
    display: block;
    width: 100%;
}
.sub-content .org-ceo strong {
    display: block;
    color: #071827;
    font-size: clamp(2.8rem, 2.7vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
}
.sub-content .org-flow {
    position: relative;
    display: grid;
    gap: clamp(4rem, 4vw, 6rem);
    margin-top: clamp(7rem, 7vw, 10.6rem);
    padding-left: 0;
}

/* 세로 연결선 */
.sub-content .org-flow::before {
    content: "";
    position: absolute;
    top: clamp(2rem, 2vw, 2.9rem);
    bottom: clamp(16rem, 15vw, 23.2rem);
    left: 0;
    width: 1px;
    background: #d7e5f1;
    transform-origin: top center;
}
.sub-content .org-group {
    overflow: visible;
    position: relative;
    display: grid;
    grid-template-columns:
        clamp(6rem, 6vw, 10rem)
        clamp(11rem, 10vw, 16rem)
        minmax(0, 1fr);
    align-items: flex-start;
}

/* 가로 연결선 */
.sub-content .org-connect {
    z-index: 5;
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: clamp(3.8rem, 4vw, 6rem);
    height: 1px;
    margin-top: clamp(1rem, 1vw, 1.4rem);
    background: rgba(0, 94, 184, 0.28);
    transform-origin: left center;
    pointer-events: none;
}

/* 대표이사 → 기술연구소 연결선 */
.sub-content .org-connect-long {
    width: clamp(7.6rem, 8vw, 12rem);
    margin-left: clamp(-6rem, -4vw, -3.8rem);
    margin-top: 0;
}
.sub-content .org-group-lab {
    align-items: center;
    min-height: clamp(4.4rem, 4vw, 5.8rem);
}
.sub-content .org-group-title {
    grid-column: 2;
    grid-row: 1;
    color: #071827;
    font-size: clamp(2.6rem, 2.4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
.sub-content .org-team-list {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.6rem, 2.2vw, 3.3rem);
    margin: 0;
    padding: 0;
}
.sub-content .org-team-card {
    position: relative;
    width: 100%;
    max-width: clamp(15rem, 13vw, 20rem);
    min-width: 0;
    min-height: clamp(10.5rem, 10vw, 14rem);
    padding-top: clamp(1.8rem, 1.7vw, 2.5rem);
    isolation: isolate;
}
.sub-content .org-team-card::before {
    content: "";
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 20 / 14;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
}
.sub-content .org-group-support .org-team-card::before {
    background: rgba(7, 24, 39, 0.08);
    box-shadow: inset 0 0.3rem 0.3rem rgba(0, 0, 0, 0.08);
}
.sub-content .org-group-production .org-team-card::before {
    background: rgba(0, 132, 223, 0.10);
    box-shadow: inset 0 0.3rem 0.3rem rgba(0, 132, 223, 0.08);
}
.sub-content .org-team-card > strong {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(70%, 14.1rem);
    height: auto;
    aspect-ratio: 141 / 91;

    margin: 0 auto;
    padding: 0 clamp(0.8rem, 1vw, 1.4rem);
    border-radius: clamp(1.1rem, 1.1vw, 1.6rem);
    background: #fff;
    color: #071827;
    font-size: clamp(1.8rem, 1.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.04em;
    text-align: center;
    word-break: keep-all;
    box-shadow: inset 0 0.3rem 0.3rem rgba(0, 0, 0, 0.08);
}
.sub-content .org-team-card span {
    display: block;
    font-size: clamp(1.5rem, 1.3vw, 2rem);
    font-weight: 600;
}
.sub-content .org-team-card ul {
    position: relative;
    z-index: 1;
    margin: clamp(2.2rem, 2.4vw, 3.5rem) 0 0 clamp(1.8rem, 2vw, 3rem);
    padding: 0;
}
.sub-content .org-team-card li {
    position: relative;
    padding-left: 1rem;
    color: #4b5b6a;
    font-size: clamp(1.5rem, 1.35vw, 2rem);
    line-height: 1.6;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.sub-content .org-team-card li::before {
    content: "";
    position: absolute;
    top: 0.88em;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #0077c8;
    transform: translateY(-50%);
}

/*__________ MOTION __________*/
html.motion-enabled .sub-content .org-sequence:not(.is-motion-active) .org-ceo,
html.motion-enabled .sub-content .org-sequence:not(.is-motion-active) .org-group-title,
html.motion-enabled .sub-content .org-sequence:not(.is-motion-active) .org-team-card {
    opacity: 0;
    transform: translateY(1.8rem);
}
html.motion-enabled .sub-content .org-sequence:not(.is-motion-active) .org-flow::before {
    opacity: 1;
    transform: scaleY(0);
}
html.motion-enabled .sub-content .org-sequence:not(.is-motion-active) .org-connect {
    opacity: 0;
    transform: scaleX(0);
}

/* 대표이사 */
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-ceo {
    opacity: 0;
    animation: orgFadeIn 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms forwards;
}

/* 대표이사 → 기술연구소 선 */
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-lab .org-connect {
    opacity: 0;
    transform: scaleX(0);
    animation: orgLineX 360ms cubic-bezier(0.22, 0.61, 0.36, 1) 320ms forwards;
}

/* 기술연구소 */
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-lab .org-group-title {
    opacity: 0;
    animation: orgFadeIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 540ms forwards;
}

/* 세로선 */
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-flow::before {
    opacity: 1;
    transform: scaleY(0);
    animation: orgLineYStep 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 680ms forwards;
}

/* 지원부서 */
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-support .org-connect {
    opacity: 0;
    transform: scaleX(0);
    animation: orgLineX 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 980ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-support .org-group-title {
    opacity: 0;
    animation: orgFadeIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) 1100ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-support .org-team-card:nth-child(1) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 1160ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-support .org-team-card:nth-child(2) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 1220ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-support .org-team-card:nth-child(3) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 1280ms forwards;
}

/* 생산부서 */
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-production .org-connect {
    opacity: 0;
    transform: scaleX(0);
    animation: orgLineX 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 1640ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-production .org-group-title {
    opacity: 0;
    animation: orgFadeIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) 1760ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-production .org-team-card:nth-child(1) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 1820ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-production .org-team-card:nth-child(2) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 1880ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-production .org-team-card:nth-child(3) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 1940ms forwards;
}
html.motion-enabled .sub-content .org-sequence.is-motion-active .org-group-production .org-team-card:nth-child(4) {
    opacity: 0;
    animation: orgFadeIn 340ms cubic-bezier(0.22, 0.61, 0.36, 1) 2000ms forwards;
}
@keyframes orgFadeIn {
    0% {
        opacity: 0;
        transform: translateY(1.8rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes orgLineX {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    100% {
        opacity: 0.28;
        transform: scaleX(1);
    }
}
@keyframes orgLineYStep {
    0% {
        transform: scaleY(0);
    }

    26% {
        transform: scaleY(0.36);
    }

    62% {
        transform: scaleY(0.34);
    }

    100% {
        transform: scaleY(1);
    }
}
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    html.motion-enabled .sub-content .org-sequence .org-ceo,
    html.motion-enabled .sub-content .org-sequence .org-group-title,
    html.motion-enabled .sub-content .org-sequence .org-team-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    html.motion-enabled .sub-content .org-sequence .org-flow::before {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    html.motion-enabled .sub-content .org-sequence .org-connect {
        opacity: 0.28 !important;
        transform: none !important;
        animation: none !important;
    }
}



/* =========================
회사소개 > 연혁
========================= */
.sub-content .history {
    overflow: visible !important;
    position: relative;
}
.sub-content .history .inner {
    overflow: visible !important;
    display: grid;
    grid-template-columns: minmax(0, clamp(46rem, 42vw, 64rem)) minmax(0, 1fr);
    column-gap: clamp(4rem, 6vw, 10rem);
    align-items: stretch;
}
.sub-content .history-side {
    overflow: visible !important;
    position: relative;
    align-self: stretch;
    min-width: 0;
}
.sub-content .history-sticky {
    position: relative;
    display: grid;
    grid-template-columns: clamp(10rem, 10vw, 16rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 4vw, 6rem);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}
.sub-content .history-sticky.is-fixed {
    position: fixed;
    top: 12rem;
    z-index: 5;
    width: clamp(46rem, 42vw, 64rem);
}
.sub-content .history-sticky.is-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
}

/* 메뉴 */
.sub-content .history-nav {
    margin: clamp(15rem, 14vw, 23rem) 0 0;
    padding: 0;
}
.sub-content .history-nav li + li {
    margin-top: clamp(1.2rem, 1vw, 1.6rem);
}
.sub-content .history-nav button {
    position: relative;
    display: block;
    padding: 0 0 0 1.4rem;
    border: 0;
    background: none;
    color: #071827;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.sub-content .history-nav button::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #003f8f;
    opacity: 0;
    transform: translateY(-50%);
}
.sub-content .history-nav button.active {
    color: #003f8f;
    font-weight: 700;
}
.sub-content .history-nav button.active::before {
    opacity: 1;
}

/* 좌측 */
.sub-content .history-fixed-info {
    min-width: 0;
}
.sub-content .history-content .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}
.sub-content .history-img {
    overflow: hidden;
    width: min(100%, clamp(30rem, 28vw, 41.9rem));
    height: auto;
    aspect-ratio: 419 / 440;
    margin-top: clamp(2.4rem, 2.4vw, 3.5rem);
    border-radius: clamp(2.2rem, 2.2vw, 3.2rem);
    background: #eef4f8;
}
.sub-content .history-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 240ms ease;
}

/* 우측 */
.sub-content .history-list {
    position: relative;
    min-width: 0;
    padding-left: clamp(4rem, 5vw, 8rem);
}
.sub-content .history-list::after {
    content: "";
    position: absolute;
    top: clamp(-15rem, -10vw, -8rem);
    left: 0;
    width: 3px;
    height: calc(100% + clamp(16rem, 20vw, 30rem));
    background: rgba(0, 94, 184, 0.08);
}
.sub-content .history-decade {
    padding-bottom: clamp(8rem, 8vw, 12rem);
}
.sub-content .history-decade:last-child {
    padding-bottom: 0;
}
.sub-content .history-year {
    opacity: 0;
    transform: translateY(2.4rem);
    transition:
        opacity 560ms ease,
        transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sub-content .history-year.is-show {
    opacity: 1;
    transform: translateY(0);
}
.sub-content .history-year + .history-year {
    margin-top: clamp(5.6rem, 5.5vw, 8.5rem);
}
.sub-content .history-year h4 {
    margin: 0 0 clamp(2.6rem, 2.5vw, 3.8rem);
    color: #071827;
    font-size: clamp(2.8rem, 2.4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}
.sub-content .history-year ul {
    margin: 0;
    padding: 0;
}
.sub-content .history-year li {
    display: grid;
    grid-template-columns: clamp(6.5rem, 6vw, 9rem) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: clamp(1.2rem, 1.4vw, 2rem);
}
.sub-content .history-year li + li {
    margin-top: clamp(1.8rem, 1.6vw, 2.4rem);
}
.sub-content .history-year .date {
    color: #071827;
    font-size: clamp(1.9rem, 1.6vw, 2.4rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.04em;
}
.sub-content .history-year p {
    margin: 0;
    color: #4b5b6a;
    font-size: clamp(1.6rem, 1.2vw, 1.8rem);
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}



/* =========================
회사소개 > 인증서 및 설비 현황
========================= */
.sub-content .cert-head {
    margin-bottom: clamp(6rem, 6.5vw, 10.6rem);
    text-align: center;
}
.sub-content .cert-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(2.4rem, 2.6vw, 4rem) clamp(1.4rem, 1.6vw, 2.4rem);
}
.sub-content .cert-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: clamp(1.4rem, 1.6vw, 2.4rem);
    border: 1px solid #e2e8ef;
    border-radius: clamp(1.6rem, 1.6vw, 2.4rem);
    background: #fff;
    text-align: center;
    box-shadow: 0 0.6rem 2rem rgba(0, 27, 61, 0.06);
}
.sub-content .cert-img {
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;
    margin-bottom: clamp(1.4rem, 1.5vw, 2.2rem);
    border: 1px solid #e6edf3;
    border-radius: clamp(1rem, 1vw, 1.6rem);
    background: #fff;
}
.sub-content .cert-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sub-content .cert-card strong {
    display: block;
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.sub-content .cert-card span {
    display: block;
    margin-top: clamp(0.5rem, 0.5vw, 0.8rem);
    color: #071827;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 설비 */
.sub-content .facility-area {
    margin-top: clamp(9rem, 9vw, 15rem);
}
.sub-content .facility-area .data-table thead th:nth-child(2),
.sub-content .facility-area .data-table td:nth-child(2) {
    border-right: 1px solid #e6edf3;
}
.sub-content .facility-area .data-table th:nth-child(3)::after,
.sub-content .facility-area .data-table td:nth-child(3)::after {
    display: none;
}



/* =========================
회사소개 > 오시는 길
========================= */
.sub-content .location-info {
    z-index: 2;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2rem, 3vw, 4.8rem);
    row-gap: clamp(2.4rem, 2.4vw, 3.6rem);
    align-items: center;
    margin: 0 auto clamp(-2.4rem, -1.6vw, -1.2rem);
    padding:
        clamp(2.8rem, 2.8vw, 4.4rem)
        clamp(2.4rem, 2.4vw, 3.6rem);
    border-radius: clamp(2rem, 1.8vw, 2.8rem);
    background: #fff;
    box-shadow: 0 1.2rem 2.8rem rgba(0, 63, 143, 0.08);
}


/* 물류창고 주소는 전체 너비 */
.sub-content
.location-panel[data-location-panel="storage"]
.location-info {
    grid-template-columns: 1fr;
}
.sub-content .info-item {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 1.6vw, 2.4rem);
    min-width: 0;
}
.sub-content .info-item > div {
    min-width: 0;
}
.sub-content .info-icon {
    position: relative;
    flex: 0 0 clamp(4.8rem, 4vw, 6.4rem);
    width: clamp(4.8rem, 4vw, 6.4rem);
    height: clamp(4.8rem, 4vw, 6.4rem);
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #eef7fc;
}
.sub-content .info-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(2rem, 1.8vw, 2.8rem);
    height: clamp(2rem, 1.8vw, 2.8rem);
    background: #005eb8;
    transform: translate(-50%, -50%);
}
.sub-content .icon-addr::before {
    mask: url("/images/layout/lifetube/contents/icon-location-addr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/contents/icon-location-addr.svg") center / contain no-repeat;
}
.sub-content .icon-tel::before {
    mask: url("/images/layout/lifetube/contents/icon-location-tel.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/contents/icon-location-tel.svg") center / contain no-repeat;
}
.sub-content .icon-fax::before {
    mask: url("/images/layout/lifetube/contents/icon-location-fax.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/contents/icon-location-fax.svg") center / contain no-repeat;
}
.sub-content .icon-mail::before {
    mask: url("/images/layout/lifetube/contents/icon-location-mail.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/contents/icon-location-mail.svg") center / contain no-repeat;
}
.sub-content .info-item strong {
    display: block;
    margin-bottom: clamp(0.6rem, 0.7vw, 1rem);
    color: #003f8f;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
}
.sub-content .info-item p {
    margin: 0;
    color: #071827;
    font-size: clamp(1.5rem, 1.35vw, 2rem);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
.sub-content .map-box {
    --map-height: clamp(44rem, 40vw, 64rem);

    overflow: hidden;
    position: relative;
    width: min(160rem, calc(100vw - clamp(3rem, 4vw, 6rem)));
    height: var(--map-height);
    margin-left: 50%;
    border: 1px solid #dde8f2;
    border-radius: clamp(2rem, 1.8vw, 2.8rem);
    background: #dde8f2;
    transform: translateX(-50%);
}

.sub-content .map-box .root_daum_roughmap,
.sub-content .map-box .root_daum_roughmap_landing,
.sub-content .map-box .root_daum_roughmap .wrap_map,
.sub-content .map-box .root_daum_roughmap .wrap_controllers {
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
}
.sub-content .map-box .root_daum_roughmap,
.sub-content .map-box .root_daum_roughmap .wrap_map {
    height: var(--map-height) !important;
}
.sub-content .map-box .root_daum_roughmap .wrap_map .border1,
.sub-content .map-box .root_daum_roughmap .wrap_map .border2,
.sub-content .map-box .root_daum_roughmap .wrap_map .border3,
.sub-content .map-box .root_daum_roughmap .wrap_map .border4 {
    display: none !important;
}
.sub-content .map-box .root_daum_roughmap .wrap_controllers {
    border: 0 !important;
    box-shadow: none !important;
}



/* =========================
주요제품 > LLDPE / PERT Tube
========================= */
.sub-content.tube-quality .inner {
    display: grid;
    grid-template-columns: minmax(0, clamp(44rem, 42vw, 64rem)) minmax(0, 1fr);
    column-gap: clamp(4rem, 5vw, 8rem);
    row-gap: clamp(7rem, 6.5vw, 10.6rem);
}

/* 좌측 */
.sub-content .tube-quality-text {
    min-width: 0;
}
.sub-content .tube-quality-text .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}

/* 우측 */
.sub-content .tube-quality-imgs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.4rem, 2.6vw, 4rem) clamp(1.4rem, 1.6vw, 2.4rem);
    min-width: 0;
}
.sub-content .tube-quality-img {
    min-width: 0;
}
.sub-content .tube-quality-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 388 / 280;
    border: 0;
    border-radius: clamp(1.8rem, 1.8vw, 2.8rem);
    object-fit: cover;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 27, 61, 0.1);
}

/* 세 번째, 네 번째 이미지 */
.sub-content .tube-quality-img:nth-child(n+3) img {
    aspect-ratio: 388 / 240;
    border: 1px solid #d9e2ea;
}
.sub-content .tube-quality-img strong {
    display: block;
    margin-top: clamp(1.4rem, 1.5vw, 2.2rem);
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 공정 */
.sub-content .tube-process {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 1vw, 1.6rem);
    margin: 0;
    padding: clamp(2.4rem, 2.6vw, 4rem);
    border: 1px solid #d9e2ea;
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background: #f5f8fc;
}
.sub-content .tube-process-card {
    min-width: 0;
    min-height: clamp(7.2rem, 6vw, 9rem);
    padding:
        clamp(1.5rem, 1.4vw, 2.1rem)
        clamp(1.6rem, 1.7vw, 2.5rem);
    border: 1px solid #e2e8ef;
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #fff;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 27, 61, 0.04);
}
.sub-content .tube-process-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(2.4rem, 2vw, 3rem);
    height: clamp(1.8rem, 1.4vw, 2rem);
    padding: 0 0.6rem;
    border-radius: 999px;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.01em;
}
.sub-content .tube-process-card strong {
    display: block;
    margin-top: 0.4rem;
    color: #071827;
    font-size: clamp(1.4rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* tube-quality MOTION */
html.motion-enabled .sub-content .tube-quality-imgs[data-motion-group]:not(.is-motion-active) .tube-quality-img {
    opacity: 0;
    transform: translateX(-3.2rem);
}
html.motion-enabled .sub-content .tube-quality-imgs[data-motion-group] .tube-quality-img.motion-child-ready {
    opacity: 0;
    transform: translateX(-3.2rem);
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
    will-change: opacity, transform;
}
html.motion-enabled .sub-content .tube-quality-imgs[data-motion-group] .tube-quality-img.motion-child-ready.is-motion-active {
    opacity: 1;
    transform: translateX(0);
}



/* =========================
주요제품 > Custom Coating Tube
========================= */
.sub-content.coating-custom .inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(48rem, 44vw, 70rem));
    column-gap: clamp(4rem, 5vw, 8rem);
    align-items: start;
}

/* 좌측 라벨 */
.sub-content .coating-text {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
.sub-content .coating-text .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}
.sub-content .coating-tags {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.8rem, 0.8vw, 1.2rem);
    margin-top: clamp(4rem, 4vw, 6rem);
    margin-bottom: clamp(4rem, 4vw, 6rem);
}
.sub-content .coating-tags li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(4rem, 3.2vw, 4.8rem);
    padding: 0 clamp(2rem, 2vw, 3rem);
    border: 1px solid #d9e2ea;
    border-radius: 999px;
    background: #fff;
    color: #005eb8;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.02em;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 27, 61, 0.05);
}

/* 우측 라벨 */
.sub-content .coating-label {
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(20rem, 17vw, 26rem);
    height: clamp(4rem, 3vw, 4.6rem);
    margin-top: clamp(6rem, 6vw, 9.5rem);
    margin-left: auto;
    padding: 0 clamp(2rem, 2vw, 3rem);
    border-radius: 999px;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0.6rem 1.8rem rgba(0, 27, 61, 0.1);
}

/* 좌측 이미지 */
.sub-content .coating-left {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.4rem, 1.6vw, 2.4rem);
    row-gap: clamp(2.6rem, 2.6vw, 4rem);
    width: min(100%, 66rem);
    min-width: 0;
}
.sub-content .coating-card {
    min-width: 0;
}
.sub-content .coating-card-wide {
    grid-column: 1 / -1;
}
.sub-content .coating-card img {
    display: block;
    width: 100%;
    border-radius: clamp(2rem, 2.1vw, 3.2rem);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 27, 61, 0.1);
    object-fit: cover;
}
.sub-content .coating-card-wide img {
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 360;
}
.sub-content .coating-left .coating-card:not(.coating-card-wide) img {
    width: 100%;
    height: auto;
    aspect-ratio: 318 / 220;
}

/* 우측 큰 이미지 */
.sub-content .coating-card-large {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    min-width: 0;
}
.sub-content .coating-card-large img {
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 800;
}
.sub-content .coating-card strong {
    display: block;
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
    color: #071827;
    font-size: clamp(1.4rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.sub-content .coating-left,
.sub-content .coating-card-large {
    margin-top: clamp(-6.4rem, -4vw, -3.6rem);
}



/* =========================
주요제품 > Cutting & Marking
========================= */
.sub-content .cutting-head {
    margin-bottom: clamp(5rem, 5vw, 8rem);
    text-align: center;
}
.sub-content .cutting-head .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}
.sub-content .cutting-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 2.4vw, 3.6rem);
}
.sub-content .cutting-card {
    min-width: 0;
    padding:
        clamp(1.6rem, 1.6vw, 2.4rem)
        clamp(1.6rem, 1.6vw, 2.4rem)
        clamp(2.8rem, 2.6vw, 4rem);
    border: 1px solid #e2e8ef;
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background: #fff;
    box-shadow: 0 0.8rem 2.8rem rgba(0, 27, 61, 0.07);
}
.sub-content .cutting-img {
    overflow: hidden;
    position: relative;
    height: auto;
    border-radius: clamp(1.6rem, 1.6vw, 2.4rem);
    background: #e2e8ef;
}
.sub-content .cutting-img span {
    z-index: 2;
    position: absolute;
    top: clamp(1.6rem, 1.6vw, 2.4rem);
    left: clamp(1.6rem, 1.6vw, 2.4rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(5rem, 4.2vw, 6.4rem);
    height: clamp(3rem, 2.4vw, 3.6rem);
    padding: 0 clamp(0.9rem, 0.8vw, 1.2rem);
    border-radius: 999px;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 27, 61, 0.1);
}
.sub-content .cutting-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.sub-content .cutting-card .tit {
    margin:
        clamp(1.6rem, 1.5vw, 2.2rem)
        clamp(0.4rem, 0.5vw, 0.8rem)
        0;
    color: #071827;
    font-size: clamp(1.8rem, 1.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .cutting-card .desc {
    margin:
        clamp(1.2rem, 1.2vw, 1.8rem)
        clamp(0.4rem, 0.5vw, 0.8rem)
        0;
    color: #4b5b6a;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}



/* =========================
주요제품 > LFC Packaging
========================= */
.sub-content .lfc-head {
    margin-bottom: clamp(5rem, 5vw, 8rem);
    text-align: center;
}
.sub-content .lfc-head .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}
.sub-content .lfc-feature-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 1vw, 1.6rem);
    margin: 0 auto clamp(7rem, 6.5vw, 10.6rem);
    padding: clamp(2.4rem, 2.6vw, 4rem);
    border: 1px solid #d9e2ea;
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background: #f5f8fc;
}
.sub-content .lfc-feature-card {
    min-width: 0;
    min-height: clamp(7.2rem, 6vw, 9rem);
    padding:
        clamp(1.5rem, 1.4vw, 2.1rem)
        clamp(1.6rem, 1.7vw, 2.5rem);
    border: 1px solid #e2e8ef;
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #fff;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 27, 61, 0.04);
}
.sub-content .lfc-feature-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(2.4rem, 2vw, 3rem);
    height: clamp(1.8rem, 1.4vw, 2rem);
    padding: 0 0.6rem;
    border-radius: 999px;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.01em;
}
.sub-content .lfc-feature-card strong {
    display: block;
    margin-top: 0.4rem;
    color: #071827;
    font-size: clamp(1.4rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 비교 카드 */
.sub-content .lfc-compare {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.4rem, 2.6vw, 4rem);
}
.sub-content .lfc-card {
    min-width: 0;
    padding: clamp(2.6rem, 2.6vw, 4rem);
    border: 1px solid #d9e2ea;
    border-radius: clamp(2.4rem, 2.4vw, 3.6rem);
    background: #fff;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 27, 61, 0.06);
}
.sub-content .lfc-card.is-after {
    border: 2px solid #003f8f;
    box-shadow: 0 1rem 3.2rem rgba(0, 63, 143, 0.1);
}
.sub-content .lfc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(8rem, 6.5vw, 10rem);
    height: clamp(3.2rem, 2.5vw, 3.8rem);
    padding: 0 clamp(2rem, 2vw, 3rem);
    border-radius: 999px;
    background: #eef2f6;
    color: #6a7a88;
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
}
.sub-content .lfc-card.is-after .lfc-badge {
    background: #003f8f;
    color: #fff;
}
.sub-content .lfc-card h4 {
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
    color: #071827;
    font-size: clamp(2rem, 1.75vw, 2.6rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .lfc-card.is-after h4 {
    color: #003f8f;
}
.sub-content .lfc-card p {
    margin-top: clamp(1.2rem, 1.2vw, 1.8rem);
    color: #6a7a88;
    font-size: clamp(1.5rem, 1.15vw, 1.7rem);
    line-height: 1.65;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .lfc-img {
    overflow: hidden;
    height: clamp(27rem, 25vw, 38rem);
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
    border: 1px solid #e2e8ef;
    border-radius: clamp(1.6rem, 1.6vw, 2.4rem);
    background: #e2e8ef;
}
.sub-content .lfc-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sub-content .lfc-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(4.6rem, 3.6vw, 5.4rem);
    margin-top: clamp(1.8rem, 1.8vw, 2.8rem);
    padding: 0 clamp(1.4rem, 1.4vw, 2rem);
    border-radius: clamp(1.2rem, 1.1vw, 1.6rem);
    background: #f7f9fb;
    color: #6a7a88;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: keep-all;
}
.sub-content .lfc-card.is-after .lfc-caption {
    background: #eaf2fb;
    font-weight: 700;
    color: #003f8f;
}

/* 가운데 화살표 */
.sub-content .lfc-arrow {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(4.6rem, 4vw, 6rem);
    height: clamp(4.6rem, 4vw, 6rem);
    border-radius: 50%;
    border: clamp(4px, 0.4vw, 6px) solid #f2f6fa;
    background: #003f8f url("/images/layout/lifetube/common/ico-arr.svg") center / clamp(1.6rem, 1.5vw, 2.2rem) clamp(1.6rem, 1.5vw, 2.2rem) no-repeat;
    box-shadow: 0 0.4rem 1.6rem rgba(0, 27, 61, 0.1);
    transform: translate(-50%, -50%);
}

/* LFC 비교 카드 모션 */
html.motion-enabled .sub-content .lfc-compare[data-motion-group]:not(.is-motion-active) .lfc-card {
    opacity: 0;
    transform: translateY(2.4rem);
}
html.motion-enabled .sub-content .lfc-compare[data-motion-group] .lfc-card.motion-child-ready {
    opacity: 0;
    transform: translateY(2.4rem);
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
    will-change: opacity, transform;
}
html.motion-enabled .sub-content .lfc-compare[data-motion-group] .lfc-card.motion-child-ready.is-motion-active {
    opacity: 1;
    transform: translateY(0);
}



/* =========================
공통 제품 문의
========================= */
.sub-content .prod-inquiry {
    overflow: hidden !important;
    isolation: isolate;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(3rem, 4vw, 6rem);
    box-sizing: border-box;
    /* width: min(160rem, calc(var(--layout-width) - clamp(4rem, 6vw, 12rem))); */
    width: 100%;
    min-height: clamp(24rem, 20vw, 32rem);
    margin-top: clamp(5rem, 5vw, 8rem);
    margin-left: 50%;
    padding:
        clamp(4rem, 4vw, 6rem)
        clamp(4rem, 5vw, 8rem);
    border-radius: clamp(3rem, 3vw, 4.4rem);
    background: url("/images/layout/lifetube/contents/bg-product-inquiry.jpg") right center / cover no-repeat;
    box-shadow: 0 1.2rem 3rem rgba(0, 27, 61, 0.16);
    translate: -50% 0;
}
.sub-content .prod-inquiry::before {
    content: "";
    z-index: 0;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.06) 28%,
            rgba(255, 255, 255, 0) 58%
        ),
        linear-gradient(
            90deg,
            rgba(7, 24, 39, 0.96) 0%,
            rgba(7, 24, 39, 0.9) 34%,
            rgba(7, 24, 39, 0.48) 58%,
            rgba(7, 24, 39, 0.08) 78%,
            rgba(7, 24, 39, 0) 100%
        );
    pointer-events: none;
}
.sub-content .prod-inquiry .inquiry-inner {
    z-index: 1;
    position: relative;
    min-width: 0;
}
.sub-content .prod-inquiry .inquiry-label {
    display: block;
    margin-bottom: clamp(1.2rem, 1.2vw, 1.8rem);
    color: #8bc5ff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
}
.sub-content .prod-inquiry .inquiry-tit {
    display: block;
    color: #fff;
    font-size: clamp(2.4rem, 2.3vw, 3.4rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
.sub-content .prod-inquiry .inquiry-desc {
    margin-top: clamp(1.2rem, 1.2vw, 1.8rem);
    color: #c4d0dc;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .prod-inquiry .inquiry-btn {
    z-index: 3;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 clamp(17rem, 14vw, 21rem);
    width: clamp(17rem, 14vw, 21rem);
    height: clamp(4.8rem, 3.8vw, 5.6rem);
    padding: 0 clamp(1.6rem, 1.4vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    box-shadow:
        inset 0 0 0.8rem rgba(255, 255, 255, 0.08),
        0 1rem 2.4rem rgba(0, 27, 61, 0.22);
    transition:
        color 0.45s ease,
        border-color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s ease;
}
.sub-content .prod-inquiry .inquiry-btn::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    right: clamp(2rem, 1.8vw, 2.6rem);
    width: clamp(1rem, 0.8vw, 1.2rem);
    height: clamp(1rem, 0.8vw, 1.2rem);
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(220, 238, 255, 0.92) 48%,
        rgba(178, 206, 255, 0.86) 100%
    );
    transform: translate(50%, -50%) scale(1);
    transform-origin: center;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.sub-content .prod-inquiry .inquiry-btn span {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 clamp(1rem, 0.8vw, 1.2rem);
    width: clamp(1rem, 0.8vw, 1.2rem);
    height: clamp(1rem, 0.8vw, 1.2rem);
    margin: 0;
    border-radius: 999px;
    background: #fff;
    font-size: 0;
    box-shadow: 0 0 1.2rem rgba(255, 255, 255, 0.45);
    transition:
        background 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s ease;
}
.sub-content .prod-inquiry .inquiry-btn:hover {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.14);
    color: #071827;
    box-shadow:
        inset 0 0 1rem rgba(255, 255, 255, 0.16),
        0 1.4rem 3rem rgba(0, 27, 61, 0.28);
    transform: translateY(-0.2rem);
}
.sub-content .prod-inquiry .inquiry-btn:hover::before {
    transform: translate(50%, -50%) scale(36);
}
.sub-content .prod-inquiry .inquiry-btn:hover span {
    background: #071827;
    box-shadow: none;
    transform: scale(0.9);
}
html.motion-enabled .sub-content .prod-inquiry[data-motion],
html.motion-enabled .sub-content .prod-inquiry[data-motion].is-motion-active,
html.motion-enabled .sub-content .prod-inquiry[data-motion].is-motion-done {
    overflow: hidden !important;
    clip-path: none !important;
}



/* =========================
주요제품 > 압출튜브
========================= */
.sub-content .prod-lineup-head {
    margin-bottom: clamp(5rem, 5vw, 8rem);
}
.sub-content .prod-lineup-head .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}
.sub-content .prod-panel {
    box-sizing: border-box;
    /* width: min(160rem, calc(var(--layout-width) - clamp(4rem, 6vw, 12rem))); */
    width: 100%;
    margin-left: 50%;
    padding: clamp(4rem, 5vw, 8rem);
    border: 1px solid #dfe9f3;
    border-radius: clamp(3.6rem, 3.6vw, 5.6rem);
    background: #f5f8fc;
    translate: -50% 0;
}
.sub-content .prod-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:
        clamp(2.6rem, 2.6vw, 4rem)
        clamp(2rem, 2.4vw, 3.6rem);
}

/* 제품 카드 */
.sub-content .prod-card {
    min-width: 0;
    padding: clamp(1.4rem, 1.4vw, 2rem);
    border-radius: clamp(2.4rem, 2.2vw, 3.4rem);
    border: 1px solid #e2e8ef;
    background: #fff;
    box-shadow: 0 0.8rem 2.6rem rgba(0, 27, 61, 0.07);
}
.sub-content .prod-img {
    overflow: hidden;
    height: clamp(20rem, 18vw, 27rem);
    border-radius: clamp(1.6rem, 1.6vw, 2.4rem);
    background: #f7f9fb;
}
.sub-content .prod-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sub-content .prod-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(0.6rem, 0.6vw, 0.8rem);
    margin-top: clamp(1.5rem, 1.5vw, 2.2rem);
    min-width: 0;
}
.sub-content .prod-info > div {
    min-width: 0;
}
.sub-content .prod-info h4 {
    color: #071827;
    font-size: clamp(2rem, 1.75vw, 2.6rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .prod-info p {
    margin-top: clamp(0.5rem, 0.5vw, 0.8rem);
    color: #4b5b6a;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.sub-content .prod-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: clamp(0.5rem, 0.5vw, 0.8rem);
    flex: 0 1 auto;
    min-width: 0;
}
.sub-content .prod-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(2.6rem, 2.2vw, 3.2rem);
    padding: 0 clamp(1.1rem, 1.1vw, 1.6rem);
    border-radius: 999px;
    background: #eaf2fb;
    color: #003f8f;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* prod card MOTION */
html.motion-enabled .sub-content .prod-grid[data-motion-group]:not(.is-motion-active) .prod-card {
    opacity: 0;
    transform: translateY(2.4rem);
}
html.motion-enabled .sub-content .prod-grid[data-motion-group] .prod-card.motion-child-ready {
    opacity: 0;
    transform: translateY(2.4rem);
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
}
html.motion-enabled .sub-content .prod-grid[data-motion-group] .prod-card.motion-child-ready.is-motion-active {
    opacity: 1;
    transform: translateY(0);
}



/* =========================
주요제품 > 튜브 조립품
========================= */
.sub-content.prod-lineup.ver2 .prod-grid {
    gap:
        clamp(3.8rem, 4vw, 6.3rem)
        clamp(2rem, 2.4vw, 3.6rem);
}
.sub-content.prod-lineup.ver2 .prod-card {
    padding:
        clamp(1.8rem, 1.8vw, 2.8rem)
        clamp(1.8rem, 1.8vw, 2.8rem)
        clamp(1.6rem, 1.5vw, 2.2rem);
}
.sub-content.prod-lineup.ver2 .prod-img {
    height: clamp(20rem, 18vw, 27rem);
}
.sub-content.prod-lineup.ver2 .prod-name {
    margin-top: clamp(1.4rem, 1.4vw, 2rem);
    color: #071827;
    font-size: clamp(1.4rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-align: center;
    word-break: keep-all;
}

/* 하단 큰 카드 */
.sub-content.prod-lineup.ver2 .prod-card.is-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(3.6rem, 4vw, 6.2rem);
    min-height: clamp(38rem, 34vw, 52rem);
    padding: clamp(1.8rem, 1.8vw, 2.8rem);
}
.sub-content.prod-lineup.ver2 .prod-wide-img {
    overflow: hidden;
    height: clamp(32rem, 30vw, 46.4rem);
    border-radius: clamp(1.6rem, 1.6vw, 2.4rem);
}
.sub-content.prod-lineup.ver2 .prod-wide-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sub-content.prod-lineup.ver2 .prod-wide-info {
    min-width: 0;
}
.sub-content.prod-lineup.ver2 .prod-label {
    display: block;
    margin-bottom: clamp(2.2rem, 2.3vw, 3.5rem);
    color: #003f8f;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
}
.sub-content.prod-lineup.ver2 .prod-tit {
    color: #071827;
    font-size: clamp(3rem, 3vw, 4.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content.prod-lineup.ver2 .prod-desc {
    margin-top: clamp(2rem, 2vw, 3rem);
    color: #4b5b6a;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    line-height: 1.55;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.sub-content.prod-lineup.ver2 .prod-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(2.6rem, 2.2vw, 3.2rem);
    margin-top: clamp(2.8rem, 3vw, 4.4rem);
    padding: 0 clamp(1.1rem, 1.1vw, 1.6rem);
    border-radius: 999px;
    background: #edf4fb;
    color: #4b5b6a;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    font-style: normal;
    letter-spacing: -0.02em;
    white-space: nowrap;
}



/* =========================
주요제품 > 제품 라인업 보기
========================= */
.sub-content .prod-overview-head {
    margin-bottom: clamp(5rem, 5vw, 8rem);
    text-align: center;
}
.sub-content .prod-overview-head .sub-title {
    margin-bottom: clamp(2.4rem, 2.4vw, 3.5rem);
}
.sub-content .overview-list {
    display: grid;
    gap: clamp(2.6rem, 2.6vw, 4rem);
    /* width: min(144rem, 100%); */
    width: 100%;
    margin: 0 auto;
}
.sub-content .overview-card {
    min-width: 0;
    padding: clamp(2.8rem, 3vw, 4.5rem);
    border: 1px solid #e2e8ef;
    border-radius: clamp(2.8rem, 2.7vw, 4rem);
    background: #fff;
    box-shadow: 0 0.8rem 2.8rem rgba(0, 27, 61, 0.07);
}
.sub-content .overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1.4rem, 1.4vw, 2rem);
    margin-bottom: clamp(3.6rem, 3.8vw, 5.6rem);
}
.sub-content .overview-head > div {
    min-width: 0;
}
.sub-content .overview-label {
    display: block;
    margin-bottom: clamp(1.2rem, 1.2vw, 1.8rem);
    color: #003f8f;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}
.sub-content .overview-tit {
    color: #071827;
    font-size: clamp(2.2rem, 2vw, 3rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
.sub-content .overview-desc {
    margin-top: clamp(1.4rem, 1.4vw, 2rem);
    color: #4b5b6a;
    font-size: clamp(1.5rem, 1.15vw, 1.7rem);
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}
.sub-content .overview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: clamp(11rem, 9vw, 14rem);
    height: clamp(3.8rem, 3vw, 4.6rem);
    padding: 0 clamp(1.5rem, 1.4vw, 2rem);
    border-radius: 999px;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.sub-content .overview-btn:hover {
    background: #005eb8;
    color: #fff;
    box-shadow: 0 0.8rem 1.8rem rgba(0, 63, 143, 0.18);
    transform: translateY(-0.2rem);
}
.sub-content .overview-thumb-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(1rem, 1vw, 1.6rem);
    margin-bottom: clamp(2.6rem, 2.6vw, 4rem);
}
.sub-content .overview-thumb-list li {
    overflow: hidden;
    position: relative;
    height: auto;
    border-radius: clamp(1.4rem, 1.5vw, 2.2rem);
    border: 1px solid #e6edf3;
    background: #f7f9fb;
}
.sub-content .overview-thumb-list img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.sub-content .overview-thumb-list strong {
    position: absolute;
    top: clamp(1.2rem, 1.3vw, 2rem);
    left: clamp(1.2rem, 1.3vw, 2rem);
    color: #071827;
    font-size: clamp(1.2rem, 1vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    word-break: keep-all;
}

/* 하단 2분할 */
.sub-content .overview-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.6rem, 2.6vw, 4rem);
}
.sub-content .overview-card-dark {
    background: #071827;
    border-color: #071827;
}
.sub-content .overview-card-dark .overview-label {
    color: #8bc5ff;
}
.sub-content .overview-card-dark .overview-tit {
    color: #fff;
}
.sub-content .overview-card-dark .overview-desc {
    color: #c4d0dc;
}
.sub-content .overview-card-dark .overview-btn {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.sub-content .overview-card-dark .overview-btn:hover {
    border: 1px solid rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 1);
    color: #005eb8;
    box-shadow: 0 0.8rem 1.8rem rgba(139, 197, 255, 0.18);
}

/* 미니 카드 공통 */
.sub-content .overview-assembly-grid,
.sub-content .overview-fitting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1vw, 1.6rem);
}
.sub-content .overview-mini-card {
    overflow: hidden;
    position: relative;
    height: auto;
    min-height: 0;
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #f7f9fb;
}
.sub-content .overview-mini-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.sub-content .overview-mini-card strong {
    position: absolute;
    right: clamp(1.2rem, 1.3vw, 2rem);
    bottom: clamp(1.2rem, 1.3vw, 2rem);
    color: #071827;
    font-size: clamp(1.2rem, 1vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    word-break: keep-all;
}

/* 하단 안내 */
.sub-content .overview-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(5rem, 4vw, 6.4rem);
    width: min(144rem, 100%);
    margin: clamp(3.2rem, 3.2vw, 5rem) auto 0;
    padding: 0 clamp(2rem, 2vw, 3rem);
    border: 1px solid #c5d9ee;
    border-radius: 999px;
    background: #eaf2fb;
    color: #003f8f;
    font-size: clamp(1.4rem, 1.15vw, 1.7rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.03em;
    text-align: center;
    word-break: keep-all;
}

/* 테이블 */
.sub-content .prod-overview .data-table table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
.sub-content .prod-overview .data-table th,
.sub-content .prod-overview .data-table td {
    white-space: normal;
    word-break: keep-all;
}
.sub-content .prod-overview .data-table tbody th {
    color: #003f8f;
    font-weight: 700;
}
.sub-content .prod-overview .data-table td:nth-child(4),
.sub-content .prod-overview .data-table td:nth-child(5) {
    line-height: 1.55;
}


/* 모션 */
html.motion-enabled .sub-content .overview-list[data-motion-group]:not(.is-motion-active) .overview-card {
    opacity: 0;
    transform: translateY(2.4rem);
}
html.motion-enabled .sub-content .overview-list[data-motion-group] .overview-card.motion-child-ready {
    opacity: 0;
    transform: translateY(2.4rem);
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
}
html.motion-enabled .sub-content .overview-list[data-motion-group] .overview-card.motion-child-ready.is-motion-active {
    opacity: 1;
    transform: translateY(0);
}



/* =========================
고객문의
========================= */
.inquiry-page .sub-visual-inner {
    z-index: 2;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(36rem, 34vw, 52rem));
    align-items: end;
    gap: clamp(4rem, 5vw, 8rem);
    width: min(calc(100% - clamp(3rem, 4vw, 6rem)), 144rem);
    height: 100%;
    padding-bottom: clamp(5rem, 5vw, 8rem);
}

/* 좌측 텍스트 */
.inquiry-page .inquiry-top {
    display: block;
    min-width: 0;
    margin: 0;
}
.inquiry-page .sub-eyebrow {
    margin: 0 0 clamp(1.6rem, 1.6vw, 2.4rem);
    color: #8bc5ff;
    font-size: clamp(1.4rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
}
.inquiry-page h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(4.6rem, 4.2vw, 6.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.06em;
    word-break: keep-all;
}
.inquiry-page .sub-desc {
    margin-top: clamp(2rem, 2.2vw, 3.2rem);
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: -0.04em;
    word-break: keep-all;
}

/* 우측 안내 카드 */
.inquiry-page .inquiry-guide-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    min-width: 0;
    margin: 0;
    padding: clamp(2.4rem, 2.4vw, 3.6rem) 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background:
        radial-gradient(circle at 0% 0%, rgba(139, 197, 255, 0.22) 0%, rgba(139, 197, 255, 0) 28rem),
        rgba(0, 63, 143, 0.58);
    box-shadow: 0 2rem 5.6rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}
.inquiry-page .inquiry-guide-list li {
    display: grid;
    grid-template-columns: clamp(4.8rem, 4vw, 6.4rem) minmax(0, 1fr);
    column-gap: clamp(1.4rem, 1.6vw, 2.4rem);
    align-items: center;
    min-height: auto;
    padding: 0 clamp(2.4rem, 2.7vw, 4rem);
    border: 0;
    border-radius: 0;
    background: transparent;
}
.inquiry-page .inquiry-guide-list li + li {
    margin-top: clamp(1.8rem, 1.8vw, 2.8rem);
    padding-top: clamp(1.8rem, 1.8vw, 2.8rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.inquiry-page .guide-icon {
    grid-row: 1 / span 2;
    position: relative;
    display: block;
    width: clamp(4.8rem, 4vw, 6.4rem);
    height: clamp(4.8rem, 4vw, 6.4rem);
    margin: 0;
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: rgba(139, 197, 255, 0.35);
}
.inquiry-page .guide-icon::before {
    content: "";
    position: absolute;
    inset: clamp(1rem, 0.9vw, 1.4rem);
    background: #fff;
}
.inquiry-page .guide-time::before {
    mask: url("/images/layout/lifetube/common/icon-inquiry-time.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/icon-inquiry-time.svg") center / contain no-repeat;
}
.inquiry-page .guide-mail::before {
    mask: url("/images/layout/lifetube/common/icon-inquiry-mail.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/icon-inquiry-mail.svg") center / contain no-repeat;
}
.inquiry-page .guide-safe::before {
    mask: url("/images/layout/lifetube/common/icon-inquiry-safe.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/icon-inquiry-safe.svg") center / contain no-repeat;
}
.inquiry-page .inquiry-guide-list strong {
    display: block;
    color: #8bc5ff;
    font-size: clamp(1.4rem, 1.15vw, 1.7rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
}
.inquiry-page .inquiry-guide-list p {
    margin-top: clamp(0.8rem, 0.8vw, 1.2rem);
    color: #fff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.04em;
    word-break: keep-all;
}


/* 폼 */
:is(.inquiry-content, .qna-write) {
    padding: clamp(7rem, 6.5vw, 10rem) 0 clamp(10rem, 9vw, 15rem);
}
:is(.inquiry-content, .qna-write) .inner {
    width: min(160rem, calc(var(--layout-width) - clamp(4rem, 6vw, 12rem)));
    /* width: 100%; */
    max-width: none;
}
:is(.inquiry-content, .qna-write) .inquiry-form-box {
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--form-line);
    border-radius: var(--form-radius-panel);
    background: var(--form-bg-panel);
}
:is(.inquiry-content, .qna-write) .inquiry-form-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 1.6vw, 2.4rem);
    padding:
        clamp(3.6rem, 3.6vw, 5.6rem)
        clamp(4rem, 5vw, 8rem);
    border-bottom: 1px solid var(--form-line);
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 63, 143, 0.08) 0%, rgba(0, 63, 143, 0) 30rem),
        linear-gradient(180deg, #ffffff 0%, var(--form-bg-soft) 100%);
}
:is(.inquiry-content, .qna-write) .inquiry-form-icon {
    position: relative;
    display: block;
    flex: 0 0 clamp(4.8rem, 4vw, 6.4rem);
    width: clamp(4.8rem, 4vw, 6.4rem);
    height: clamp(4.8rem, 4vw, 6.4rem);
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #003f8f;
    box-shadow: 0 1rem 2.4rem rgba(0, 63, 143, 0.18);
}
:is(.inquiry-content, .qna-write) .inquiry-form-icon::before {
    content: "";
    position: absolute;
    inset: clamp(1.3rem, 1.15vw, 1.8rem);
    background: #fff;
    mask: url("/images/layout/lifetube/common/icon-inquiry-write.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/icon-inquiry-write.svg") center / contain no-repeat;
}
:is(.inquiry-content, .qna-write) .inquiry-form-head strong {
    display: block;
    color: #071827;
    font-size: clamp(1.9rem, 1.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
:is(.inquiry-content, .qna-write) .inquiry-form-head p {
    margin-top: clamp(0.6rem, 0.7vw, 1rem);
    color: #6c7b88;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

/* 입력 영역 */
:is(.inquiry-content, .qna-write) .inquiry-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.4rem, 2.6vw, 4rem);
    padding:
        clamp(3.6rem, 3.6vw, 5.6rem)
        clamp(4rem, 5vw, 8rem)
        0;
}
:is(.inquiry-content, .qna-write) .inquiry-field {
    display: grid;
    gap: clamp(1.4rem, 1.3vw, 2rem);
    min-width: 0;
}
:is(.inquiry-content, .qna-write) .inquiry-field.is-full {
    grid-column: 1 / -1;
}
:is(.inquiry-content, .qna-write) .inquiry-field textarea {
    min-height: clamp(22rem, 20vw, 30rem);
}
:is(.inquiry-content, .qna-write) .inquiry-form-group-title {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 0.8vw, 1.2rem);
    margin:
        clamp(0.8rem, 0.8vw, 1.2rem)
        0
        clamp(-1.2rem, -0.8vw, -0.8rem);
}
:is(.inquiry-content, .qna-write) .inquiry-form-group-title.is-full {
    grid-column: 1 / -1;
}
:is(.inquiry-content, .qna-write) .inquiry-form-group-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #dce7f1;
}
:is(.inquiry-content, .qna-write) .inquiry-form-group-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(3rem, 2.4vw, 3.6rem);
    height: clamp(2.4rem, 1.8vw, 2.8rem);
    padding: 0 clamp(0.8rem, 0.7vw, 1rem);
    border-radius: 999px;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
:is(.inquiry-content, .qna-write) .inquiry-form-group-title strong {
    flex: 0 0 auto;
    color: #071827;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

/* 개인정보 */
:is(.inquiry-content, .qna-write) .inquiry-privacy {
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: clamp(9rem, 8vw, 13rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 2vw, 3rem);
    margin:
        clamp(2.8rem, 2.6vw, 4rem)
        clamp(4rem, 5vw, 8rem)
        0;
    padding:
        clamp(2.6rem, 2.6vw, 3.8rem)
        clamp(3rem, 3vw, 4.4rem);
    border: 1px solid rgba(139, 197, 255, 0.24);
    border-radius: var(--form-radius-card);
    background:
        radial-gradient(circle at 0% 0%, rgba(139, 197, 255, 0.22) 0%, rgba(139, 197, 255, 0) 28rem),
        linear-gradient(135deg, #071827 0%, #092846 52%, #003f8f 100%);
    box-shadow: 0 1.2rem 3.6rem rgba(0, 27, 61, 0.16);
}
:is(.inquiry-content, .qna-write) .inquiry-privacy::before {
    content: "";
    position: absolute;
    right: clamp(-8rem, -5vw, -5rem);
    bottom: clamp(-10rem, -6vw, -6rem);
    width: clamp(20rem, 20vw, 30rem);
    height: clamp(20rem, 20vw, 30rem);
    border-radius: 50%;
    background: rgba(139, 197, 255, 0.1);
    pointer-events: none;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(9rem, 8vw, 13rem);
    height: clamp(10rem, 9vw, 15rem);
    background: url("/images/layout/lifetube/contents/icon-privacy-check.png") center / 125% auto no-repeat;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy-cont {
    position: relative;
    z-index: 1;
    min-width: 0;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy .privacy-check {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.8vw, 1.2rem);
    color: #fff;
    font-size: clamp(1.4rem, 1.15vw, 1.7rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.03em;
    cursor: pointer;
    word-break: keep-all;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy .privacy-check input {
    appearance: none;
    position: relative;
    flex: 0 0 clamp(1.7rem, 1.3vw, 2rem);
    width: clamp(1.7rem, 1.3vw, 2rem);
    height: clamp(1.7rem, 1.3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy .privacy-check input::before {
    content: "";
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(0.8rem, 0.7vw, 1rem);
    height: clamp(0.5rem, 0.4vw, 0.6rem);
    border-left: 2px solid #071827;
    border-bottom: 2px solid #071827;
    transform: translate(-50%, -60%) rotate(-45deg);
}
:is(.inquiry-content, .qna-write) .inquiry-privacy .privacy-check input:checked {
    border-color: #8bc5ff;
    background: #8bc5ff;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy .privacy-check input:checked::before {
    opacity: 1;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy ul {
    display: grid;
    gap: clamp(0.6rem, 0.6vw, 0.8rem);
    margin: clamp(1.4rem, 1.4vw, 2rem) 0 0;
    padding: clamp(1.4rem, 1.4vw, 2rem) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
:is(.inquiry-content, .qna-write) .inquiry-privacy li {
    position: relative;
    padding-left: 1.4rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
:is(.inquiry-content, .qna-write) .inquiry-privacy li::before {
    content: "";
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #8bc5ff;
    transform: translateY(-50%);
}

/* 버튼 */
:is(.inquiry-content, .qna-write) .inquiry-actions {
    display: flex;
    justify-content: center;
    padding:
        clamp(3.2rem, 3.2vw, 4.8rem)
        clamp(4rem, 5vw, 8rem)
        clamp(4.4rem, 4.2vw, 6.4rem);
}
:is(.inquiry-content, .qna-write) .inquiry-submit {
    overflow: hidden;
    isolation: isolate;
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(1.8rem, 2vw, 3rem);
    min-width: clamp(18rem, 15vw, 22rem);
    height: clamp(5.2rem, 4.4vw, 6.5rem);
    padding:
        0.8rem
        0.8rem
        0.8rem
        clamp(2.2rem, 2.1vw, 3.2rem);
    border-radius: 999px;
    background: #fff;
    color: #005eb8;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    box-shadow: 0 1rem 2.4rem rgba(0, 63, 143, 0.18);
    transition:
        color 0.5s ease,
        border-color 0.5s ease,
        background 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.5s ease;
}
:is(.inquiry-content, .qna-write) .inquiry-submit span {
    z-index: 2;
    position: relative;
    display: block;
    font: inherit;
    color: inherit;
}
:is(.inquiry-content, .qna-write) .inquiry-submit i {
    z-index: 1;
    position: relative;
    display: block;
    flex: 0 0 clamp(3.6rem, 3.2vw, 4.7rem);
    width: clamp(3.6rem, 3.2vw, 4.7rem);
    height: clamp(3.6rem, 3.2vw, 4.7rem);
    border-radius: 50%;
    background: #005eb8;
    box-shadow: 0 0 0 0 #005eb8;
    transition:
        background 0.5s ease,
        box-shadow 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 화살표 */
:is(.inquiry-content, .qna-write) .inquiry-submit i::before {
    content: "";
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(1.1rem, 0.9vw, 1.4rem);
    height: clamp(1.1rem, 0.9vw, 1.4rem);
    background-color: #fff;
    mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: center;
    transition:
        transform 0.5s ease,
        background-color 0.5s ease;
}
:is(.inquiry-content, .qna-write) .inquiry-submit:hover {
    border-color: #fff;
    background: #fff;
    color: #fff;
    box-shadow: 0 1.2rem 2.8rem rgba(0, 63, 143, 0.22);
    transform: translateY(-0.2rem);
}
:is(.inquiry-content, .qna-write) .inquiry-submit:hover i {
    background: #005eb8;
    box-shadow: 0 0 0 32rem #005eb8;
}
:is(.inquiry-content, .qna-write) .inquiry-submit:hover i::before {
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* 고객문의 MOTION */
html.motion-enabled .inquiry-page .sub-desc {
    opacity: 0;
    transform: translateY(2rem);
    animation: inquiryVisualTextUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}
html.motion-enabled .inquiry-page .inquiry-guide-list {
    opacity: 0;
    transform: translateX(3.2rem);
    filter: blur(0.6rem);
    animation: inquiryGuideCardIn 0.86s cubic-bezier(0.22, 1, 0.36, 1) 0.52s forwards;
}
html.motion-enabled .inquiry-page .inquiry-guide-list li {
    opacity: 0;
    transform: translateY(1.6rem);
    animation: inquiryGuideItemUp 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html.motion-enabled .inquiry-page .inquiry-guide-list li:nth-child(1) {
    animation-delay: 0.78s;
}
html.motion-enabled .inquiry-page .inquiry-guide-list li:nth-child(2) {
    animation-delay: 0.9s;
}
html.motion-enabled .inquiry-page .inquiry-guide-list li:nth-child(3) {
    animation-delay: 1.02s;
}

html.motion-enabled .inquiry-form-motion[data-motion]:not(.is-motion-active):not(.is-motion-done) .inquiry-form-head,
html.motion-enabled .inquiry-form-motion[data-motion]:not(.is-motion-active):not(.is-motion-done) .inquiry-form-group-title,
html.motion-enabled .inquiry-form-motion[data-motion]:not(.is-motion-active):not(.is-motion-done) .inquiry-field,
html.motion-enabled .inquiry-form-motion[data-motion]:not(.is-motion-active):not(.is-motion-done) .inquiry-privacy,
html.motion-enabled .inquiry-form-motion[data-motion]:not(.is-motion-active):not(.is-motion-done) .inquiry-actions {
    opacity: 0;
    transform: translateY(2.4rem);
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-head,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-head,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-group-title,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-group-title,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-field,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-field,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-privacy,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-privacy,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-actions,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-actions {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.64s ease,
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-head,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-head {
    transition-delay: 0.04s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-form-group-title:nth-child(1),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-form-group-title:nth-child(1) {
    transition-delay: 0.14s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-field:nth-child(2),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-field:nth-child(2) {
    transition-delay: 0.2s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-field:nth-child(3),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-field:nth-child(3) {
    transition-delay: 0.26s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-form-group-title:nth-child(4),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-form-group-title:nth-child(4) {
    transition-delay: 0.36s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-field:nth-child(5),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-field:nth-child(5) {
    transition-delay: 0.42s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-field:nth-child(6),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-field:nth-child(6) {
    transition-delay: 0.48s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-form-group-title:nth-child(7),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-form-group-title:nth-child(7) {
    transition-delay: 0.58s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-field:nth-child(8),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-field:nth-child(8) {
    transition-delay: 0.64s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-form-grid > .inquiry-field:nth-child(9),
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-form-grid > .inquiry-field:nth-child(9) {
    transition-delay: 0.7s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-privacy,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-privacy {
    transition-delay: 0.82s;
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-actions,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-actions {
    transition-delay: 0.94s;
}
html.motion-enabled .inquiry-form-motion[data-motion]:not(.is-motion-active):not(.is-motion-done) .inquiry-privacy-icon {
    opacity: 0;
    transform: scale(0.86);
}
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-active .inquiry-privacy-icon,
html.motion-enabled .inquiry-form-motion[data-motion].is-motion-done .inquiry-privacy-icon {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.58s ease 0.96s,
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.96s;
}
@keyframes inquiryVisualTextUp {
    0% {
        opacity: 0;
        transform: translateY(2rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes inquiryGuideCardIn {
    0% {
        opacity: 0;
        transform: translateX(3.2rem);
        filter: blur(0.6rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}
@keyframes inquiryGuideItemUp {
    0% {
        opacity: 0;
        transform: translateY(1.6rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
    html.motion-enabled .inquiry-page .sub-visual .sub-desc,
    html.motion-enabled .inquiry-page .inquiry-guide-list,
    html.motion-enabled .inquiry-page .inquiry-guide-list li,
    html.motion-enabled .inquiry-form-motion[data-motion] .inquiry-form-head,
    html.motion-enabled .inquiry-form-motion[data-motion] .inquiry-form-group-title,
    html.motion-enabled .inquiry-form-motion[data-motion] .inquiry-field,
    html.motion-enabled .inquiry-form-motion[data-motion] .inquiry-privacy,
    html.motion-enabled .inquiry-form-motion[data-motion] .inquiry-actions,
    html.motion-enabled .inquiry-form-motion[data-motion] .inquiry-privacy-icon {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}




/* =========================
RESPONSIVE
========================= */

/* __________ Tablet __________ */
@media (max-width: 1024px) {
    /* 경영이념 > 인사말 */
    .sub-content .greeting .inner {
        flex-direction: column;
    }
    .sub-content .greeting .sub-page-head {
        max-width: none;
    }
    .sub-content .greeting .sub-title {
        margin-bottom: 0;
    }
    .sub-content .greeting .sub-desc {
        max-width: none;
        padding-top: 0;
    }

    /* 경영이념 > 품질방침 */
    .sub-content .quality-card-list {
        flex-wrap: wrap;
    }

    /* 조직도 */
    .sub-content .org-chart {
        display: block;
    }
    .sub-content .org-ceo {
        width: fit-content;
        margin: 0 auto 4.8rem;
        padding: 0;
    }
    .sub-content .org-flow {
        display: grid;
        gap: 2.4rem;
        margin-top: 0;
        min-width: 0;
    }
    .sub-content .org-flow::before,
    .sub-content .org-connect {
        display: none !important;
    }
    .sub-content .org-group {
        display: grid;
        grid-template-columns: clamp(12rem, 18vw, 16rem) minmax(0, 1fr);
        gap: 2.4rem;
        padding: 2.4rem;
        border: 3px solid rgba(229, 237, 245, 0.42);
        border-radius: 2.4rem;
    }
    .sub-content .org-group-lab {
        display: block;
        min-height: 0;
        padding: 2.4rem;
        text-align: center;
    }
    .sub-content .org-group-title {
        grid-column: auto;
        grid-row: auto;
        align-self: flex-start;
        padding-top: 1.2rem;
        font-size: 2.8rem;
        line-height: 1.25;
    }
    .sub-content .org-group-lab .org-group-title {
        display: block;
        padding-top: 0;
    }
    .sub-content .org-team-list {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
    .sub-content .org-team-card {
        max-width: none;
        min-height: 0;
        padding: 1.8rem;
        border: 1px solid #e5edf5;
        border-radius: 2rem;
        background: #fff;
        box-shadow: 0 0.6rem 1.8rem rgba(0, 27, 61, 0.05);
    }
    .sub-content .org-group-support .org-team-card {
        background: rgba(7, 24, 39, 0.035);
    }
    .sub-content .org-group-prodion .org-team-card {
        background: rgba(0, 132, 223, 0.055);
    }
    .sub-content .org-team-card::before {
        display: none;
    }
    .sub-content .org-team-card > strong {
        width: 100%;
        min-height: 5.6rem;
        aspect-ratio: auto;
        margin: 0;
        padding: 1.3rem 1.4rem;
        border: 1px solid #e5edf5;
        border-radius: 1.4rem;
        background: #fff;
        font-size: 1.9rem;
        line-height: 1.35;
        box-shadow: none;
    }
    .sub-content .org-team-card span {
        font-size: 1.5rem;
    }
    .sub-content .org-team-card ul {
        margin: 1.6rem 0 0;
    }
    .sub-content .org-team-card li {
        font-size: 1.5rem;
        white-space: normal;
    }

    /* 연혁 */
    .sub-content .history .inner {
        display: block;
    }
    .sub-content .history-side {
        margin-bottom: 6rem;
    }
    .sub-content .history-sticky,
    .sub-content .history-sticky.is-fixed,
    .sub-content .history-sticky.is-bottom {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        display: flex;
        flex-direction: column;
        gap: 3.2rem;
        width: 100%;
    }
    .sub-content .history-fixed-info {
        order: 1;
    }
    .sub-content .history-nav {
        order: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 0;
        padding: 1rem;
        border: 1px solid #e5edf5;
        border-radius: 999px;
        background: #f5f8fc;
    }
    .sub-content .history-nav li + li {
        margin-top: 0;
    }
    .sub-content .history-nav button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 4rem;
        padding: 0 1.8rem;
        border: 1px solid #dbe5ef;
        border-radius: 999px;
        background: #fff;
        color: #4b5b6a;
        font-size: 1.5rem;
        font-weight: 700;
    }
    .sub-content .history-nav button::before {
        display: none;
    }
    .sub-content .history-nav button.active {
        border-color: #003f8f;
        background: #003f8f;
        color: #fff;
    }
    .sub-content .history-img {
        display: none;
    }
    .sub-content .history-list {
        position: relative;
        padding-left: 3.2rem;
    }
    .sub-content .history-list::after {
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background: rgba(0, 94, 184, 0.12);
    }
    .sub-content .history-decade {
        padding-bottom: 8rem;
    }
    .sub-content .history-year,
    .sub-content .history-year.is-show {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .sub-content .history-year + .history-year {
        margin-top: 5.6rem;
    }
    .sub-content .history-year h4 {
        position: relative;
    }
    .sub-content .history-year h4::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -3.8rem;
        width: 1.2rem;
        height: 1.2rem;
        border: 3px solid #fff;
        border-radius: 50%;
        background: #003f8f;
        box-shadow: 0 0 0 1px rgba(0, 94, 184, 0.18);
        transform: translateY(-50%);
    }

    /* 인증서 및 설비 현황 > 인증서 */
    .sub-content .cert-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 인증서 및 설비 현황 > 설비 보유 현황 */
    .sub-content .facility-area .data-table {
        overflow: visible;
    }
    .sub-content .facility-area .data-table table,
    .sub-content .facility-area .data-table colgroup,
    .sub-content .facility-area .data-table thead,
    .sub-content .facility-area .data-table tbody,
    .sub-content .facility-area .data-table tr,
    .sub-content .facility-area .data-table th,
    .sub-content .facility-area .data-table td {
        display: block;
        width: 100%;
    }
    .sub-content .facility-area .data-table colgroup {
        display: none;
    }
    .sub-content .facility-area .data-table thead tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 7.2rem;
    }
    .sub-content .facility-area .data-table thead th {
        display: none;
    }
    .sub-content .facility-area .data-table thead th:nth-child(1),
    .sub-content .facility-area .data-table thead th:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
    }
    .sub-content .facility-area .data-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 7.2rem;
        border-bottom: 1px solid #e6edf3;
    }
    .sub-content .facility-area .data-table tbody tr:last-child {
        border-bottom: 0;
    }
    .sub-content .facility-area .data-table tbody th,
    .sub-content .facility-area .data-table tbody td {
        display: flex;
        align-items: center;
        width: auto;
        min-height: 5.4rem;
        padding: 1.4rem 1.6rem;
        border-bottom: 1px solid #e6edf3;
    }
    .sub-content .facility-area .data-table tbody th {
        justify-content: flex-start;
        text-align: left;
    }
    .sub-content .facility-area .data-table tbody td {
        justify-content: center;
        text-align: center;
    }
    .sub-content .facility-area .data-table tbody th:nth-child(3),
    .sub-content .facility-area .data-table tbody td:nth-child(4) {
        background: #fbfdff;
    }
    .sub-content .facility-area .data-table tbody th:empty,
    .sub-content .facility-area .data-table tbody td:empty {
        display: none;
    }
    .sub-content .facility-area .data-table tbody th:nth-last-child(-n + 2),
    .sub-content .facility-area .data-table tbody td:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
    .sub-content .facility-area .data-table thead th:nth-child(2),
    .sub-content .facility-area .data-table tbody td:nth-child(2),
    .sub-content .facility-area .data-table tbody td:nth-child(4) {
        border-right: 0;
    }
    .sub-content .facility-area .data-table table {
        min-width: 0;
    }

    /* 오시는 길 */
    .sub-content .location-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
        margin-bottom: -4rem;
    }
    .sub-content .info-item {
        align-items: flex-start;
        padding: 0.6rem 0;
    }
    .sub-content .map-box {
        --map-height: 50rem;
        width: min(100%, calc(100vw - 4rem));
    }
    .sub-content
    .location-panel[data-location-panel="main"]
    .location-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-content
    .location-panel[data-location-panel="main"]
    .location-info
    .info-item:first-child {
        grid-column: 1 / -1;
    }

    /* LLDPE / PERT Tube */
    .sub-content.tube-quality .inner {
        grid-template-columns: 1fr;
        row-gap: 6rem;
    }
    .sub-content .tube-quality-text {
        max-width: 78rem;
    }
    .sub-content .tube-quality-imgs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sub-content .tube-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Custom Coating Tube */
    .sub-content.coating-custom .inner {
        grid-template-columns: minmax(0, 1fr) minmax(30rem, 0.9fr);
        column-gap: 2.4rem;
        row-gap: 4rem;
    }
    .sub-content .coating-text {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: 86rem;
    }
    .sub-content .coating-tags {
        margin-top: 3.2rem;
        margin-bottom: 0;
    }
    .sub-content .coating-label {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: flex-start;
        margin: -1.2rem 0 0;
    }
    .sub-content .coating-left {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        margin-top: 0;
    }
    .sub-content .coating-card-large {
        grid-column: 2;
        grid-row: auto;
        align-self: stretch;
        margin-top: 0;
    }
    .sub-content .coating-card-large img {
        height: 100%;
        min-height: 42rem;
        object-fit: cover;
    }

    /* Cutting & Marking */
    .sub-content .cutting-card-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.6rem;
    }
    .sub-content .cutting-card {
        padding: 1.6rem 1.6rem 2.8rem;
        border-radius: 2.4rem;
    }
    .sub-content .cutting-img {
        border-radius: 1.8rem;
    }

    /* LFC Packaging */
    .sub-content .lfc-feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
        padding: 2rem;
        border-radius: 2.4rem;
    }
    .sub-content .lfc-feature-card {
        min-height: 8rem;
        padding: 1.8rem;
        border-radius: 1.6rem;
    }
    .sub-content .lfc-feature-card strong {
        font-size: 1.55rem;
    }
    .sub-content .lfc-compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem;
    }
    .sub-content .lfc-card {
        padding: 2.4rem;
        border-radius: 2.8rem;
    }
    .sub-content .lfc-img {
        height: 30rem;
        border-radius: 1.8rem;
    }

    /* 제품 라인업 */
    .sub-content .prod-panel {
        width: min(100%, calc(var(--layout-width) - 4rem));
        padding: 4rem;
        border-radius: 3.6rem;
    }
    .sub-content .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem;
    }
    .sub-content .prod-img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* 튜브 조립품 */
    .sub-content.prod-lineup.ver2 .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem;
    }
    .sub-content.prod-lineup.ver2 .prod-card {
        padding: 1.8rem;
        border-radius: 2.4rem;
    }
    .sub-content.prod-lineup.ver2 .prod-img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .sub-content.prod-lineup.ver2 .prod-name {
        margin-top: 1.4rem;
        font-size: 1.55rem;
    }
    .sub-content.prod-lineup.ver2 .prod-card.is-wide {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
        gap: 3.2rem;
        min-height: 0;
        padding: 2.4rem;
    }
    .sub-content.prod-lineup.ver2 .prod-wide-img {
        height: auto;
        aspect-ratio: 16 / 10;
    }
    .sub-content.prod-lineup.ver2 .prod-tit {
        font-size: 3.2rem;
    }

    /* 제품 라인업 보기 */
    .sub-content .overview-list {
        width: min(100%, calc(var(--layout-width) - 4rem));
    }
    .sub-content .overview-card {
        padding: 3.2rem;
        border-radius: 2.8rem;
    }
    .sub-content .overview-thumb-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.2rem;
    }
    .sub-content .overview-thumb-list li {
        border-radius: 1.6rem;
    }
    .sub-content .overview-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem;
    }
    .sub-content .overview-assembly-grid,
    .sub-content .overview-fitting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* __________ Mobile __________ */
@media (max-width: 768px) {
    /* 경영이념 > 방침 */
    .sub-content .greeting .sub-title {
        font-size: 3rem;
    }
    .sub-content .greeting .sub-title.is-line-split {
        color: #071827;
    }
    .sub-content .greeting .sub-title .title-line,
    .sub-content .greeting .sub-title .line-base {
        position: static;
        display: block;
        width: auto;
        overflow: visible;
        color: inherit;
    }
    .sub-content .greeting .sub-title .line-base {
        white-space: normal;
    }
    .sub-content .greeting .sub-title .line-fill {
        display: none;
    }
    .sub-content .greeting .sign {
        align-items: flex-end;
        flex-direction: column;
        gap: 1rem;
    }
    .sub-content .policy-section {
        padding: 10rem 0;
    }
    .sub-content .policy-head .sub-title,
    .sub-content .quality-head .sub-title {
        margin-bottom: 5rem;
    }
    .sub-content .policy-card-list {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, calc(var(--layout-width) - 3rem));
        margin-left: 0;
    }
    .sub-content .policy-card {
        height: auto;
        min-height: 0;
    }
    .sub-content .policy-card + .policy-card {
        border-top: 1px solid #e5eef5;
        border-left: 0;
    }
    .sub-content .quality-head {
        margin-top: 10rem;
    }
    .sub-content .quality-card-list {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 3rem 1.6rem;
    }
    .sub-content .quality-card {
        margin: 0 auto;
        height: auto;
    }

    /* 조직도 */
    .sub-content .organization .sub-page-head {
        margin-bottom: 4rem;
    }
    .sub-content .org-ceo {
        margin-bottom: 3.2rem;
    }
    .sub-content .org-logo {
        width: 11rem;
    }
    .sub-content .org-ceo strong {
        font-size: 2.8rem;
    }
    .sub-content .org-flow {
        gap: 2rem;
    }
    .sub-content .org-group,
    .sub-content .org-group-lab {
        padding: 2rem;
        border-radius: 2rem;
    }
    .sub-content .org-group {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .sub-content .org-group-title {
        padding: 0 0 1.6rem;
        border-bottom: 1px solid #dce7f1;
        font-size: 2.4rem;
    }
    .sub-content .org-group-lab .org-group-title {
        padding-bottom: 0;
        border-bottom: 0;
        text-align: center;
    }
    .sub-content .org-team-list {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .sub-content .org-team-card {
        padding: 1.6rem;
        border-radius: 1.6rem;
    }
    .sub-content .org-team-card > strong {
        min-height: auto;
        padding: 1.2rem 1.4rem;
        font-size: 1.7rem;
    }
    .sub-content .org-team-card span {
        font-size: 1.4rem;
    }
    .sub-content .org-team-card ul {
        margin-top: 1.4rem;
    }
    .sub-content .org-team-card li {
        font-size: 1.4rem;
        line-height: 1.55;
    }

    /* 연혁 */
    .sub-content .history-side {
        margin-bottom: 4.8rem;
    }
    .sub-content .history-sticky {
        gap: 2.8rem;
    }
    .sub-content .history-nav {
        gap: 0.8rem;
        padding: 0.8rem;
        border-radius: 1.8rem;
    }
    .sub-content .history-nav button {
        width: 100%;
        height: 3.8rem;
        padding: 0 1rem;
        font-size: 1.35rem;
    }
    .sub-content .history-list {
        padding-left: 2.4rem;
    }
    .sub-content .history-list::after {
        left: 0.5rem;
    }
    .sub-content .history-decade {
        padding-bottom: 6rem;
    }
    .sub-content .history-year + .history-year {
        margin-top: 4.8rem;
    }
    .sub-content .history-year h4 {
        margin-bottom: 2.4rem;
        font-size: 2.8rem;
    }
    .sub-content .history-year h4::before {
        left: -2.4rem;
        width: 1rem;
        height: 1rem;
    }
    .sub-content .history-year li {
        grid-template-columns: 5.2rem minmax(0, 1fr);
        column-gap: 1.4rem;
    }
    .sub-content .history-year .date {
        font-size: 1.7rem;
        font-weight: 700;
        color: #003f8f;
    }
    .sub-content .history-year p {
        font-size: 1.5rem;
    }

    /* 인증서 */
    .sub-content .cert-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 오시는 길 */
    .sub-content .location-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        width: min(100%, calc(var(--layout-width) - 3rem));
        margin: 0 auto 2.4rem;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .sub-content .info-item {
        align-items: flex-start;
        gap: 1.4rem;
        padding: 1.8rem;
        border: 1px solid #e5edf5;
        border-radius: 1.8rem;
        background: #fff;
        box-shadow: 0 0.6rem 1.8rem rgba(0, 27, 61, 0.05);
    }
    .sub-content .info-icon {
        flex-basis: 4.8rem;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 1.4rem;
    }
    .sub-content .info-icon::before {
        width: 2.2rem;
        height: 2.2rem;
    }
    .sub-content .info-item strong {
        margin-bottom: 0.6rem;
        font-size: 1.3rem;
    }
    .sub-content .info-item p {
        font-size: 1.6rem;
        line-height: 1.55;
    }
    .sub-content .map-box {
        --map-height: 38rem;
        width: min(100%, calc(100vw - 3rem));
        border-radius: 2rem;
    }
    .sub-content
    .location-panel[data-location-panel="main"]
    .location-info {
        grid-template-columns: 1fr;
    }

    .sub-content
    .location-panel[data-location-panel="main"]
    .location-info
    .info-item:first-child {
        grid-column: auto;
    }

    /* LLDPE / PERT Tube */
    .sub-content.tube-quality .inner {
        row-gap: 4.8rem;
    }
    .sub-content .tube-quality-text .sub-title {
        margin-bottom: 2.4rem;
    }
    .sub-content .tube-quality-imgs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
    .sub-content .tube-quality-img img,
    .sub-content .tube-quality-img:nth-child(n+3) img {
        aspect-ratio: 1 / 0.78;
        border-radius: 1.8rem;
    }
    .sub-content .tube-quality-img strong {
        margin-top: 1.2rem;
        font-size: 1.4rem;
        line-height: 1.45;
    }
    .sub-content .tube-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        padding: 1.6rem;
        border-radius: 2rem;
    }
    .sub-content .tube-process-card {
        min-height: 8rem;
        padding: 1.6rem;
        border-radius: 1.4rem;
    }
    .sub-content .tube-process-card strong {
        font-size: 1.45rem;
    }

    /* Custom Coating Tube */
    .sub-content.coating-custom .inner {
        grid-template-columns: 1fr;
        row-gap: 3.2rem;
    }
    .sub-content .coating-text,
    .sub-content .coating-label,
    .sub-content .coating-left,
    .sub-content .coating-card-large {
        grid-column: auto;
        grid-row: auto;
    }
    .sub-content .coating-tags {
        gap: 0.8rem;
        margin-top: 2.8rem;
    }
    .sub-content .coating-tags li {
        height: 3.8rem;
        padding: 0 1.6rem;
        font-size: 1.3rem;
    }
    .sub-content .coating-label {
        justify-self: flex-start;
        min-width: 0;
        height: 4rem;
        margin: -0.8rem 0 0;
        padding: 0 1.8rem;
        font-size: 1.3rem;
    }
    .sub-content .coating-left {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.4rem;
        width: 100%;
        margin-top: 0;
    }
    .sub-content .coating-card-wide {
        grid-column: 1 / -1;
    }
    .sub-content .coating-card img {
        border-radius: 1.8rem;
    }
    .sub-content .coating-card-wide img {
        aspect-ratio: 660 / 360;
    }
    .sub-content .coating-left .coating-card:not(.coating-card-wide) img {
        aspect-ratio: 1 / 0.78;
    }
    .sub-content .coating-card strong {
        margin-top: 1.2rem;
        font-size: 1.4rem;
        line-height: 1.45;
    }
    .sub-content .coating-card-large {
        margin-top: 0;
    }
    .sub-content .coating-card-large img {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    /* Cutting & Marking */
    .sub-content .cutting-head {
        text-align: left;
    }
    .sub-content .cutting-card-list {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .sub-content .cutting-card {
        display: grid;
        grid-template-columns: minmax(12rem, 38%) minmax(0, 1fr);
        grid-template-rows: min-content min-content 1fr;
        gap: 0 1.6rem;
        align-items: start;
        padding: 1rem;
        border-radius: 2rem;
    }
    .sub-content .cutting-img {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        border-radius: 1.6rem;
    }
    .sub-content .cutting-img img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .sub-content .cutting-img span {
        top: 1rem;
        left: 1rem;
        min-width: 4.6rem;
        height: 2.8rem;
        font-size: 1.1rem;
    }
    .sub-content .cutting-card .tit {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding-top: clamp(4rem, 4vw, 5.6rem);
        font-size: 1.8rem;
        line-height: 1.35;
    }
    .sub-content .cutting-card .desc {
        grid-column: 2;
        grid-row: 2;
        margin: 1.2rem 0 0;
        font-size: 1.4rem;
        line-height: 1.55;
    }

    /* LFC Packaging */
    .sub-content .lfc-head {
        text-align: left;
    }
    .sub-content .lfc-feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 5rem;
        padding: 1.4rem;
        border-radius: 2rem;
    }
    .sub-content .lfc-feature-card {
        min-height: 7.6rem;
        padding: 1.5rem;
        border-radius: 1.4rem;
    }
    .sub-content .lfc-feature-card span {
        min-width: 2.4rem;
        height: 1.8rem;
        font-size: 1.1rem;
    }
    .sub-content .lfc-feature-card strong {
        margin-top: 0.6rem;
        font-size: 1.35rem;
        line-height: 1.4;
    }
    .sub-content .lfc-compare {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .sub-content .lfc-card {
        padding: 2rem;
        border-radius: 2rem;
    }
    .sub-content .lfc-card h4 {
        font-size: 2rem;
    }
    .sub-content .lfc-card p {
        font-size: 1.45rem;
    }
    .sub-content .lfc-img {
        height: auto;
        aspect-ratio: 16 / 10;
        margin-top: 1.6rem;
        border-radius: 1.6rem;
    }
    .sub-content .lfc-img img {
        height: 100%;
        object-fit: cover;
    }
    .sub-content .lfc-caption {
        min-height: auto;
        padding: 1.4rem 1.6rem;
        border-radius: 1.4rem;
        font-size: 1.35rem;
    }
    .sub-content .lfc-arrow {
        position: static;
        justify-self: center;
        width: 4.4rem;
        height: 4.4rem;
        margin: -0.4rem 0;
        border-width: 4px;
        transform: rotate(90deg);
    }

    /* 공통 제품 문의 */
    .sub-content .prod-inquiry {
        align-items: flex-start;
        flex-direction: column;
        width: min(100%, calc(var(--layout-width) - 3rem));
        padding: 8%;
    }
    .sub-content .prod-inquiry .inquiry-btn {
        flex: none;
        width: auto;
    }
    .sub-content .prod-inquiry .inquiry-btn span,
    .sub-content .prod-inquiry .inquiry-btn::before {
        display: none;
    }

    /* 제품 라인업 */
    .sub-content .prod-lineup-head {
        text-align: left;
    }
    .sub-content .prod-panel {
        width: min(100%, calc(var(--layout-width) - 3rem));
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .sub-content .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }
    .sub-content .prod-card {
        padding: 1rem;
        border-radius: 1.8rem;
    }
    .sub-content .prod-img {
        height: auto;
        aspect-ratio: 1 / 0.82;
        border-radius: 1.4rem;
    }
    .sub-content .prod-img img {
        height: 100%;
        object-fit: cover;
    }
    .sub-content .prod-info {
        display: block;
        margin-top: 1.2rem;
    }
    .sub-content .prod-info h4 {
        font-size: 1.65rem;
        line-height: 1.3;
    }
    .sub-content .prod-info p {
        margin-top: 0.6rem;
        font-size: 1.3rem;
        line-height: 1.5;
    }
    .sub-content .prod-tags {
        justify-content: flex-start;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    .sub-content .prod-tags span {
        min-height: 2.4rem;
        padding: 0 1rem;
        font-size: 1.1rem;
    }

    /* 튜브 조립품 */
    .sub-content.prod-lineup.ver2 .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }
    .sub-content.prod-lineup.ver2 .prod-card {
        display: block;
        padding: 1rem;
        border-radius: 1.8rem;
    }
    .sub-content.prod-lineup.ver2 .prod-img {
        height: auto;
        aspect-ratio: 1 / 0.82;
        border-radius: 1.4rem;
    }
    .sub-content.prod-lineup.ver2 .prod-name {
        margin-top: 1rem;
        font-size: 1.35rem;
        line-height: 1.4;
    }
    .sub-content.prod-lineup.ver2 .prod-card.is-wide {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.4rem;
        border-radius: 2rem;
    }
    .sub-content.prod-lineup.ver2 .prod-wide-img {
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 1.6rem;
    }
    .sub-content.prod-lineup.ver2 .prod-wide-img img {
        height: 100%;
        object-fit: cover;
    }
    .sub-content.prod-lineup.ver2 .prod-label {
        margin-bottom: 1.2rem;
        font-size: 1.25rem;
    }
    .sub-content.prod-lineup.ver2 .prod-tit {
        font-size: 2.4rem;
        line-height: 1.25;
    }
    .sub-content.prod-lineup.ver2 .prod-desc {
        margin-top: 1.4rem;
        font-size: 1.45rem;
        line-height: 1.6;
    }
    .sub-content.prod-lineup.ver2 .prod-badge {
        margin-top: 1.8rem;
    }

    /* 제품 라인업 보기 */
    .sub-content .prod-overview-head {
        text-align: left;
    }
    .sub-content .overview-list {
        width: min(100%, calc(var(--layout-width) - 3rem));
        gap: 1.6rem;
    }
    .sub-content .overview-card {
        padding: 2rem;
        border-radius: 2rem;
    }
    .sub-content .overview-head {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2.8rem;
    }
    .sub-content .overview-tit {
        font-size: 2.2rem;
        line-height: 1.35;
    }
    .sub-content .overview-desc {
        font-size: 1.45rem;
        line-height: 1.6;
    }
    .sub-content .overview-btn {
        align-self: flex-start;
        min-width: auto;
        height: 3.8rem;
        padding: 0 1.6rem;
        font-size: 1.3rem;
    }
    .sub-content .overview-thumb-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 2.4rem;
    }
    .sub-content .overview-thumb-list li {
        border-radius: 1.4rem;
    }
    .sub-content .overview-thumb-list strong {
        top: 1.2rem;
        left: 1.2rem;
        font-size: 1.25rem;
    }
    .sub-content .overview-card-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .sub-content .overview-assembly-grid,
    .sub-content .overview-fitting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .sub-content .overview-mini-card {
        min-height: 0;
        border-radius: 1.4rem;
    }
    .sub-content .overview-mini-card img {
        height: auto;
    }
    .sub-content .overview-mini-card strong {
        right: 1.2rem;
        bottom: 1.2rem;
        font-size: 1.25rem;
    }
    .sub-content .overview-notice {
        align-items: flex-start;
        min-height: auto;
        padding: 1.6rem 1.8rem;
        border-radius: 1.6rem;
        font-size: 1.35rem;
        text-align: left;
    }

    /* 제품 라인업 보기 > 테이블 */
    .sub-content .prod-overview .data-table {
        overflow: visible;
        border: 0;
    }
    .sub-content .prod-overview .data-table table,
    .sub-content .prod-overview .data-table colgroup,
    .sub-content .prod-overview .data-table thead,
    .sub-content .prod-overview .data-table tbody,
    .sub-content .prod-overview .data-table tr,
    .sub-content .prod-overview .data-table th,
    .sub-content .prod-overview .data-table td {
        display: block;
        width: 100%;
    }
    .sub-content .prod-overview .data-table colgroup,
    .sub-content .prod-overview .data-table thead {
        display: none;
    }
    .sub-content .prod-overview .data-table tbody {
        display: grid;
        gap: 1.2rem;
    }
    .sub-content .prod-overview .data-table tbody tr {
        overflow: hidden;
        padding: 1.6rem;
        border: 1px solid #e2e8ef;
        border-radius: 1.6rem;
        background: #fff;
        box-shadow: 0 0.4rem 1.4rem rgba(0, 27, 61, 0.04);
    }
    .sub-content .prod-overview .data-table tbody th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 1.2rem;
        border-bottom: 1px solid #e6edf3;
        color: #003f8f;
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
    }
    .sub-content .prod-overview .data-table tbody th::before {
        content: "제품";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 2;
        height: 2.4rem;
        padding: 0 1rem;
        border-radius: 999px;
        background: #eaf2fb;
        color: #003f8f;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1;
    }
    .sub-content .prod-overview .data-table tbody td {
        display: grid;
        grid-template-columns: 7.2rem minmax(0, 1fr);
        gap: 1.2rem;
        align-items: flex-start;
        padding: 1.1rem 0;
        border-bottom: 1px solid #edf2f6;
        color: #4b5b6a;
        font-size: 1.4rem;
        line-height: 1.55;
        text-align: left;
    }
    .sub-content .prod-overview .data-table tbody td:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .sub-content .prod-overview .data-table tbody td::before {
        color: #071827;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1.55;
    }
    .sub-content .prod-overview .data-table tbody td:nth-child(2)::before {
        content: "재질";
    }
    .sub-content .prod-overview .data-table tbody td:nth-child(3)::before {
        content: "규격 / 형태";
    }
    .sub-content .prod-overview .data-table tbody td:nth-child(4)::before {
        content: "색상";
    }
    .sub-content .prod-overview .data-table tbody td:nth-child(5)::before {
        content: "포장 / 길이";
    }

    /* 고객문의 */
    /* :is(.inquiry-content, .qna-write) .inner {
        width: min(100%, calc(var(--layout-width) - 3rem));
    } */
    :is(.inquiry-content, .qna-write) .inner {
        width: min(calc(100% - clamp(4rem, 6vw, 12rem)), 160rem);
        margin: 0 auto;
    }
    :is(.inquiry-content, .qna-write) .inquiry-form-head {
        align-items: flex-start;
    }
    :is(.inquiry-content, .qna-write) .inquiry-form-grid {
        grid-template-columns: 1fr;
    }
    :is(.inquiry-content, .qna-write) .inquiry-privacy {
        grid-template-columns: 1fr;
    }
    :is(.inquiry-content, .qna-write) .inquiry-privacy-icon {
        display: none;
    }

    /* MOBILE MOTION OFF */
    html.motion-enabled .sub-content .greeting[data-motion-wait-scroll] .sub-title,
    html.motion-enabled .sub-content .tube-quality-imgs[data-motion-group] .tube-quality-img,
    html.motion-enabled .sub-content .prod-grid[data-motion-group] .prod-card,
    html.motion-enabled .sub-content .lfc-compare[data-motion-group] .lfc-card,
    html.motion-enabled .sub-content .overview-list[data-motion-group] .overview-card,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-page .sub-visual .sub-desc,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-page .inquiry-guide-list,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-page .inquiry-guide-list li,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-form-motion[data-motion] .inquiry-form-head,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-form-motion[data-motion] .inquiry-form-group-title,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-form-motion[data-motion] .inquiry-field,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-form-motion[data-motion] .inquiry-privacy,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-form-motion[data-motion] .inquiry-actions,
    html.motion-enabled :is(.inquiry-content, .qna-write) .inquiry-form-motion[data-motion] .inquiry-privacy-icon {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}



/* __________ Small Mobile __________ */
@media (max-width: 480px) {
    /* 경영이념 */
    .sub-content .quality-card-list {
        grid-template-columns: 1fr;
    }

    /* 조직도 */
    .sub-content .org-chart {
        overflow: visible;
    }
    .sub-content .org-flow {
        min-width: 0;
    }
    .sub-content .org-group,
    .sub-content .org-group-lab {
        padding: 1.6rem;
        border-radius: 1.8rem;
    }
    .sub-content .org-group-title {
        font-size: 2.2rem;
    }
    .sub-content .org-team-card {
        padding: 1.4rem;
    }

    /* 연혁 */
    .sub-content .history-side {
        margin-bottom: 4rem;
    }
    .sub-content .history-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sub-content .history-list {
        padding-left: 1.8rem;
    }
    .sub-content .history-list::after {
        left: 0.4rem;
    }
    .sub-content .history-year h4 {
        font-size: 2.5rem;
    }
    .sub-content .history-year h4::before {
        left: -1.9rem;
    }
    .sub-content .history-year li {
        display: block;
        padding: 1.6rem;
        border: 1px solid #e5edf5;
        border-radius: 1.4rem;
        background: #fff;
    }
    .sub-content .history-year li + li {
        margin-top: 1rem;
    }
    .sub-content .history-year .date {
        display: inline-flex;
        align-items: center;
        height: 2.6rem;
        margin-bottom: 0.8rem;
        padding: 0 1rem;
        border-radius: 999px;
        background: #eaf2fb;
        color: #003f8f;
        font-size: 1.3rem;
        line-height: 1;
    }
    .sub-content .history-year p {
        font-size: 1.45rem;
        line-height: 1.65;
    }

    /* 인증서 */
    .sub-content .cert-list {
        gap: 1.6rem;
    }

    /* 오시는 길 */
    .sub-content .location-info {
        width: min(100%, calc(var(--layout-width) - 2.4rem));
        gap: 0.8rem;
        margin-bottom: 2rem;
    }
    .sub-content .info-item {
        gap: 1.2rem;
        padding: 1.6rem;
        border-radius: 1.6rem;
    }
    .sub-content .info-icon {
        flex-basis: 4.2rem;
        width: 4.2rem;
        height: 4.2rem;
        border-radius: 1.2rem;
    }
    .sub-content .info-icon::before {
        width: 2rem;
        height: 2rem;
    }
    .sub-content .info-item p {
        font-size: 1.45rem;
        line-height: 1.55;
    }
    .sub-content .map-box {
        --map-height: 32rem;
        width: min(100%, calc(100vw - 2.4rem));
        min-width: 100%;
        border-radius: 1.6rem;
    }

    /* Cutting & Marking */
    .sub-content .cutting-card .tit {
        padding-top: 1.2rem;
    }

    /* 제품 라인업 */
    .sub-content .prod-panel {
        width: min(100%, calc(var(--layout-width) - 2.4rem));
    }
    .sub-content .prod-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .sub-content .prod-card {
        display: grid;
        grid-template-columns: 12rem minmax(0, 1fr);
        gap: 1.2rem;
        align-items: center;
        padding: 1rem;
        border-radius: 1.8rem;
    }
    .sub-content .prod-img {
        height: auto;
        aspect-ratio: 1 / 0.82;
        border-radius: 1.4rem;
    }
    .sub-content .prod-info {
        margin-top: 0;
    }
    .sub-content .prod-info h4 {
        font-size: 1.55rem;
    }
    .sub-content .prod-info p {
        font-size: 1.25rem;
    }
    .sub-content .prod-tags {
        margin-top: 0.8rem;
    }

    /* 튜브 조립품 */
    .sub-content.prod-lineup.ver2 .prod-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .sub-content.prod-lineup.ver2 .prod-card:not(.is-wide) {
        display: grid;
        grid-template-columns: 20rem minmax(0, 1fr);
        gap: 1.2rem;
        align-items: center;
        padding: 1rem;
        border-radius: 1.8rem;
    }
    .sub-content.prod-lineup.ver2 .prod-card:not(.is-wide) .prod-img {
        aspect-ratio: 1 / 0.6;
    }
    .sub-content.prod-lineup.ver2 .prod-card:not(.is-wide) .prod-name {
        margin-top: 0;
        font-size: 1.35rem;
        text-align: left;
    }
    .sub-content.prod-lineup.ver2 .prod-card.is-wide {
        display: block;
        padding: 1.4rem;
        border-radius: 1.8rem;
    }
    .sub-content.prod-lineup.ver2 .prod-wide-img {
        aspect-ratio: 388 / 260;
        border-radius: 1.4rem;
    }
    .sub-content.prod-lineup.ver2 .prod-wide-info {
        margin-top: 1.8rem;
    }
    .sub-content.prod-lineup.ver2 .prod-tit {
        font-size: 2rem;
    }
    .sub-content.prod-lineup.ver2 .prod-desc {
        font-size: 1.35rem;
    }

    /* 제품 라인업 보기 */
    .sub-content .overview-list {
        width: min(100%, calc(var(--layout-width) - 2.4rem));
    }
    .sub-content .overview-card {
        padding: 1.6rem;
        border-radius: 1.8rem;
    }
    .sub-content .overview-head {
        margin-bottom: 2.4rem;
    }
    .sub-content .overview-tit {
        font-size: 1.9rem;
    }
    .sub-content .overview-desc {
        font-size: 1.35rem;
    }
    .sub-content .overview-thumb-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }
    .sub-content .overview-thumb-list li {
        border-radius: 1.2rem;
    }
    .sub-content .overview-thumb-list strong {
        top: 1rem;
        left: 1rem;
        font-size: 1.15rem;
    }
    .sub-content .overview-assembly-grid,
    .sub-content .overview-fitting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }
    .sub-content .overview-mini-card {
        min-height: 0;
        border-radius: 1.2rem;
    }
    .sub-content .overview-mini-card img {
        height: auto;
    }
    .sub-content .overview-mini-card strong {
        right: 1rem;
        bottom: 1rem;
        font-size: 1.15rem;
    }
    .sub-content .overview-notice {
        padding: 1.4rem 1.6rem;
        border-radius: 1.4rem;
        font-size: 1.3rem;
    }

    /* 제품 라인업 보기 > 테이블 */
    .sub-content .prod-overview .data-table tbody {
        gap: 1rem;
    }
    .sub-content .prod-overview .data-table tbody tr {
        padding: 1.4rem;
        border-radius: 1.4rem;
    }
    .sub-content .prod-overview .data-table tbody th {
        font-size: 1.55rem;
    }
    .sub-content .prod-overview .data-table tbody td {
        grid-template-columns: 6.8rem minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem 0;
        font-size: 1.32rem;
    }
    .sub-content .prod-overview .data-table tbody td::before {
        font-size: 1.25rem;
    }

    /* 고객문의 */
    :is(.inquiry-content, .qna-write) .inquiry-page .sub-visual-inner {
        width: min(calc(100% - 2.4rem), 144rem);
    }

    :is(.inquiry-content, .qna-write) .inquiry-page .inquiry-guide-list li {
        grid-template-columns: 4.8rem minmax(0, 1fr);
    }

    :is(.inquiry-content, .qna-write) .inquiry-form-head {
        flex-direction: column;
    }
}



/* ===== board.css ===== */
/* =========================
BOARD COMMON
========================= */
.board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(4rem, 4vw, 6rem);
}
.board-count {
    color: #071827;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.board-count strong {
    color: #003f8f;
}
.board-search {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 0.8vw, 1.2rem);
}
.board-search select,
.board-search input {
    height: 5.2rem;
    border: 1px solid #dbe5ef;
    border-radius: 1.4rem;
    background: #fff;
    color: #4b5b6a;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.board-search select {
    width: 100%;
    height: 5.2rem;
    padding: 0 3.6rem 0 1.7rem;
    border: 1px solid #dbe5ef;
    border-radius: 1.4rem;
    background: #fff;
    color: #4b5b6a;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    appearance: none;
    cursor: pointer;
}
.select-wrap {
    position: relative;
    display: block;
    flex: 0 0 12rem;
    width: 12rem;
}
.select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.6rem;
    width: 1rem;
    height: 1rem;
    background: url("/images/layout/lifetube/common/ico-arr2.svg") center / contain no-repeat;
    transform: translateY(-50%) rotate(90deg);
    pointer-events: none;
}
.board-search input {
    width: 27.8rem;
    padding: 0 1.7rem;
}
.board-search input::placeholder {
    color: #8a98a6;
}
.board-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8.4rem;
    height: 5.2rem;
    border-radius: 1.4rem;
    background: #003f8f;
    color: #fff;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
}

/* 리스트 */
.board-list-wrap {
    overflow: hidden;
}
.board-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 clamp(0.8rem, 0.8vw, 1.2rem);
    table-layout: fixed;
}
.board-list thead th {
    height: clamp(4.8rem, 3.8vw, 5.6rem);
    background: #eef4fb;
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
}
.board-list thead th:first-child {
    border-radius: 1.8rem 0 0 1.8rem;
}
.board-list thead th:last-child {
    border-radius: 0 1.8rem 1.8rem 0;
}
.board-list tbody td {
    height: clamp(6rem, 5vw, 7.2rem);
    padding: 0 clamp(1.2rem, 1.4vw, 2rem);
    border-top: 1px solid #e5edf5;
    border-bottom: 1px solid #e5edf5;
    background: #fff;
    color: #6c7b88;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-align: center;
}
.board-list tbody td:first-child {
    border-left: 1px solid #e5edf5;
    border-radius: 1.2rem 0 0 1.2rem;
}

.board-list tbody td:last-child {
    border-right: 1px solid #e5edf5;
    border-radius: 0 1.2rem 1.2rem 0;
}
.board-list .board-title {
    text-align: left;
}
.board-list .board-title a {
    overflow: hidden;
    display: block;
    color: #071827;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-list tbody tr:hover td {
    border-color: #cfe0f0;
    background: #f9fcff;
}
.board-list tbody tr:hover .board-title a {
    color: #003f8f;
}
.board-list tbody tr.is-clickable {
    cursor: pointer;
}
.board-list tbody tr.is-clickable:focus-visible td {
    border-color: #003f8f;
    background: #f7fbff;
    outline: none;
}

/* 하단 */
.board-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.2rem, 1.4vw, 2rem);
    margin-top: clamp(5rem, 5vw, 8rem);
}
.board-bottom:has(> :nth-child(2)) {
    justify-content: space-between;
}

/* 게시글 없음 */
.board-empty-row td {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.board-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(24rem, 22vw, 34rem);
    padding:
        clamp(4rem, 4vw, 6rem)
        clamp(1.6rem, 1.4vw, 2rem);
    border: 1px solid #e5edf5;
    border-radius: 1.8rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 94, 184, 0.07) 0%, rgba(0, 94, 184, 0) 26rem),
        #fff;
    text-align: center;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 27, 61, 0.04);
}
.board-empty-icon {
    position: relative;
    display: block;
    width: clamp(5.6rem, 5vw, 7.2rem);
    height: clamp(5.6rem, 5vw, 7.2rem);
    margin-bottom: clamp(1.6rem, 1.6vw, 2.4rem);
    border-radius: clamp(1.8rem, 1.6vw, 2.4rem);
    background: #eef4fb;
}
.board-empty-icon::before {
    content: "";
    position: absolute;
    inset: clamp(1.5rem, 1.4vw, 2rem);
    background: #003f8f;
    mask: url("/images/layout/lifetube/common/ico_nofile.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico_nofile.svg") center / contain no-repeat;
    opacity: 0.82;
}
.board-empty strong {
    display: block;
    color: #071827;
    font-size: clamp(1.8rem, 1.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.04em;
}
.board-empty p {
    margin-top: clamp(1rem, 1vw, 1.4rem);
    color: #6c7b88;
    font-size: clamp(1.4rem, 1.05vw, 1.6rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

/* 빈 목록일 때 하단 버튼 정렬 */
.board-bottom.is-empty {
    margin-top: 4rem;
}
.board-bottom.is-empty .board-actions-list {
    position: static;
    margin-top: 0;
    transform: none;
}
.board-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 0.5vw, 0.8rem);
}
.page-num,
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.4rem, 3vw, 4rem);
    height: clamp(3.4rem, 3vw, 4rem);
    border: 1px solid #dbe5ef;
    border-radius: 50%;
    background: #fff;
    color: #4b5b6a;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1;
    transition: all 560ms ease;
}
.page-num:hover,
.page-btn:hover {
    border-color: #cfe0f0;
    background: #f9fcff;
}
.page-num.active {
    border-color: #003f8f;
    background: #003f8f;
    color: #fff;
}
.page-btn {
    position: relative;
}
.page-btn::before {
    content: "";
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    background: #6b7886;
    mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
}
.page-prev::before {
    transform: rotate(180deg);
}
.page-next::before {
    transform: rotate(0);
}
.page-btn:hover::before {
    background: #003f8f;
}
.page-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
}



/* =========================
BOARD BUTTON COMMON
========================= */
.board-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.2rem, 1.4vw, 2rem);
    margin-top: clamp(2.8rem, 2.6vw, 4rem);
}
.board-actions-left,
.board-actions-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.board-actions-left {
    justify-content: flex-start;
}
.board-actions-right {
    justify-content: flex-end;
    margin-left: auto;
}
.board-actions-list {
    position: static;
    margin-top: 0;
    transform: none;
}
.board-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 0.7vw, 1rem);
    min-width: clamp(10rem, 8vw, 12rem);
    height: clamp(4.8rem, 3.8vw, 5.6rem);
    padding: 0 clamp(2rem, 2vw, 3rem);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.board-btn.is-small {
    min-width: clamp(11rem, 9vw, 14rem);
    height: clamp(4.2rem, 3.3vw, 4.8rem);
    padding: 0 clamp(2rem, 2vw, 3rem);
}
.board-btn.is-edit {
    border-color: #003f8f;
    background: #fff;
    color: #003f8f;
}
.board-btn.is-delete {
    border-color: #d44333;
    background: #fff;
    color: #d44333;
}
.board-btn.is-primary {
    border-color: #0050b8;
    background: #0050b8;
    color: #fff;
}
.board-btn.is-list,
.board-btn.is-submit {
    min-width: clamp(13rem, 11vw, 16.8rem);
}
.board-btn.is-list {
    min-width: 16.8rem;
    border-color: #dbe5ef;
    background: #fff;
    color: #4b5b6a;
}
.board-btn.is-edit:hover {
    background: #003f8f;
    color: #fff;
}
.board-btn.is-delete:hover {
    background: #d44333;
    color: #fff;
}
.board-btn.is-primary:hover {
    border-color: #003f8f;
    background: #003f8f;
    color: #fff;
    box-shadow: 0 0.8rem 1.8rem rgba(0, 63, 143, 0.18);
    transform: translateY(-0.2rem);
}
.board-btn.is-list:hover {
    border-color: #cfe0f0;
    background: #f9fcff;
    color: #003f8f;
}
.board-btn-icon {
    position: relative;
    flex: 0 0 clamp(1.3rem, 1vw, 1.6rem);
    width: clamp(1.3rem, 1vw, 1.6rem);
    height: clamp(1.3rem, 1vw, 1.6rem);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
}
.board-btn-icon.is-plus::before,
.board-btn-icon.is-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.7rem;
    height: 1.5px;
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%);
}
.board-btn-icon.is-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}



/* =========================
BOARD WRITE
========================= */
.board-write-box {
    width: min(160rem, 100%);
    margin: 0 auto;
    padding:
        clamp(4.2rem, 4.2vw, 6.4rem)
        clamp(4rem, 5vw, 8rem)
        clamp(5rem, 5vw, 8rem);
    border: 1px solid #dfe9f3;
    border-radius: clamp(3.2rem, 3.2vw, 4.8rem);
    background: #f4f8fc;
}
.write-form {
    display: grid;
    gap: clamp(2.8rem, 2.6vw, 4rem);
}
.write-row {
    display: grid;
    gap: clamp(1.4rem, 1.3vw, 2rem);
}

/* 파일 업로드 */
.file-upload {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--form-height);
    padding: 0 var(--form-padding-x);
    border: 1px solid var(--form-line-input);
    border-radius: var(--form-radius-input);
    background: var(--form-bg-input);
    box-shadow: var(--form-shadow);
}
.upload-name {
    overflow: hidden;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--form-placeholder);
    font-size: var(--form-input-size);
    font-weight: var(--form-input-weight);
    line-height: var(--form-input-line);
    letter-spacing: var(--form-input-letter);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 11rem;
    height: 4rem;
    padding: 0 2.4rem;
    border-radius: var(--form-radius-pill);
    background: #edf4ff;
    color: var(--form-point);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.upload-btn:hover {
    background: #dfeeff;
    color: var(--form-point);
}



/* =========================
NOTICE WRITE
========================= */
.notice-write .board-write-box {
    position: relative;
    width: min(144rem, 100%);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.notice-write-head {
    position: relative;
    padding: 0 0 clamp(3.6rem, 3.6vw, 5.6rem);
    border-bottom: 1px solid #071827;
}
.notice-write-head::before {
    content: "NOTICE";
    position: absolute;
    top: clamp(-1.2rem, -0.8vw, -0.8rem);
    right: 0;
    color: rgba(0, 63, 143, 0.055);
    font-size: clamp(7rem, 8vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}
.notice-write-head span {
    display: inline-flex;
    align-items: center;
    height: clamp(2.8rem, 2.2vw, 3.2rem);
    margin-bottom: clamp(2rem, 2vw, 3.2rem);
    padding: 0 clamp(1.2rem, 1.1vw, 1.6rem);
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #fff;
    color: #003f8f;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}
.notice-write-head strong {
    position: relative;
    z-index: 1;
    display: block;
    color: #071827;
    font-size: clamp(3.6rem, 4vw, 5.6rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.06em;
    word-break: keep-all;
}
.notice-write-head p {
    position: relative;
    z-index: 1;
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
    color: #6c7b88;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: -0.03em;
}

/* 폼 */
.notice-write .write-form {
    display: grid;
    gap: 0;
}
.notice-write .write-row {
    display: grid;
    grid-template-columns: clamp(13rem, 12vw, 18rem) minmax(0, 1fr);
    align-items: flex-start;
    gap: clamp(2.4rem, 2.6vw, 4rem);
    padding: clamp(3.2rem, 3.2vw, 4.8rem) 0;
    border-bottom: 1px solid #dce7f1;
}
.notice-write .write-label {
    padding-top: clamp(1.6rem, 1.6vw, 2.4rem);
    color: #071827;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
}
.notice-write .write-label span {
    color: #d44333;
}

/* 첨부파일 */
.notice-write .file-upload {
    min-height: clamp(6rem, 5vw, 7.6rem);
    padding: 0;
    border: 0;
    border-bottom: 1px solid #dce7f1;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.notice-write .upload-name {
    color: #8a98a6;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
}
.notice-write .upload-btn {
    align-self: stretch;
    min-width: 13rem;
    height: auto;
    padding: 0 3rem;
    border-radius: 0;
    background: #071827;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
.notice-write .upload-btn:hover {
    background: #003f8f;
    color: #fff;
}

/* 버튼 */
.notice-write .board-actions {
    margin-top: 0;
    padding-top: 4rem;
    border-top: 1px solid #071827;
}
.notice-write .board-btn {
    height: 5.6rem;
}



/* =========================
NOTICE VIEW
========================= */
.notice-view .board-view-box {
    position: relative;
    width: min(144rem, 100%);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
/* 제목 영역 */
.notice-view .board-view-head {
    position: relative;
    padding: 0 0 clamp(3.6rem, 3.6vw, 5.6rem);
    border-bottom: 1px solid #071827;
    background: transparent;
}
.notice-view .board-view-head::before {
    content: "NOTICE";
    position: absolute;
    top: clamp(-1.2rem, -0.8vw, -0.8rem);
    right: 0;
    color: rgba(0, 63, 143, 0.055);
    font-size: clamp(7rem, 8vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}
.notice-view .board-view-label {
    display: inline-flex;
    align-items: center;
    height: clamp(2.8rem, 2.2vw, 3.2rem);
    margin-bottom: clamp(2rem, 2vw, 3.2rem);
    padding: 0 clamp(1.2rem, 1.1vw, 1.6rem);
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #fff;
    color: #003f8f;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}
.notice-view .board-view-title {
    position: relative;
    z-index: 1;
    max-width: 104rem;
    color: #071827;
    font-size: clamp(3.6rem, 4vw, 5.6rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.06em;
    word-break: keep-all;
}

/* 메타 정보 */
.notice-view .board-view-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(2.4rem, 3vw, 4.8rem);
    margin-top: clamp(3rem, 3vw, 4.8rem);
}
.notice-view .board-view-meta dl {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 0.9vw, 1.4rem);
    margin: 0;
}
.notice-view .board-view-meta dl + dl::before {
    display: none;
}
.notice-view .board-view-meta dt {
    color: #8a98a6;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.notice-view .board-view-meta dd {
    position: relative;
    margin: 0;
    color: #071827;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* 첨부파일 */
.notice-view .board-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.6rem, 1.6vw, 2.4rem);
    min-height: clamp(6rem, 5vw, 7.6rem);
    border: 0;
    border-bottom: 1px solid #dce7f1;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.notice-view .file-info {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: clamp(0.8rem, 0.9vw, 1.4rem);
}
.notice-view .file-icon {
    position: relative;
    overflow: hidden;
    display: block;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    mask: none;
    -webkit-mask: none;
}
.notice-view .file-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #003f8f;
    mask: url("/images/layout/lifetube/common/ico_file.svg") center / 2rem auto no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico_file.svg") center / 2rem auto no-repeat;
}
.notice-view .file-info strong {
    flex: 0 0 auto;
    color: #071827;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
}
.notice-view .file-info a {
    overflow: hidden;
    display: block;
    min-width: 0;
    color: #4b5b6a;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.25s ease;
}
.notice-view .file-info a:hover {
    color: #003f8f;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
}
.notice-view .file-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 auto;
    min-width: 13rem;
    height: auto;
    padding: 0 3rem;
    border-radius: 0;
    background: #071827;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.notice-view .file-down:hover {
    background: #003f8f;
    color: #fff;
}

/* 본문 */
.notice-view .board-view-cont {
    min-height: clamp(34rem, 32vw, 48rem);
    margin-top: 0;
    padding: clamp(5rem, 5vw, 8rem) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.notice-view .board-view-cont p {
    margin: 0 auto;
    color: #4b5b6a;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 500;
    line-height: 2;
    letter-spacing: -0.035em;
    word-break: keep-all;
}
.notice-view .board-view-cont p + p {
    margin-top: clamp(2.4rem, 2.4vw, 3.6rem);
}

/* 버튼 */
.notice-view .board-actions {
    margin-top: 0;
    padding-top: 4rem;
    border-top: 1px solid #dce7f1;
}
.notice-view .board-btn {
    height: 5.6rem;
}

/* 이전글 / 다음글 */
.notice-view .board-nav-list {
    display: grid;
    gap: 0;
    margin-top: clamp(4rem, 4vw, 6rem);
    border-top: 1px solid #071827;
    border-bottom: 1px solid #071827;
}
.notice-view .board-nav-item {
    display: grid;
    grid-template-columns:
        clamp(8rem, 7.5vw, 12rem)
        minmax(0, 1fr)
        clamp(10rem, 9vw, 14rem);
    align-items: center;
    min-height: clamp(6.4rem, 6vw, 8.4rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    transition: background 0.25s ease;
}
.notice-view .board-nav-item + .board-nav-item {
    border-top: 1px solid #dce7f1;
}
.notice-view .board-nav-item:hover {
    background: #f7fbff;
}
.notice-view .board-nav-item span {
    color: #003f8f;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
}
.notice-view .board-nav-item span::after {
    display: none;
}
.notice-view .board-nav-item strong {
    overflow: hidden;
    color: #071827;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notice-view .board-nav-item em {
    color: #8a98a6;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-style: normal;
    text-align: right;
}



/* =========================
MEDIA LIST
========================= */
.media-list .board-top {
    margin-bottom: clamp(4.4rem, 4.4vw, 7rem);
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:
        clamp(2.8rem, 3vw, 4.4rem)
        clamp(2rem, 2.4vw, 3.6rem);
}
.media-card {
    position: relative;
    display: block;
    min-width: 0;
    padding:
        clamp(1.4rem, 1.4vw, 2rem)
        clamp(1.4rem, 1.4vw, 2rem)
        clamp(1.8rem, 1.6vw, 2.4rem);
    border: 1px solid #e5edf5;
    border-radius: clamp(2rem, 1.7vw, 2.6rem);
    background: #fff;
    box-shadow: 0 0.6rem 1.8rem rgba(0, 27, 61, 0.05);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.media-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: clamp(1.4rem, 1.3vw, 2rem);
    background: #000;
}
.media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(4.4rem, 4vw, 5.8rem);
    height: clamp(4.4rem, 4vw, 5.8rem);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}
.media-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    width: clamp(1.1rem, 1vw, 1.4rem);
    height: clamp(1.2rem, 1vw, 1.5rem);
    background: rgba(255, 255, 255, 0.9);
    mask: url("/images/layout/lifetube/common/ico_play.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico_play.svg") center / contain no-repeat;
    transform: translate(-50%, -50%);
}
.media-info {
    padding-top: clamp(1.6rem, 1.6vw, 2.4rem);
}
.media-info strong {
    overflow: hidden;
    display: block;
    color: #071827;
    font-size: clamp(1.7rem, 1.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-info span {
    display: block;
    margin-top: clamp(2rem, 1.8vw, 2.8rem);
    color: #6c7b88;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.media-more {
    position: absolute;
    right: clamp(1.4rem, 1.4vw, 2rem);
    bottom: clamp(1.8rem, 1.6vw, 2.4rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(4rem, 3.4vw, 4.8rem);
    height: clamp(4rem, 3.4vw, 4.8rem);
    border-radius: 50%;
    background: #003f8f;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}
.media-more::before {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    background: #fff;
    mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr.svg") center / contain no-repeat;
    transform: rotate(-45deg);
}
.media-card:hover {
    border-color: #cfe0f0;
    box-shadow: 0 1.2rem 3rem rgba(0, 27, 61, 0.11);
    transform: translateY(-0.4rem);
}
.media-card:hover .media-thumb img {
    transform: scale(1.04);
}
.media-card:hover .media-play {
    background: rgba(0, 27, 61, 0.18);
    backdrop-filter: blur(0.3rem);
    -webkit-backdrop-filter: blur(0.3rem);
}
.media-card:hover .media-info strong {
    color: #003f8f;
}
.media-card:hover .media-more {
    background: #0050b8;
}

/* media card MOTION */
html.motion-enabled .media-grid[data-motion-group]:not(.is-motion-active) .media-card {
    opacity: 0;
    transform: translateY(2.4rem);
}
html.motion-enabled .media-grid[data-motion-group] .media-card.motion-child-ready {
    opacity: 0;
    transform: translateY(2.4rem);
    transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--motion-delay);
}
html.motion-enabled .media-grid[data-motion-group] .media-card.motion-child-ready.is-motion-active {
    opacity: 1;
    transform: translateY(0);
}



/* =========================
MEDIA WRITE
========================= */
.thumb-setting-head {
    display: flex;
    align-items: center;
    gap: clamp(2.4rem, 2.6vw, 4rem);
}
.write-help {
    margin-top: -1rem;
    color: #8a98a6;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* 썸네일 업로드 비활성 */
.file-upload.is-disabled {
    background: rgba(255, 255, 255, 0.52);
    opacity: 0.55;
    pointer-events: none;
}
.file-upload.is-disabled .upload-btn {
    background: #eef2f6;
    color: #8a98a6;
}
.media-write .board-write-box {
    position: relative;
    width: min(144rem, 100%);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.media-write-head {
    position: relative;
    padding: 0 0 clamp(3.6rem, 3.6vw, 5.6rem);
    border-bottom: 1px solid #071827;
}
.media-write-head::before {
    content: "ARCHIVE";
    position: absolute;
    top: clamp(-1.2rem, -0.8vw, -0.8rem);
    right: 0;
    color: rgba(0, 63, 143, 0.055);
    font-size: clamp(7rem, 8vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}
.media-write-head span {
    display: inline-flex;
    align-items: center;
    height: clamp(2.8rem, 2.2vw, 3.2rem);
    margin-bottom: clamp(2rem, 2vw, 3.2rem);
    padding: 0 clamp(1.2rem, 1.1vw, 1.6rem);
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #fff;
    color: #003f8f;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}
.media-write-head strong {
    position: relative;
    z-index: 1;
    display: block;
    color: #071827;
    font-size: clamp(3.6rem, 4vw, 5.6rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.06em;
    word-break: keep-all;
}
.media-write-head p {
    position: relative;
    z-index: 1;
    margin-top: clamp(1.6rem, 1.6vw, 2.4rem);
    color: #6c7b88;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: -0.03em;
}

/* 폼 */
.media-write .write-form {
    display: grid;
    gap: 0;
}
.media-write .write-row {
    display: grid;
    grid-template-columns: clamp(13rem, 12vw, 18rem) minmax(0, 1fr);
    align-items: flex-start;
    gap: clamp(2.4rem, 2.6vw, 4rem);
    padding: clamp(3.2rem, 3.2vw, 4.8rem) 0;
    border-bottom: 1px solid #dce7f1;
}
.media-write .write-label {
    padding-top: clamp(1.6rem, 1.6vw, 2.4rem);
    color: #071827;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
}
.media-write .write-label span {
    color: #d44333;
}


/* 썸네일 설정 */
.media-thumb-field {
    min-width: 0;
}
.media-write .thumb-setting-head {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 1.4vw, 2rem);
}
.media-write .thumb-check {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.6rem, 0.7vw, 1rem);
    min-height: clamp(3rem, 2.6vw, 3.6rem);
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
/* 썸네일 직접 등록 스위치 */
.media-write .thumb-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.8vw, 1.2rem);
    width: fit-content;
    min-height: clamp(3rem, 2.6vw, 3.6rem);
    color: #071827;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.media-write .thumb-switch input {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
.media-write .thumb-switch .switch-ui {
    position: relative;
    flex: 0 0 4.8rem;
    width: 4.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: #dbe5ef;
    transition: background 0.25s ease;
}
.media-write .thumb-switch .switch-ui::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 27, 61, 0.18);
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}
.media-write .thumb-switch input:checked + .switch-ui {
    background: #003f8f;
}
.media-write .thumb-switch input:checked + .switch-ui::before {
    transform: translate(2rem, -50%);
}
.media-write .write-help {
    margin-top: clamp(1rem, 1vw, 1.4rem);
    color: #8a98a6;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.02em;
}
.media-thumb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(30rem, 30vw, 43rem));
    gap: clamp(2rem, 2.2vw, 3.2rem);
    align-items: stretch;
    margin-top: clamp(2rem, 2vw, 3rem);
}

/* 썸네일 파일 업로드 */
.media-write .file-upload {
    min-height: clamp(6rem, 5vw, 7.6rem);
    padding: 0 0 0 2.4rem;
    border: 0;
    border-bottom: 1px solid #dce7f1;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.media-write .file-upload.is-disabled {
    background: transparent;
    opacity: 0.45;
    pointer-events: none;
}
.media-write .upload-name {
    color: #8a98a6;
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 500;
}
.media-write .upload-btn {
    align-self: stretch;
    min-width: 13rem;
    height: auto;
    padding: 0 3rem;
    border-radius: 0;
    background: #071827;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
.media-write .upload-btn:hover {
    background: #003f8f;
    color: #fff;
}

/* 썸네일 미리보기 */
.media-write .thumb-preview {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    border: 1px solid #dce7f1;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(234, 244, 255, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
}
.media-write .thumb-preview span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 4rem);
    color: #8a98a6;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: center;
    transform: translate(-50%, -50%);
}
.media-write .thumb-preview img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-write .thumb-preview.has-image {
    background: #000;
}
.media-write .thumb-preview.has-image span {
    display: none;
}
.media-write .thumb-preview.has-image img {
    display: block;
}

/* 버튼 */
.media-write .board-actions {
    margin-top: 0;
    padding-top: 4rem;
    border-top: 1px solid #071827;
}
.media-write .board-btn {
    height: 5.6rem;
}



/* =========================
Q&A LIST
========================= */
.qna-status,
.qna-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(6.8rem, 5.4vw, 8rem);
    height: clamp(2.6rem, 2vw, 3rem);
    padding: 0 clamp(1rem, 1vw, 1.4rem);
    border-radius: 999px;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.qna-status.is-wait {
    background: #fff7e6;
    color: #b36b00;
}
.qna-status.is-done {
    background: #eaf4ff;
    color: #0050b8;
}
.qna-type {
    border: 1px solid #dbe5ef;
    background: #fff;
    color: #4b5b6a;
    font-weight: 500;
}
.qna-board-list .qna-title a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: clamp(0.5rem, 0.5vw, 0.8rem);
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 500;
}
.qna-lock {
    flex: 0 0 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
    background: #6c7b88;
    mask: url("/images/layout/lifetube/common/ico_lock.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico_lock.svg") center / contain no-repeat;
}
.qna-board-list tbody tr:hover .qna-lock {
    background: #003f8f;
}



/* =========================
Q&A VIEW
========================= */
.qna-view .board-view-box {
    position: relative;
    width: min(144rem, 100%);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* 제목 영역 */
.qna-view .board-view-head {
    position: relative;
    padding: 0 0 clamp(3.6rem, 3.6vw, 5.6rem);
    border-bottom: 1px solid #071827;
    background: transparent;
}
.qna-view .board-view-head::before {
    content: "Q&A";
    position: absolute;
    top: clamp(-1.2rem, -0.8vw, -0.8rem);
    right: 0;
    color: rgba(0, 63, 143, 0.055);
    font-size: clamp(7rem, 8vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}
.qna-view .board-view-label {
    display: inline-flex;
    align-items: center;
    height: clamp(2.8rem, 2.2vw, 3.2rem);
    margin-bottom: clamp(1.8rem, 1.8vw, 2.6rem);
    color: #003f8f;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
.qna-view .qna-view-badges {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 0.7vw, 1rem);
    margin-bottom: clamp(2rem, 2vw, 2.8rem);
}
.qna-view .qna-status,
.qna-view .qna-type,
.qna-view .qna-secret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: clamp(2.8rem, 2.2vw, 3.2rem);
    padding: 0 clamp(1.1rem, 1vw, 1.5rem);
    border-radius: 999px;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.qna-view .qna-status.is-wait {
    background: #fff7e6;
    color: #b36b00;
}
.qna-view .qna-status.is-done {
    background: #eaf4ff;
    color: #0050b8;
}
.qna-view .qna-type {
    border: 1px solid #dbe5ef;
    background: #fff;
    color: #4b5b6a;
}
.qna-view .qna-secret {
    gap: 0.6rem;
    background: #f4f7fb;
    color: #6c7b88;
}
.qna-view .qna-secret .qna-lock {
    flex: 0 0 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
}
.qna-view .board-view-title {
    position: relative;
    z-index: 1;
    max-width: 104rem;
    color: #071827;
    font-size: clamp(3.6rem, 4vw, 5.6rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.06em;
    word-break: keep-all;
}

/* 메타 정보 */
.qna-view .board-view-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(2.4rem, 3vw, 4.8rem);
    margin-top: clamp(3rem, 3vw, 4.8rem);
}
.qna-view .board-view-meta dl {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 0.9vw, 1.4rem);
    margin: 0;
}
.qna-view .board-view-meta dl + dl::before {
    display: none;
}
.qna-view .board-view-meta dt {
    color: #8a98a6;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.qna-view .board-view-meta dd {
    position: relative;
    margin: 0;
    color: #071827;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Q&A 본문 */
.qna-view .qna-thread {
    display: grid;
    gap: 0;
    border-bottom: 1px solid #071827;
}
.qna-view .qna-thread-item {
    display: grid;
    grid-template-columns: clamp(7rem, 7vw, 10rem) minmax(0, 1fr);
    gap: clamp(2.4rem, 2.6vw, 4rem);
    align-items: flex-start;
    padding: clamp(3.8rem, 3.6vw, 5.6rem) 0;
}
.qna-view .qna-thread-item + .qna-thread-item {
    border-top: 1px solid #dce7f1;
}
.qna-view .qna-thread-mark {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #071827;
    font-size: clamp(3.6rem, 4vw, 5.6rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.08em;
    box-shadow: none;
}
.qna-view .qna-thread-item.is-answer .qna-thread-mark {
    background: transparent;
    color: #003f8f;
}
.qna-view .qna-thread-card {
    overflow: visible;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.qna-view .qna-thread-item.is-answer .qna-thread-card {
    border: 0;
    background: transparent;
}
.qna-view .qna-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.2rem, 1.4vw, 2rem);
    min-height: auto;
    padding: 0 0 clamp(2rem, 2vw, 2.8rem);
    border-bottom: 0;
}
.qna-view .qna-thread-head strong {
    display: inline-flex;
    align-items: center;
    height: clamp(3rem, 2.6vw, 3.6rem);
    padding: 0 clamp(1.2rem, 1.1vw, 1.6rem);
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    background: #fff;
    color: #071827;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}
.qna-view .qna-thread-head span {
    color: #8a98a6;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.qna-view .qna-thread-cont {
    max-width: 92rem;
    padding: 0;
}
.qna-view .qna-thread-cont p {
    margin: 0;
    color: #4b5b6a;
    font-size: clamp(1.6rem, 1.35vw, 2rem);
    font-weight: 500;
    line-height: 2;
    letter-spacing: -0.035em;
    word-break: keep-all;
}
.qna-view .qna-thread-cont p:first-child {
    color: #071827;
    font-size: clamp(1.8rem, 1.55vw, 2.2rem);
    font-weight: 700;
}
.qna-view .qna-thread-cont p + p {
    margin-top: clamp(2.4rem, 2.4vw, 3.6rem);
}

/* 미답변 */
.qna-view .qna-thread-item.is-empty .qna-thread-card {
    display: flex;
    align-items: center;
}
.qna-view .qna-thread-empty {
    display: flex;
    align-items: center;
    min-height: 12rem;
    padding: 0;
}
.qna-view .qna-thread-empty p {
    color: #9aa7b4;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.03em;
}

/* 버튼 */
.qna-view .board-actions {
    margin-top: 0;
    padding-top: 4rem;
    border-top: 1px solid #dce7f1;
}
.qna-view .board-btn {
    height: 5.6rem;
}



/* =========================
Q&A WRITE
========================= */
.qna-write > .inner {
    width: min(160rem, calc(var(--layout-width) - clamp(4rem, 6vw, 12rem)));
    max-width: none;
    margin-left: 50%;
    padding-left: 0;
    padding-right: 0;
    transform: translateX(-50%);
}
.qna-write-box {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 160rem;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #dfe9f3;
    border-radius: clamp(3.2rem, 3.2vw, 4.8rem);
    background: #fff;
    box-sizing: border-box;
}

/* 상단 안내 */
.qna-write-intro {
    overflow: hidden;
    position: relative;
    padding:
        clamp(3.6rem, 3.6vw, 5.6rem)
        clamp(4rem, 5vw, 8rem);
    border-radius:
        clamp(3.2rem, 3.2vw, 4.8rem)
        clamp(3.2rem, 3.2vw, 4.8rem)
        0
        0;
    background:
        radial-gradient(circle at 88% 18%, rgba(139, 197, 255, 0.36) 0%, rgba(139, 197, 255, 0) 26rem),
        linear-gradient(135deg, #071827 0%, #003f8f 58%, #005eb8 100%);
}
.qna-write-intro::after {
    content: "QUESTION";
    position: absolute;
    bottom: clamp(1.2rem, 1.3vw, 2rem);
    right: 0;
    color: rgba(255, 255, 255, 0.055);
    font-size: clamp(7rem, 8vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}
.qna-write-intro::before {
    content: "";
    position: absolute;
    top: clamp(-12rem, -7vw, -7rem);
    right: clamp(-8rem, -5vw, -5rem);
    width: clamp(22rem, 22vw, 34rem);
    height: clamp(22rem, 22vw, 34rem);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.qna-write-intro span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(2.6rem, 2vw, 3rem);
    margin-bottom: 2.4rem;
    padding: 0 clamp(1.2rem, 1.1vw, 1.6rem);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #8bc5ff;
    font-size: clamp(1.1rem, 0.85vw, 1.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}
.qna-write-intro strong {
    display: block;
    color: #fff;
    font-size: clamp(3.2rem, 3.4vw, 4.8rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}
.qna-write-intro p {
    margin-top: clamp(1.2rem, 1.2vw, 1.8rem);
    color: #c4d0dc;
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.03em;
}

/* 폼 영역 */
.qna-write-form {
    padding:
        clamp(4rem, 4vw, 6rem)
        clamp(4rem, 5vw, 8rem)
        0;
}
.qna-write .board-actions {
    padding:
        0
        clamp(4rem, 5vw, 8rem)
        clamp(5rem, 5vw, 8rem);
}

/* 문의 설정 */
.qna-setting-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(26rem, 24vw, 34rem));
    align-items: end;
    gap: clamp(1.6rem, 1.6vw, 2.4rem);
}
.qna-setting-field {
    display: grid;
    gap: clamp(1.2rem, 1.4vw, 2rem);
    min-width: 0;
}
.qna-setting-field.is-private {
    padding-left: clamp(1.6rem, 1.6vw, 2.4rem);
    border-left: 1px solid #e5edf5;
}
/* Q&A 공개여부 */
.qna-setting-field.is-private .qna-private-switch {
    position: relative;
    display: flex;
    grid-template-columns: minmax(0, 1fr) 4.8rem;
    align-items: center;
    justify-content: space-between;
    column-gap: clamp(1.2rem, 1.4vw, 2rem);
    width: 100%;
    min-height: var(--form-height);
    padding: 0 var(--form-padding-x);
    border: 1px solid var(--form-line-input);
    border-radius: var(--form-radius-input);
    background: var(--form-bg-input);
    box-shadow: var(--form-shadow);
    cursor: pointer;
}

/* 작성 정보 */
.qna-auth-card {
    overflow: hidden;
    position: relative;
    display: grid;
    gap: clamp(2rem, 2.2vw, 3.2rem);
    padding: clamp(2.6rem, 2.4vw, 3.6rem);
    border: 1px solid #dbe5ef;
    border-radius: clamp(2.2rem, 2.1vw, 3.2rem);
    background:
        radial-gradient(circle at 96% 0%, rgba(0, 63, 143, 0.08) 0%, rgba(0, 63, 143, 0) 24rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 27, 61, 0.05);
}
.qna-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 3.6rem;
    width: 100%;
    height: 0.2rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #003f8f 0%, #005eb8 48%, rgba(0, 94, 184, 0) 100%);
}
.qna-auth-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.8rem, 2vw, 3rem);
    padding-bottom: clamp(2rem, 2vw, 2.8rem);
    border-bottom: 1px solid rgba(0, 63, 143, 0.1);
}
.qna-auth-head strong {
    color: #071827;
    font-size: clamp(1.8rem, 1.55vw, 2.2rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}
.qna-auth-head p {
    max-width: clamp(30rem, 30vw, 42rem);
    color: #6c7b88;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: right;
}
.qna-auth-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.6rem, 1.6vw, 2.4rem);
}
.qna-auth-fields > div {
    display: grid;
    gap: clamp(1.2rem, 1.4vw, 2rem);
    min-width: 0;
}
.qna-auth-fields input {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
}
.qna-auth-fields.is-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.qna-write .qna-privacy-row {
    align-items: center;
}
.qna-write .qna-privacy {
    width: 100%;
    margin: 0;
}



/* =========================
FORM FINAL OVERRIDE
========================= */
/* label */
.write-label,
.notice-write .write-label,
.media-write .write-label,
.qna-write .write-label,
.inquiry-field label,
.qna-setting-field label,
.qna-auth-fields label {
    display: block;
    color: var(--form-text-title);
    font-size: var(--form-label-size);
    font-weight: var(--form-label-weight);
    line-height: var(--form-label-line);
    letter-spacing: var(--form-label-letter);
}
.write-label span,
.notice-write .write-label span,
.media-write .write-label span,
.qna-write .write-label span,
.inquiry-field label span,
.qna-setting-field label span,
.qna-auth-fields label span {
    color: var(--form-required);
}

/* input / select / textarea */
.write-row input:not([type="file"]):not([type="checkbox"]),
.write-row select,
.write-row textarea,
.notice-write .write-row input:not([type="file"]):not([type="checkbox"]),
.notice-write .write-row textarea,
.media-write .write-row input:not([type="file"]):not([type="checkbox"]),
.media-write .write-row textarea,
.qna-write .write-row input:not([type="file"]):not([type="checkbox"]),
.qna-write .write-row select,
.qna-write .write-row textarea,
.inquiry-field input:not([type="file"]):not([type="checkbox"]),
.inquiry-field select,
.inquiry-field textarea,
.qna-setting-field input:not([type="file"]):not([type="checkbox"]),
.qna-setting-field select,
.qna-setting-field textarea,
.qna-auth-fields input:not([type="file"]):not([type="checkbox"]),
.qna-auth-fields select,
.qna-auth-fields textarea {
    width: 100%;
    border: 1px solid var(--form-line-input);
    border-radius: var(--form-radius-input);
    background-color: var(--form-bg-input);
    color: var(--form-text-body);
    font-size: var(--form-input-size);
    font-weight: var(--form-input-weight);
    line-height: var(--form-input-line);
    letter-spacing: var(--form-input-letter);
    box-shadow: var(--form-shadow);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* input / select 높이 */
.write-row input:not([type="file"]):not([type="checkbox"]),
.write-row select,
.notice-write .write-row input:not([type="file"]):not([type="checkbox"]),
.media-write .write-row input:not([type="file"]):not([type="checkbox"]),
.qna-write .write-row input:not([type="file"]):not([type="checkbox"]),
.qna-write .write-row select,
.inquiry-field input:not([type="file"]):not([type="checkbox"]),
.inquiry-field select,
.qna-setting-field input:not([type="file"]):not([type="checkbox"]),
.qna-setting-field select,
.qna-auth-fields input:not([type="file"]):not([type="checkbox"]),
.qna-auth-fields select {
    height: var(--form-height);
    padding: 0 var(--form-padding-x);
}

/* textarea */
.write-row textarea,
.notice-write .write-row textarea,
.media-write .write-row textarea,
.qna-write .write-row textarea,
.inquiry-field textarea,
.qna-setting-field textarea,
.qna-auth-fields textarea {
    min-height: clamp(26rem, 24vw, 38rem);
    padding:
        clamp(2rem, 2vw, 3rem)
        var(--form-padding-x);
    resize: vertical;
}

/* 고객문의 textarea만 살짝 낮게 */
.inquiry-field textarea {
    min-height: clamp(22rem, 20vw, 30rem);
}

/* placeholder */
.write-row input::placeholder,
.write-row textarea::placeholder,
.notice-write .write-row input::placeholder,
.notice-write .write-row textarea::placeholder,
.media-write .write-row input::placeholder,
.media-write .write-row textarea::placeholder,
.qna-write .write-row input::placeholder,
.qna-write .write-row textarea::placeholder,
.inquiry-field input::placeholder,
.inquiry-field textarea::placeholder,
.qna-setting-field input::placeholder,
.qna-setting-field textarea::placeholder,
.qna-auth-fields input::placeholder,
.qna-auth-fields textarea::placeholder,
.board-search input::placeholder {
    color: var(--form-placeholder);
    font-size: var(--form-input-size);
    font-weight: var(--form-input-weight);
    line-height: var(--form-input-line);
    letter-spacing: var(--form-input-letter);
}

/* focus */
.write-row input:not([type="file"]):not([type="checkbox"]):focus,
.write-row select:focus,
.write-row textarea:focus,
.inquiry-field input:not([type="file"]):not([type="checkbox"]):focus,
.inquiry-field select:focus,
.inquiry-field textarea:focus,
.qna-setting-field input:not([type="file"]):not([type="checkbox"]):focus,
.qna-setting-field select:focus,
.qna-setting-field textarea:focus,
.qna-auth-fields input:not([type="file"]):not([type="checkbox"]):focus,
.qna-auth-fields select:focus,
.qna-auth-fields textarea:focus,
.board-search input:focus,
.board-search select:focus {
    background-color: #fff;
    box-shadow: 0 0 0 0.4rem rgba(0, 94, 184, 0.14);
    outline: none;
}

/* select는 span wrapper에 포커스가 들어간 것처럼 보이게 */
.select-wrap:focus-within select,
.write-select-wrap:focus-within select,
.inquiry-select-wrap:focus-within select {
    background-color: #fff;
    box-shadow: 0 0 0 0.4rem rgba(0, 94, 184, 0.14);
    outline: none;
}

/* 파일 업로드도 키보드 포커스 대응 */
.file-upload:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 0.4rem rgba(0, 94, 184, 0.14);
}

/* 공개여부 스위치 포커스 */
.qna-private-switch:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 0.4rem rgba(0, 94, 184, 0.14);
}

/* select wrapper */
.select-wrap,
.write-select-wrap,
.inquiry-select-wrap {
    position: relative;
    display: block;
}
.board-search .select-wrap {
    flex: 0 0 clamp(10rem, 8vw, 12rem);
    width: clamp(10rem, 8vw, 12rem);
}
.write-select-wrap,
.inquiry-select-wrap {
    width: 100%;
}
.select-wrap select,
.write-select-wrap select,
.inquiry-select-wrap select {
    padding-right: clamp(4.2rem, 3.6vw, 5.8rem);
    appearance: none;
    cursor: pointer;
}
.select-wrap::after,
.write-select-wrap::after,
.inquiry-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--form-padding-x);
    width: clamp(0.8rem, 0.7vw, 1rem);
    height: clamp(0.8rem, 0.7vw, 1rem);
    background: var(--form-text-muted);
    mask: url("/images/layout/lifetube/common/ico-arr2.svg") center / contain no-repeat;
    -webkit-mask: url("/images/layout/lifetube/common/ico-arr2.svg") center / contain no-repeat;
    transform: translateY(-50%) rotate(90deg);
    pointer-events: none;
}
.board-search .select-wrap::after {
    right: clamp(1.6rem, 1.5vw, 2.2rem);
}

/* 검색폼 */
.board-search select,
.board-search input {
    height: var(--form-search-height);
    border: 1px solid var(--form-line-input);
    border-radius: var(--form-radius-pill);
    background: var(--form-bg-input);
    color: var(--form-text-body);
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: var(--form-input-weight);
    line-height: var(--form-input-line);
    letter-spacing: var(--form-input-letter);
    box-shadow: var(--form-shadow);
}
.board-search select {
    width: 100%;
    padding:
        0
        clamp(4.2rem, 3.6vw, 5.2rem)
        0
        clamp(1.6rem, 1.6vw, 2.2rem);
}
.board-search input {
    width: clamp(20rem, 18vw, 27.8rem);
    padding: 0 clamp(1.6rem, 1.6vw, 2.2rem);
}
.board-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(7rem, 5.6vw, 8.4rem);
    height: var(--form-search-height);
    border-radius: var(--form-radius-pill);
    background: var(--form-point);
    color: #fff;
    font-size: clamp(1.3rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.board-search button:hover {
    background: var(--form-point-hover);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 63, 143, 0.18);
    transform: translateY(-0.1rem);
}

/* 파일 업로드 */
.file-upload,
.notice-write .file-upload,
.media-write .file-upload,
.qna-write .file-upload {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--form-height);
    padding: 0 var(--form-padding-x);
    border: 1px solid var(--form-line-input);
    border-radius: var(--form-radius-input);
    background: var(--form-bg-input);
    box-shadow: var(--form-shadow);
}
.file-upload input[type="file"] {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
.file-upload.is-disabled,
.media-write .file-upload.is-disabled {
    background: rgba(255, 255, 255, 0.52);
    opacity: 0.55;
    pointer-events: none;
}
.upload-name,
.notice-write .upload-name,
.media-write .upload-name,
.qna-write .upload-name {
    overflow: hidden;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--form-placeholder);
    font-size: var(--form-input-size);
    font-weight: var(--form-input-weight);
    line-height: var(--form-input-line);
    letter-spacing: var(--form-input-letter);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-btn,
.notice-write .upload-btn,
.media-write .upload-btn,
.qna-write .upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    min-width: clamp(9rem, 7.4vw, 11rem);
    height: clamp(3.4rem, 2.8vw, 4rem);
    padding: 0 clamp(1.6rem, 1.6vw, 2.4rem);
    border-radius: var(--form-radius-pill);
    background: #edf4ff;
    color: var(--form-point);
    font-size: clamp(1.2rem, 0.95vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}
.upload-btn:hover,
.notice-write .upload-btn:hover,
.media-write .upload-btn:hover,
.qna-write .upload-btn:hover {
    background: #dfeeff;
    color: var(--form-point);
}

/* 도움말 */
.write-help,
.media-write .write-help {
    margin-top: clamp(1rem, 1vw, 1.4rem);
    color: var(--form-text-muted);
    font-size: var(--form-help-size);
    font-weight: var(--form-help-weight);
    line-height: var(--form-help-line);
    letter-spacing: -0.02em;
}

/* switch */
.thumb-switch,
.media-write .thumb-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 0.8vw, 1.2rem);
    width: fit-content;
    color: var(--form-text-title);
    font-size: clamp(1.3rem, 1.05vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--form-label-letter);
    cursor: pointer;
}
.thumb-switch input,
.media-write .thumb-switch input,
.qna-private-switch input {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
.thumb-switch .switch-ui,
.media-write .thumb-switch .switch-ui,
.qna-private-switch .switch-ui {
    position: relative;
    display: block;
    flex: 0 0 clamp(4.2rem, 3.4vw, 4.8rem);
    width: clamp(4.2rem, 3.4vw, 4.8rem);
    height: clamp(2.4rem, 2vw, 2.8rem);
    border-radius: var(--form-radius-pill);
    background: #dbe5ef;
    transition: background 0.25s ease;
}
.thumb-switch .switch-ui::before,
.media-write .thumb-switch .switch-ui::before,
.qna-private-switch .switch-ui::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.4rem;
    width: clamp(1.7rem, 1.4vw, 2rem);
    height: clamp(1.7rem, 1.4vw, 2rem);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 27, 61, 0.18);
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}
.thumb-switch input:checked + .switch-ui,
.media-write .thumb-switch input:checked + .switch-ui,
.qna-private-switch input:checked + .switch-ui {
    background: var(--form-point);
}
.thumb-switch input:checked + .switch-ui::before,
.media-write .thumb-switch input:checked + .switch-ui::before,
.qna-private-switch input:checked + .switch-ui::before {
    transform: translate(clamp(1.8rem, 1.4vw, 2rem), -50%);
}
.thumb-switch-text,
.media-write .thumb-switch-text {
    color: var(--form-text-title);
    font-size: clamp(1.4rem, 1.1vw, 1.7rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: var(--form-label-letter);
}

/* Q&A 공개여부 텍스트 */
.qna-private-switch > span:not(.switch-ui) {
    order: 1;
    color: var(--form-text-body);
    font-size: var(--form-input-size);
    font-weight: var(--form-input-weight);
    line-height: 1.2;
    letter-spacing: var(--form-input-letter);
}

/* Q&A 공개여부 스위치 위치 */
.qna-private-switch .switch-ui {
    order: 2;
    margin-left: auto;
}

/* 썸네일 미리보기 */
.thumb-preview,
.media-write .thumb-preview {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--form-line-input);
    border-radius: var(--form-radius-input);
    background:
        linear-gradient(135deg, rgba(244, 248, 252, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
}
.thumb-preview span,
.media-write .thumb-preview span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - clamp(2.8rem, 2.6vw, 4rem));
    color: var(--form-placeholder);
    font-size: var(--form-help-size);
    font-weight: var(--form-help-weight);
    line-height: var(--form-help-line);
    letter-spacing: -0.02em;
    text-align: center;
    transform: translate(-50%, -50%);
}
.thumb-preview img,
.media-write .thumb-preview img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumb-preview.has-image,
.media-write .thumb-preview.has-image {
    background: #000;
}
.thumb-preview.has-image span,
.media-write .thumb-preview.has-image span {
    display: none;
}
.thumb-preview.has-image img,
.media-write .thumb-preview.has-image img {
    display: block;
}



/* =========================
RESPONSIVE
========================= */

/* __________ Tablet __________ */
@media (max-width: 1024px) {
    /* MEDIA LIST : 3열 → 2열 */
    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* MEDIA WRITE : 썸네일 업로드 + 미리보기 세로 정렬 */
    .media-thumb-grid {
        grid-template-columns: 1fr;
    }

    /* Q&A WRITE : 연락처 3칸 → 2칸 */
    .qna-auth-fields.is-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* __________ Mobile __________ */
@media (max-width: 768px) {
    /* BOARD TOP */
    .board-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 2rem;
    }
    .board-search {
        width: 100%;
    }

    /* BOARD */
    .board-list-wrap {
        overflow: visible;
    }
    .board-list,
    .board-list thead,
    .board-list tbody,
    .board-list tr,
    .board-list th,
    .board-list td {
        display: block;
        width: 100%;
    }
    .board-list {
        border-spacing: 0;
    }
    .board-list thead {
        display: none;
    }
    .board-list tbody {
        display: grid;
        gap: 1.2rem;
    }
    .board-list tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem 1.4rem;
        padding: 2rem;
        border: 1px solid #e5edf5;
        border-radius: 1.6rem;
        background: #fff;
    }
    .board-list tbody td {
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0 !important;
        background: transparent;
        color: #6c7b88;
        font-size: 1.4rem;
        line-height: 1.4;
        text-align: left;
    }
    .board-list tbody td:first-child:not(.board-title):not(.qna-title) {
        display: none;
    }
    .board-list .board-title,
    .board-list .qna-title {
        grid-column: 1 / -1;
        order: -1;
    }
    .board-list .board-title a,
    .board-list .qna-title a {
        display: flex;
        max-width: 100%;
        color: #071827;
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.4;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .board-list tbody td:not(.board-title):not(.qna-title) {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        color: #8a98a6;
        font-size: 1.3rem;
        white-space: nowrap;
    }
    .board-list tbody tr:hover td {
        border-color: transparent;
        background: transparent;
    }
    .board-list tbody tr:hover {
        border-color: #cfe0f0;
        background: #f9fcff;
    }
    .board-list tbody tr:hover .board-title a,
    .board-list tbody tr:hover .qna-title a {
        color: #003f8f;
    }

    /* 게시글 없음 예외 처리 */
    .board-list tbody tr.board-empty-row {
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .board-list tbody tr.board-empty-row:hover {
        border-color: transparent;
        background: transparent;
    }
    .board-list tbody tr.board-empty-row td {
        display: block;
        width: 100%;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .board-empty {
        min-height: 22rem;
        padding: 4rem 2rem;
        border-radius: 1.6rem;
    }
    .qna-status,
    .qna-type {
        min-width: auto;
        height: 2.8rem;
        padding: 0 1.2rem;
        font-size: 1.2rem;
    }

    /* BOARD BOTTOM */
    .board-bottom {
        flex-direction: column;
        gap: 2.4rem;
    }

    /* WRITE */
    .notice-write .write-row,
    .media-write .write-row {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 3rem 0;
    }
    .notice-write .write-label,
    .media-write .write-label {
        padding-top: 0;
    }

    /* NOTICE / MEDIA / Q&A 제목 */
    .notice-write-head strong,
    .notice-view .board-view-title,
    .media-write-head strong,
    .qna-view .board-view-title {
        font-size: 3.4rem;
    }
    .notice-write-head::before,
    .notice-view .board-view-head::before,
    .media-write-head::before,
    .qna-view .board-view-head::before {
        font-size: 8rem;
    }

    /* NOTICE VIEW */
    .notice-view .board-view-meta,
    .qna-view .board-view-meta {
        gap: 1.6rem 2.4rem;
    }
    .notice-view .board-nav-item {
        grid-template-columns:
            7rem
            minmax(0, 1fr)
            10rem;
    }

    /* MEDIA LIST */
    .media-grid {
        grid-template-columns: 1fr;
    }

    /* Q&A VIEW */
    .qna-view .qna-thread-item {
        grid-template-columns: 5.6rem minmax(0, 1fr);
        gap: 1.8rem;
    }
    .qna-view .qna-thread-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    /* Q&A WRITE */
    .qna-write > .inner {
        width: min(100%, calc(var(--layout-width) - 3rem));
    }
    .qna-setting-card {
        grid-template-columns: 1fr;
    }
    .qna-setting-field.is-private {
        padding-top: 2rem;
        padding-left: 0;
        border-top: 1px solid #e5edf5;
        border-left: 0;
    }
    .qna-auth-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .qna-auth-head p {
        max-width: none;
        text-align: left;
    }
    .qna-auth-fields,
    .qna-auth-fields.is-contact {
        grid-template-columns: 1fr;
    }

    /* MOBILE HOVER RESET */
    .media-card:hover {
        box-shadow: 0 0.6rem 1.8rem rgba(0, 27, 61, 0.05);
        transform: none;
    }
    .media-card:hover .media-thumb img {
        transform: none;
    }

    /* 폼 영역 */
    .qna-write-intro {
        padding: clamp(3.6rem, 3.6vw, 5.6rem) clamp(1.6rem, 2vw, 3rem);
    }
    .qna-write-form {
        padding: clamp(4rem, 4vw, 6rem) clamp(1.6rem, 2vw, 3rem) 0;
    }
    .qna-write .board-actions {
        flex-direction: column;
        padding: 0 clamp(1.6rem, 2vw, 3rem) clamp(5rem, 5vw, 8rem);
    }
    .board-actions-left, .board-actions-right {
        width: 100%;
    }
    .board-btn.is-list, .board-btn.is-submit {
        width: 100%;
    }
    .qna-auth-card {
        padding: clamp(2.6rem, 2.4vw, 3.6rem) clamp(1.6rem, 2vw, 3rem);
    }
    :is(.inquiry-content, .qna-write) .inquiry-privacy {
        padding: clamp(2.6rem, 2.4vw, 3.6rem) clamp(1.6rem, 2vw, 3rem);
    }
}

/* __________ Small Mobile __________ */
@media (max-width: 640px) {
    /* SEARCH */
    .board-search {
        flex-wrap: wrap;
    }
    .board-search .select-wrap {
        flex: 0 0 100%;
        width: 100%;
    }
    .board-search input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .board-search button {
        flex: 0 0 8.4rem;
    }

    /* FORM */
    .write-row input:not([type="file"]):not([type="checkbox"]),
    .write-row select,
    .notice-write .write-row input:not([type="file"]):not([type="checkbox"]),
    .media-write .write-row input:not([type="file"]):not([type="checkbox"]),
    .qna-write .write-row input:not([type="file"]):not([type="checkbox"]),
    .qna-write .write-row select,
    .inquiry-field input:not([type="file"]):not([type="checkbox"]),
    .inquiry-field select,
    .qna-setting-field input:not([type="file"]):not([type="checkbox"]),
    .qna-setting-field select,
    .qna-auth-fields input:not([type="file"]):not([type="checkbox"]),
    .qna-auth-fields select,
    .file-upload,
    .notice-write .file-upload,
    .media-write .file-upload,
    .qna-write .file-upload {
        height: 5.8rem;
        padding-left: 1.8rem;
        padding-right: 1.8rem;
    }
    .write-row textarea,
    .notice-write .write-row textarea,
    .media-write .write-row textarea,
    .qna-write .write-row textarea,
    .inquiry-field textarea,
    .qna-setting-field textarea,
    .qna-auth-fields textarea {
        min-height: 24rem;
        padding: 2rem 1.8rem;
    }
    .select-wrap::after,
    .write-select-wrap::after,
    .inquiry-select-wrap::after {
        right: 1.8rem;
    }
}

/* __________ Small Mobile 2 __________ */
@media (max-width: 480px) {
    /* BOARD */
    .board-search button {
        flex: 0 0 100%;
        width: 100%;
    }

    /* HEAD */
    .notice-write-head strong,
    .notice-view .board-view-title,
    .media-write-head strong,
    .qna-view .board-view-title {
        font-size: 2.8rem;
        line-height: 1.32;
    }
    .notice-write-head::before,
    .notice-view .board-view-head::before,
    .media-write-head::before,
    .qna-view .board-view-head::before {
        font-size: 5.8rem;
    }

    /* NOTICE VIEW */
    .notice-view .board-nav-item {
        grid-template-columns: 5.6rem minmax(0, 1fr);
    }
    .notice-view .board-nav-item em {
        display: none;
    }

    /* Q&A */
    .qna-view .qna-thread-item {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .qna-view .qna-thread-mark {
        font-size: 3.6rem;
    }
    .qna-write-intro strong {
        font-size: 2.8rem;
    }
    .qna-write-intro p br {
        display: none;
    }
}



/* =========================
고객문의 반응형
========================= */
/* __________ Tablet __________ */
@media (max-width: 1024px) {
    .sub-visual.inquiry-page {
        height: auto;
        min-height: 47rem;
    }
    .inquiry-page .sub-visual-inner {
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        align-items: stretch;
        gap: 3rem;
        width: calc(100% - 4rem);
        min-height: 100%;
        padding: 7.6rem 0 3rem;
    }
    .inquiry-page .inquiry-top {
        width: 100%;
    }
    .inquiry-page h2 {
        font-size: 4rem;
    }
    .inquiry-page .sub-desc {
        margin-top: 2rem;
        font-size: 1.6rem;
    }
    .inquiry-page .inquiry-guide-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 2.4rem 0;
    }
    .inquiry-page .inquiry-guide-list li {
        display: grid;
        grid-template-columns: 5.2rem minmax(0, 1fr);
        padding: 0 2.4rem;
    }
    .inquiry-page .inquiry-guide-list li + li {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }
    .inquiry-page .guide-icon {
        width: 5.2rem;
        height: 5.2rem;
    }
    .inquiry-page .inquiry-guide-list p {
        font-size: 1.3rem;
    }
    .inquiry-content .inner {
        width: min(calc(100% - 4rem), 160rem);
    }
    .inquiry-content .inquiry-form-head {
        padding: 3.6rem 4rem;
    }
    .inquiry-content .inquiry-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
        gap: 3rem 2.4rem;
        padding: 4rem 4rem 0;
    }
    .inquiry-content .inquiry-privacy {
        grid-template-columns: 8rem minmax(0, 1fr);
        column-gap: 2.4rem;
        margin: 3rem 4rem 0;
        padding: 2.8rem 3rem;
    }
    .inquiry-content .inquiry-privacy-icon {
        width: 8rem;
        height: 10rem;
    }
    .inquiry-content .inquiry-actions {
        padding: 3.2rem 4rem 4.8rem;
    }
}

/* __________ Mobile __________ */
@media (max-width: 768px) {
    .sub-visual.inquiry-page {
        padding-top: 6.8rem;
    }

    .inquiry-page .sub-visual-inner {
        align-content: center;
        gap: 2.8rem;
        width: calc(100% - 3rem);
        padding: 6.8rem 0 3rem;
    }
    .inquiry-page .sub-eyebrow {
        margin-bottom: 1.4rem;
        font-size: 1.1rem;
    }
    .inquiry-page h2 {
        font-size: 3rem;
    }
    .inquiry-page .sub-desc {
        margin-top: 1.8rem;
        font-size: 1.4rem;
        line-height: 1.65;
    }
    .inquiry-page .sub-desc br {
        display: none;
    }
    .inquiry-page .inquiry-guide-list {
        grid-template-columns: 1fr;
        padding: 2.4rem 0;
        border-radius: 2.4rem;
    }
    .inquiry-page .inquiry-guide-list li {
        grid-template-columns: 4.8rem minmax(0, 1fr);
        column-gap: 1.6rem;
        padding: 0 2rem;
    }
    .inquiry-page .inquiry-guide-list li + li {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }
    .inquiry-page .guide-icon {
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 1.4rem;
    }
    .inquiry-page .guide-icon::before {
        inset: 1.2rem;
    }
    .inquiry-page .inquiry-guide-list strong {
        font-size: 1.3rem;
    }
    .inquiry-page .inquiry-guide-list p {
        margin-top: 0.6rem;
        font-size: 1.25rem;
        line-height: 1.55;
    }
    .inquiry-content {
        padding: 7rem 0 8rem;
    }
    .inquiry-content .inner {
        width: calc(100% - 3rem);
    }
    .inquiry-content .inquiry-form-box {
        border-radius: 2.4rem;
    }
    .inquiry-content .inquiry-form-head {
        align-items: center;
        flex-direction: row;
        gap: 1.4rem;
        padding: 2.8rem 2rem;
    }
    .inquiry-content .inquiry-form-icon {
        flex-basis: 4.4rem;
        width: 4.4rem;
        height: 4.4rem;
        border-radius: 1.2rem;
    }
    .inquiry-content .inquiry-form-icon::before {
        inset: 1.2rem;
    }
    .inquiry-content .inquiry-form-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        padding: 3rem 2rem 0;
    }
    .inquiry-content .inquiry-form-group-title {
        margin: 1rem 0 -0.4rem;
    }
    .inquiry-content .inquiry-privacy {
        grid-template-columns: 1fr;
        margin: 2.4rem 2rem 0;
        padding: 2.4rem 2rem;
    }
    .inquiry-content .inquiry-privacy-icon {
        display: none;
    }
    .inquiry-content .inquiry-actions {
        padding: 2.8rem 2rem 3.6rem;
    }
    .inquiry-content .inquiry-submit {
        width: 100%;
        max-width: 24rem;
        min-width: 0;
    }
    .inquiry-content .file-upload {
        gap: 1rem;
    }
    .inquiry-content .upload-btn {
        min-width: 10.4rem;
        padding: 0 1.4rem;
    }
}

/* __________ Small Mobile __________ */
@media (max-width: 480px) {
    .sub-visual.inquiry-page {
        padding-top: 6.4rem;
    }
    .inquiry-page .sub-visual-inner {
        align-content: center;
        gap: 2.4rem;
        width: calc(100% - 2.4rem);
        padding: 6.4rem 0 2.4rem;
    }
    .inquiry-page h2 {
        font-size: 2.6rem;
    }
    .inquiry-page .sub-desc {
        margin-top: 1.4rem;
        font-size: 1.3rem;
    }
    .inquiry-page .inquiry-guide-list {
        padding: 2rem 0;
        border-radius: 2rem;
    }
    .inquiry-page .inquiry-guide-list li {
        grid-template-columns: 4.2rem minmax(0, 1fr);
        column-gap: 1.2rem;
        padding: 0 1.6rem;
    }
    .inquiry-page .inquiry-guide-list li + li {
        margin-top: 1.6rem;
        padding-top: 1.6rem;
    }
    .inquiry-page .guide-icon {
        width: 4.2rem;
        height: 4.2rem;
        border-radius: 1.2rem;
    }
    .inquiry-page .guide-icon::before {
        inset: 1.1rem;
    }
    .inquiry-page .inquiry-guide-list strong {
        font-size: 1.2rem;
    }
    .inquiry-page .inquiry-guide-list p {
        font-size: 1.2rem;
    }
    .inquiry-page .inquiry-guide-list p br {
        display: none;
    }
    .inquiry-content {
        padding: 6rem 0;
    }
    .inquiry-content .inner {
        width: calc(100% - 2.4rem);
    }
    .inquiry-content .inquiry-form-box {
        border-radius: 2rem;
    }
    .inquiry-content .inquiry-form-head {
        align-items: flex-start;
        flex-direction: row;
        padding: 2.4rem 1.6rem;
    }
    .inquiry-content .inquiry-form-icon {
        display: none;
    }
    .inquiry-content .inquiry-form-head p {
        word-break: normal;
    }
    .inquiry-content .inquiry-form-grid {
        gap: 2rem;
        padding: 2.4rem 1.6rem 0;
    }
    .inquiry-content .inquiry-field {
        gap: 1.2rem;
    }
    .inquiry-content .inquiry-form-group-title {
        gap: 0.8rem;
        margin: 1.2rem 0 0;
    }
    .inquiry-content .inquiry-form-group-title strong {
        min-width: 0;
        line-height: 1.35;
    }
    .inquiry-content .inquiry-field textarea {
        min-height: 20rem;
    }
    .inquiry-content .file-upload {
        gap: 0.8rem;
        height: auto;
        min-height: 5.8rem;
        padding: 0.8rem 0.8rem 0.8rem 1.6rem;
    }
    .inquiry-content .upload-name {
        font-size: 1.2rem;
    }
    .inquiry-content .upload-btn {
        min-width: auto;
        height: 4.2rem;
        padding: 0 1.2rem;
        font-size: 1.1rem;
        white-space: nowrap;
    }
    .inquiry-content .inquiry-privacy {
        margin: 2rem 1.6rem 0;
        padding: 2rem 1.6rem; 
        border-radius: 1.8rem;
    }
    .inquiry-content .inquiry-privacy .privacy-check {
        align-items: flex-start;
    }
    .inquiry-content .inquiry-privacy .privacy-check input {
        margin-top: 0.2rem;
    }
    .inquiry-content .inquiry-privacy .privacy-check span {
        min-width: 0;
    }
    .inquiry-content .inquiry-privacy ul {
        gap: 0.8rem;
        margin-top: 1.2rem;
        padding-top: 1.2rem;
    }
    .inquiry-content .inquiry-actions {
        padding: 2.4rem 1.6rem 3rem;
    }
    .inquiry-content .inquiry-submit {
        width: 100%;
        max-width: none;
        height: 5.6rem;
    }
}