@charset "UTF-8";
/* ============================================================
   Tomocube Precision — content additions (improvements)
   Reuses site design tokens (_colors.css / _vars.css):
   --black #0f0f0f / --dark-gray #1a1a1a / --blue #27b7ca / SUIT
   ============================================================ */

/* ---- section lead paragraph ---- */
.improve-lead {margin-top: 24px; max-width: 980px;}
.improve-lead .text {color: var(--white-07); line-height: 1.7;}
.improve-lead .text strong {color: var(--white); font-weight: 600;}
.improve-lead .text .accent {color: var(--blue); font-weight: 600;}

/* ---- plain-language callout box ---- */
.plain-box {
    margin-top: 40px; padding: 36px 40px;
    background-color: var(--dark-gray); border-radius: var(--bdr-40);
    border-left: 4px solid var(--blue);
}
.plain-box .label {display: block; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 14px;}
.plain-box p {font-size: 18px; line-height: 1.75; color: var(--white-07);}
.plain-box p strong {color: var(--white);}

/* ---- How it works steps ---- */
.hiw-steps {display: flex; gap: 24px; margin-top: 50px;}
.hiw-steps .step {
    flex: 1; position: relative; padding: 40px 32px 36px;
    background-color: var(--dark-gray); border-radius: var(--bdr-40);
    border: 1px solid var(--white-01);
}
.hiw-steps .step .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background-color: rgba(39,183,202,0.15); border: 1px solid var(--blue);
    color: var(--blue); font-weight: 700; font-size: 18px; margin-bottom: 22px;
}
.hiw-steps .step .step-title {font-size: 20px; font-weight: 600; color: var(--white); margin-bottom: 14px;}
.hiw-steps .step p {font-size: 15px; line-height: 1.7; color: var(--white-05);}
.hiw-steps .step p em {color: var(--blue); font-style: normal; font-weight: 600;}
.hiw-steps .step .diagram {margin: 0 0 20px; height: 110px;}
.hiw-steps .step .diagram svg {width: 100%; height: 100%;}
.hiw-analogy {margin-top: 30px; font-size: 15px; color: var(--white-05);}
.hiw-analogy strong {color: var(--white-07);}

