@import url("./fonts.css");
@import url("./technology-mobile-image.css");

:root {
    --ink: #20221f;
    --green: #2c4434;
    --muted: #8a877e;
    --line: #d8d4cb;
    --paper: #faf9f7;
    --panel: #f0eee8;
    --footer: #1d211c;
}

/* DEV-REQ-078 N-1424 ~ N-1426 · 대표 결정 2026-09-16 — 배경 띠는 화면 끝까지, 글자는 1400px 안.
   발주가 정본 세 벌을 같은 구조로 고쳤다(바깥 div 에 background · 안쪽 div 에 max-width). */
.legal-notice-band { background: var(--panel); }
.legal-notice { max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 20px clamp(20px, 4vw, 48px); font-size: 11px; color: var(--muted); line-height: 1.9; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
[aria-disabled="true"] { cursor: default; }
::selection { background: var(--green); color: #fff; }

/* BUG-D-171 · DEV-REQ-062 N-944 — .shell 을 다는 요소에는 단축 margin(margin: …)을 쓰지 않는다. 좌우 auto 가 지워진다 — margin-block 으로 쓴다. */
.shell { width: min(100%, 1400px); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.mobile-only, .mobile-footer-links { display: none; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px;
    transform: translateY(-150%); background: #fff; border: 2px solid var(--green); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(250, 249, 247, .86); backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(32, 34, 31, .07);
    transition: transform .35s ease;
}
/* BUG-D-093 — 자리 높이는 site.js 가 헤더 offsetHeight 를 재서 넣는다(정본 _header.dc.html _measure). 이 값은 재기 전 · 못 잰 때의 폴백이다. */
.desktop-header-spacer { height: 157px; }
.header-util, .header-brand, .desktop-nav { box-sizing: content-box; }
.site-header.is-hidden { transform: translateY(-100%); }
.header-util { width: auto; display: flex; justify-content: flex-end; gap: 18px; padding-top: 10px; color: var(--muted); font-size: 11.5px; letter-spacing: .04em; }
.header-divider { color: var(--line); }
.language-menu { position: relative; }
.language-trigger { display: inline-flex; align-items: center; gap: 4px; box-sizing: content-box; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }
.language-trigger:hover, .language-trigger:focus-visible { color: var(--ink); }
/* BUG-D-067 — 정본 _source/user/_header.dc.html 의 수치다.
   코드 38px + 원어 2열이고, 강조는 「현재 언어」에 준다. 다른 언어를 강조하면 반대로 읽힌다. */
.language-options {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 176px;
    overflow: hidden; border: 1px solid #e6e3dc; border-radius: 8px; background: #fff;
    box-shadow: 0 6px 20px rgba(32, 34, 31, .1); padding: 4px 0;
}
.language-option { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: #4c4e48; }
.language-option:hover { background: #f5f3ee; }
.language-option-code { flex: 0 0 38px; width: 38px; font-size: 10px; letter-spacing: .06em; color: #a9a69d; }
.language-option-name { font-size: 12.5px; }
.language-option.is-current { color: var(--ink); font-weight: 700; }
.language-option.is-current .language-option-code { color: var(--ink); }
.language-options [aria-disabled] { color: #aaa79e; }
.header-brand { display: flex; justify-content: center; padding: 18px 0 4px; }
.header-brand a { width: 260px; height: 58px; }
.header-brand img { width: 100%; height: 100%; object-fit: contain; }
/* CR-02 · DEV-ANS-150 N-3623 — 고객사 원문 「현재 마진만큼 간격이 더」: 로고 줄과 메뉴 줄 사이 18px(로고 아래 4 + 메뉴 위 14) → 36px. PC(1024 이상)만 · 자리 높이는 site.js 가 다시 잰다. */
@media (min-width: 1024px) {
    .header-brand { padding-bottom: 22px; }
    .desktop-header-spacer { height: 175px; }
}
.desktop-nav {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: clamp(22px, 4.4vw, 68px); padding: 14px clamp(16px, 3vw, 32px) 18px;
    color: #4c4e48; font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
}
.desktop-nav > a:not(.nav-search) { box-sizing: content-box; padding-bottom: 3px; }
body:has(.hero) .desktop-nav {
    background: linear-gradient(to bottom,
        rgb(251,249,247) 0 8px,
        rgb(250,249,247) 8px 13px,
        rgb(250,249,246) 13px 14px,
        rgb(250,248,246) 14px 15px,
        rgb(249,248,246) 15px 16px,
        rgb(249,248,245) 16px 17px,
        rgb(248,247,245) 17px 19px,
        rgb(247,246,244) 19px 20px,
        rgb(247,246,243) 20px 21px,
        rgb(246,245,243) 21px 22px,
        rgb(245,244,242) 22px 23px,
        rgb(244,243,241) 23px 24px,
        rgb(243,242,240) 24px 25px,
        rgb(242,241,239) 25px 26px,
        rgb(241,240,238) 26px 27px,
        rgb(240,239,237) 27px 28px,
        rgb(239,238,235) 28px 29px,
        rgb(238,237,234) 29px 30px,
        rgb(236,235,233) 30px 31px,
        rgb(235,234,232) 31px 32px,
        rgb(234,233,230) 32px 33px,
        rgb(233,232,229) 33px 34px,
        rgb(231,230,228) 34px 35px,
        rgb(230,229,227) 35px 36px,
        rgb(229,228,225) 36px 37px,
        rgb(228,227,224) 37px 38px,
        rgb(227,226,223) 38px 39px,
        rgb(226,225,222) 39px 40px,
        rgb(225,224,221) 40px 41px,
        rgb(224,223,220) 41px 42px,
        rgb(223,222,219) 42px 43px,
        rgb(222,221,219) 43px 44px,
        rgb(222,221,218) 44px 45px,
        rgb(221,220,218) 45px 46px,
        rgb(221,220,217) 46px 47px,
        rgb(220,219,217) 47px 48px,
        rgb(220,219,216) 48px 50px,
        rgb(219,219,216) 50px 51px,
        rgb(219,218,216) 51px 52px);
}
body:has(.hero) .desktop-nav { background: transparent; }
.desktop-nav a[aria-current="page"] { padding-bottom: 3px; color: var(--green); border-bottom: 1.5px solid var(--green); }
.desktop-nav [aria-disabled] { color: #777970; }
.nav-search { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; color: var(--muted) !important; font-size: 12.5px; font-weight: 400; }

.hero { position: relative; height: clamp(420px, 52vw, 660px); overflow: hidden; background: #e9e6df; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-image, .story-banner > img, .feature-card > img, .philosophy-banner > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-image { object-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,20,.42) 0%, rgba(20,24,20,.14) 48%, rgba(20,24,20,0) 72%); }
.hero-copy { position: absolute; top: 50%; right: 8%; left: 8%; max-width: 560px; transform: translateY(-50%); color: #fff; }
.hero-slide--text-light .hero-copy { color: #fff; }
.hero-slide--text-dark .hero-copy { color: #000; }
.hero-slide--text-dark .outline-action { border-color: rgba(0,0,0,.75); }
.eyebrow { margin: 0 0 22px; font-size: 12px; letter-spacing: .28em; }
.hero-copy .eyebrow { opacity: .85; }
.hero-copy h2, .story-copy h2, .section-heading h2, .feature-card h2, .philosophy-banner h2 {
    font-family: Marcellus, serif; font-weight: 400;
}
.hero-copy h2 { margin: 0; white-space: pre-line; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.18; letter-spacing: .01em; }
.hero-description { margin: 20px 0 0; white-space: pre-line; font-size: 16px; line-height: 1.7; opacity: .92; }
/* CR-18 · DEV-REQ-139 N-3738 — 메인 카피 글자 크기 단계(CustomerBanner.getTitleStep · 폭 단위 길이 30 · 60 · 100 경계). 0 단계는 위 규칙 그대로.
   긴 카피일수록 글자를 줄이고 글 상자를 넓혀 슬라이드 안(상단 문구 ~ 버튼)에 들어가게 한다. 모바일은 767px 이하 규칙에서 따로 줄인다. */
.hero-copy--title-1 { max-width: 640px; }
.hero-copy--title-1 h2 { font-size: clamp(26px, 3.4vw, 44px); }
.hero-copy--title-2 { max-width: 720px; }
.hero-copy--title-2 h2 { font-size: clamp(22px, 2.7vw, 36px); }
.hero-copy--title-3 { max-width: 760px; }
.hero-copy--title-3 h2 { font-size: clamp(18px, 2.1vw, 28px); line-height: 1.25; }
/* DEV-ANS-159 N-3763 — 외국어 250자(5배)용 4 단계. */
.hero-copy--title-4 { max-width: 820px; }
.hero-copy--title-4 h2 { font-size: clamp(16px, 1.8vw, 24px); line-height: 1.3; }
.outline-action, .dark-outline-action {
    display: inline-block; margin-top: 34px; padding: 13px 34px;
    border: 1px solid rgba(255,255,255,.75); font-size: 12.5px; letter-spacing: .14em;
}
.hero-progress { position: absolute; left: 8%; bottom: 34px; display: flex; align-items: center; gap: 14px; color: #fff; font-size: 12px; }
.hero-progress strong { font-weight: 600; }
.hero-progress > span { position: relative; width: 140px; height: 1.5px; background: rgba(255,255,255,.3); }
.hero-progress i { position: absolute; inset: 0; background: #fff; }
.hero-progress em { opacity: .7; font-style: normal; }
.hero-progress button { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; opacity: .8; }
.hero-progress button:first-of-type { margin-left: 10px; }
.hero-progress i { transform: scaleX(0); transform-origin: left; }
.hero-progress i.is-running { animation: hero-progress 5s linear forwards; }
@keyframes hero-progress { to { transform: scaleX(1); } }
.feature-card > a { position: absolute; inset: 0; z-index: 2; color: inherit; text-decoration: none; }

.product-section { padding-top: clamp(56px, 7vw, 96px); }
.section-heading { display: flex; align-items: baseline; gap: 16px; }
.section-heading h2 { margin: 0; font-size: 34px; letter-spacing: .02em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12.5px; }
.view-all { margin-left: auto; padding-bottom: 3px; border-bottom: 1px solid #c9c5ba; font-size: 11.5px; letter-spacing: .16em; }
.product-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: 36px; }
.product-card { min-width: 0; }
.product-image { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--panel); }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-image-placeholder { display: block; width: 100%; height: 100%; background: #f0eee8; }
.product-detail-image-placeholder { display: block; width: 100%; aspect-ratio: .82; background: var(--panel); }
.product-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.product-badges span { padding: 4px 10px; border-radius: 12px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.badge-new { background: var(--green); }
.badge-best { background: #8a6d3b; }
.product-detail-badges { display: flex; gap: 6px; margin: 10px 0 0; }
.product-detail-badges span { padding: 4px 10px; border-radius: 12px; color: #fff; font-size: 10px; font-weight: 700; }
.product-legacy-chip { display: inline-flex; margin: 14px 0 0; padding: 5px 10px; border: 1px solid #c9bda9; border-radius: 999px; color: #74634c; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.search-results a:has(>img) { grid-template-columns:72px minmax(0,1fr); }
.search-results a>img { grid-row:1 / span 2; width:72px; height:72px; object-fit:cover; border-radius:4px; }
.search-results a:has(>img)>strong,.search-results a:has(>img)>span { grid-column:2; }
.product-card p, .product-card h3 { margin: 0; }
.product-hashtag { min-height: 1.5em; padding-top: 14px; color: var(--green); font-size: 11px; font-weight: 600; line-height: 1.5; }
.product-brand { padding-top: 5px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; }
.product-name-en { padding-top: 3px; color: #4c4e48; font-size: 12.5px; }
.product-name-ko { display: -webkit-box; min-height: 2.6em; padding-top: 3px; overflow: hidden; font-size: 15px; line-height: 1.3; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-description { display: -webkit-box; min-height: 3.1em; padding-top: 6px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.story-banner { position: relative; height: clamp(400px, 45vw, 520px); margin-top: clamp(68px, 8vw, 110px); overflow: hidden; background: #181c17; }
.story-banner > img { object-position: center 65%; }
/* DEV-REQ-076 N-1381 ~ N-1384 — 16:9 영상을 띠(clamp(400px,45vw,520px))에 채우면 위아래가 잘린다. object-fit: cover 와 같은 결과가 되게
   폭에 맞춰 키우고 가운데를 보인다. 아래 .story-shade · .story-copy 가 뒤에 와서 영상 위에 그려진다. 배경이라 누를 수 없다. */
.story-film { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
/* DEV-ANS-105 N-1494 ~ N-1496 — 돌지 않는 영상은 감춘다(site.js 가 붙인다). 정본 배경 이미지가 그대로 보인다.
   display:none 이 아니라 opacity 인 것은 lazy iframe 이 계속 불러와 뒤늦게 돌기 시작하면 되살아나게 하려는 것이다. */
.story-film--idle { opacity: 0; }
/* N-1388 — 움직임을 줄이는 설정에서는 영상을 보이지 않는다(서버가 아니라 CSS 로 한다 · 회신에 적었다). 이미지만 남는다. */
@media (prefers-reduced-motion: reduce) { .story-film { display: none; } }
.story-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,10,.72), rgba(10,14,10,.14) 67%); }
/* BUG-D-187 · DEV-REQ-076 N-1364 ~ N-1366 — 박스 넷(padding · border-radius · background · backdrop-filter)을 뺐다.
   정본은 배경 위에 글자만 놓고 가독성은 .story-shade 그라디언트가 맡는다. 자리 · 색 · 폭은 정본과 같아 그대로 둔다. */
.story-copy { position: absolute; top: 50%; left: 8%; transform: translateY(-50%); color: #fff; max-width: 460px; }
.story-copy h2 { margin: 16px 0 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.24; }
.story-description { margin: 18px 0 0; font-size: 15px; line-height: 1.75; opacity: .9; }
.film-action { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 12px; letter-spacing: .18em; }
/* CR-19 · DEV-REQ-139 N-3739 — 관리자가 넣은 SIGNATURE 문구가 길면 단계마다 글자를 줄이고 글 상자를 넓힌다(HomeController signatureStep).
   0 단계(지금 문구 · 짧은 문구)는 위 규칙 그대로. 767px 이하는 본문이 숨어 제목만 줄인다. */
.story-copy--step-1 { max-width: 560px; }
.story-copy--step-1 h2 { font-size: clamp(24px, 2.8vw, 36px); }
.story-copy--step-1 .story-description { font-size: 14px; line-height: 1.7; }
.story-copy--step-2 { max-width: 640px; }
.story-copy--step-2 h2 { font-size: clamp(20px, 2.2vw, 30px); }
.story-copy--step-2 .story-description { margin-top: 14px; font-size: 13.5px; line-height: 1.65; }
.story-copy--step-3 { max-width: 720px; }
.story-copy--step-3 h2 { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; }
.story-copy--step-3 .story-description { margin-top: 12px; font-size: 13px; line-height: 1.6; }
.story-copy--step-4 { max-width: 800px; }
.story-copy--step-4 h2 { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.3; }
.story-copy--step-4 .story-description { margin-top: 10px; font-size: 12.5px; line-height: 1.55; }
:is(.story-copy--step-2, .story-copy--step-3, .story-copy--step-4) .film-action { margin-top: 18px; }
.film-action i { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; font-size: 13px; font-style: normal; }

.feature-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); padding-top: clamp(68px, 8vw, 110px); }
.feature-card { position: relative; height: 360px; overflow: hidden; border-radius: 8px; background: #22301f; color: #fff; }
.feature-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(12,16,12,.62), rgba(12,16,12,.04) 65%); }
.feature-card > img { object-position: center; }
.feature-clinical > img { object-position: center 68%; }
.feature-card > div, .feature-card > a > div { position: absolute; z-index: 1; bottom: 30px; left: 34px; right: 24px; }
.feature-card h2 { margin: 0; font-size: 26px; }
.feature-card p { margin: 7px 0 0; font-size: 13px; opacity: .9; }

.philosophy-banner { position: relative; height: clamp(300px, 34vw, 380px); margin-top: clamp(68px, 8vw, 120px); overflow: hidden; background: #efece5; }
.philosophy-banner > img { object-position: center 45%; }
.philosophy-shade { position: absolute; inset: 0; background: rgba(250,249,247,.55); }
.philosophy-banner > div:last-child { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.philosophy-banner .eyebrow { margin-bottom: 0; color: #5c5f56; font-size: 11.5px; letter-spacing: .3em; }
.philosophy-banner h2 { margin: 16px 20px 0; font-size: clamp(24px, 3.2vw, 42px); }
.dark-outline-action { margin-top: 26px; border-color: var(--ink); background: rgba(250,249,247,.45); }

.instagram-section { padding-top: clamp(58px, 7vw, 100px); padding-bottom: clamp(68px, 8vw, 110px); }
.instagram-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 16px); margin-top: 36px; }
.instagram-rail > div { overflow: hidden; aspect-ratio: 1; background: var(--panel); }
.instagram-rail img { width: 100%; height: 100%; object-fit: cover; }
.instagram-rail > div:nth-child(1) img, .instagram-rail > div:nth-child(3) img { transform: scale(1.4); object-position: 65% center; }

.site-footer { padding: 64px 0 48px; background: var(--footer); color: #a9ada3; font-size: 12.5px; line-height: 2; }
.footer-grid { box-sizing: content-box; width: auto; display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 60px); }
.footer-company { flex: 1.3 1 0%; min-width: 300px; }
.footer-links { flex: .6 1 0%; min-width: 220px; }
.footer-channel { flex: .5 1 0%; min-width: 180px; }
.footer-logo { display: block; width: 210px; height: 46px; margin-bottom: 18px; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }
.site-footer p { margin: 0; }
.copyright { margin-top: 16px !important; color: #6c7066; }
.site-footer h2 { margin: 0 0 14px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.footer-links p:nth-of-type(3), .footer-links p:nth-of-type(4) { margin-top: 8px; }
.footer-policy { font-weight: 700; text-decoration: underline; }
/* BUG-D-213 · DEV-REQ-089 N-1846 · N-1847 — 푸터 노출을 꺼도 개인정보처리방침 · 이용약관 줄은 남는다(정본 메인.html:397 「필수 · 전 페이지 공통」).
   남는 것은 그 한 줄이라 여백만 최소로 줄인다 — 색 · 글자 크기 · 밑줄은 켜졌을 때와 같다.
   선택자를 둘 겹치는 까닭: 아래 모바일 블록(:768 이하)이 .site-footer 의 padding 을 다시 선언해, 한 겹이면 모바일에서 64/48 이 그대로 남는다(화면에서 확인). */
.site-footer.site-footer-legal { padding: 20px 0; }
.footer-channel-note { margin-top: 10px !important; color: #6c7066; }
.channel-icons { display: flex; gap: 10px; margin-top: 4px; }
.channel-icons span, .channel-icons a { box-sizing: content-box; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #4a4e45; border-radius: 50%; font-size: 11px; }
.footer-channel > p { margin-top: 10px; color: #6c7066; }
/* BUG-D-253 · DEV-REQ-129 §3-1 — 이미지 팝업. PC 는 가운데 · 폭 = 이미지 폭(최대 600px) · 모바일은 화면 폭 − 32px · 세로가 넘치면 레이어 안에서 스크롤 · 아래 줄은 늘 화면 안. */
.site-popup-layer { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; }
.site-popup-layer[hidden] { display: none; }
.site-popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
/* BUG-D-274 · DEV-REQ-139 N-3733 — 최대 폭 600 → 1,200px(고객사 요청 · 가로 1,200px 이미지까지). 화면보다 넓으면 화면 폭 · 세로 규칙은 그대로. */
.site-popup { position: relative; display: flex; flex-direction: column; width: fit-content; max-width: min(1200px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); outline: none; }
.site-popup-body { min-height: 0; overflow-y: auto; }
.site-popup-body img { display: block; width: auto; max-width: 100%; height: auto; }
.site-popup-link { display: block; }
.site-popup-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; border-top: 1px solid #efece5; background: #fff; }
.site-popup-actions button { border: 0; background: none; padding: 10px 0; color: #1d211c; font-size: 13px; cursor: pointer; }
.search-entry { min-height: 55vh; padding-top: clamp(100px, 14vw, 170px); padding-bottom: 100px; }
.search-entry h1 { margin: 0; font-family: Marcellus, serif; font-size: clamp(34px, 5vw, 58px); font-weight: 400; }
.search-entry form { display: flex; max-width: 700px; margin-top: 30px; border-bottom: 1px solid var(--ink); }
.search-entry input { min-width: 0; flex: 1; padding: 14px 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.search-entry button { padding: 0 10px; border: 0; background: none; cursor: pointer; color: var(--green); font-weight: 700; }
.search-entry p { color: var(--muted); font-size: 13px; }
.search-count { margin-top: 34px; }.search-results { display:grid; gap:34px; max-width:860px; margin-top:22px; }.search-results h2,.recommended-keywords h2 { margin:0 0 10px; font-family:Georgia,serif; font-size:24px; font-weight:400; }.search-results>div { border-top:1px solid var(--line); }.search-results a { display:grid; gap:7px; padding:16px 0; border-bottom:1px solid var(--line); }.search-results strong { font-size:15px; }.search-results span { overflow:hidden; color:var(--muted); font-size:13px; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }.recommended-keywords { margin-top:42px; }.recommended-keywords a { display:inline-block; margin:0 8px 8px 0; padding:7px 11px; border:1px solid var(--line); border-radius:16px; font-size:12px; }.policy-page,.error-page { min-height:60vh; padding-bottom:100px; }.error-page { padding-top:clamp(100px,13vw,160px); }.policy-page { max-width:900px; padding-top:clamp(32px,5vw,48px); }.error-page h1 { margin:0; font-family:Georgia,serif; font-size:clamp(36px,5vw,58px); font-weight:400; }.policy-page h1 { margin:0; font-family:Marcellus,Georgia,serif; font-size:clamp(24px,3vw,30px); font-weight:400; }.policy-content { margin-top:32px; color:#5e615a; line-height:1.85; }.policy-content.terms h2 { margin:32px 0 12px; font-size:19px; font-weight:700; color:#20221f; }.policy-content.terms p,.policy-content.terms li { font-size:13.5px; line-height:1.9; color:#4c4e48; }.policy-content.terms ol,.policy-content.terms ul { padding-left:20px; }.policy-content.terms .box { margin:14px 0; padding:16px; border:1px solid #e6e3dc; border-radius:8px; background:#f5f3ee; }.policy-content.terms table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }.policy-content.terms th,.policy-content.terms td { border:1px solid #e6e3dc; padding:9px 12px; text-align:left; vertical-align:top; color:#4c4e48; }.policy-content.terms th { background:#f5f3ee; font-weight:700; color:#20221f; white-space:nowrap; }.error-page { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:clamp(100px,13vw,160px); text-align:center; }.error-page h1 { max-width:560px; }.error-code { margin:0 0 8px; font-family:Marcellus,Georgia,serif; font-size:clamp(56px,9vw,88px); color:#e6e3dc; }.error-page span { max-width:460px; margin:16px auto 0; color:var(--muted); line-height:1.7; }.error-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }.error-action-primary { display:inline-block; padding:12px 24px; background:var(--green); color:#fff; font-size:13px; }.error-action-outline { display:inline-block; padding:12px 24px; border:1px solid var(--ink); color:var(--ink); font-size:13px; }.error-quick-links { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }.error-quick-links p { margin:0 0 12px; color:var(--muted); font-size:12.5px; }.error-quick-links a { display:inline-block; margin:0 10px; color:var(--green); font-size:13px; text-decoration:underline; }
.catalog { min-height: 60vh; padding-top: clamp(100px, 13vw, 160px); padding-bottom: 100px; }
.catalog-heading { display: flex; align-items: end; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.catalog-heading p { margin: 0 0 6px; color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.catalog-heading h1 { margin: 0; font-family: Marcellus, serif; font-size: clamp(36px, 5vw, 58px); font-weight: 400; }
.catalog-heading > a { margin-left: auto; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 12px; }
.product-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; }
.product-filters input, .product-filters select, .product-filters button { min-height: 38px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0 10px; font-size: 12px; }
.product-filters input { min-width: 180px; flex: 1; }.product-filters button { border-color: var(--green); background: var(--green); color: #fff; cursor: pointer; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }.empty-state { padding: 60px 0; color: var(--muted); text-align: center; }
.product-detail { padding-top: clamp(100px, 13vw, 160px); padding-bottom: 100px; }.breadcrumb { margin-bottom: 24px; color: var(--muted); font-size: 12px; }.breadcrumb a { color: var(--green); }
.product-summary { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); gap: clamp(30px,6vw,90px); }.product-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.product-gallery img { width:100%; aspect-ratio: .82; object-fit: cover; background:var(--panel); }.product-summary h1 { margin: 8px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px,4vw,50px); font-weight:400; }.product-copy { color:var(--muted); line-height:1.75; }.product-summary dl { display:grid; grid-template-columns:100px 1fr; gap:10px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; }.product-summary dt { color:var(--muted); }.product-summary dd { margin:0; }.purchase-action { display:inline-block; margin-top:22px; padding:13px 28px; background:var(--green); color:#fff; font-size:13px; }.product-review-link { display:inline-block; margin:22px 0 0 14px; color:var(--green); font-size:13px; }.product-inquiry-link { display:block; margin-top:14px; color:var(--muted); font-size:12.5px; }.detail-block { max-width:900px; margin:80px auto 0; padding-top:28px; border-top:1px solid var(--line); }.detail-block h2 { margin:0 0 20px; font-family:Georgia,"Times New Roman",serif; font-size:28px; font-weight:400; }.detail-block p { white-space:pre-line; color:#5e615a; line-height:1.8; }.feature-numbered-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.feature-numbered-list li { display:flex; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }.feature-numbered-list .feature-number { flex-shrink:0; color:var(--green); font-family:Georgia,"Times New Roman",serif; font-size:20px; font-weight:400; }.feature-numbered-list h3 { margin:0 0 6px; font-size:16px; font-weight:600; }.feature-numbered-list p { margin:0; font-size:13px; color:var(--muted); }.reference-group { margin-top:24px; }.reference-group:first-child { margin-top:0; }.reference-group h3 { margin:0 0 8px; font-size:13px; font-weight:700; color:var(--green); }.reference-list { padding-left:18px; color:var(--muted); line-height:2; }.product-content-mobile { display:none; }.related-products { grid-template-columns:repeat(4,minmax(0,1fr)); }

.content-heading,.technology-detail,.before-after{padding-top:clamp(100px,13vw,160px);padding-bottom:100px}.content-heading{max-width:760px;padding-bottom:45px}.content-heading p,.patent-section header p,.about-story header p,.about-history>p,.about-news header p{margin:0 0 14px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.18em}.content-heading h1,.technology-detail h1,.about-hero h1,.about-story h2,.about-history h2,.about-news h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(35px,4.5vw,58px);font-weight:400;line-height:1.2}.content-heading span{display:block;margin-top:18px;color:var(--muted);line-height:1.7}
.technology-hero{padding:60px 0 90px;background:linear-gradient(120deg,rgba(24,37,24,.86),rgba(65,83,65,.45)),url('/assets/images/slot-tech-hero.webp') center/cover;color:#fff}.technology-hero p,.technology-hero span{color:rgba(255,255,255,.86)}.technology-hero h1{color:#fff}.technology-grid{display:flex;flex-direction:column;gap:48px}.technology-card{position:relative;display:flex;align-items:stretch;min-height:320px;overflow:hidden;background:transparent;color:var(--ink)}.technology-card:nth-child(even){flex-direction:row-reverse}.technology-card-media img{position:static;width:50%;object-fit:cover}.technology-card::after{content:none}.technology-card>div{position:static;z-index:auto;display:flex;width:50%;flex-direction:column;justify-content:center;padding:40px;background:var(--panel)}.technology-card p,.technology-card h2,.technology-card span,.technology-card b{margin:0}.technology-card p{color:var(--green);font-size:10px;letter-spacing:.16em}.technology-card h2{margin-top:10px;font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:400}.technology-card span{display:-webkit-box;margin-top:9px;overflow:hidden;color:var(--muted);font-size:13px;line-height:1.6;-webkit-box-orient:vertical;-webkit-line-clamp:3}.technology-card b{margin-top:18px;color:var(--green);font-size:11px;letter-spacing:.12em}.technology-placeholder{display:grid;width:50%;min-height:320px;place-items:center;color:#697165;font-family:Georgia,serif;font-size:72px;background:#e8e8e1}.patent-section{margin-top:100px;padding-top:32px;border-top:1px solid var(--line)}.patent-section header h2{margin:0;font-family:Georgia,serif;font-size:30px;font-weight:400}.patent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.patent-grid article{min-height:150px;padding:20px;border:1px solid var(--line);background:#fff}.patent-grid img{display:block;width:100%;aspect-ratio:1 / 1.414;margin-bottom:14px;object-fit:contain;background:var(--panel)}.patent-grid span{color:var(--green);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.patent-grid h3{margin:14px 0 0;font-size:15px;line-height:1.45}.patent-grid p{margin:12px 0 0;color:var(--muted);font-size:11px}
.technology-detail-hero{display:grid;grid-template-columns:1fr 1fr;min-height:350px;background:#e6e6df}.technology-detail-hero>img{width:100%;height:100%;object-fit:cover}.technology-detail-hero>div{display:flex;flex-direction:column;justify-content:end;padding:clamp(28px,5vw,70px)}.technology-detail-hero p{margin:0 0 13px;color:var(--green);font-size:11px;letter-spacing:.16em}.technology-detail-hero span{display:block;margin-top:18px;color:var(--muted);line-height:1.7}
.case-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}.case-card{padding-bottom:0;border-bottom:0}.case-card header{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.case-card h2{margin:0;font-family:Georgia,serif;font-size:19px;font-weight:400}.case-card header p,.case-protocol,.case-products{color:var(--muted);font-size:12px}.case-images{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.case-images figure{position:relative;margin:0;background:var(--panel)}.case-images img,.case-images figure>span{display:grid;width:100%;aspect-ratio:1.25;place-items:center;object-fit:cover;color:#777970;font-size:11px;letter-spacing:.12em}.case-images figcaption{position:absolute;top:8px;left:8px;padding:3px 9px;background:rgba(20,24,20,.68);color:#fff;font-size:9px;letter-spacing:.14em}.case-protocol{margin-top:12px;white-space:pre-line;line-height:1.7}.case-products{margin-top:8px}.case-products a{color:var(--green);text-decoration:underline}
.about-page{padding-bottom:100px}.about-page>.breadcrumb{padding-top:clamp(24px,4vw,40px)}.about-hero{display:flex;min-height:490px;align-items:end;padding:90px 0;background:linear-gradient(120deg,rgba(24,37,24,.86),rgba(65,83,65,.45)),url('/assets/images/slot-about-hero.webp') center/cover;color:#fff}.about-hero p{margin:0 0 16px;font-size:11px;letter-spacing:.18em}.about-hero h1{max-width:790px}.about-hero-sub{display:block;margin-top:18px;max-width:560px;color:rgba(255,255,255,.86);font-size:15px;line-height:1.7}.about-story{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding-top:105px}.about-story h2{font-size:38px}.about-story>div{color:var(--muted);line-height:1.9}.about-story>div p{margin-top:0}.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:90px;background:var(--line)}.about-values article{min-height:250px;padding:30px;background:var(--paper)}.about-values span{color:var(--green);font-size:12px}.about-values h2{margin:42px 0 12px;font-family:Georgia,serif;font-size:24px;font-weight:400}.about-values p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.about-history{padding-top:105px}.about-history h2{max-width:660px;font-size:38px}.about-history ol{display:grid;gap:0;margin:38px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}.about-history li{display:flex;gap:26px;padding:17px 0;border-bottom:1px solid var(--line)}.about-history li b{color:var(--green);font-family:Georgia,serif;font-weight:400}.about-news{margin-top:100px;padding-top:32px;border-top:1px solid var(--line)}.about-news header{display:flex;align-items:end;gap:18px}.about-news header p{position:absolute;transform:translateY(-40px)}.about-news header h2{font-size:30px}.about-news header a{margin-left:auto;color:var(--green);font-size:12px}.about-news>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.about-news article{padding-top:17px;border-top:1px solid var(--ink)}.about-news article img{display:block;width:100%;aspect-ratio:16/10;margin-bottom:14px;object-fit:cover;background:var(--panel)}.about-news article p,.about-news article span{color:var(--muted);font-size:12px}.about-news article h3{margin:12px 0 9px;font-size:16px}.about-news article span{line-height:1.6}
.content-list,.contact-page,.asset-page,.post-detail{min-height:60vh;padding-top:clamp(100px,13vw,160px);padding-bottom:100px}.content-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}.content-tabs a{padding:8px 13px;border:1px solid var(--line);font-size:12px}.content-tabs a.active{border-color:var(--green);background:var(--green);color:#fff}.news-list,.asset-list{display:grid;gap:0;border-top:1px solid var(--line)}.news-list article{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}.news-list img{width:200px;height:130px;object-fit:cover;background:var(--panel)}.news-list p,.news-list span,.asset-list p,.asset-list span{color:var(--muted);font-size:12px}.news-list h2,.asset-list h2{margin:8px 0;font-family:Georgia,serif;font-size:23px;font-weight:400}.news-list a,.asset-list a{display:inline-block;margin-top:12px;color:var(--green);font-size:12px}.post-detail>article{max-width:860px}.post-detail>article>p,.post-detail>article>span{color:var(--muted);font-size:13px}.post-detail h1{margin:12px 0;font-family:Georgia,serif;font-size:clamp(34px,4vw,52px);font-weight:400}.post-detail article>img{width:100%;aspect-ratio:16/10;margin-top:32px;object-fit:cover}.post-body{margin-top:34px;white-space:pre-line;line-height:1.9}.post-neighbors{display:flex;flex-direction:column;gap:0;margin-top:50px;border-top:1px solid var(--line);font-size:12px}.post-neighbors a,.post-neighbor-empty{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.post-neighbors a span,.post-neighbor-empty span{flex-shrink:0;color:var(--muted)}.post-neighbors a b{font-weight:400}.post-neighbor-empty b{color:var(--muted);font-weight:400}.post-list-back{display:inline-block;margin-top:28px;padding:11px 26px;border:1px solid var(--ink);color:var(--ink);font-size:12.5px}.contact-form,.asset-access{display:grid;max-width:680px;gap:16px}.contact-form label,.asset-access label{display:grid;gap:8px;font-size:13px}.contact-form input,.contact-form select,.contact-form textarea,.asset-access input{min-height:42px;padding:9px;border:1px solid var(--line);background:#fff;font:inherit}.contact-form textarea{min-height:160px}.contact-form .consent{display:block}.contact-form button,.asset-access button{justify-self:start;padding:13px 24px;border:0;background:var(--green);color:#fff;cursor:pointer}.contact-form button:disabled{cursor:not-allowed;opacity:.45}.contact-files small,.captcha-field span{color:var(--muted);font-size:11px}.captcha-field{display:grid;gap:10px;padding:18px;border:1px solid var(--line);background:var(--panel)}.captcha-field>div:first-child{display:grid;gap:3px}.captcha-controls{display:flex;align-items:center;gap:10px}.captcha-controls img{border:1px solid var(--line);background:#fff}.captcha-controls .captcha-refresh{padding:9px 12px;border:1px solid var(--green);background:transparent;color:var(--green)}.captcha-field label{max-width:200px}.contact-status{min-height:20px;margin:0;color:#9b2c2c;font-size:12px}.selected-product{padding:12px;background:var(--panel);font-size:13px}.asset-access{margin-bottom:26px;padding:18px;background:var(--panel)}.asset-list article{display:grid;grid-template-columns:150px 1fr 180px;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}.asset-list h2{margin:0}.asset-list article>a,.asset-list article>span:last-child{margin-top:0;text-align:right}

@media (max-width: 1024px) and (min-width: 768px) {
    .product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1439.98px) {
    .footer-company, .footer-links, .footer-channel {
        min-width: calc(50% - 30px) !important;
        flex-basis: calc(50% - 30px) !important;
        flex-grow: 0 !important;
    }
}

@media (max-width: 767px) {
    .desktop-only { display: none !important; }
    .mobile-only, .mobile-footer-links { display: flex; }
    .shell { padding-inline: 20px; }
    main { padding-top: 64px; }

    .mobile-header {
        position: fixed; top: 0; right: 0; left: 0; z-index: 100;
        height: 64px; align-items: center; justify-content: space-between; padding: 14px 16px;
 background: rgba(250,249,247,.9); backdrop-filter: blur(10px); box-shadow: 0 2px 14px rgba(32,34,31,.06);
        transition: transform .35s ease;
    }
    .mobile-header.is-hidden { transform: translateY(-100%); }
    .mobile-menu-trigger { display: flex; width: 22px; height: 15px; flex-direction: column; justify-content: space-between; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; }
    .mobile-menu-trigger span { width: 22px; height: 1.8px; background: var(--ink); }
    .mobile-logo { width: 150px; height: 36px; }
    .mobile-logo img { width: 100%; height: 100%; object-fit: contain; }
    .mobile-search { display: grid; width: 17px; height: 17px; place-items: center; }

    /* BUG-D-069 — 정본 _header-mobile: 딤 rgba(24,28,23,.45) · 드로어 min(80%,360px) · 그림자 · translateX 슬라이드 .32s.
       열 때는 hidden 을 먼저 풀고 다음 프레임에 is-open 을 붙이고, 닫을 때는 is-open 을 뗀 뒤 전환이 끝나면 감춘다(site.js). */
    .mobile-menu-dim { position: fixed; inset: 0; z-index: 300; background: rgba(24,28,23,0); transition: background .32s ease; }
    .mobile-menu-dim.is-open { background: rgba(24,28,23,.45); }
    .mobile-menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 301; width: min(80%, 360px); flex-direction: column; background: var(--paper); box-shadow: 10px 0 30px rgba(24,28,23,.18); transform: translateX(-100%); transition: transform .32s ease; }
    .mobile-menu.is-open { transform: translateX(0); }
    .mobile-menu-top { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid #e6e3dc; }
    /* BUG-D-078 — 메뉴 오버레이 헤더는 이미지가 아니라 워드마크 텍스트다(정본 _source/user/_header-mobile.dc.html). */
    .mobile-menu-wordmark { font-family: Marcellus, Georgia, serif; font-size: 17px; letter-spacing: .26em; text-indent: .26em; color: var(--ink); }
    .mobile-menu-close { width: 42px; height: 42px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 28px; line-height: 1; }
    .mobile-menu-search { display: flex; min-height: 46px; align-items: center; gap: 10px; margin: 15px 18px 8px; padding: 0 14px; border: 1px solid #c9c5ba; border-radius: 6px; color: var(--muted); font-size: 13px; }
    .mobile-menu-search small { margin-left: auto; color: #aaa79e; font-size: 9px; }
    .mobile-nav { flex: 1; overflow-y: auto; padding: 0 18px 10px; }
    .mobile-nav > a, .mobile-nav > span, .mobile-product-trigger { display: flex; width: 100%; min-height: 52px; align-items: center; padding: 0 3px; border: 0; border-bottom: 1px solid #efece5; background: none; text-align: left; font-size: 15px; font-weight: 600; }
    .mobile-nav > * span:not(.notranslate), .mobile-nav > a span, .mobile-nav > span b, .mobile-product-trigger b { margin-left: auto; color: #aaa79e; font-size: 14px; font-weight: 400; }
    .mobile-product-trigger { cursor: pointer; }
    .mobile-product-menu { padding: 7px 14px 13px; background: #f4f2ed; }
    .mobile-product-menu > span, .mobile-product-menu > a { display: inline-block; margin: 5px 9px 5px 0; padding: 6px 11px; border: 1px solid #d7d3ca; border-radius: 16px; color: #777970; font-size: 12px; }
    .mobile-product-menu small { display: block; margin-top: 4px; color: #918e86; font-size: 10px; }
    /* BUG-D-273 · DEV-REQ-139 N-3732 — 지금 보고 있는 목록 칩. */
    .mobile-product-menu > a[aria-current="page"] { border-color: var(--green); color: var(--green); font-weight: 700; }
    .mobile-menu-bottom { flex-shrink: 0; padding: 14px 18px 18px; border-top: 1px solid #e6e3dc; background: var(--paper); }
    /* BUG-D-062 · 061 — 정본 _source/user/_header-mobile.dc.html 의 수치다. 44px 토글 → 세로 목록.
       코드 열 40px · max-height 184px. PC(38px · 높이 제한 없음)와 정본이 달라 통일하지 않는다.
       강조는 현재 언어에 준다 — 다른 언어에 검정 배경을 주면 반대로 읽힌다. */
    .mobile-language { display: block; }
    .mobile-language-toggle { display: flex; box-sizing: border-box; width: 100%; height: 44px; align-items: center; padding: 0 14px; border: 1px solid #c9c5ba; border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
    .mobile-language-toggle[aria-expanded="true"] { border-radius: 6px 6px 0 0; }
    .mobile-language-code { margin-right: 10px; color: #a9a69d; font-size: 10px; letter-spacing: .06em; }
    .mobile-language-name { font-weight: 600; }
    .mobile-language-caret { margin-left: auto; color: #8a877e; font-size: 11px; }
    .mobile-language-toggle[aria-expanded="true"] .mobile-language-caret { transform: rotate(180deg); }
    .mobile-language-list { max-height: 184px; overflow: auto; border: 1px solid #e6e3dc; border-top: none; border-radius: 0 0 6px 6px; background: #fff; }
    .mobile-language-option { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid #efece5; color: #4c4e48; font-size: 13px; }
    .mobile-language-option-code { flex: 0 0 40px; width: 40px; color: #a9a69d; font-size: 10px; letter-spacing: .06em; }
    .mobile-language-option.is-current { background: #f5f3ee; color: var(--ink); font-weight: 700; }
    .mobile-language-option.is-current .mobile-language-option-code { color: var(--ink); }
    .mobile-download { display: block; margin-top: 10px; padding: 10px; border: 1px solid var(--ink); border-radius: 6px; text-align: center; font-size: 13px; font-weight: 600; }
    .mobile-download small { color: var(--muted); font-size: 9px; font-weight: 400; }
    /* BUG-D-066 — 정본 _header-mobile 하단 SNS 30×30. 외곽이 30이 되도록 border-box 로 잡는다(N-8). */
    .mobile-menu-sns { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
    .mobile-menu-sns a { box-sizing: border-box; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid #c9c5ba; border-radius: 50%; color: #8a877e; font-size: 9.5px; }
    .mobile-menu-sns a:hover, .mobile-menu-sns a:focus-visible { border-color: #2c4434; color: #2c4434; }
    .mobile-legal { margin-top: 10px; color: #a9a69d; text-align: center; font-size: 10px; }

    .hero { width: 100%; height: auto; aspect-ratio: 750 / 900; min-height: 468px; }
    .hero-image { object-position: 54% center; }
    .hero-shade { background: linear-gradient(0deg, rgba(20,24,20,.68), rgba(20,24,20,.08) 65%); }
    .hero-copy { top: auto; right: 6%; bottom: 64px; left: 6%; max-width: none; transform: none; }
    .hero-copy .eyebrow { margin-bottom: 12px; font-size: 10.5px; letter-spacing: .26em; }
    .hero-copy h2 { font-size: 27px; line-height: 1.18; }
    .hero-copy--title-1 h2 { font-size: 23px; }
    .hero-copy--title-2 h2 { font-size: 20px; }
    .hero-copy--title-3 h2 { font-size: 17px; line-height: 1.25; }
    .hero-copy--title-4 h2 { font-size: 15px; line-height: 1.3; }
    .hero-description { display: none; }
    .outline-action { margin-top: 16px; padding: 9px 22px; font-size: 11.5px; }
    .hero-progress { bottom: 24px; left: 6%; gap: 10px; font-size: 11px; }
    .hero-progress > span { width: 70px; }

    .product-section { width: 100%; padding-top: 44px; padding-right: 0; padding-left: 16px; }
    .section-heading { gap: 10px; padding-right: 16px; }
    .section-heading h2 { font-size: 22px; }
    .section-heading p { font-size: 11px; }
    .view-all { font-size: 10px; letter-spacing: .12em; }
    .product-rail { display: flex; gap: 12px; margin-top: 20px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .product-rail::-webkit-scrollbar, .instagram-rail::-webkit-scrollbar { display: none; }
    .product-card { flex: 0 0 62%; scroll-snap-align: start; }
    .product-badges { top: 8px; left: 8px; gap: 6px; }
 .product-badges span { padding: 4px 10px; font-size: 10px; letter-spacing: .02em; }
    .product-hashtag { padding-top: 10px; font-size: 10px; }
    .product-brand { padding-top: 4px; font-size: 9px; }
    .product-name-en { padding-top: 2px; font-size: 11px; }
    .product-name-ko { min-height: 2.5em; padding-top: 2px; font-size: 13.5px; }
    .product-description { min-height: 3em; padding-top: 5px; font-size: 10.5px; line-height: 1.5; }

    .story-banner { height: 280px; margin-top: 44px; }
    .story-banner > img { object-position: 57% center; }
    .story-shade { background: linear-gradient(0deg, rgba(10,14,10,.72), rgba(10,14,10,.06) 72%); }
    .story-copy { top: auto; right: 20px; bottom: 22px; left: 20px; transform: none; }
    .story-copy .eyebrow { margin-bottom: 0; font-size: 10px; }
    .story-copy h2 { margin-top: 8px; font-size: 22px; }
    .story-copy--step-1 h2 { font-size: 19px; }
    .story-copy--step-2 h2 { font-size: 17px; }
    .story-copy--step-3 h2 { font-size: 15px; line-height: 1.3; }
    .story-copy--step-4 h2 { font-size: 14px; line-height: 1.3; }
    .story-description { display: none; }
    .film-action { margin-top: 13px; font-size: 10.5px; }
    .film-action i { width: 38px; height: 38px; font-size: 10px; }

    .feature-section { display: flex; flex-direction: column; gap: 12px; padding-top: 44px; }
    .feature-card { height: 180px; }
    .feature-card > div, .feature-card > a > div { bottom: 16px; left: 20px; }
    .feature-card h2 { font-size: 19px; }
    .feature-card p { margin-top: 4px; font-size: 11.5px; }

    .philosophy-banner { height: 220px; margin-top: 48px; }
    .philosophy-banner .eyebrow { font-size: 10px; }
    .philosophy-banner h2 { margin-top: 10px; font-size: 19px; }
    .dark-outline-action { margin-top: 16px; padding: 9px 22px; font-size: 10.5px; }

    .instagram-section { width: 100%; padding: 44px 0 52px 16px; overflow: hidden; }
    .instagram-rail { display: flex; gap: 10px; margin-top: 20px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .instagram-rail > div { flex: 0 0 46%; scroll-snap-align: start; }

    .site-footer { padding: 64px 0 48px; font-size: 12.5px; }
    .footer-grid { display: flex; }
    .footer-company, .footer-links, .footer-channel { flex-basis: 100% !important; min-width: 100% !important; }
    .footer-logo { width: 210px; height: 46px; margin-bottom: 18px; }
    .footer-detail { display: block; }
    .copyright { margin-top: 16px !important; }
    .desktop-footer-block { display: block; }
    .mobile-footer-links { display: none; }
    .mobile-footer-links > p { margin-top: 10px; text-decoration: underline; }
    .mobile-footer-links .channel-icons { margin-top: 12px; }
    .mobile-footer-links .channel-icons span, .mobile-footer-links .channel-icons a { width: 28px; height: 28px; font-size: 9.5px; }
    .site-popup { width: calc(100vw - 32px); max-width: none; }
    .site-popup-body img { width: 100%; }
    .search-entry { min-height: 55vh; padding-top: 96px; padding-bottom: 54px; }
    .search-entry form { margin-top: 20px; }
    .catalog { padding-top: 92px; padding-bottom: 56px; }.catalog-heading { align-items:flex-start; flex-direction:column; gap:7px; }.catalog-heading > a { margin-left:0; }.product-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.product-filters input { grid-column:span 2; min-width:0; }.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }.product-summary { grid-template-columns:1fr; gap:26px; }.product-gallery { gap:6px; }.product-detail { padding-top:92px; padding-bottom:56px; }.detail-block { margin-top:48px; }.detail-block h2 { font-size:23px; }.feature-numbered-list li { gap:16px; padding:16px 0; }.product-content-pc { display:none; }.product-content-mobile { display:block; }.related-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .content-heading,.technology-detail,.before-after{padding-top:92px;padding-bottom:56px}.technology-detail-hero,.about-story,.patent-grid,.about-values,.about-news>div{grid-template-columns:1fr}.technology-hero{padding:44px 0 60px}.technology-card,.technology-card:nth-child(even){flex-direction:column;min-height:0}.technology-card-media img,.technology-card>div,.technology-placeholder{width:100%;min-height:220px}.patent-section{margin-top:58px}.technology-detail-hero>img{max-height:300px}.case-list{grid-template-columns:1fr;gap:38px}.case-card header{align-items:flex-start;flex-direction:column;gap:5px}.case-card h2{font-size:24px}.about-hero{min-height:360px;padding:60px 0}.about-story{gap:30px;padding-top:60px}.about-story h2,.about-history h2{font-size:30px}.about-values{margin-top:55px}.about-values article{min-height:0}.about-values h2{margin-top:22px}.about-history{padding-top:60px}.about-news{margin-top:60px}.about-news header{align-items:flex-start;flex-direction:column}.about-news header p{position:static;transform:none}.about-news header a{margin-left:0}
}

/* BUG-D-171 · DEV-REQ-062 N-943 — 단축 margin 이 .shell 의 margin-inline:auto 를 0 으로 덮어 1400 넘는 폭에서 왼쪽으로 붙었다. 위아래 50px 만 남긴다. */
.clinical-studies { margin-block: 50px; }
.clinical-studies > h2 { margin-bottom: 22px; font-size: clamp(25px,3vw,38px); }
.clinical-studies details { border-top: 1px solid #d8ddd7; }
.clinical-studies details:last-of-type { border-bottom: 1px solid #d8ddd7; }
.clinical-studies summary { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 22px 4px; cursor: pointer; }
.clinical-studies summary span { color: #667066; font-size: 13px; }
/* BUG-D-184 · DEV-REQ-073 N-1334 — padding 을 뺐다. 같은 칸을 :800 .clinical-study-body 가 정본 값(0 20px 24px)으로
   적고 있는데 이 선택자가 더 구체적이라 좌우 4px 로 덮고 있었다. line-height 는 정본에 없어 그대로 둔다(회신에 적었다). */
.clinical-studies details > div { line-height: 1.7; }
.clinical-studies .key-result { color: #274d38; font-size: 20px; font-weight: 700; }
.clinical-studies img { max-width: 720px; width: 100%; }
.report-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 13px; text-decoration: underline; }
.ba-kpi-grid { display: grid; grid-template-columns: repeat(var(--kpi-count, 4), minmax(0, 1fr)); gap: 1px; margin-top: 40px; background: var(--line); }
.ba-kpi-grid article { padding: 28px 22px; background: var(--paper); }
.ba-kpi-grid i { display: block; width: 26px; height: 26px; color: var(--green); }
.ba-kpi-grid strong { display: block; margin-top: 16px; font-family: Marcellus, serif; font-size: 30px; font-weight: 400; color: var(--ink); }
.ba-kpi-grid span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink); }
.ba-kpi-grid small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.ba-cta-banner { margin-top: 90px; padding: 60px clamp(24px, 6vw, 80px); background: var(--panel); text-align: center; }
.ba-cta-banner h2 { margin: 0; font-family: Marcellus, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 400; }
.ba-cta-banner p { margin: 14px 0 0; color: var(--muted); }
/* BUG-D-186 · DEV-REQ-075 N-1354 · N-1355 — color 를 뺐다. 뒤 블록(:817)이 배경만 어둡게 덮고 color 는 적지 않아
   이 줄의 color: var(--ink) 가 살아남아 어두운 배경에 어두운 글자가 됐다. 정본은 부모의 color:#fff 를 상속한다. */
.ba-cta-banner a { display: inline-block; margin-top: 24px; padding: 12px 30px; border: 1px solid var(--ink); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 08.20 Public publishing recovery: common sub-page and Contact visuals. */
.sub-hero {
    position: relative;
    display: flex;
    height: clamp(190px, 24vw, 270px);
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 28px;
 background: #2c4434;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
    color: #fff;
    text-align: center;
}
.sub-hero-shade { position: absolute; inset: 0; background: rgba(20, 24, 20, .28); pointer-events: none; }
.sub-hero h1 { position: relative; margin: 0; font-family: Marcellus, Georgia, serif; font-size: clamp(24px, 3vw, 34px); font-weight: 400; letter-spacing: .1em; }
.sub-breadcrumb { display: block; padding-top: 14px; padding-bottom: 0; color: #8a877e; font-size: 11.5px; text-align: right; }
.sub-breadcrumb strong { color: #20221f; font-weight: 600; }
.contact-publishing { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(70px, 8vw, 110px); }
.publishing-heading { padding-bottom: clamp(28px, 4vw, 44px); }
.publishing-heading h2 { margin: 0; font-family: Marcellus, Georgia, serif; font-size: clamp(26px, 3vw, 34px); font-weight: 400; }
.publishing-heading p { margin: 8px 0 0; color: #8a877e; font-size: 13px; }
.contact-publishing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 90px); }
.contact-map-frame { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border-radius: 8px; background: #f0eee8; color: #8a877e; font-family: Marcellus, Georgia, serif; letter-spacing: .12em; }
/* DEV-ANS-049 N-176 — 항목 이름 칸을 글자에 맞춘다. 52px 는 한국어 두 글자 폭이라 de 「Unternehmen」 · ru 「Компания」가 값 칸으로 겹쳤다(DEV-REP-080 §6-1). */
.contact-company { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 14px; margin: 24px 0 0; font-size: 13.5px; }
.contact-company dt { color: #8a877e; }
.contact-company dd { min-width: 0; margin: 0; line-height: 1.55; }
.contact-company a { text-decoration: none; }
.contact-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.contact-channels a { padding: 9px 18px; border: 1px solid #c9c5ba; border-radius: 4px; color: #4c4e48; font-size: 12px; }
.contact-channels a:hover, .contact-channels a:focus-visible { border-color: #2c4434; color: #2c4434; }
.publishing-contact-form { max-width: none; gap: 18px; }
.publishing-contact-form h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.publishing-contact-form > label { gap: 8px; color: #20221f; font-size: 12.5px; font-weight: 600; }
.publishing-contact-form > label > span, .contact-inquiry-types legend span, .privacy-consent-notice h4 span { color: #b0473f; }
.publishing-contact-form > label > small { margin-top: -4px; color: #a9a69d; font-size: 11px; font-weight: 400; }
.publishing-contact-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.publishing-contact-form textarea {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #c9c5ba;
    border-radius: 4px;
    outline: none;
    background: #fff;
    color: #20221f;
    font-size: 13.5px;
    font-weight: 400;
}
.publishing-contact-form textarea { height: 120px; padding-top: 12px; padding-bottom: 12px; resize: vertical; }
.publishing-contact-form input:focus, .publishing-contact-form textarea:focus { border-color: #2c4434; }
.contact-inquiry-types { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0; padding: 0; border: 0; }
.contact-inquiry-types legend { width: 100%; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.contact-inquiry-types label { display: flex; align-items: center; gap: 7px; color: #4c4e48; font-size: 13px; cursor: pointer; }
.contact-inquiry-types input, .consent input { width: 15px; height: 15px; accent-color: #2c4434; }
.contact-field-label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.contact-file-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
/* BUG-D-172 · DEV-ANS-083 N-962 ~ N-964 — 정본 contact.dc.html:166 ~ 168 은 「떨어진 두 칸」이다(사이 8px · 둘 다 네 변 테두리 · 둘 다 모서리 4px).
   붙은 한 덩어리로 쓴 반쪽 테두리 · 반쪽 모서리가 label 공통 gap 8px(:275)에 벌어져 오른쪽이 열려 보였다. 사이 8px 은 정본과 같아 그대로 둔다. */
.contact-file-picker > span { display: flex; min-height: 44px; align-items: center; padding: 0 14px; border: 1px solid #c9c5ba; border-radius: 4px; background: #fff; color: #a9a69d; font-size: 13px; font-weight: 400; }
.contact-file-picker > b { display: flex; min-width: 76px; align-items: center; justify-content: center; border: 1px solid #20221f; border-radius: 4px; background: #20221f; color: #fff; font-size: 12.5px; font-weight: 600; }
.contact-file-picker:focus-within > b { background: #fff; color: #20221f; }
.contact-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-files small { display: block; margin-top: 6px; color: #a9a69d; font-size: 11px; }
.contact-file-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.contact-file-list li { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px; background: #f5f3ee; color: #4c4e48; font-size: 12px; }
.contact-file-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-file-list button { flex: 0 0 auto; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #6c6a62; cursor: pointer; font-size: 11px; }
.contact-file-count { margin: 6px 0 0; color: #8a877e; font-size: 11px; text-align: right; }
.privacy-consent-notice { padding: 0; border: 0; background: transparent; }
.privacy-consent-notice h4 { margin: 0 0 8px; font-size: 12.5px; }
.privacy-consent-notice dl { height: 100px; margin: 0; overflow: auto; padding: 14px 16px; border: 1px solid #e6e3dc; border-radius: 4px; background: #f5f3ee; color: #6c6a62; font-size: 11.5px; line-height: 1.9; }
.privacy-consent-notice dt { font-weight: 700; }
.privacy-consent-notice dd { margin: 0 0 5px; }
.publishing-contact-form .consent { display: flex; align-items: center; gap: 8px; margin-top: -8px; cursor: pointer; font-size: 12.5px; font-weight: 400; }
.publishing-contact-form .captcha-field { padding: 13px; border: 1px solid #e6e3dc; border-radius: 4px; background: #f5f3ee; }
.publishing-contact-form .captcha-controls .captcha-refresh { min-height: 38px; padding: 0 14px; border: 1px solid #2c4434; border-radius: 4px; background: transparent; color: #2c4434; }
.publishing-contact-form .contact-submit { width: 100%; justify-self: stretch; margin: 0; padding: 16px 0; border-radius: 4px; background: #20221f; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.publishing-contact-form .contact-submit:disabled { background: #c9c5ba; color: #fff; opacity: 1; }

body.modal-open { overflow: hidden; }
.public-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.public-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 28, 23, .5); }
.public-modal__dialog { position: relative; width: min(100%, 400px); padding: 36px 32px; border-radius: 10px; outline: 0; background: #fff; box-shadow: 0 18px 60px rgba(24, 28, 23, .25); text-align: center; }
.public-modal__icon { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin: 0 auto 16px; border-radius: 50%; background: #e5ecdf; color: #2c4434; font-size: 20px; }
.public-modal__icon[data-tone="error"] { background: #f7e6e3; color: #b0473f; }
.public-modal__icon[data-tone="confirm"] { background: #f0eee8; color: #4c4e48; }
.public-modal h2 { margin: 0; color: #20221f; font-size: 16px; font-weight: 600; }
.public-modal p { margin: 10px 0 0; color: #8a877e; font-size: 13px; line-height: 1.7; white-space: pre-line; }
.public-modal__actions { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.public-modal__actions button { min-width: 96px; padding: 10px 24px; border: 1px solid #20221f; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; }
.public-modal__accept { background: #20221f; color: #fff; }
.public-modal__cancel { background: #fff; color: #20221f; }

.language-trigger { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* BUG-D-067 N-4 — 정본에 max-height 가 없다. 10개가 한 화면에 전부 보인다. */
.language-option-name, .mobile-language-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-hashtag, .product-brand, .product-name-en { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.publishing-catalog { padding-top: 56px; padding-bottom: 100px; }
.publishing-catalog-top { display: contents; }
.publishing-catalog-heading { margin-bottom: 24px; }
.publishing-catalog-heading h1 { margin: 0; font-family: Marcellus, Georgia, serif; font-size: clamp(26px, 3vw, 34px); font-weight: 400; }
.product-line-tabs { display: flex; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; border-bottom: 1px solid #e6e3dc; scrollbar-width: thin; }
.product-line-tabs a { flex: 0 0 auto; padding: 14px 18px; border-bottom: 2px solid transparent; color: #8a877e; font-size: 13.5px; white-space: nowrap; }
.product-line-tabs small { margin-left: 0; color: #8a877e; font-size: 11px; font-weight: 400; }
.product-line-tabs a:last-child { color: #8a6d3b; }
.product-line-tabs a.active, .product-line-tabs a[aria-current="page"] { border-bottom-color: #20221f; color: #20221f; font-weight: 700; }
.product-state-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 24px; }
.product-state-tabs a, .product-state-tabs span { padding: 7px 14px; border: 1px solid #c9c5ba; border-radius: 16px; color: #4c4e48; font-size: 11.5px; }
.product-state-tabs a.active, .product-state-tabs span[aria-current] { border-color: #20221f; background: #20221f; color: #fff; }
.publishing-catalog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.publishing-product-filter { border-top: 1px solid #20221f; }
.product-filter-title { margin: 0; padding: 14px 0; font-size: 15px; font-weight: 700; color: #20221f; border-bottom: 1px solid #20221f; }
.publishing-product-filter form { display: grid; gap: 0; }
.product-filter-group { min-width: 0; margin: 0; padding: 0 0 16px; border: 0; border-bottom: 1px solid #e6e3dc; }
.product-filter-group + .product-filter-group { padding-top: 16px; }
.product-filter-group .product-filter-legend { width: 100%; margin: 0; padding: 0 0 10px; color: #20221f; font-size: 13px; font-weight: 700; }
.product-filter-group label { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #4c4e48; font-size: 12.5px; font-weight: 400; }
.product-filter-group input { width: 15px; height: 15px; accent-color: #2c4434; }
.publishing-product-filter select { width: 100%; min-width: 0; height: 38px; padding: 0 30px 0 10px; border: 1px solid #c9c5ba; border-radius: 0; background: #fff; color: #4c4e48; font: inherit; font-weight: 400; }
.publishing-product-filter select.sr-only { width: 1px; min-width: 1px; height: 1px; padding: 0; border: 0; }
.product-filter-search { display: grid; grid-template-columns: minmax(0, 1fr) 36px; padding: 16px 0; border-bottom: 1px solid #e6e3dc; }
.product-filter-search > span { grid-column: 1 / -1; margin-bottom: 9px; font-size: 12px; font-weight: 600; }
.product-filter-search input { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #c9c5ba; border-right: 0; background: #fff; }
.product-filter-search button { width: 36px; border: 1px solid #20221f; background: #20221f; color: #fff; cursor: pointer; }
.product-filter-submit, .product-filter-reset { display: block; width: 100%; margin-top: 14px; padding: 11px 12px; border: 1px solid #20221f; background: #20221f; color: #fff; cursor: pointer; font-size: 12px; text-align: center; }
.product-filter-reset { margin-top: 7px; background: #fff; color: #20221f; }
.publishing-product-results { min-width: 0; }
.product-result-meta { display: flex; flex-wrap: wrap; align-items: start; min-height: 34px; gap: 10px; border-bottom: 0; color: #8a877e; font-size: 13px; }
.product-result-meta b { margin: 0; color: #20221f; font-size: 13px; }
.product-result-meta nav { display: flex; gap: 14px; margin-left: auto; }
.product-result-meta nav strong { color: #20221f; }
.product-result-meta nav a { color: #8a877e; }
.first-edition-notice { margin: 0 0 18px; padding: 14px 16px; background: #f5f3ee; color: #4c4e48; font-size: 12.5px; line-height: 1.7; }
.publishing-product-results .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
.publishing-product-results .product-badges span { padding: 3px 8px; border-radius: 10px; font-size: 9px; letter-spacing: normal; }
.publishing-product-results .product-hashtag { padding-top: 12px; font-size: 10.5px; }
.publishing-product-results .product-brand { padding-top: 4px; font-size: 10px; letter-spacing: .1em; }
.publishing-product-results .product-name-en { padding-top: 3px; font-size: 11.5px; line-height: 1.4; }
.publishing-product-results .product-name-ko { min-height: 2.8em; padding-top: 2px; font-size: 13.5px; line-height: 1.4; }
.publishing-product-results .product-description { min-height: 3em; padding-top: 5px; font-size: 11.5px; line-height: 1.5; }
.publishing-product-results .pagination { margin-top: 52px; }
/* 정본 제품목록.html:228 「더보기 ⌄」 버튼 1개. 페이지 번호 목록이 아니다. */
.catalog-more { display: flex; justify-content: center; margin-top: 40px; }
.publishing-product-results .catalog-more { margin-top: 52px; }
.catalog-more button, .catalog-more noscript a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 28px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.catalog-more button:hover { border-color: var(--green); color: var(--green); }
.catalog-more button[disabled] { opacity: .5; cursor: default; }
@media (min-width: 768px) {
    .product-state-tabs { padding-bottom: 23px; }
    .product-state-tabs a, .product-state-tabs span { padding: 7px 16px; font-size: 12.5px; }
    .product-result-meta { padding-top: 1px; }
    .publishing-product-filter { border-top: 0; }
    .product-filter-title { padding: 1px 0 14px; }
    .product-filter-group:first-of-type { padding-top: 16px; }
html[lang="ja-JP"] .product-result-meta,
html[lang="zh-Hans-CN"] .product-result-meta { min-height: 38px; }
html[lang="ja-JP"] .product-result-meta b,
html[lang="zh-Hans-CN"] .product-result-meta b { line-height: 19px; }
html[lang="zh-Hans-CN"] .product-state-tabs a:not(.active) { line-height: 19px; }
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination a { display: grid; min-width: 34px; height: 34px; padding: 0 6px; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.pagination a[aria-current="page"] { border-color: var(--green); background: var(--green); color: #fff; font-weight: 600; }
.publishing-product-detail { padding-top: 32px; padding-bottom: 100px; }
.publishing-product-detail .breadcrumb { margin-bottom: 28px; color: #8a877e; font-size: 11.5px; }
.publishing-product-detail .breadcrumb a { color: #4c4e48; }
.publishing-product-detail .product-summary { align-items: start; }
.product-summary-copy .product-brand { margin-bottom: 6px; }
.product-summary-copy .product-name-en { padding-top: 0; color: #8a877e; font-size: 12px; }
.product-summary-copy h1 { margin: 8px 0 18px; font-family: Marcellus, Georgia, serif; font-size: clamp(22px, 2.6vw, 28px); font-weight: 400; line-height: 1.4; }
.product-detail-tabs { display: flex; margin-top: clamp(60px, 8vw, 100px); border-bottom: 1px solid #d8d4cb; }
.product-detail-tabs button { flex: 1 1 0; padding: 15px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8a877e; cursor: pointer; font-size: 13px; font-weight: 600; }
.product-detail-tabs button[aria-selected="true"] { border-bottom-color: #20221f; color: #20221f; }
.publishing-product-detail [role="tabpanel"] { outline: 0; }
.mobile-purchase-action { position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 90; padding: 15px; border-radius: 4px; background: #20221f; color: #fff; text-align: center; }
.publishing-search { min-height: 62vh; padding-top: clamp(80px, 10vw, 130px); padding-bottom: 100px; }
.publishing-search > h1 { margin: 0 0 26px; font-family: Marcellus, Georgia, serif; font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; }
.publishing-search-form { display: flex; max-width: none; align-items: center; border-bottom: 2px solid #20221f; }
.publishing-search-form input { flex: 1 1 auto; min-width: 0; height: 58px; padding: 0; border: 0; outline: 0; background: transparent; color: #20221f; font-size: 18px; font-weight: 600; }
.publishing-search-form button { flex: 0 0 52px; height: 52px; border: 0; background: transparent; color: #20221f; cursor: pointer; font-size: 24px; }
.publishing-search .search-count { padding: 22px 0; border-bottom: 1px solid #d8d4cb; color: #8a877e; font-size: 13px; }
.publishing-search .search-results { margin-top: 42px; }
.publishing-search .search-results > div { min-width: 0; }
.publishing-search .search-results h2 { margin: 0 0 14px; font-family: Marcellus, Georgia, serif; font-size: 28px; font-weight: 400; }
.publishing-search .search-results a { min-width: 0; }
.publishing-search .search-results strong, .publishing-search .search-results span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.publishing-search .search-results strong { white-space: nowrap; }
.publishing-search .search-results span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.publishing-search .search-results-products > div:not(h2) { border-top: 0; }
.publishing-search .search-results-products { border-top: 0; }
.publishing-search .search-results-products a { display: block; grid-template-columns: none; padding: 0; border-bottom: 0; }
.publishing-search .search-results-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.publishing-search .search-results-products h2 { grid-column: 1 / -1; }
.publishing-search .search-results-products img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 10px; object-fit: cover; background: var(--panel); border-radius: 4px; }
.publishing-search .search-results-products strong { display: block; white-space: normal; }
.publishing-search .search-results-products span { -webkit-line-clamp: 2; }
.search-view-all-products { display: inline-block; margin-top: 18px; padding: 11px 24px; border: 1px solid var(--ink); color: var(--ink); font-size: 12.5px; }
.publishing-assets { min-height: 58vh; padding-top: clamp(48px, 6vw, 80px); padding-bottom: 100px; }
.publishing-assets--locked { width: 100%; max-width: none; min-height: 0; padding: 0; }
.publishing-asset-access { display: block; width: 100%; max-width: 420px; margin: 0 auto; padding: clamp(48px, 7vw, 64px) 20px clamp(64px, 8vw, 88px); box-sizing: border-box; border: 0; border-radius: 0; background: transparent; text-align: center; }
.publishing-asset-access .asset-lock { display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; margin: 0 auto; border-radius: 50%; background: #f0eee8; color: #2c4434; }
.publishing-asset-access .asset-lock svg { width: 22px; height: 22px; }
.publishing-asset-access h2 { margin: 18px 0 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: 22px; font-weight: 400; }
.publishing-asset-access .asset-access-intro { margin: 12px 0 0; color: #8a877e; font-size: 13px; line-height: 1.8; }
.publishing-asset-access .asset-access-field { margin-top: 20px; text-align: left; }
.publishing-asset-access .asset-access-field label { display: block; margin: 0 0 8px; color: #20221f; font-size: 12.5px; font-weight: 600; }
.publishing-asset-access .asset-access-field label span { color: #b0473f; }
.publishing-asset-access input { width: 100%; height: 44px; min-height: 0; padding: 0 14px; box-sizing: border-box; border: 1px solid #c9c5ba; border-radius: 4px; outline: 0; background: #fff; font: inherit; font-size: 13.5px; }
.publishing-asset-access input::placeholder { color: #a9a69d; opacity: 1; }
.publishing-asset-access button { display: block; width: 100%; height: auto; margin-top: 18px; padding: 14px 0; box-sizing: content-box; appearance: none; -webkit-appearance: none; border: 0; border-radius: 4px; background: #20221f; color: #fff; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; text-align: center; }
.publishing-asset-access .asset-access-status { margin-top: 20px; color: #a9a69d; font-size: 11.5px; line-height: 1.9; }
.publishing-asset-access .asset-access-status b { color: #8a877e; }
.publishing-asset-access .asset-access-legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e6e3dc; color: #a9a69d; font-size: 11px; line-height: 1.9; text-align: left; }
.asset-usage-notice { margin: -8px 0 24px; padding: 12px 16px; background: var(--panel); color: var(--muted); font-size: 12px; }
.pagination-arrow { font-size: 16px; }
.asset-heading { padding-bottom: 26px; }
.asset-heading h1 { font-size: clamp(26px, 3vw, 34px); }
.asset-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 20px; }
/* BUG-D-205 · DEV-REQ-086 N-1758 ~ N-1766 — 정본 download.dc.html:80 ~ 82 · :198 ~ 200 밑줄 탭. 탭 줄은 한 줄 전체(밑줄이 폭 끝까지)를 차지하고
   그 아래 줄에 필터 · 검색이 온다(정본 :86 이 탭 아래 따로 선 줄). 건수는 CustomerAssetCategory 에 없어 넣지 않았다(N-1764). */
.asset-toolbar { flex-wrap: wrap; }
.asset-toolbar .content-tabs { flex: 1 0 100%; min-width: 0; margin: 0; gap: 2px; overflow-x: auto; flex-wrap: nowrap; border-bottom: 1px solid #e6e3dc; }
.asset-toolbar .content-tabs a { flex: 0 0 auto; padding: 14px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8a877e; font-size: 13px; font-weight: 400; white-space: nowrap; }
.asset-toolbar .content-tabs a.active { border-bottom-color: #20221f; background: transparent; color: #20221f; font-weight: 700; }
/* BUG-D-204 · DEV-REQ-086 N-1748 ~ N-1754 — 정본 download.dc.html:90 ~ 93: 상자 전체 1px #c9c5ba · radius 6 · 높이 38 · 안쪽 0 12px · 돋보기와 입력 사이 8px.
   폭(flex-basis 260 · 최소 180)은 그대로 둔다 — D3-6 「자료실 검색 칸 폭 정본 220 / 구현 260 — 260 으로 두기로 발주 판정(QA-ANS-103)」. */
.asset-search { box-sizing: border-box; display: flex; flex: 0 1 260px; min-width: 180px; height: 38px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #c9c5ba; border-radius: 6px; }
.asset-search button { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.asset-search button svg { display: block; }
.asset-search label { display: flex; flex: 1 1 auto; min-width: 0; }
.asset-search input { flex: 1 1 auto; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: #20221f; font: inherit; font-size: 12px; }
.asset-search b { font-size: 18px; font-weight: 400; }
.publishing-assets .asset-list { margin-top: 28px; }
/* DEV-ANS-062 BUG-D-146① — 정본 download.dc.html:101 ~ 114 카드 격자(PC 4열 · 모바일 2열 · 4:3 썸네일). 옛 줄 배치(.asset-list article 3칸)를 덮는다. */
.publishing-assets .asset-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 18px); border-top: 0; }
.publishing-assets .asset-list article { display: block; padding: 0; border: 1px solid #e6e3dc; border-radius: 8px; overflow: hidden; }
.publishing-assets .asset-thumb { position: relative; aspect-ratio: 4 / 3; background: #f0eee8; }
.publishing-assets .asset-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.publishing-assets .asset-list .asset-type { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 3px; background: rgba(20, 24, 20, .65); color: #fff; font-size: 9.5px; font-weight: 700; }
.publishing-assets .asset-card-body { padding: 14px; }
.publishing-assets .asset-list h2 { margin: 0; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; }
.publishing-assets .asset-list .asset-meta { display: block; margin-top: 5px; color: #8a877e; font-size: 11px; }
.publishing-assets .asset-list .asset-count { display: block; margin-top: 4px; color: #2c4434; font-size: 11px; }
.publishing-assets .asset-list .asset-download { display: block; margin-top: 10px; padding: 9px 0; border: 1px solid #20221f; border-radius: 4px; color: #20221f; font-size: 12px; font-weight: 600; text-align: center; }
.publishing-assets .asset-list .asset-download:hover { background: #20221f; color: #fff; }
.publishing-news { min-height: 58vh; padding-top: clamp(48px, 6vw, 80px); padding-bottom: 100px; }
.news-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 20px; }
.news-toolbar .content-tabs { min-width: 0; margin: 0; }
.news-search { display: flex; flex: 0 1 260px; min-width: 180px; align-items: center; border-bottom: 1px solid #20221f; }
.news-search input { flex: 1 1 auto; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; }
.news-search b { font-size: 18px; font-weight: 400; }
.publishing-news .news-list { margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 0; }
.publishing-news .news-list article { grid-template-columns: 1fr; gap: 0; padding: 0; border-bottom: 0; }
.publishing-news .news-list img { width: 100%; height: auto; aspect-ratio: 16/10; }
.publishing-news .news-list h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publishing-news .news-list span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.publishing-news .news-list--press { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.publishing-news .news-list--press article { grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.publishing-news .news-list--press img { aspect-ratio: 1.5; }
.publishing-news .news-result-count { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.publishing-news .news-press-notice { margin: 0 0 20px; color: var(--green); font-size: 12px; }
.publishing-news .pagination { margin-top: 52px; }

@media (max-width: 767px) {
    .ba-cta-banner { margin-top: 60px; padding: 40px 20px; }
    .sub-hero { height: 180px; padding-bottom: 22px; }
    .sub-breadcrumb { padding-top: 10px; padding-bottom: 10px; }
    .contact-publishing { padding-top: 38px; }
    .contact-publishing-grid { grid-template-columns: 1fr; gap: 48px; }
    .publishing-heading { padding-bottom: 28px; }
    .contact-location { order: 2; }
    .publishing-contact-form { order: 1; }
    .contact-map-frame { border-radius: 6px; }
    .public-modal__dialog { padding: 32px 24px; }
    .publishing-catalog { padding-top: 66px; }
    .publishing-catalog-layout { grid-template-columns: 1fr; gap: 28px; }
    .publishing-product-filter { border-top-color: #d8d4cb; }
    .publishing-product-filter form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
    .product-filter-search { grid-column: 1 / -1; }
    .publishing-product-filter label:not(.product-filter-search) { min-width: 0; }
    .product-filter-submit, .product-filter-reset { margin-top: 12px; }
    .publishing-product-detail { padding-top: 18px; padding-bottom: 86px; }
    .publishing-product-detail .product-summary { gap: 28px; }
    .product-detail-tabs { margin-top: 56px; }
    .publishing-assets { padding-top: 38px; }
    .publishing-asset-access { padding: clamp(48px, 7vw, 64px) 20px clamp(64px, 8vw, 88px); }
    /* BUG-D-205 — 세로 배치에서 flex-wrap:wrap 이면 줄마다 폭이 내용 폭이 되어 탭 줄(529px)이 390px 화면을 넘는다(화면에서 확인). 세로 배치에서는 감지 않는다. */
    .asset-toolbar { align-items: stretch; flex-direction: column; flex-wrap: nowrap; }
    .asset-search { flex-basis: auto; min-width: 0; }
    .publishing-news { padding-top: 38px; }
    .publishing-news .news-list { grid-template-columns: 1fr; }
    .publishing-news .news-list--press article { grid-template-columns: 100px 1fr; gap: 14px; }
    .news-toolbar { align-items: stretch; flex-direction: column; }
    .news-search { flex-basis: auto; min-width: 0; }
    .publishing-assets .asset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Frozen Publishing v1.6.8 shared hero asset bindings. */
.ba-hero { background-image: url('/assets/images/slot-ba-hero.webp'); }
.news-hero { background-image: url('/assets/images/slot-news-hero.webp'); }
.contact-hero { background-image: none; }
.contact-hero-image { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.download-hero { background-image: none; }
.download-hero-image { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.download-hero { height: 300px; padding-bottom: 28px; }

/* Frozen Publishing v1.6.8 public Technology and B&A hierarchy. */
.sub-hero { height: 300px; padding-bottom: 0; }
.sub-hero-copy { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 28px; color: #fff; text-align: center; pointer-events: none; }
.sub-hero-copy h1 { margin: 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 400; letter-spacing: .1em; }
.sub-hero-copy .sub-hero-subtitle { margin: 10px 0 0; font-size: 13px; opacity: .9; }
.technology-sub-hero { background: url('/assets/images/slot-tech-hero.webp') center/cover; }
.frozen-section-tabs { position: sticky; top: 0; z-index: 50; display: flex; justify-content: center; flex-wrap: wrap; margin-top: clamp(20px, 3vw, 32px); border-bottom: 1px solid #e6e3dc; background: rgba(250, 249, 247, .92); backdrop-filter: blur(8px); }
.frozen-section-tabs a { display: block; padding: 15px clamp(16px, 2.4vw, 26px); border-bottom: 2px solid transparent; color: #8a877e; font-size: 13px; }
.frozen-section-tabs a.active { border-bottom-color: #20221f; color: #20221f; font-weight: 700; }
.frozen-section-heading h2 { margin: 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 400; }
.frozen-section-heading p { margin: 8px 0 0; color: #8a877e; font-size: 13px; }
.technology-core, .ba-results { padding-top: clamp(40px, 5vw, 72px); }
.technology-grid { gap: 0; margin-top: clamp(28px, 3.5vw, 40px); }
.technology-card, .technology-card:nth-child(even) { min-height: 0; flex-direction: row; gap: clamp(24px, 3vw, 36px); padding: clamp(28px, 3.5vw, 36px) 0; border-bottom: 1px solid #e6e3dc; }
.technology-card > .technology-card-copy { width: 50%; justify-content: center; padding: 0; background: transparent; }
.technology-card-media { width: 50%; min-height: 280px; border-radius: 8px; background: #f0eee8; overflow: hidden; }
.technology-card-media img, .technology-card-media .technology-placeholder { width: 100%; min-height: 280px; border-radius: 0; background: transparent; object-fit: cover; }
.technology-card-copy h3 { margin: 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: clamp(19px, 2.2vw, 23px); font-weight: 400; line-height: 1.4; }
.technology-card-copy > span { margin-top: 6px; color: #8a877e; font-size: 12px; }
/* BUG-D-196 · DEV-REQ-083 N-1579 · N-1580 — 기술 카드의 에디터 본문(정본 :65 자리). 영문명(:64 · 12px #8a877e) 아래 16px.
   정본의 점선 상자는 자리표시를 그린 것이라 실제 본문에는 두지 않는다. 에디터가 넣는 이미지는 칸 폭을 넘지 않는다. */
.technology-editor-content { margin-top: 16px; color: #4c4e48; font-size: 13px; line-height: 1.8; }
.technology-editor-content > :first-child { margin-top: 0; }
.technology-editor-content > :last-child { margin-bottom: 0; }
/* BUG-D-268 · DEV-ANS-157 N-3716 — 옛 「.technology-card 아래 모든 img」 규칙(PC 폭 50% · 767px 이하 폭 100% · 최소 높이 220px)가 카드 대표 이미지뿐 아니라
   카드 설명(에디터 본문) 안의 이미지까지 잡아, 크기를 줄여 넣어도 늘 절반 폭으로 나왔다. 그 두 규칙을 대표 이미지(.technology-card-media img)에만 걸리게 바꿨다 —
   설명 본문 이미지는 다른 본문 상자처럼 크기 속성대로 · 상자보다 넓으면 상자 폭까지 · 비율 유지. */
.technology-editor-content img { max-width: 100%; height: auto; }
/* 옛 .technology-card p · span(:284 — 「TECHNOLOGY 01」 머리글용 10px · 자간 .16em · 초록)이 에디터 문단까지 덮는다. 본문 글자는 상자 값을 따른다. */
.technology-editor-content p, .technology-editor-content span { color: inherit; font-size: inherit; letter-spacing: normal; }
.technology-editor-content p { margin: 0 0 8px; }
.technology-more { align-self: flex-start; margin-top: 14px; color: #2c4434; font-size: 12px; }
.technology-page .patent-section { margin-top: 0; padding-top: clamp(48px, 6vw, 72px); border-top: 0; }
.technology-page .patent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 18px); margin-top: 24px; }
.technology-page .patent-grid article { padding: 0 0 14px; border: 1px solid #e6e3dc; border-radius: 8px; overflow: hidden; }
.technology-page .patent-grid img { aspect-ratio: 1 / 1.414; margin: 0 0 14px; }
/* CR-08 · DEV-REQ-134 N-3558 — 지식재산권 분류 탭 */
.patent-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.patent-tabs button { padding: 8px 14px; border: 1px solid #e6e3dc; border-radius: 999px; background: #fff; color: #5f5d56; font: inherit; font-size: 12.5px; cursor: pointer; }
.patent-tabs button span { color: #8a877e; }
.patent-tabs button[aria-selected="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.patent-tabs button[aria-selected="true"] span { color: rgba(255,255,255,.8); }
.patent-grid article[hidden] { display: none; }
/* CR-11 · DEV-REQ-135 N-3573 — 핵심기술 펼쳐보기. 카드와 펼친 본문을 한 묶음(.technology-item)으로 두고 구분선은 묶음 아래로 옮긴다(펼칠 것이 없으면 지금과 같다). */
.technology-item { border-bottom: 1px solid #e6e3dc; scroll-margin-top: var(--fixed-header-height, 157px); }
.technology-item > .technology-card, .technology-item > .technology-card:nth-child(even) { border-bottom: 0; }
.technology-detail-more { display: flex; justify-content: center; padding: 0 0 clamp(20px, 3vw, 28px); }
.technology-detail-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 1px solid #c9c5ba; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.technology-detail-toggle::after { content: "\2304"; font-size: 14px; line-height: 1; transform: translateY(-3px); }
.technology-detail-toggle[aria-expanded="true"]::after { content: "\2303"; transform: translateY(3px); }
.technology-detail-panel { width: 100%; margin: 0; padding: 0 0 clamp(28px, 4vw, 40px); }
.technology-detail-panel[hidden] { display: none; }
/* CR-16 · DEV-REQ-135 N-3594 — 제품 목록 상단 배너: 가로는 본문 폭 고정 · 세로는 이미지 비율대로(자르지 않음). */
.product-list-banner { display: block; margin: 0 0 clamp(20px, 3vw, 32px); }
.product-list-banner img { display: block; width: 100%; height: auto; }
/* CR-17 · DEV-REQ-135 N-3597 · N-3598 — 메인 고정 이미지에 모바일 이미지가 있으면 같은 자리에 img 를 하나 더 두고 폭으로 가른다.
   지금 규칙(.story-banner > img 등 · object-fit: cover)이 img 에 바로 걸려 있어 picture 로 감싸지 않는다. */
:is(.story-banner, .feature-card, .philosophy-banner) > img.main-fixed-mobile { display: none; }
@media (max-width: 767px) {
    :is(.story-banner, .feature-card, .philosophy-banner) > img.main-fixed-pc { display: none; }
    :is(.story-banner, .feature-card, .philosophy-banner) > img.main-fixed-mobile { display: block; }
}
.technology-page .patent-grid span, .technology-page .patent-grid h3, .technology-page .patent-grid p { display: block; margin-right: 14px; margin-left: 14px; }
/* CR-21 · DEV-REQ-139 N-3741 — 카드 제목 영역(분류 · 이름 · 등록번호)에 연회색 배경(var(--panel)). 이미지 아래 여백을 이 영역의 위 여백으로 옮겨
   이미지와 제목 사이 경계가 한 줄로 보인다. 카드는 flex 세로 — 같은 줄 카드 높이가 맞춰지면 제목 영역이 아래까지 채운다. */
.technology-page .patent-grid article { display: flex; flex-direction: column; padding-bottom: 0; }
.technology-page .patent-grid article[hidden] { display: none; }
.technology-page .patent-grid article > img { margin-bottom: 0; }
.technology-page .patent-card-body { flex: 1 1 auto; padding: 14px 0; border-top: 1px solid #e6e3dc; background: var(--panel); }
.technology-bottom-banner { height: clamp(200px, 24vw, 240px); margin-top: clamp(48px, 6vw, 72px); background: url('/assets/images/slot-tech-bottom-banner.webp') center/cover; }
.before-after { padding: 0; }
.before-after .ba-kpi-grid { display: grid; grid-template-columns: repeat(var(--kpi-count, 4), minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); margin-top: clamp(24px, 3vw, 32px); background: transparent; }
.before-after .ba-kpi-grid article { padding: clamp(22px, 2.6vw, 28px) 16px; border: 1px solid #e6e3dc; border-radius: 8px; background: #fff; text-align: center; }
.before-after .ba-kpi-grid strong { display: block; color: #2c4434; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: 23px; font-weight: 400; }
.before-after .ba-kpi-grid span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; }
.before-after .ba-kpi-grid small { display: block; margin-top: 8px; color: #8a877e; font-size: 10.5px; line-height: 1.6; }
.clinical-studies, .ba-cases { padding-top: clamp(48px, 6vw, 72px); }
.clinical-studies details { margin-bottom: 12px; border: 1px solid #e6e3dc; border-radius: 8px; background: #fff; overflow: hidden; }
.clinical-studies details:first-of-type { margin-top: 24px; }
/* DEV-REQ-042 BUG-D-145 — 앵커(#clinical-{id})로 옮긴 칸이 고정 헤더에 덮이지 않게 헤더 높이만큼 띄운다. 브라우저 기본 앵커 이동 · scrollIntoView 가 함께 따른다.
   높이는 site.js 가 잰 --fixed-header-height(BUG-D-093 과 같은 측정) · 재기 전은 157px / 64px. */
.clinical-studies details[id] { scroll-margin-top: var(--fixed-header-height, 157px); }
.clinical-studies summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; }
.clinical-studies summary strong { font-size: 14px; font-weight: 500; }
.clinical-studies summary span { margin-left: auto; color: #8a877e; font-size: 12px; }
.clinical-study-body { display: grid; grid-template-columns: 1fr 380px; gap: 24px; padding: 0 20px 24px; color: #4c4e48; font-size: 13px; line-height: 1.8; }
.clinical-study-body img { width: 100%; height: 100%; min-height: 220px; border-radius: 8px; background: #f0eee8; object-fit: cover; }
.clinical-study-body .key-result { color: #20221f; font-weight: 700; }
.case-list { gap: clamp(16px, 2vw, 24px); margin-top: 24px; }
.case-card { border: 1px solid #e6e3dc; border-radius: 8px; overflow: hidden; }
.case-images { gap: 0; margin: 0; }
.case-images figure:first-child { border-right: 2px solid #fff; }
.case-images img, .case-images figure > span { height: 200px; aspect-ratio: auto; }
.case-images figcaption { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 3px; background: rgba(20, 24, 20, .65); color: #fff; font-size: 10px; }
.case-card-copy { padding: 14px 16px; }
.case-card-copy h3 { margin: 0; font-size: 14px; font-weight: 400; }
.case-protocol, .case-products { margin: 6px 0 0; line-height: 1.7; }
/* CR-20 · DEV-REQ-139 N-3740 — B&A 카드 제목 아래 시술기관 유형 · 기간/주기 · 대상자 한 줄(좁으면 줄바꿈). */
.case-meta { margin: 6px 0 0; color: #8a877e; font-size: 12px; line-height: 1.6; }
.case-meta span + span::before { content: " · "; }
.ba-cta-banner { position: relative; margin-top: clamp(48px, 6vw, 72px); padding: clamp(48px, 6vw, 64px) clamp(20px, 4vw, 32px); background: linear-gradient(rgba(20, 24, 20, .6), rgba(20, 24, 20, .6)), url('/assets/images/ba-cta-bg.png') center/cover; color: #fff; text-align: center; }
.ba-cta-banner h2 { margin: 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 400; }
.ba-cta-banner p { margin: 10px 0 0; color: #dcdad4; font-size: 13px; }
.ba-cta-banner a { display: inline-block; margin-top: 22px; padding: 13px 34px; border: 1px solid #fff; border-radius: 4px; font-size: 13px; }

@media (max-width: 1023.98px) {
    .technology-page .patent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clinical-study-body { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .sub-hero { height: 240px; }
    .technology-card, .technology-card:nth-child(even) { flex-direction: column; }
    .technology-card > .technology-card-copy, .technology-card > .technology-card-media { width: 100%; }
    .case-images { grid-template-columns: 1fr; }
.case-images figure:first-child { border-right: 0; border-bottom: 2px solid #fff; }
}

/* Frozen catalog contract scales tablet spacing before the 1440 desktop grid. */
@media (min-width: 768px) and (max-width: 1439.98px) {
  .publishing-catalog {
    padding-top: clamp(40px, 5vw, 56px);
  }
  .publishing-catalog-layout {
    gap: clamp(24px, 3vw, 32px);
  }
}

/* BUG-D-208 · DEV-REQ-088 N-1800 ~ N-1805 — 정본 products.dc.html:239 「width > 1024 ? 3열 : 2열」(TD-04 · 1024 초과 3열 · 이하 2열).
   이 2열 규칙이 위 768 ~ 1439.98px 블록 안에 있어 1025 ~ 1439px 까지 2열이었다(BUG-D-131 과 같은 1439.98 경계).
   위 블록의 경계는 두고 이 규칙만 1024px 까지로 옮긴다. 상한은 1024px 을 넣는다 — 정본이 「1024 초과」라 1024px 은 2열이다
   (max-width:1023.98px 이면 1024px 이 3열이 되는 것을 화면에서 확인). 하한 768px 은 남긴다 — 767px 이하 모바일 규칙과 겹치지 않게.
   관련 제품(.related-products)은 그대로 둔다. */
@media (min-width: 768px) and (max-width: 1024px) {
  .catalog-grid:not(.related-products) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
  }
}

@media (max-width: 767.98px) {
    .sub-hero.download-hero { height: 300px; padding-bottom: 28px; }
    .publishing-assets.publishing-assets--locked { padding-top: 0; }
}

.product-filter-reset {
 appearance: none;
 -webkit-appearance: none;
 display: block;
 width: 100%;
 margin-top: 16px;
 padding: 10px 0;
 border: 1px solid var(--ink);
 border-radius: 4px;
 background: transparent;
 color: var(--ink);
 font: inherit;
 font-size: 12.5px;
 font-weight: 600;
 text-align: center;
 cursor: pointer;
}

@media (max-width: 767.98px) {
 /* BUG-D-093 — 모바일 헤더(height 64px)도 site.js 가 재서 넣는다. 56 은 정본 폴백이었고 8px 을 덮었다 — 폴백을 64 로 둔다(N-119 · N-120). */
 .mobile-header-spacer { display: block; height: 64px; }
 .clinical-studies details[id] { scroll-margin-top: var(--fixed-header-height, 64px); }
 main { padding-top: 0; }
 /* BUG-D-059 — 이 블록이 앞 블록의 모바일 히어로·제품 레일을 되돌리고 있었다(세로 750/900 → 420px 고정).
    채택표(DEV-REQ-017 §1-7)대로 히어로·제품 규칙은 앞 블록 값만 남기고, 이쪽이 정본이던
    헤더 여백·햄버거 22x15·검색 17px 은 앞 블록으로 옮겼다. 같은 선택자를 두 곳에 두지 않는다. */

 .section-heading { gap: 16px; padding-right: 0; }
 .section-heading h2 { font-size: 34px; }
 .section-heading p { font-size: 12.5px; }
 .view-all { font-size: 11.5px; letter-spacing: .16em; }

 .sub-breadcrumb { height: 28px; padding: 14px 20px 0; box-sizing: border-box; }
 .publishing-catalog { padding: 40px 20px 64px; }
 .publishing-catalog-heading { margin-bottom: 24px; }
 .product-line-tabs a.active, .product-line-tabs a[aria-current="page"] { font-weight: 700; }
 .product-state-tabs { padding-bottom: 16px; margin-bottom: 8px; }
 .product-state-tabs a, .product-state-tabs span { padding: 7px 16px; font-size: 12.5px; }
 .product-state-tabs a.active, .product-state-tabs span[aria-current] { border-color: #20221f; background: #20221f; }
 html[lang="zh-Hans-CN"] .product-state-tabs a:not(.active) { padding-top: 9px; padding-bottom: 5px; }
 .publishing-catalog-layout { display: block; }
 .publishing-product-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 22px; border-top: 0; }
 .product-filter-title { width: 100%; margin: 0; padding: 0; border-bottom: 0; }
 .publishing-product-filter form { display: contents; }
 .product-filter-group { display: block; width: 100%; margin: 0; padding: 0; border: 0; }
 .product-filter-group + .product-filter-group { padding-top: 0; padding-bottom: 0; }
 .product-filter-group .product-filter-legend { width: 100%; margin: 0 0 10px; padding: 0; font-size: 13px; }
 .publishing-product-filter .product-filter-group label { display: inline-flex; width: auto; min-height: 0; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 0; box-sizing: content-box; color: #4c4e48; font-size: 12.5px; font-weight: 400; }
 .publishing-product-filter .product-filter-group input { width: 15px; height: 15px; margin: 3px 3px 3px 4px; }
    .product-filter-reset { width: auto; margin-top: 16px; padding: 0; border-bottom: 0; line-height: normal; }
    .product-result-meta { min-height: 0; align-items: center; padding-bottom: 18px; gap: 10px; border-bottom: 0; font-size: 13px; }
 .product-result-meta nav { gap: 14px; }
 .publishing-product-results .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 0; }
}

/* Match the frozen mobile products formatting context for long Latin locales. */
@media (max-width: 767px) {
    html[lang="es-ES"] .publishing-catalog,
    html[lang="ru-RU"] .publishing-catalog { display: contents; }
    html[lang="es-ES"] .publishing-catalog-top,
    html[lang="ru-RU"] .publishing-catalog-top {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 40px 20px 0;
    }
    html[lang="es-ES"] .publishing-catalog-layout,
    html[lang="ru-RU"] .publishing-catalog-layout {
        box-sizing: border-box;
        width: 100%;
        margin-inline: 0;
        padding: 0 20px 64px;
    }
}

/* BUG-D-148 · DEV-REQ-046 N-505 ~ N-509 — 모바일 필터 바 + 바텀시트(wireframe 제품목록.html:217 · :232).
   768 이상은 사이드바가 필터다 — 바 · 시트를 그리지 않는다. 768 미만은 사이드바를 숨기고(정본 products.dc.html:191 isMobile)
   총 개수 · 정렬도 바로 옮긴다(:218 — 결과 머리줄과 두 번 보이지 않게). 시트 · 딤은 [hidden] 이 먼저 이긴다. */
.product-mobile-filter-bar,
.product-filter-sheet,
.product-filter-sheet-dim { display: none; }
@media (max-width: 767.98px) {
    .publishing-product-filter,
    .publishing-product-results .product-result-meta { display: none; }
    .product-mobile-filter-bar {
        position: sticky;
        top: var(--fixed-header-height, 64px);
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 -20px 16px;
        padding: 10px 20px;
        border-top: 1px solid #e6e3dc;
        border-bottom: 1px solid #e6e3dc;
        background: #fff;
        color: #4c4e48;
        font-size: 12.5px;
    }
    .product-mobile-filter-open { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid #20221f; border-radius: 0; background: #fff; color: #20221f; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
    .product-mobile-filter-count { flex: 1 1 auto; min-width: 0; }
    .product-mobile-filter-sort { max-width: 45%; height: 34px; padding: 0 4px; border: 0; background: transparent; color: #20221f; font: inherit; font-weight: 600; }
    .product-filter-sheet-dim { position: fixed; inset: 0; z-index: 400; display: block; background: rgba(24,28,23,.45); }
    .product-filter-sheet { position: fixed; right: 0; bottom: 0; left: 0; z-index: 401; display: flex; flex-direction: column; max-height: 80vh; background: #fff; box-shadow: 0 -8px 24px rgba(24,28,23,.12); }
    .product-filter-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #20221f; color: #20221f; font-size: 15px; }
    .product-filter-sheet__close { width: 32px; height: 32px; border: 0; background: transparent; color: #20221f; font-size: 22px; line-height: 1; cursor: pointer; }
    .product-filter-sheet form { display: flex; flex-direction: column; min-height: 0; }
    .product-filter-sheet__body { overflow-y: auto; padding: 0 20px; }
    .product-filter-sheet__group { border-bottom: 1px solid #e6e3dc; }
    .product-filter-sheet__group summary { display: flex; justify-content: space-between; padding: 14px 0; color: #20221f; font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; }
    .product-filter-sheet__group summary::-webkit-details-marker { display: none; }
    .product-filter-sheet__group summary::after { content: "⌄"; }
    .product-filter-sheet__group[open] summary::after { content: "⌃"; }
    .product-filter-sheet__options { padding-bottom: 12px; }
    .product-filter-sheet__group label { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #4c4e48; font-size: 12.5px; }
    .product-filter-sheet__group input { width: 15px; height: 15px; accent-color: #2c4434; }
    .product-filter-sheet__actions { display: grid; grid-template-columns: auto 1fr; gap: 6px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e6e3dc; }
    .product-filter-sheet__clear,
    .product-filter-sheet__apply { min-height: 42px; padding: 0 20px; border: 1px solid #20221f; border-radius: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
    .product-filter-sheet__clear { background: #fff; color: #20221f; }
    .product-filter-sheet__apply { background: #20221f; color: #fff; }
}

/* WP-BATCH-13E: Frozen Contact family geometry. */
.contact-hero + .sub-breadcrumb {
    height: 28px;
    box-sizing: border-box;
    line-height: 14px;
}
.contact-publishing-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(28px, 4vw, 48px);
}
.publishing-heading h2,
.publishing-heading p,
.publishing-contact-form h3 {
    line-height: normal;
}
.contact-map-frame {
    display: block;
    overflow: hidden;
    padding: 0;
    font-family: inherit;
    letter-spacing: normal;
}
.contact-map-frame > span {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-left: 16px;
    background: #f0eee8;
    color: #a9a69d;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: normal;
    line-height: 1.45;
    text-align: center;
}
.contact-inquiry-types {
    display: block;
}
.contact-inquiry-types legend,
.contact-inquiry-types label {
    line-height: normal;
}
.contact-inquiry-types legend {
    padding: 0;
}
.contact-inquiry-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.contact-inquiry-options input {
    background: transparent;
    font-size: 13.3333px;
    min-height: 0;
}
.publishing-contact-form > label {
    display: block;
    line-height: normal;
}
.publishing-contact-form > label input,
.publishing-contact-form > label textarea {
    display: block;
    margin-top: 8px;
}
.publishing-contact-form input::placeholder,
.publishing-contact-form textarea::placeholder {
    color: #a9a69d;
    opacity: 1;
}

@media (max-width: 900px) {
    .contact-publishing-grid { grid-template-columns: 1fr; }
    .contact-company { grid-template-columns: 1fr; gap: 12px 14px; line-height: normal; }
    .contact-company dt,
    .contact-company dd { line-height: normal; }
    .contact-location { order: 1; }
    .publishing-contact-form { order: 2; }
}

@media (max-width: 767.98px) {
    .contact-hero { height: 300px; padding-bottom: 28px; }
    .contact-publishing { padding-top: 48px; }
    .contact-publishing-grid { grid-template-columns: 1fr; }
    .contact-map-frame { border-radius: 8px; }
    .contact-company { grid-template-columns: 1fr; gap: 12px 14px; line-height: normal; }
    .contact-location { order: 1; }
    .publishing-contact-form { order: 2; }
}

/* BUG-D-150 · DEV-ANS-064 N-557 — 제품 목록 결과 0건 상자(정본 products.dc.html:120 ~ :122 · 점선 · 64px 24px · 13.5px / 1.9). */
.publishing-product-results .product-empty-state {
  margin: 0;
  padding: 64px 24px;
  border: 1px dashed #c9c5ba;
  border-radius: 8px;
  color: #8a877e;
  font-size: 13.5px;
  line-height: 1.9;
  text-align: center;
}

/* BUG-D-091 · DEV-REQ-046 N-511 ~ N-514 — 「필터 초기화」는 폭이 아니라 상태로 갈린다.
   사이드바 것(정본 products.dc.html:76)은 768 이상 어디서나 사이드바 폭 그대로다 — 여기 있던 768 ~ 1023.98 폭 분기(width:auto)를 지웠다.
   결과 0건 것(:122)은 폭과 무관하게 글자 폭이고 사이드바 것과 함께 보인다(상호배타가 아니다). */
.product-filter-reset.product-filter-reset--empty {
  display: inline-block;
  width: auto;
  margin-top: 14px;
  padding: 9px 24px;
  box-sizing: border-box;
  border: 1px solid #20221f;
  border-radius: 4px;
  color: #20221f;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.9;
}

@media (max-width: 767.98px) {
  .product-filter-reset {
    box-sizing: content-box;
  }
}

/* WP-BATCH-13E: Frozen Search family hierarchy. */
.publishing-search {
  width: 100%;
  max-width: none;
  min-height: 62vh;
  padding: 0;
}
.publishing-search-query {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px) 0;
  box-sizing: border-box;
}
.publishing-search-form {
  display: flex;
  height: 56px;
  max-width: none;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  box-sizing: content-box;
  border-bottom: 2px solid #20221f;
}
.publishing-search-form input {
  height: auto;
  flex: 1 1 0%;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #20221f;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
}
.publishing-search-form button,
.publishing-search-clear {
  display: inline-flex;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  align-items: center;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #20221f;
  cursor: pointer;
}
.publishing-search-clear { color: #8a877e; font-size: 14px; }
.publishing-search-form button { padding: 0; }
.publishing-search .search-count,
.publishing-search .search-guide {
  margin: 0;
  padding: 22px 0 0;
  border: 0;
  color: #8a877e;
  font-size: 14px;
  text-align: center;
}
.publishing-search .search-count b { color: #2c4434; font-weight: 600; }
.publishing-search .search-count strong { color: #20221f; font-weight: 600; }
.search-product-section,
.search-content-section { width: 100%; max-width: none; }
.search-product-section { padding-top: clamp(48px, 6vw, 80px); }
.search-family-heading { display: flex; align-items: baseline; gap: 14px; }
.search-family-heading h2 { margin: 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: 28px; font-weight: 400; letter-spacing: .02em; }
.search-family-heading > span { color: #8a877e; font-size: 12.5px; }
.search-family-heading > a { margin-left: auto; padding-bottom: 3px; border-bottom: 1px solid #c9c5ba; font-size: 11.5px; letter-spacing: .16em; }
.search-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); justify-content: center; gap: clamp(14px, 2vw, 24px); margin-top: 32px; }
.search-product-card { display: block; min-width: 0; }
.search-product-image { display: block; position: relative; overflow: hidden; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; background: #f0eee8; }
.search-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.search-product-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.search-product-badges i { padding: 3px 8px; border-radius: 10px; color: #fff; font-size: 9px; font-style: normal; font-weight: 700; }
.search-product-card > small { display: block; }
.search-product-hashtag { margin-top: 12px; color: #2c4434; font-size: 10.5px; font-weight: 600; }
.search-product-brand { margin-top: 4px; color: #8a877e; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.search-product-english { margin-top: 3px; color: #4c4e48; font-size: 11.5px; }
.search-product-card > strong { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; }
.search-product-card > .search-product-summary { display: -webkit-box; margin-top: 5px; overflow: hidden; color: #8a877e; font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.search-product-card mark,
.search-content-list mark { padding: 0 2px; background: #e5ecdf; color: #2c4434; }
.search-product-more { padding-top: 36px; text-align: center; }
.search-product-more a { display: inline-block; padding: 12px 38px; border: 1px solid #20221f; border-radius: 4px; color: #20221f; font-size: 12.5px; letter-spacing: 1px; }
.search-content-section { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(72px, 9vw, 120px); }
.search-content-list { margin-top: 24px; }
.search-content-list a { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid #e6e3dc; }
.search-content-list em { flex: 0 0 86px; padding: 4px 0; border-radius: 3px; background: #2c4434; color: #fff; font-size: 10px; font-style: normal; letter-spacing: .08em; text-align: center; }
.search-content-list strong { flex: 1 1 0%; font-size: 14.5px; font-weight: 500; }
.search-content-list > a > span { color: #c9c5ba; font-size: 13px; }
.search-empty { padding-top: 48px; padding-bottom: 100px; }

/* BUG-D-211 ④ · DEV-REQ-118 N-3008 ~ N-3011 — 정본은 auto-fill 로 열 수를 폭에 맡긴다. 768 ~ 1439 를 2열로 못 박던 1439.98px 경계를 걷고,
   2열은 767.98px 이하(모바일)만 남긴다. */
@media (max-width: 767.98px) {
  .search-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}

@media (max-width: 767.98px) {
  .publishing-search-query { padding-top: 40px; }
  .publishing-search-form { height: 56px; }
  .search-product-section { padding-top: 48px; }
  .search-product-grid { gap: 14px; margin-top: 32px; }
  .search-content-list em { flex-basis: 72px; }
}

/* WP-BATCH-13E: Frozen product-detail family hierarchy and geometry. */
.publishing-product-detail { width: 100%; max-width: none; padding: 0; }
.pdp-breadcrumb { width: 100%; max-width: 1400px; margin: 0 auto; padding: 14px clamp(20px, 4vw, 48px) 0; box-sizing: border-box; color: #8a877e; font-size: 11.5px; text-align: right; }
.pdp-breadcrumb b { color: #20221f; font-weight: 600; }
.pdp-grid { display: grid; width: 100%; max-width: 1400px; margin: 0 auto; padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 48px) 0; box-sizing: border-box; grid-template-columns: 88px 1fr 400px; gap: clamp(24px, 3vw, 32px); }
.pdp-rail { display: flex; flex-direction: column; gap: 8px; order: 0; }
.pdp-thumb { display: block; width: 80px; height: 80px; flex: 0 0 auto; margin: 0; padding: 0; overflow: hidden; appearance: none; border: 2px solid transparent; border-radius: 6px; background: transparent; box-sizing: content-box; color: inherit; cursor: pointer; font: inherit; }
.pdp-thumb.is-active { border-color: #20221f; }
.pdp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-main-image { flex: 1 1 0%; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 8px; background: #f0eee8; }
/* BUG-D-126 — 큰 칸 이미지. 정사각 칸을 채우는 방식은 썸네일(.pdp-thumb img)과 같다. */
.pdp-main-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-main-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 8px; box-sizing: content-box; background: #f0eee8; color: #a9a69d; font-size: 11px; line-height: 1.45; text-align: center; }
.pdp-info { min-width: 0; }
.pdp-badges { display: flex; gap: 6px; margin-bottom: 12px; }
.pdp-badges > span { padding: 2px 8px; border: 1px solid #c9c5ba; border-radius: 3px; color: #8a877e; font-size: 10px; }
.pdp-badges > .pdp-badge-new { border-color: #2c4434; color: #2c4434; }
.pdp-info h1 { margin: 0; font-family: Marcellus, "Pretendard Variable", sans-serif; font-size: clamp(22px, 2.6vw, 28px); font-weight: 400; line-height: 1.4; }
.pdp-english { margin-top: 6px; color: #8a877e; font-size: 12.5px; letter-spacing: .02em; }
/* BUG-D-049 — 관리자가 <textarea>로 여러 줄을 넣는데 화면이 그것을 한 줄로 접었다.
   같은 페이지의 .detail-block p(:260)·.post-body·.case-protocol 이 이미 pre-line 이다. */
.pdp-subcopy { margin-top: 20px; font-size: 14.5px; font-weight: 600; white-space: pre-line; }
.pdp-description { margin-top: 8px; color: #8a877e; font-size: 13px; line-height: 1.75; }
.pdp-description span { color: #a9a69d; font-size: 11px; }
.pdp-volume { margin-top: 20px; font-size: 15px; font-weight: 700; }
.pdp-shop { display: block; margin-top: 24px; padding: 16px 0; border-radius: 4px; background: #20221f; color: #fff; font-size: 14.5px; font-weight: 600; text-align: center; }
.pdp-shop.is-disabled { color: #fff; }
.pdp-helper { margin-top: 8px; color: #a9a69d; font-size: 11px; text-align: center; }
.pdp-review { display: block; margin-top: 10px; color: #8a877e; font-size: 12px; text-align: center; text-decoration: underline; }
.pdp-inquiry { display: block; margin-top: 12px; padding: 14px 0; border: 1px solid #20221f; border-radius: 4px; background: #fff; color: #20221f; font-size: 13.5px; font-weight: 600; text-align: center; }
.pdp-inquiry-helper { margin-top: 6px; }
.pdp-accordions { margin-top: 24px; border-top: 1px solid #e6e3dc; }
.pdp-accordions button { display: flex; width: 100%; align-items: center; margin: 0; padding: 15px 2px; appearance: none; border: 0; border-bottom: 1px solid #efece5; border-radius: 0; background: transparent; box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; }
.pdp-accordions button span { margin-left: auto; color: #8a877e; font-weight: 400; }
/* BUG-D-049 — 전성분·사용방법·사용 시 주의사항이 모두 이 자리로 나온다.
   주의사항은 법정 안전 정보라 항목 구분이 사라지면 읽히지 않는다.
   pre-line 이라 줄바꿈만 살고 들여쓰기 공백은 접힌다 — DEV-ANS-027 §3 「가」 채택. */
.pdp-accordion-body { padding: 14px 2px; color: #8a877e; font-size: 12px; line-height: 1.8; white-space: pre-line; }
.pdp-share { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #8a877e; font-size: 12px; }
.pdp-share > span[aria-hidden] { display: inline-block; width: 26px; height: 26px; border: 1px solid #c9c5ba; border-radius: 50%; }
/* BUG-D-174 · DEV-REQ-063 N-1012 — 정본 원(26px · 1px #c9c5ba) 자리를 그대로 공유 버튼으로 쓴다. 안에 넣을 아이콘은 공식 이미지 결정 뒤. 카카오는 [hidden] 으로 감춘다(전역 규칙). */
/* BUG-D-139 · DEV-ANS-084 N-983 ~ N-986 — 에디터 본문 접기. 접는 높이는 정본에 수치가 없다(N-985) — 제안값 1000px 을 이 변수 하나로 둔다.
   버튼은 정본 :237 그대로(테두리 #20221f · 11px 40px · 12.5px 600 · 모서리 4px · 가운데 · 아래 여백 clamp(56px,7vw,80px) · hover 반전 _source :126). */
.pdp-rich-content { --pdp-rich-fold: 1000px; }
.pdp-rich-content.is-folded { max-height: var(--pdp-rich-fold); overflow: hidden; }
.pdp-rich-more { padding: 20px 0 clamp(56px, 7vw, 80px); text-align: center; }
.pdp-rich-toggle { display: inline-block; margin: 0; padding: 11px 40px; border: 1px solid #20221f; border-radius: 4px; background: none; color: #20221f; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pdp-rich-toggle:hover, .pdp-rich-toggle:focus-visible { background: #20221f; color: #fff; }
.pdp-share-sns { display: inline-block; width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid #c9c5ba; border-radius: 50%; background: none; cursor: pointer; }
/* DEV-ANS-085 N-1036 — 공식 이미지(assets/images/share · 출처 README)를 원 안 18px 로. 원(26px · 테두리)은 그대로 · 넘치지 않게 가운데. */
.pdp-share-sns > img { display: block; width: 18px; height: 18px; margin: 3px auto; }
/* DEV-REQ-070 N-1258 ~ N-1264 · 대표 승인 2026-09-16 — 카카오 공식 버튼은 둥근 사각형이라 원형인 페이스북 로고와
   나란히 두면 원 안에 네모가 떠 있는 것처럼 보인다. 카카오는 원형 버전을 내주지 않는다(Small 34×35 · Middle 68×69 둘 다 둥근 사각형).
   파일은 공식 그대로 두고(images/share/original · README) 화면에서만 원으로 보이게 한다 — 되돌리기는 이 한 줄을 지우는 것이다. */
.pdp-share-sns[data-share-kakao] > img { border-radius: 50%; object-fit: cover; }
/* BUG-D-170 · DEV-REQ-060 N-917 · N-918 — 정본 product-detail.dc.html:180 은 원 둘 바로 옆(gap:8px · #2c4434).
   소식 상세(brand-news-detail.dc.html:97)에만 margin-left:auto 가 있다 — 두 화면이 다르다. */
.pdp-share-label { padding: 0; border: 0; background: none; color: #2c4434; font: inherit; cursor: pointer; }
/* BUG-D-157 — 공유 복사 뒤 짧은 안내(화면 아래 가운데 · 2.2초). [hidden] 이 먼저 이긴다. */
.public-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 600; max-width: calc(100vw - 40px); padding: 11px 18px; border-radius: 4px; background: #20221f; color: #fff; font-size: 13px; line-height: 1.5; transform: translateX(-50%); box-shadow: 0 6px 18px rgba(24,28,23,.18); }
.pdp-tabs { position: sticky; top: 0; z-index: 40; margin-top: clamp(40px, 5vw, 56px); border-bottom: 1px solid #e6e3dc; background: rgba(250, 249, 247, .95); backdrop-filter: blur(6px); }
.pdp-tabs button { padding: 16px 0; font-size: 14px; }
.pdp-detail-content { width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(32px, 5vw, 44px) clamp(20px, 4vw, 24px) 0; box-sizing: border-box; }

/* BUG-D-211 ① · DEV-ANS-118 N-1831 · N-1827 ~ N-1830 — 정본 product-detail.dc.html:285 은 isMobile = width < 768 이고
   :316 ~ :320 이 그 한 경계에서 함께 바뀐다(칸 1fr · 갤러리 flex · 썸네일 가로 · order 2). 구현은 이 블록 경계가 1439.98px 이라
   768 ~ 1439px 에서도 제품 상세가 모바일 1열로 나왔다 — 노트북 폭에서 정본은 88px 1fr 400px 3칸이다.
   1439.98 은 R-1 촬영 규격 값이고 _source 가 그 구간을 말하면 _source 가 이긴다(N-1829).
   네 규칙은 한 배치라 함께 옮긴다 — .pdp-grid 만 옮기면 768 ~ 1439px 에서 3칸 격자 안에 썸네일 줄만 가로로 누운 화면이 된다. */
@media (max-width: 767.98px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-main-image { order: 1; }
  .pdp-rail { order: 2; flex-direction: row; overflow-x: auto; }
  .pdp-info { order: 3; }
  /* BUG-D-214 · DEV-ANS-119 N-1870 · N-1871 — 정본 :320 thumbSize: isMobile ? "56px" : "80px" 인데 구현은 어느 폭에서나 80px 이었다(미디어쿼리 재선언 0건).
     같은 isMobile 하나에 걸린 값이라 위 넷과 같은 블록에 둔다. 칸 크기만 56 으로 바꾸고 box-sizing: content-box 와 2px 테두리는 기본 규칙 그대로 둔다 —
     테두리를 포함해 56 이 되면 정본과 달라진다. */
  .pdp-thumb { width: 56px; height: 56px; }
}
/* DEV-REQ-038 BUG-D-136 — 정본 제품상세.html:287 모바일 브레드크럼은 「HOME > DactorPeel > 제품명」 — 라인 칸이 없다. */
@media (max-width: 767.98px) {
  .pdp-breadcrumb-line { display: none; }
}
/* DEV-REQ-038 BUG-D-135 — 상세 콘텐츠(에디터 HTML). 주요 특징 아래 32px(정본 product-detail.dc.html:121). 이미지 폭은 전역 img 규칙(max-width: 100%)이 막는다.
   모바일 본문은 폭 768 미만에서만 쓴다(정본 :268 isMobile = width < 768). */
.pdp-rich-content { margin-top: 32px; color: #4c4e48; font-size: 14px; line-height: 1.9; }
.pdp-rich-content img { height: auto; margin: 0 auto; }
.pdp-rich-content iframe { max-width: 100%; }
.pdp-rich-content-mobile { display: none; }
@media (max-width: 767.98px) {
  .pdp-rich-content-pc { display: none; }
  .pdp-rich-content-mobile { display: block; }
}
/* DEV-REQ-038 BUG-D-089 — 기술정보 탭(정본 product-detail-tab-tech.dc.html:131 ~ :223). 필드케이스 모바일 1열 · 연관 제품 PC 4열 / 모바일 2열(:317 · :318). */
.pdp-tech { padding-bottom: clamp(56px, 7vw, 80px); }
.pdp-tech-block + .pdp-tech-block, .pdp-tech-review + .pdp-tech-block { margin-top: 28px; }
.pdp-tech-block h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.pdp-tech-tags { margin: 0; font-size: 12.5px; }
.pdp-tech-tags > div { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pdp-tech-tags dt { flex: 0 0 76px; color: #8a877e; }
.pdp-tech-tags dd { display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0; margin: 0; }
.pdp-tech-tags dd span { padding: 3px 10px; border: 1px solid #c9c5ba; border-radius: 3px; color: #4c4e48; }
.pdp-tech-link { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; padding: 16px 18px; border: 1px solid #e6e3dc; border-radius: 8px; color: inherit; font-size: 13px; }
.pdp-tech-link:hover { border-color: #2c4434; }
.pdp-tech-tag { padding: 3px 9px; border-radius: 3px; background: #f0eee8; color: #8a877e; font-size: 10px; }
/* CR-22 · DEV-REQ-139 N-3745 — 기술정보 탭의 기술 카드: PC 이미지 왼쪽 · 글 오른쪽 / 767px 이하 이미지 위 · 글 아래. 주요 특징 탭과 같은 폭(탭 패널 폭). */
.pdp-tech-cards { display: grid; gap: 14px; }
.pdp-tech-card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; padding: 18px; border: 1px solid #e6e3dc; border-radius: 8px; }
.pdp-tech-card--no-media { grid-template-columns: minmax(0, 1fr); }
.pdp-tech-card-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #f0eee8; }
.pdp-tech-card-media picture, .pdp-tech-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-tech-card-copy { min-width: 0; }
.pdp-tech-card-copy h3 { margin: 10px 0 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.pdp-tech-card-en { margin: 2px 0 0; color: #8a877e; font-size: 12px; }
.pdp-tech-card-body { margin-top: 10px; }
.pdp-tech-card-patents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pdp-tech-card-patents span { padding: 3px 10px; border: 1px solid #c9c5ba; border-radius: 3px; color: #8a877e; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pdp-tech-card-more { display: inline-block; margin-top: 14px; color: var(--green); font-size: 12.5px; font-weight: 600; }
@media (max-width: 767px) {
    .pdp-tech-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
}
.pdp-tech-go { margin-left: auto; color: #2c4434; font-weight: 600; }
.pdp-tech-note { margin: 8px 0 0; color: #a9a69d; font-size: 11px; line-height: 1.8; }
.pdp-tech-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pdp-tech-case { overflow: hidden; border: 1px solid #e6e3dc; border-radius: 8px; }
.pdp-tech-case-images { display: flex; height: 150px; }
.pdp-tech-case-images figure { position: relative; flex: 1; min-width: 0; margin: 0; overflow: hidden; background: #f0eee8; }
.pdp-tech-case-images figure:first-child { border-right: 2px solid #fff; }
.pdp-tech-case-images img { width: 100%; height: 100%; object-fit: cover; }
.pdp-tech-case-images figcaption { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 3px; background: rgba(20, 24, 20, .65); color: #fff; font-size: 10px; }
.pdp-tech-case-copy { padding: 14px; font-size: 12.5px; line-height: 1.85; }
.pdp-tech-case-copy h3 { margin: 0; font-size: 12.5px; font-weight: 700; }
.pdp-tech-case-copy p { margin: 0; color: #8a877e; }
.pdp-tech-review { margin: 20px 0 0; padding: 28px 20px; border: 1px dashed #c9c5ba; border-radius: 8px; color: #8a877e; font-size: 12.5px; text-align: center; }
.pdp-tech-review b { color: #20221f; }
.pdp-tech-review a { display: inline-block; margin-top: 12px; padding: 9px 24px; border: 1px solid #20221f; border-radius: 4px; color: #20221f; font-size: 12px; font-weight: 600; }
.pdp-tech-related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  .pdp-tech-cases { grid-template-columns: 1fr; }
  .pdp-tech-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* DEV-ANS-055 결정 3 A안 — 자료실 「언어 : 전체 ▾」(정본 download.dc.html:88 · 12px · 테두리 #c9c5ba · 둥글기 4px). */
/* BUG-D-185 · DEV-REQ-074 N-1344 — form 은 기본이 block 이라 안쪽 label(display:flex) 셋이 세로로 쌓였다.
   정본 download.dc.html:86 은 넷이 한 줄(gap:10px)이다. 아래 label 의 gap:6px 은 라벨 글자와 셀렉트 사이라 다른 값이다(N-1345). */
/* BUG-D-207 · DEV-REQ-088 N-1793 — 정본 download.dc.html:86 「flex-wrap:wrap」. 없어서 390px 에서 select 셋이 한 줄에 눌려 칸 밖으로 나갔다. */
.asset-language-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.asset-language-filter label { display: flex; align-items: center; gap: 6px; color: #4c4e48; font-size: 12px; }
.asset-language-filter select { height: 38px; padding: 0 10px; border: 1px solid #c9c5ba; border-radius: 4px; background: #fff; color: #4c4e48; font: inherit; font-size: 12px; }

/* DEV-ANS-038 §3-2 — 주요 특징 영문 캡션(정본 product-detail.b6.2 인라인 값).
   제목의 아래 여백 20px 을 되돌려 캡션이 제목 바로 아래 붙고, 캡션 아래에 20px 을 둔다. */
.detail-block .detail-block-caption { margin: -20px 0 20px; color: rgb(138,135,126); font-size: 12px; line-height: 1.5; }

/* DEV-ANS-048 N-146 · N-147 — 띄어쓰기 없는 긴 입력값(URL · 같은 글자 반복)이 폭을 밀어내지 않게 하는 규칙은 이 한 벌이다.
   BUG-D-092(게시물 · 검색 · 제품 · 기술 · 임상 17자리) · BUG-D-109(Dr.JCOS 카드) · 문의 회사 정보에 선택자로 따로 걸던 것을
   DB 값이 찍히는 요소의 class="dp-user-text" 로 옮겼다. 빠지면 LongStringWrapContractTest 의 JSP 스캔이 막는다.
   anywhere 는 min-content 에 줄바꿈 기회를 넣어 flex · grid 항목도 min-width 없이 줄어든다(break-word 는 그렇지 않다).
   정본에는 줄바꿈 · 말줄임 규칙이 없다 — 정본 값을 바꾸는 규칙이 아니다. */
.dp-user-text { overflow-wrap: anywhere; }

/* BUG-D-265 · DEV-REQ-138 N-3696 · N-3697 — 에디터 본문 상자 안의 이미지가 문단 정렬을 따르게 한다.
   공통 「img { display: block }」 때문에 문단의 text-align 이 이미지에 먹지 않았다(제품 상세는 늘 가운데 · 나머지는 늘 왼쪽).
   공통 규칙은 그대로 두고, 정렬이 지정된(인라인 style 에 text-align 이 있는) 조상 안의 이미지만 좌우 여백으로 그 정렬에 맞춘다 —
   정렬을 지정하지 않은 이미지는 전과 같다. 저장 필터(HtmlContentSanitizer)가 「text-align: 값;」 모양으로 다시 적으므로 그 모양을 본다
   (필터를 거치지 않는 약관 본문을 위해 빈칸 없는 모양도 같이 본다). 양쪽 정렬(justify)은 이미지 자리를 바꾸지 않는다. */
:is(.pdp-rich-content, .technology-editor-content, .news-detail-body, .about-page-block, .policy-page.terms) :is([style*="text-align: left"], [style*="text-align:left"]) img { margin-left: 0; margin-right: auto; }
:is(.pdp-rich-content, .technology-editor-content, .news-detail-body, .about-page-block, .policy-page.terms) :is([style*="text-align: center"], [style*="text-align:center"]) img { margin-left: auto; margin-right: auto; }
:is(.pdp-rich-content, .technology-editor-content, .news-detail-body, .about-page-block, .policy-page.terms) :is([style*="text-align: right"], [style*="text-align:right"]) img { margin-left: auto; margin-right: 0; }

/* BUG-D-267 · DEV-ANS-156 N-3706 — 에디터 본문 상자 안의 링크는 밑줄과 브랜드 녹색으로 보인다(방문 뒤에도 같은 색).
   공통 「a { color: inherit; text-decoration: none; }」 때문에 본문 링크가 글자와 구분되지 않았다. 본문 밖 링크(메뉴 · 카드)는 대상이 아니다. */
:is(.pdp-rich-content, .technology-editor-content, .news-detail-body, .about-page-block, .policy-page.terms) a[href],
:is(.pdp-rich-content, .technology-editor-content, .news-detail-body, .about-page-block, .policy-page.terms) a[href]:visited { color: var(--green); text-decoration: underline; }