/* ---- comparison table ---- */
.compare-table-wrap {margin-top: 50px; overflow-x: auto; border-radius: var(--bdr-40); border: 1px solid var(--white-01);}
.compare-table {min-width: 1040px; border-top: 0; background-color: var(--dark-gray);}
.compare-table th, .compare-table td {border-bottom: 1px solid var(--white-01); font-size: 15px;}
.compare-table thead th {padding: 22px 18px; font-weight: 600; color: var(--white); background-color: #161616; text-align: center;}
.compare-table thead th:first-child {text-align: left;}
.compare-table thead th.hl {color: var(--blue); background-color: rgba(39,183,202,0.08);}
.compare-table tbody th {padding: 20px 18px; font-weight: 600; color: var(--white-07); white-space: nowrap;}
.compare-table tbody td {padding: 20px 18px; text-align: center; color: var(--white-05); line-height: 1.55;}
.compare-table tbody td.hl {color: var(--white); background-color: rgba(39,183,202,0.08); font-weight: 500;}
.compare-table .good {color: var(--blue); font-weight: 600;}
.compare-table .bad {color: #e76e6e;}
.compare-note {margin-top: 18px; font-size: 13px; color: var(--white-03);}

/* ---- product key-spec chips ---- */
.spec-chips {display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 6px;}
.spec-chips li {
    padding: 10px 18px; border-radius: 100px; font-size: 14px;
    background-color: rgba(255,255,255,0.06); border: 1px solid var(--white-01);
    color: var(--white-07);
}
.spec-chips li b {color: var(--blue); font-weight: 700; margin-left: 6px;}

/* ---- product model name: brand color on model code only (keep "Tomocube" default) ---- */
.main .products .model .point {color: var(--blue);}

/* ---- product description (lead + sub) — shared by products + applications tabs ---- */
.main .products .product-lead,
.main .applications .tab-content .product-lead {line-height: 1.45;}
.main .products .product-sub,
.main .applications .tab-content .product-sub {
    margin-top: 20px; font-size: 18px; font-weight: 400;
    line-height: 1.7; color: var(--white-05);
}
@media all and (max-width: 768px) {
    .main .products .product-sub,
    .main .applications .tab-content .product-sub {margin-top: 14px; font-size: 16px;}
    /* keep the lead at products' size — not shrunk by .main .applications .text (15px) */
    .main .applications .tab-content .product-lead {font-size: 20px;}
}

/* ---- align right column (chips → View more) with the product image top ---- */
@media all and (min-width: 961px) {
    .main .products .model {line-height: 1.2;}
    /* model name line-box (incl. ™ superscript) + img-wrap margin-top (20px) */
    .main .products .text-area {padding-top: 105px;}
    .main .products .text-area .spec-chips {margin-top: 0;}
}

/* ---- selection guide ---- */
.select-guide {display: flex; align-items: stretch; gap: 24px; margin-top: 50px;}
.select-guide .q {
    flex: 0 0 280px; display: flex; flex-direction: column; justify-content: center;
    padding: 36px 32px; background-color: #161616; border-radius: var(--bdr-40);
    border: 1px solid var(--white-01);
}
.select-guide .q .q-label {font-size: 14px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; color: var(--blue); margin-bottom: 12px;}
.select-guide .q p {font-size: 19px; font-weight: 600; color: var(--white); line-height: 1.5;}
.select-guide .answers {flex: 1; display: flex; flex-direction: column; gap: 24px;}
.select-guide .answer {
    display: flex; align-items: center; gap: 24px; padding: 26px 32px;
    background-color: var(--dark-gray); border-radius: var(--bdr-40); border: 1px solid var(--white-01);
    transition: border-color 0.3s;
}
.select-guide .answer:hover {border-color: var(--blue);}
.select-guide .answer .cond {flex: 1; font-size: 16px; color: var(--white-07); line-height: 1.6;}
.select-guide .answer .cond em {font-style: normal; color: var(--white); font-weight: 600;}
.select-guide .answer .arrow {color: var(--blue); font-size: 22px;}
.select-guide .answer .model {flex: 0 0 150px; text-align: center; font-size: 20px; font-weight: 700; color: var(--blue);}
.select-guide .answer .model small {display: block; font-size: 12px; font-weight: 400; color: var(--white-05); margin-top: 6px; letter-spacing: 0.5px;}


/* ---- coming soon pill (dead-link fix) ---- */
.soon-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 100px; font-size: 14px; font-weight: 600;
    color: var(--white-05); border: 1px dashed var(--white-03); cursor: default;
}
.soon-pill + .btn {margin-left: 14px;}

/* ---- evidence / case study cards ---- */
.case-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px;}
.case-card {
    display: flex; flex-direction: column; overflow: hidden;
    background-color: var(--dark-gray); border-radius: var(--bdr-40); border: 1px solid var(--white-01);
}
.case-card .thumb {position: relative; aspect-ratio: 16/9; overflow: hidden;}
.case-card .thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.case-card .thumb .tag {
    position: absolute; top: 16px; left: 16px; padding: 6px 12px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--black); background-color: var(--blue); border-radius: 100px;
}
.case-card .body {display: flex; flex-direction: column; flex: 1; padding: 28px 28px 30px;}
.case-card .case-title {font-size: 18px; font-weight: 600; color: var(--white); line-height: 1.5; margin-bottom: 14px;}
.case-card .case-text {font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--white-05); flex: 1;}
.case-card .metrics {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;}
.case-card .metrics span {
    padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 100px;
    color: var(--blue); background-color: rgba(39,183,202,0.1); border: 1px solid rgba(39,183,202,0.35);
}
.case-disclaimer {margin-top: 20px; font-size: 13px; color: var(--white-03);}

/* ---- resources ---- */
.resource-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 50px;}
.resource-card {
    display: flex; flex-direction: column; gap: 16px; padding: 32px 28px;
    background-color: var(--dark-gray); border-radius: var(--bdr-40); border: 1px solid var(--white-01);
    transition: border-color 0.3s, transform 0.3s;
}
.resource-card:hover {border-color: var(--blue); transform: translateY(-4px);}
.resource-card .r-type {font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue);}
.resource-card .r-title {font-size: 17px; font-weight: 600; color: var(--white); line-height: 1.5; flex: 1;}
.resource-card .r-meta {font-size: 13px; color: var(--white-05);}
.resource-card .r-link {font-size: 14px; font-weight: 600; color: var(--white-07);}
.resource-card .r-link i {display: inline-block; margin-left: 8px; transition: transform 0.3s;}
.resource-card:hover .r-link {color: var(--blue);}
.resource-card:hover .r-link i {transform: translateX(4px);}

/* ---- glossary grid ---- */
.glossary-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; margin-top: 50px;}
.glossary-grid details {
    background-color: var(--dark-gray); border-radius: 20px; border: 1px solid var(--white-01);
    overflow: hidden;
}
.glossary-grid summary {
    display: flex; align-items: center; gap: 14px; padding: 22px 28px;
    font-size: 20px; font-weight: 600; color: var(--white); cursor: pointer; list-style: none;
}
.glossary-grid summary::-webkit-details-marker {display: none;}
.glossary-grid summary .term {color: var(--blue); white-space: nowrap;}
.glossary-grid summary .full {font-weight: 400; color: var(--white-05); font-size: 20px;}
.glossary-grid summary::after {content: '+'; margin-left: auto; color: var(--white-05); font-size: 20px; font-weight: 300;}
.glossary-grid details[open] summary::after {content: '−';}
.glossary-grid details p {padding: 0 28px 24px; font-size: 20px; line-height: 1.7; color: var(--white-05);}
/* FAQ answer rendered from CKEDITOR HTML (tbl_board.tbb_content) */
.glossary-grid details .faq-answer {padding: 2px 28px 24px; font-size: 20px; line-height: 1.7; color: var(--white-05);}
.glossary-grid details .faq-answer p {padding: 0;}
.glossary-grid details .faq-answer p + p {margin-top: 12px;}
.glossary-grid details .faq-answer img {max-width: 100%; height: auto;}
.glossary-grid details .faq-answer a {color: var(--blue); text-decoration: underline;}

/* ---- sample measurement CTA band ---- */
.sample-cta {
    margin-top: 180px; padding: 90px var(--gutter-100);
    background: linear-gradient(135deg, rgba(39,183,202,0.18) 0%, rgba(39,183,202,0.04) 60%), var(--dark-gray);
    border-top: 1px solid var(--white-01); border-bottom: 1px solid var(--white-01);
    text-align: center;
}
.sample-cta .cta-title {font-size: 42px; font-weight: 600; color: var(--white); letter-spacing: -1px;}
.sample-cta .cta-text {margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--white-07);}
.sample-cta .cta-steps {display: flex; justify-content: center; gap: 60px; margin-top: 50px;}
.sample-cta .cta-steps li {font-size: 15px; color: var(--white-05);}
.sample-cta .cta-steps li b {display: block; font-size: 26px; font-weight: 700; color: var(--blue); margin-bottom: 10px;}
.sample-cta .button-area {margin-top: 50px; justify-content: center; display: flex; gap: 16px;}
.sample-cta .btn.cta-main {
    padding: 0 44px; height: var(--medium); display: inline-flex; align-items: center;
    background-color: var(--blue); color: var(--black); font-weight: 700; font-size: 17px; border-radius: 100px;
    transition: opacity .3s;
}
.sample-cta .btn.cta-main:hover {opacity: 0.85;}
.sample-cta .btn.cta-sub {
    padding: 0 36px; height: var(--medium); display: inline-flex; align-items: center;
    border: 1px solid var(--white-03); color: var(--white); font-weight: 600; font-size: 16px; border-radius: 100px;
    transition: border-color .3s;
}
.sample-cta .btn.cta-sub:hover {border-color: var(--blue); color: var(--blue);}

/* ---- about trust stats ---- */
.trust-stats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px;}
.trust-stats li {padding: 36px 30px; background-color: var(--dark-gray); border-radius: var(--bdr-40); border: 1px solid var(--white-01);}
.trust-stats li b {display: block; font-size: 34px; font-weight: 700; color: var(--blue); letter-spacing: -0.5px;}
.trust-stats li span {display: block; margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--white-05);}
.about-narrative {max-width: 880px; margin-top: 30px;}
.about-narrative .text {color: var(--white-07); line-height: 1.75;}

/* ---- news category tag ---- */
.news-tag {
    display: inline-block; margin-bottom: 12px; padding: 5px 12px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.5px; border-radius: 100px;
}
.news-tag.precision {color: var(--blue); background-color: rgba(39,183,202,0.12); border: 1px solid rgba(39,183,202,0.4);}
.news-tag.corporate {color: var(--white-05); background-color: rgba(255,255,255,0.06); border: 1px solid var(--white-01);}

/* ---- responsive ---- */
@media all and (max-width: 1100px) {
    .case-list {grid-template-columns: 1fr 1fr;}
    .resource-list {grid-template-columns: 1fr 1fr;}
    .trust-stats {grid-template-columns: 1fr 1fr;}
}
@media all and (max-width: 768px) {
    .hiw-steps {flex-direction: column;}
    .select-guide {flex-direction: column;}
    .select-guide .q {flex: none;}
    /* 모바일: 답변 박스를 세로 스택(설명 → 화살표 → 모델)으로 — 좁은 칸으로 세로 길어지는 것 방지 */
    .select-guide .answer {flex-direction: column; align-items: flex-start; gap: 14px;}
    .select-guide .answer .cond {flex: none;}
    .select-guide .answer .arrow {align-self: center; transform: rotate(90deg);}
    .select-guide .answer .model {flex: none; text-align: left;}
    .case-list {grid-template-columns: 1fr;}
    .case-card .case-text {font-size: 16px;}
    .resource-list {grid-template-columns: 1fr;}
    .glossary-grid {grid-template-columns: 1fr;}
    .glossary-grid summary, .glossary-grid summary .full,
    .glossary-grid details p, .glossary-grid details .faq-answer {font-size: 17px;}
    .trust-stats {grid-template-columns: 1fr 1fr; gap: 14px;}
    /* "Why Holotomography?" 4개 박스는 모바일에서 세로 1열로 쌓는다
       (HTML 인라인 style 캐시가 남아 있어도 이기도록 !important) */
    .why-ht .trust-stats {grid-template-columns: 1fr !important;}
    .trust-stats li b {font-size: 26px;}
    .sample-cta {margin-top: 80px; padding: 60px var(--gutter-100, 20px);}
    .sample-cta .cta-title {font-size: 30px;}
    .sample-cta .cta-steps {flex-direction: column; gap: 24px;}
    .sample-cta .button-area {flex-direction: column; align-items: center;}
    .plain-box {padding: 26px 22px;}
}

/* ============================================================
   Light-theme variants for sub-pages (.wrap without .dark)
   ============================================================ */
.wrap:not(.dark) .improve-lead .text {color: var(--gray-dark);}
.wrap:not(.dark) .improve-lead .text strong {color: var(--black);}

.wrap:not(.dark) .plain-box {background-color: var(--gray-light); border-left-color: var(--blue);}
.wrap:not(.dark) .plain-box p {color: var(--gray-dark);}
.wrap:not(.dark) .plain-box p strong {color: var(--black);}

.wrap:not(.dark) .hiw-steps .step {background-color: var(--gray-light); border-color: rgba(15,15,15,0.06);}
.wrap:not(.dark) .hiw-steps .step .step-title {color: var(--black);}
.wrap:not(.dark) .hiw-steps .step p {color: var(--gray-dark);}
.wrap:not(.dark) .hiw-steps .step .diagram text {fill: rgba(15,15,15,0.5);}
.wrap:not(.dark) .hiw-analogy {color: var(--gray-dark);}
.wrap:not(.dark) .hiw-analogy strong {color: var(--black);}

.wrap:not(.dark) .compare-table-wrap {border-color: rgba(15,15,15,0.1);}
.wrap:not(.dark) .compare-table {background-color: var(--white);}
.wrap:not(.dark) .compare-table th, .wrap:not(.dark) .compare-table td {border-bottom-color: rgba(15,15,15,0.08);}
.wrap:not(.dark) .compare-table thead th {background-color: var(--gray-light); color: var(--black);}
.wrap:not(.dark) .compare-table tbody th {color: var(--black);}
.wrap:not(.dark) .compare-table tbody td {color: var(--gray-dark);}
.wrap:not(.dark) .compare-table tbody td.hl {color: var(--black);}
.wrap:not(.dark) .compare-note {color: rgba(15,15,15,0.4);}

.wrap:not(.dark) .spec-chips li {background-color: rgba(15,15,15,0.04); border-color: rgba(15,15,15,0.08); color: var(--gray-dark);}

.wrap:not(.dark) .select-guide .q {background-color: var(--gray-light); border-color: rgba(15,15,15,0.06);}
.wrap:not(.dark) .select-guide .q p {color: var(--black);}
.wrap:not(.dark) .select-guide .answer {background-color: var(--white); border-color: rgba(15,15,15,0.1);}
.wrap:not(.dark) .select-guide .answer .cond {color: var(--gray-dark);}
.wrap:not(.dark) .select-guide .answer .cond em {color: var(--black);}
.wrap:not(.dark) .select-guide .answer .model small {color: var(--gray-dark);}

.wrap:not(.dark) .soon-pill {color: var(--gray-dark); border-color: rgba(15,15,15,0.25);}

.wrap:not(.dark) .resource-card {background-color: var(--gray-light); border-color: rgba(15,15,15,0.06);}
.wrap:not(.dark) .resource-card .r-title {color: var(--black);}
.wrap:not(.dark) .resource-card .r-meta {color: var(--gray-dark);}
.wrap:not(.dark) .resource-card .r-link {color: var(--gray-dark);}

.wrap:not(.dark) .case-card {background-color: var(--gray-light); border-color: rgba(15,15,15,0.06);}
.wrap:not(.dark) .case-card .case-title {color: var(--black);}
.wrap:not(.dark) .case-card .case-text {color: var(--gray-dark);}
.wrap:not(.dark) .case-disclaimer {color: rgba(15,15,15,0.4);}

.wrap:not(.dark) .glossary-grid details {background-color: var(--gray-light); border-color: rgba(15,15,15,0.06);}
.wrap:not(.dark) .glossary-grid summary {color: var(--black);}
.wrap:not(.dark) .glossary-grid summary .full {color: var(--gray-dark);}
.wrap:not(.dark) .glossary-grid summary::after {color: var(--gray-dark);}
.wrap:not(.dark) .glossary-grid details p {color: var(--gray-dark);}
.wrap:not(.dark) .glossary-grid details .faq-answer {color: var(--gray-dark);}

/* spec table (product pages) */
.spec-table-wrap {margin-top: 50px; overflow-x: auto; border-radius: var(--bdr-40); border: 1px solid rgba(15,15,15,0.1);}
.spec-table {min-width: 640px; border-top: 0; background-color: var(--white);}
.spec-table th, .spec-table td {border-bottom: 1px solid rgba(15,15,15,0.08); font-size: 15px;}
.spec-table tbody th {padding: 20px 24px; font-weight: 600; color: var(--black); text-align: left; width: 280px; white-space: nowrap; background-color: var(--gray-light);}
.spec-table tbody td {padding: 20px 24px; text-align: left; color: var(--gray-dark); line-height: 1.6;}
.spec-table tbody td b {color: var(--blue); font-weight: 700;}
.wrap.dark .spec-table {background-color: var(--dark-gray);}
.wrap.dark .spec-table tbody th {background-color: #161616; color: var(--white);}
.wrap.dark .spec-table tbody td {color: var(--white-05);}

/* cross-link banner (HT-T1 <-> HT-R1) */
.crosslink-banner {
    display: flex; align-items: center; gap: 24px; margin-top: 50px; padding: 30px 36px;
    background-color: var(--gray-light); border: 1px solid rgba(15,15,15,0.08); border-radius: var(--bdr-40);
}
.crosslink-banner .q-mark {flex: 0 0 auto; font-size: 26px; font-weight: 700; color: var(--blue);}
.crosslink-banner .desc {flex: 1; font-size: 15px; line-height: 1.6; color: var(--gray-dark);}
.crosslink-banner .desc em {font-style: normal; font-weight: 600; color: var(--black);}
.crosslink-banner .go {flex: 0 0 auto; padding: 12px 26px; border-radius: 100px; background-color: var(--blue); color: var(--white); font-weight: 700; font-size: 15px; transition: opacity .3s;}
.crosslink-banner .go:hover {opacity: .85;}

/* coming-soon application card */
.app-card-soon {position: relative; opacity: 0.92;}
.app-card-soon .img-wrap {position: relative; filter: grayscale(0.25);}
/* dark scrim over the busy image so the overlaid title/description stay legible */
.app-card-soon .img-wrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,10,12,0.62) 0%, rgba(8,10,12,0.55) 45%, rgba(8,10,12,0.85) 100%);
}
.app-card-soon .text-wrap {z-index: 1;}
.app-card-soon .text-wrap .title {text-shadow: 0 2px 10px rgba(0,0,0,0.9);}
.app-card-soon .soon-overlay {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--white); background-color: rgba(15,15,15,0.65); border: 1px dashed rgba(255,255,255,0.5);
}

/* live(DB) application card — same legibility scrim/shadow as coming-soon, full color (no dim) */
.app-card-live .img-wrap {position: relative;}
/* dark scrim over the busy image so the overlaid title/description stay legible */
.app-card-live .img-wrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,10,12,0.62) 0%, rgba(8,10,12,0.55) 45%, rgba(8,10,12,0.85) 100%);
}
.app-card-live .text-wrap {z-index: 1;}
.app-card-live .text-wrap .title {text-shadow: 0 2px 10px rgba(0,0,0,0.9);}

/* description sits in the vertical middle of the card — over the brightest part of the
   3D measurement images — so give it a localized translucent plate for guaranteed contrast,
   instead of darkening the whole (colorful, on-purpose) image. */
.app-card-soon .text-wrap .text,
.app-card-live .text-wrap .text {
    opacity: 1 !important; color: var(--white); align-self: flex-start;
    background: rgba(8,10,12,0.58);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    padding: 9px 12px; border-radius: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* measurand table on application page */
.measure-table-note {margin-top: 16px; font-size: 13px; color: rgba(15,15,15,0.4);}

@media all and (max-width: 768px) {
    .crosslink-banner {flex-direction: column; align-items: flex-start;}
    .spec-table tbody th {width: auto; white-space: normal;}
}

/* ============================================================
   Product gallery — manual image selector (HT-T1M / HT-T1D)
   ============================================================ */
/* the sticky image column is display:flex (row) on desktop; with the selector
   added as a 2nd child, stack image + tabs vertically so tabs sit BELOW the image
   (and cancel the inherited `.view-sticky > div {height:100%}` rule on the tabs). */
.view-sticky.gallery-enabled {flex-direction: column;}
.view-sticky.gallery-enabled > .gallery-tabs {height: auto !important;}
/* desktop: the sticky column is height-capped (max-height) and the image relies on a
   height:100% chain; stacking tabs below breaks that chain and clips the image.
   Release the cap + height chain and size the image by max-height so it shows fully. */
@media all and (min-width: 961px) {
    .view-sticky.gallery-enabled {max-height: none !important;}
    .view-sticky.gallery-enabled .img-area {height: auto !important;}
    .view-sticky.gallery-enabled .img-area .swiper,
    .view-sticky.gallery-enabled .img-area .swiper-wrapper,
    .view-sticky.gallery-enabled .img-area .swiper-slide,
    .view-sticky.gallery-enabled .img-area .img-wrap {height: auto !important;}
    .view-sticky.gallery-enabled .img-area .img-wrap {padding: 6vh 0 !important;}
    .view-sticky.gallery-enabled .img-area .img-wrap img {max-height: 60vh; object-fit: contain;}
}
.gallery-tabs {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px;}
.gallery-tab {
    padding: 11px 22px; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer;
    color: var(--gray-dark); background-color: var(--gray-light);
    border: 1px solid rgba(15,15,15,0.12); transition: background-color .25s, color .25s, border-color .25s;
}
.gallery-tab:hover {border-color: var(--blue); color: var(--black);}
.gallery-tab.current {background-color: var(--blue); color: #fff; border-color: var(--blue);}

/* dot indicator below the gallery (overrides Swiper absolute default) */
.product-gallery .gallery-pagination {position: static; margin-top: 16px; text-align: center; line-height: 0;}
.product-gallery .gallery-pagination .swiper-pagination-bullet {
    width: 9px; height: 9px; background-color: rgba(15,15,15,0.25); opacity: 1; margin: 0 5px; transition: background-color .25s, width .25s;
}
.product-gallery .gallery-pagination .swiper-pagination-bullet-active {background-color: var(--blue); width: 24px; border-radius: 5px;}

/* dark-theme fallback (if ever used on a dark wrap) */
.wrap.dark .gallery-tab {color: var(--white-07); background-color: var(--dark-gray); border-color: var(--white-01);}
.wrap.dark .gallery-tab.current {background-color: var(--blue); color: var(--black);}
.wrap.dark .product-gallery .gallery-pagination .swiper-pagination-bullet {background-color: var(--white-03);}

@media all and (max-width: 768px) {
    .gallery-tab {padding: 9px 16px; font-size: 13px;}
}

/* ------------------------------------------------------------
   메인(/precision/) Products 카드 — 이미지 2개 이상 슬라이드 갤러리 (안정형)
   설계: 고정 비율(aspect-ratio) 박스로 "폭에서 높이를 초기 레이아웃 시점에 즉시 확보".
   → (1) Swiper .swiper-slide{height:100%} 가 실제 높이로 계산돼 0-collapse 없음
     (2) 이미지가 비동기로 늦게 로드돼도 박스 높이가 이미 고정이라 레이아웃이 안 흔들림
        → ScrollTrigger 리빌(.content-list) 위치가 어긋나지 않아 섹션이 사라지지 않음
   ------------------------------------------------------------ */
.main .products .model-area.gallery-enabled { flex-direction: column; align-items: stretch; }
.main .products .model-area.gallery-enabled .mp-gallery-box {
    width: 100%; aspect-ratio: 4 / 3; max-height: 480px; margin-top: 40px; overflow: hidden;
}
.main .products .model-area.gallery-enabled .mp-gallery-box .swiper,
.main .products .model-area.gallery-enabled .mp-gallery-box .swiper-wrapper,
.main .products .model-area.gallery-enabled .mp-gallery-box .swiper-slide,
.main .products .model-area.gallery-enabled .mp-gallery-box .img-wrap { height: 100%; margin-top: 0; }
.main .products .model-area.gallery-enabled .mp-gallery-box img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.main .products .model-area.gallery-enabled .gallery-tabs { margin-top: 24px; width: 100%; justify-content: center; }
/* 제품 선택 버튼(탭)을 상세페이지(/precision/products/htt1)와 동일한 라이트 스타일로.
   메인은 .wrap.dark 라 다크 테마 탭 스타일이 먹으므로, 더 높은 특이도로 무력화한다. */
.main .products .model-area.gallery-enabled .gallery-tab {
    color: var(--gray-dark); background-color: var(--gray-light); border-color: rgba(15,15,15,0.12);
}
.main .products .model-area.gallery-enabled .gallery-tab:hover {
    border-color: var(--blue); color: var(--black);
}
.main .products .model-area.gallery-enabled .gallery-tab.current {
    background-color: var(--blue); color: #fff; border-color: var(--blue);
}
/* aspect-ratio 미지원 구형 브라우저 폴백: 고정 높이 */
@supports not (aspect-ratio: 1 / 1) {
    .main .products .model-area.gallery-enabled .mp-gallery-box { height: 420px; }
}
/* 데스크톱 2단 레이아웃: 좌측은 상단에 모델명 타이틀이 있어 이미지 카드가 아래로 내려오는데,
   우측 텍스트 영역은 상단부터 시작해 Tag 행이 이미지 카드보다 위에 뜬다.
   우측 내용을 아래로 내려 우측 Tag 상단을 좌측 이미지 카드 상단에 맞춘다. (값은 조정 가능) */
@media all and (min-width: 961px) {
    .main .products .content-list > li .item .text-area { margin-top: 48px; }
}

/* ============================================================
   Application "Discover" boxes (appview features section)
   ============================================================ */
/* (application 상세 페이지 한정 — 제품 페이지 feature 박스에는 영향 없음) */
/* 제목이 고정 2줄 높이(_global: height:108px, -webkit-box+line-clamp:2)라
   한 줄 제목 아래 빈 줄 공간이 생겨 간격이 넓음. clamp/고정높이를 해제해
   제목을 자연 높이로 만들고(!important 로 확실히 override) 간격은 margin 으로 제어. */
.sub.applications.view .section.features .item.feature.flex-960 .title.medium {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    -webkit-line-clamp: none !important;
    line-height: 1.3 !important;
}
/* 제목과 설명 사이 간격 */
.sub.applications.view .section.features .item.feature.flex-960 .text-box { margin-top: 31px !important; }
@media all and (min-width: 961px) {
    /* 우측 이미지를 박스 기준 상하 중앙에 배치 */
    .sub.applications.view .section.features .item.feature.flex-960 .img-wrap { align-self: center; }
    /* 캡션이 있으면 이미지가 자연 높이로 표시되도록(캡션 공간 확보) */
    .sub.applications.view .section.features .item.feature.flex-960 .img-wrap.has-caption { height: auto; max-height: none; }
    .sub.applications.view .section.features .item.feature.flex-960 .img-wrap.has-caption img,
    .sub.applications.view .section.features .item.feature.flex-960 .img-wrap.has-caption video { height: auto; max-height: 460px; }
}
/* 이미지 하단 캡션 */
.sub.applications.view .section.features .item.feature.flex-960 .img-wrap .disco-caption {
    margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--black); text-align: center;
}