/* 약국찾기 */
.phm-sec {
    background: transparent;
}

.phm-wrap {
    --phm-panel-h: 560px;
    display: grid;
    gap: 22px;
    background: transparent;
}

.phm-panel {
    display: grid;
}

.phm-head {
    display: grid;
    gap: 18px;
    justify-items: center;
    padding: 0;
    text-align: center;
}

.phm-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.7rem, 2.9vw, 3rem);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.phm-title strong {
    font-weight: 700;
}

.phm-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 7.5rem;
    gap: 12px;
    width: 100%;
}

.phm-form select,
.phm-form input,
.phm-form button {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid rgba(17, 43, 109, 0.14);
    border-radius: 0;
    font: inherit;
}

.phm-form select,
.phm-form input {
    background: #ffffff;
    color: var(--text);
}

.phm-form button {
    border-color: #112b6d;
    background: #112b6d;
    color: #ffffff;
    font-weight: 700;
}

.phm-form [data-pharmacy-keyword] {
    border-color: rgba(17, 43, 109, 0.42);
    box-shadow: inset 0 0 0 1px rgba(17, 43, 109, 0.08);
}

.phm-form [data-pharmacy-keyword]::placeholder {
    color: rgba(17, 17, 17, 0.72);
    font-weight: 600;
}

.phm-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 24px;
    margin-top: 24px;
    align-items: stretch;
}

.phm-map,
.phm-list {
    min-width: 0;
    background: transparent;
    border: 0;
}

.phm-map {
    position: relative;
    overflow: hidden;
    height: var(--phm-panel-h);
    background:
        linear-gradient(135deg, rgba(17, 43, 109, 0.08), rgba(255, 255, 255, 0) 42%),
        #eef3f8;
}

.phm-map-preview {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92) 0 4px, transparent 5px),
        radial-gradient(circle at 72% 68%, rgba(255, 255, 255, 0.74) 0 5px, transparent 6px),
        linear-gradient(90deg, rgba(17, 43, 109, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(17, 43, 109, 0.045) 1px, transparent 1px);
    background-size: auto, auto, 72px 72px, 72px 72px;
}

.phm-road {
    position: absolute;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 0 1px rgba(17, 43, 109, 0.05);
}

.phm-road--one {
    left: -8%;
    top: 24%;
    width: 122%;
    transform: rotate(-10deg);
}

.phm-road--two {
    left: -12%;
    top: 60%;
    width: 120%;
    transform: rotate(16deg);
}

.phm-road--three {
    left: 38%;
    top: -8%;
    width: 18px;
    height: 120%;
    transform: rotate(10deg);
}

.phm-road--four {
    left: 66%;
    top: -10%;
    width: 16px;
    height: 122%;
    transform: rotate(-18deg);
}

.phm-pin {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 5px solid #112b6d;
    border-radius: 50% 50% 50% 0;
    background: #ffffff;
    transform: rotate(-45deg);
    box-shadow: 0 12px 24px rgba(17, 43, 109, 0.18);
}

.phm-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #112b6d;
    transform: translate(-50%, -50%);
}

.phm-pin--one {
    left: 30%;
    top: 34%;
}

.phm-pin--two {
    left: 58%;
    top: 42%;
}

.phm-pin--three {
    left: 44%;
    top: 64%;
}

.phm-pin--four {
    left: 74%;
    top: 26%;
}

.phm-map-label {
    position: absolute;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: rgba(17, 43, 109, 0.62);
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(17, 43, 109, 0.08);
}

.phm-map-label--one {
    left: 16%;
    top: 20%;
}

.phm-map-label--two {
    right: 12%;
    top: 58%;
}

.phm-map-label--three {
    left: 50%;
    top: 48%;
    transform: translateX(-50%);
}

.phm-map-guide {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    margin: 0;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
    color: rgba(17, 43, 109, 0.62);
    font-size: 0.94rem;
    line-height: 1.4;
    word-break: keep-all;
}

/* 지도 마커: .phm-pin 물방울 핀과 동일, 약국명은 핀 아래 노출 */
.phm-map .here_location {
    position: relative;
    width: 24px;
    height: 24px;
    border: 5px solid #112b6d;
    border-radius: 50% 50% 50% 0;
    background: #ffffff;
    transform: rotate(-45deg);
    box-shadow: 0 12px 24px rgba(17, 43, 109, 0.18);
}

.phm-map .here_location::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #112b6d;
    transform: translate(-50%, -50%);
}

.phm-map .here_location .center {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0.25rem 0.6rem;
    border: 1px solid #112b6d;
    border-radius: 999px;
    background: #112b6d;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(17, 43, 109, 0.16);
    transform-origin: 0 0;
    transform: rotate(45deg) translate(-50%, 18px);
}

.phm-list {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    height: var(--phm-panel-h);
    border: 1px solid rgba(17, 43, 109, 0.12);
    overflow: hidden;
}

.phm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    background: #e9edf5;
}

.phm-list-head strong {
    font-size: 1.02rem;
    color: #112b6d;
}

.phm-more {
    color: #112b6d;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.phm-items {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 43, 109, 0.38) rgba(17, 43, 109, 0.08);
}

.phm-items::-webkit-scrollbar {
    width: 8px;
}

.phm-items::-webkit-scrollbar-track {
    background: rgba(17, 43, 109, 0.08);
}

.phm-items::-webkit-scrollbar-thumb {
    background: rgba(17, 43, 109, 0.38);
    border-radius: 999px;
}

.phm-items::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 43, 109, 0.5);
}

.phm-items li {
    display: grid;
    gap: 6px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(17, 43, 109, 0.1);
}

.phm-items li:last-child {
    border-bottom: 0;
}

.phm-items strong {
    font-size: 0.98rem;
}

.phm-items strong em {
    color: rgba(17, 43, 109, 0.64);
    font-size: 0.88em;
    font-style: normal;
    font-weight: 600;
}

.phm-items span {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    word-break: keep-all;
}

.phm-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px 20px;
    border-top: 1px solid rgba(17, 43, 109, 0.1);
}

.phm-page-list {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phm-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(17, 43, 109, 0.14);
    background: #ffffff;
    color: #112b6d;
    font-size: 0.92rem;
    font-weight: 600;
}

.phm-page.is-current {
    border-color: #112b6d;
    background: #112b6d;
    color: #ffffff;
}

.phm-page:disabled {
    opacity: 0.38;
    cursor: default;
}

.phm-page--nav {
    min-width: 52px;
}


/* 추천 영역 */
.rec-sec {
    background: #ffffff;
    color: #111111;
}

.rec-wrap {
    display: grid;
    gap: 64px;
}

.rec-hero {
    display: grid;
    gap: 18px;
    justify-items: center;
    text-align: center;
    letter-spacing: var(--letter-common);
}

.rec-kicker {
    margin: 0;
    font-size: clamp(2.2rem, 3.4vw, 4.2rem);
    font-weight: 700;
    line-height: 1.02;
    word-break: keep-all;
}

.rec-mark {
    display: inline;
    padding: 0 0.16em 0.05em;
    background: linear-gradient(transparent 60%, var(--rec-mark-bg, #fcd800) 60%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.rec-name {
    margin: 4px 0 0;
    color: var(--rec-accent, #ff7e16);
    font-size: clamp(4.4rem, 8.2vw, 7.4rem);
    font-weight: 800;
    line-height: 1.15;
    word-break: keep-all;
}

.rec-hero-media {
    width: min(100%, 670px);
    margin: 0;
}

.rec-hero-media img {
    display: block;
    width: 100%;
    height: auto;
}

.rec-note {
    width: 100%;
    margin: 10px auto 0;
}

.rec-note .page-note {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.rec-note .page-note-review,
.rec-note .page-note-text {
    width: 100%;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

.rec-note--center .page-note {
    justify-items: center;
    text-align: center;
}

.rec-divider {
    width: 1px;
    height: 148px;
    margin: 0 auto;
    background: var(--rec-accent, #ff7e16);
}

.rec-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto;
    text-align: center;
}

.rec-head-line {
    margin: 0;
    line-height: 1.2;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
    font-size: clamp(2.2rem, 4vw, 4.5rem);
    font-weight: 400;
    color: var(--text);
}

.rec-head-line strong {
    font-weight: 700;
}

.rec-list {
    display: grid;
    gap: 24px;
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    justify-content: space-around;
}

.rec-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 5px;
    align-items: start;
}

.rec-item .icon-lucide {
    width: 38px;
    height: 38px;
    margin-top: 0.08em;
    color: var(--rec-accent, #ff7e16);
    stroke-width: 1.9;
}

.rec-item p {
    margin: 1px 0 0 0;
    font-size: clamp(1.22rem, 1.55vw, 1.72rem);
    line-height: 1.36;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.rec-item-note {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.68em;
    font-weight: 400;
    line-height: 1.35;
}


/* 영상 영역 */
.vid-sec {
    padding: 0;
    background-color: var(--vid-bg, #0d1738);
    color: var(--vid-text, #ffffff);
    transition: background-color 0.55s ease;
}

.vid-wrap {
    padding: 84px 0 92px;
    background: transparent;
}

.vid-head {
    display: grid;
    gap: 14px;
    margin-bottom: 40px;
}

.vid-head--center {
    justify-items: center;
    text-align: center;
}

.vid-head h2 {
    margin: 0;
    font-family: "JalnanGothic", sans-serif;
    font-weight: 400;
    font-size: clamp(1.85rem, 2.65vw, 3rem);
    line-height: 1.24;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.vid-lead {
    margin: 0;
    color: var(--vid-lead, rgba(255, 255, 255, 0.82));
    font-size: clamp(1.14rem, 1.45vw, 1.42rem);
    word-break: normal;
    overflow-wrap: anywhere;
}

.vid-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 224px;
    gap: 24px;
    align-items: start;
}

.vid-main,
.vid-side {
    min-width: 0;
}

.vid-stage,
.vid-meta {
    transition:
        opacity 0.28s ease,
        transform 0.38s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.vid-main.is-switching .vid-stage,
.vid-main.is-switching .vid-meta {
    opacity: 0.24;
    transform: translate3d(0, 16px, 0);
}

.vid-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
    background: #111b40;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vid-poster,
.vid-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vid-poster {
    display: block;
    padding: 0;
    background: #111b40;
    z-index: 1;
}

.vid-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vid-play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: rgba(17, 43, 109, 0.94);
    color: #ffffff;
    transform: translate(-50%, -50%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.vid-play .icon-lucide {
    width: 34px;
    height: 34px;
    margin-left: 3px;
    stroke-width: 2.15;
}

.vid-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.vid-stage.is-playing .vid-frame {
    z-index: 2;
}

.vid-meta {
    display: grid;
    gap: 8px;
    padding: 18px 0 0;
}

.vid-title {
    display: block;
    font-size: clamp(1.2rem, 1.6vw, 1.85rem);
    line-height: 1.35;
    word-break: keep-all;
}

.vid-review {
    margin: 0;
    color: var(--vid-review, rgba(255, 255, 255, 0.68));
    font-size: 0.98rem;
}

.vid-review:empty {
    display: none;
}

.vid-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.34) rgba(255, 255, 255, 0.06);
}

.vid-list.is-scroll {
    max-height: var(--vid-list-max-h, none);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-gutter: stable;
}

.vid-list.is-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.vid-list.is-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.vid-list.is-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
}

.vid-list.is-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.52);
}

.vid-item {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: auto;
    padding: 0;
    background: transparent;
    color: var(--vid-text, #ffffff);
    text-align: left;
}

.vid-item[hidden] {
    display: none;
}

.vid-item.is-current .vid-copy {
    font-weight: 700;
}

.vid-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111b40;
}

.vid-item.is-current .vid-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 3px solid var(--vid-text, #ffffff);
    pointer-events: none;
}

.vid-item.is-current .vid-thumb::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(17, 43, 109, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E") calc(50% + 1px) center / 14px 14px no-repeat;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.vid-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vid-copy {
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.42;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    transition: font-weight 0.2s ease;
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 포인트 영역 */
.point-hero-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.point-hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
}

.point-sec {
    padding: 0 0 80px;
    background: var(--point-sec-bg, #ffffff);
}

.point-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 420px;
    overflow: hidden;
    background: var(--point-hero-bg, #cfd9ea);
}

.point-hero-media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.point-head {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 84px 0;
    text-align: center;
}

.point-title {
    margin: 0;
    color: var(--point-title-color, #ffffff);
    font-size: clamp(2rem, 3.1vw, 3.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.point-sub {
    margin: 0;
    color: var(--point-sub-color, rgba(255, 255, 255, 0.88));
    font-size: clamp(1.08rem, 1.3vw, 1.36rem);
    line-height: 1.48;
    word-break: keep-all;
}

.point-body {
    padding-top: 72px;
}

.point-list {
    display: grid;
    gap: 96px;
}

.point-item {
    display: grid;
    gap: 28px;
    justify-items: center;
    text-align: center;
}

.point-top {
    display: grid;
    gap: 14px;
    justify-items: center;
}

.point-media {
    margin: 0;
    background: var(--point-panel-bg, #f1f8ff);
}

.point-media--wide {
    width: 100%;
}

.point-media--cover,
.point-box-media {
    position: relative;
    overflow: hidden;
    background-color: var(--point-panel-bg, #f1f8ff);
}

.point-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.point-sec--product .point-media--cover > img,
.point-sec--product .point-box-media > img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.point-copy {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.point-no {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--point-badge-bg, #fcd800);
    color: var(--point-badge-color, #044997);
    font-size: 1.48rem;
    font-weight: 700;
    line-height: 1;
}

.point-no .icon-lucide {
    width: 1.4em;
    height: 1.4em;
    flex: 0 0 auto;
    stroke-width: 2.2;
}

.point-main {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.3rem, 3.35vw, 4rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.point-main strong {
    color: var(--point-accent, #002b79);
    font-weight: 700;
}

.point-main sup {
    font-size: 0.48em;
}

.point-main-sub {
    display: inline-block;
    margin-top: 0.18em;
    font-size: 0.64em;
    font-weight: 500;
    line-height: 1.2;
}

.point-color {
    color: var(--point-color, currentColor);
}

.point-bold {
    font-weight: 700;
}

.point-note {
    display: grid;
    gap: 40px;
    justify-items: center;
}

.point-note-title,
.point-box-title {
    color: var(--point-accent, #002b79);
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    font-weight: 700;
    word-break: keep-all;
}

.point-box-title {
    font-size: clamp(1.35rem, 1.7vw, 1.9rem);
}

.point-note-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.14;
}

.point-note-title > span:not(.point-note-mark) {
    display: inline-block;
}

.point-note-mark {
    flex: 0 0 auto;
    color: var(--point-accent, #002b79);
    font-weight: 700;
}

.point-box {
    display: grid;
    gap: 0;
    width: 100%;
    border: 1px solid #e1e6f6;
    padding: 70px 28px;
    background: var(--point-panel-bg, #f1f8ff);
}

.point-box:has(> .point-box-media:first-child) {
    padding: 0 0 70px;
}

.point-box:has(> .point-box-media:first-child) > :not(.point-box-media) {
    padding-left: 28px;
    padding-right: 28px;
}

.point-box > :first-child {
    margin-top: 0;
}

.point-box > * + * {
    margin-top: 60px;
}

.point-box > .point-box-title:first-child {
    margin-top: 0;
}

.point-box-title {
    line-height: 1.22;
    margin-bottom: 0;
}

.point-box-media {
    position: relative;
    margin: 0;
}

.point-box-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.point-media--contain {
    padding-top: 32px;
    padding-bottom: 32px;
}

.point-box-text {
    position: absolute;
    left: 50%;
    top: 32%;
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.24rem, 1.48vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    transform: translateX(-50%);
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    word-break: keep-all;
    white-space: nowrap;
}

.point-callout {
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    margin: 40px 0 0;
    padding: 22px 47px;
    background: #b9b9b9;
    color: #ffffff;
    font-size: clamp(1.25rem, 1.42vw, 1.75rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    word-break: keep-all;
}

.point-callout .point-em {
    color: var(--point-callout-em, #fff001);
}

.point-text,
.point-info-text {
    margin: 0;
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1.55;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.point-box-subtitle {
    margin: 42px 0 28px;
    color: var(--text);
    font-size: clamp(1rem, 1.22vw, 1.2rem);
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

.point-box > .point-box-subtitle {
    margin-top: 42px;
}

.point-box > .point-box-subtitle + .point-box-media {
    margin-top: 28px;
}

.point-caption {
    margin: 0;
    color: rgba(17, 17, 17, 0.5);
    font-size: 0.96rem;
    line-height: 1.35;
    word-break: keep-all;
}

.point-caption-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: rgba(17, 17, 17, 0.5);
    font-size: 0.96rem;
    line-height: 1.25;
    text-align: left;
    word-break: keep-all;
}

.point-caption-list li {
    position: relative;
    padding-left: 0.8em;
}

.point-caption-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

.point-box-subtitle .point-caption {
    display: block;
    margin-top: 8px;
    font-weight: 400;
}

.point-info-list {
    display: grid;
    gap: 28px;
    width: 100%;
}

.point-info-card {
    display: grid;
    justify-items: center;
    gap: 24px;
    width: 100%;
    padding: 0 48px 48px;
    border: 1px solid #dce4f7;
    background: #ffffff;
    text-align: center;
}

.point-info-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0;
    padding: 0 28px;
    border-radius: 0 0 18px 18px;
    background: var(--point-color, #294277);
    color: #ffffff;
    font-size: clamp(1.22rem, 1.85vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.point-info-main {
    margin: 28px 0 0;
    color: var(--text);
    font-size: clamp(1.42rem, 2.15vw, 2.35rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.point-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}

.point-card {
    display: grid;
    gap: 18px;
}

.point-foot,
.ref-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.point-foot {
    width: min(100%, 840px);
    margin-right: auto;
    margin-left: auto;
    color: #9aa0a8;
    font-size: 14px;
    line-height: 1.18;
}

.point-box > .point-foot {
    margin-top: 28px;
}

.point-foot--compact {
    justify-items: center;
}

.ref-note {
    display: grid;
    gap: 12px;
    margin-top: 112px;
}

.ref-note--v2 {
    margin-top: 0;
}

.ref-title {
    color: rgba(17, 17, 17, 0.62);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
}

.ref-list {
    color: rgba(17, 17, 17, 0.52);
    font-size: 0.9rem;
    letter-spacing: var(--letter-common);
    line-height: 1.1;
}

.ref-list li {
    overflow-wrap: anywhere;
}

/* 효능·효과 영역 */
.benefit-sec {
    background: var(--benefit-bg, #f5f9ff);
}

.benefit-wrap {
    display: grid;
    gap: 56px;
}

.benefit-head {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
}

.benefit-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.2rem, 3.4vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(var(--benefit-cols, 4), minmax(0, 1fr));
    gap: 34px 26px;
    width: min(100%, var(--benefit-grid-max, 1040px));
    margin: 0 auto;
}

.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.benefit-icon {
    display: grid;
    place-items: center;
    width: min(100%, 170px);
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--benefit-icon-bg, #eaf2fe);
}

.benefit-icon img {
    display: block;
    width: var(--benefit-icon-img-size, 60%);
    max-width: 100%;
    height: var(--benefit-icon-img-size, 60%);
    object-fit: contain;
}

.benefit-name {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.24rem, 1.55vw, 1.78rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.benefit-note {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit-note li {
    color: var(--text);
    font-size: 1.14rem;
    line-height: 1.8;
    letter-spacing: var(--letter-common);
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.benefit-note strong {
    font-weight: 700;
}

.spec-body {
    display: grid;
    gap: 48px;
}

.benefit-wrap > .spec-body {
    padding: clamp(2rem, 4vw, 4.5rem);
    background: #ffffff;
}

.spec-group {
    display: grid;
    gap: 20px;
}

.spec-group-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.3rem, 1.7vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.spec-copy,
.spec-list {
    margin: 0;
    color: var(--text);
    font-size: 1.14rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.spec-copy {
    display: grid;
    gap: 2px;
}

.spec-help {
    color: var(--muted);
    font-size: 0.88em;
    line-height: 1.6;
}

.spec-list {
    display: grid;
    gap: 4px;
    padding: 0;
    list-style: none;
}

.spec-list li {
    position: relative;
    padding-left: 0.9em;
}

.spec-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

/* FAQ 영역 */
.faq-sec {
    background: var(--faq-bg, #eef5ff);
}

.faq-wrap {
    display: grid;
    gap: 52px;
}

.faq-groups {
    display: grid;
    gap: 54px;
}

.faq-group {
    display: grid;
    gap: 18px;
}

.faq-category-title {
    margin: 0;
    color: var(--brand-strong);
    font-size: clamp(1.7rem, 2.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.faq-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: #123d9a;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.faq-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.6rem, 4.2vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--letter-common);
}

.faq-list {
    display: grid;
    gap: 0;
    padding: 56px;
    background: #ffffff;
}

.faq-item {
    display: grid;
    gap: 24px;
    padding: 42px 0;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.faq-item:first-child {
    border-top: 0;
}

.faq-q,
.faq-a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.faq-mark {
    color: var(--brand-strong);
    font-size: clamp(1.18rem, 1.58vw, 1.9rem);
    font-weight: 700;
    line-height: 1.6;
}

.faq-a .faq-mark {
    color: var(--text);
}

.faq-q p,
.faq-a p {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.18rem, 1.58vw, 1.9rem);
    line-height: 1.6;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.faq-q p {
    color: var(--brand-strong);
    font-weight: 700;
}

.faq-a p {
    font-size: clamp(1rem, 1.28vw, 1.48rem);
}

.faq-a p strong {
    font-weight: 700;
}

.faq-sec--page {
    padding-top: 0;
    background: #ffffff;
}

.faq-sec--page .faq-main {
    width: 100%;
    padding: clamp(2.75rem, 4.8vw, 5rem) 0 0;
    background: #dee5fb;
}

.faq-sec--page .faq-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 330px);
    align-items: center;
    gap: clamp(1.25rem, 2.8vw, 3rem);
}

.faq-sec--page .faq-main-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin-top: clamp(0.75rem, 1.4vw, 1.5rem);
}

.faq-sec--page .faq-main-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(3rem, 6.2vw, 6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.faq-sec--page .faq-main-desc {
    max-width: 34rem;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    line-height: 1.5;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.faq-sec--page .faq-main-img {
    justify-self: end;
    margin: 0;
}

.faq-sec--page .faq-main-img img {
    display: block;
    width: min(100%, 330px);
    height: auto;
}

.faq-sec--page .faq-wrap {
    gap: 44px;
    padding-top: 0;
}

.faq-sec--page .faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.faq-sec--page .faq-main .faq-tabs {
    grid-column: 1 / -1;
    margin: clamp(0.5rem, 1.8vw, 1.75rem) 0 clamp(2.5rem, 4vw, 4rem);
}

.faq-sec--page .faq-tabs .tab {
    flex: 1 1 0;
    min-width: 10rem;
    padding: 1.35rem 0.75rem;
    background: #ffffff;
    color: var(--muted);
    font-size: clamp(1.1rem, 1.7vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-break: keep-all;
}

.faq-sec--page .faq-tabs .tab.on {
    background: var(--brand-strong);
    color: #ffffff;
}

.faq-sec--page .faq-list-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.faq-sec--page .faq-list {
    display: block;
    width: 100%;
    padding: 0;
    background: #ffffff;
}

.faq-sec--page .faq-item {
    display: block;
    padding: 0 max(calc((100vw - var(--max-width)) / 2), calc(var(--space-8) / 2));
    border-top: 0;
    background: #ffffff;
    overflow: hidden;
    transition:
        max-height 0.35s ease,
        opacity 0.35s ease,
        margin 0.35s ease;
}

.faq-sec--page .faq-item.is-even {
    background: #f5f7fb;
}

.faq-sec--page .faq-item.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.faq-sec--page .faq-item[hidden] {
    display: none;
}

.faq-sec--page .faq-q {
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    padding: clamp(1.55rem, 2.45vw, 2.5rem) 0;
    background: transparent;
    text-align: left;
}

.faq-sec--page .q-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.25rem, 5.3vw, 5rem);
    height: clamp(3.25rem, 5.3vw, 5rem);
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--brand-strong);
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 3.125rem);
    font-weight: 600;
    line-height: 1;
}

.faq-sec--page .q-text {
    flex: 1 1 auto;
    color: var(--text);
    font-size: clamp(1.12rem, 1.72vw, 1.62rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.faq-sec--page .faq-arrow {
    width: clamp(1.45rem, 2.5vw, 2.4rem);
    height: clamp(1.45rem, 2.5vw, 2.4rem);
    flex: 0 0 auto;
    color: var(--text);
    transition: transform 0.25s ease;
}

.faq-sec--page .faq-item.open .faq-arrow {
    transform: rotate(180deg);
}

.faq-sec--page .faq-a {
    display: block;
    height: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.6vw, 1.55rem);
    line-height: 1.65;
    opacity: 0;
    visibility: hidden;
    transition:
        height 0.45s ease,
        opacity 0.35s ease;
}

.faq-sec--page .faq-item.open .faq-a {
    opacity: 1;
    visibility: visible;
}

.faq-sec--page .faq-a-inner {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0 0 clamp(2rem, 3.2vw, 3rem) calc(clamp(3.25rem, 5.3vw, 5rem) + 25px);
}

.faq-sec--page .faq-turn {
    display: none;
    align-items: center;
    justify-content: center;
    width: clamp(3.25rem, 5.3vw, 5rem);
    height: clamp(3.25rem, 5.3vw, 5rem);
    flex: 0 0 auto;
    color: var(--brand-strong);
    font-size: clamp(1.8rem, 3vw, 3.125rem);
    font-weight: 700;
    line-height: 1;
}

.faq-sec--page .faq-a-body {
    width: min(100%, 860px);
    color: var(--muted);
    font-size: clamp(0.98rem, 1.38vw, 1.34rem);
    letter-spacing: var(--letter-common);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.faq-sec--page .faq-more {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.faq-sec--page .btn-more {
    min-width: min(100%, 24rem);
    min-height: 5rem;
    padding: 0 2rem;
    background: #f3f6fb;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}

.faq-sec--page .btn-more[hidden] {
    display: none;
}

/* 기능성 제품 영역 */
.fn-sec {
    padding-top: 0;
    background: #ffffff;
}

.fn-wrap {
    --fn-card-gap: 0;
    display: grid;
    gap: 0;
    padding: 0;
}

.fn-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}

.fn-card {
    --fn-card-accent: #b9bcc5;
    display: grid;
    grid-template-columns: 8px minmax(18rem, 0.38fr) minmax(0, 1fr);
    grid-template-areas: "bar media copy";
    align-items: center;
    gap: clamp(1.6rem, 3vw, 3.8rem);
    width: 100%;
    min-height: 0;
    padding: clamp(2.2rem, 3.8vw, 4.8rem) 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 43, 121, 0.14);
    background: transparent;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.fn-card::before {
    content: "";
    grid-area: bar;
    width: 6px;
    height: 100%;
    min-height: clamp(4.5rem, 7vw, 6.8rem);
    border-radius: 999px;
    background: var(--fn-card-accent);
}

.fn-card--emax {
    --fn-card-accent: #c8874f;
}

.fn-card--care {
    --fn-card-accent: #77c4c1;
}

.fn-card--complex {
    --fn-card-accent: #717fad;
}

.fn-card:hover {
    border-color: rgba(0, 43, 121, 0.22);
    box-shadow: none;
    transform: translateY(-4px);
}

.fn-card-media {
    grid-area: media;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    order: 2;
}

.fn-card-media img {
    display: block;
    width: min(100%, 360px);
    height: auto;
    transition: transform 0.28s ease;
}

.fn-img-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 16rem);
    min-height: 8rem;
    padding: 1rem;
    border: 1px dashed rgba(0, 43, 121, 0.28);
    border-radius: 18px;
    background: #f7f9fc;
    color: rgba(0, 43, 121, 0.72);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    letter-spacing: var(--letter-common);
    word-break: break-all;
}

.fn-img-ph--icon {
    min-width: 0;
    width: 70%;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.2;
}

.fn-card-copy {
    grid-area: copy;
    display: grid;
    gap: 14px;
    justify-items: start;
    order: 1;
    min-width: 0;
}

.fn-card-copy h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.8rem, 2.65vw, 3.25rem);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
    white-space: nowrap;
}

.fn-card-desc {
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.2vw, 1.28rem);
    line-height: 1.55;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.fn-card-desc strong {
    color: var(--text);
    font-weight: 700;
}

.fn-card-note {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.45;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.fn-card:hover .fn-card-media img {
    transform: translateY(-6px);
}

.fn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.8rem;
    min-width: 12.5rem;
    min-height: 3.45rem;
    padding: 0.78rem 1.75rem;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 42%),
        var(--fn-card-accent);
    color: #ffffff;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--letter-common);
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.fn-more:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 42%),
        color-mix(in srgb, var(--fn-card-accent) 88%, #000000);
    transform: translateY(-2px);
}

.modal-layer.fn-modal-layer {
    display: grid;
    place-items: center;
    place-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

.modal-layer__panel.fn-modal {
    width: min(calc(100vw - 56px), 65rem);
    max-height: calc(100svh - 48px);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.fn-detail {
    display: grid;
    gap: 28px;
    max-height: calc(100svh - 48px);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    scrollbar-width: none;
}

.fn-detail::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.fn-detail::-webkit-scrollbar-track {
    background: transparent;
}

.fn-detail::-webkit-scrollbar-thumb {
    background: transparent;
}

.fn-detail-head {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 16px;
    justify-items: center;
    min-width: 0;
    margin: 0 0 4px;
    padding: clamp(3.5rem, 5vw, 4.75rem) clamp(1.5rem, 3vw, 3rem) 0;
    text-align: center;
}

.fn-detail-head::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(14rem, 22vw, 50rem);
    background: var(--fn-head-bg, var(--fn-accent, #dfe2e8));
}

.fn-detail-kicker {
    margin: 0;
    color: var(--muted);
    font-size: 1.62rem;
    line-height: 1.55;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.fn-detail-head h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(2.45rem, 3.5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: var(--letter-common);
}

.fn-detail-media {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
}

.fn-detail-media img {
    display: block;
    width: min(100%, 500px);
    height: auto;
}

.fn-detail-media .fn-img-ph {
    min-width: min(100%, 15rem);
}

.fn-detail-sec {
    display: grid;
    gap: 16px;
    min-width: 0;
    margin-right: clamp(1.5rem, 3vw, 3rem);
    margin-left: clamp(1.5rem, 3vw, 3rem);
}

.fn-modal .rec-wrap,
.fn-modal .rec-list,
.fn-modal .rec-item,
.fn-modal .benefit-wrap,
.fn-modal .benefit-grid,
.fn-modal .benefit-item,
.fn-modal .benefit-note,
.fn-modal .spec-body,
.fn-modal .spec-group,
.fn-modal .spec-copy,
.fn-modal .spec-list,
.fn-modal .spec-list li {
    min-width: 0;
    max-width: 100%;
}

.fn-detail-sec h4 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.38rem, 1.9vw, 2rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: var(--letter-common);
}

.fn-modal .rec-wrap,
.fn-modal .benefit-wrap {
    gap: 24px;
}

.fn-modal .rec-head {
    display: block;
    margin: 0;
    text-align: center;
}

.fn-modal .rec-head-line {
    font-size: clamp(1.6rem, 2.25vw, 2.42rem);
}

.fn-modal .rec-list {
    width: min(100%, 920px);
    gap: 12px;
}

.fn-modal .rec-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
}

.fn-modal .rec-item .icon-lucide {
    width: 28px;
    height: 28px;
    margin-top: 0.08em;
    color: var(--fn-accent, var(--rec-accent, var(--brand-strong)));
}

.fn-modal .rec-item p {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.fn-modal .benefit-wrap {
    margin-right: 0;
    margin-left: 0;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    background: var(--fn-benefit-bg, #f7f9fc);
}

.fn-modal .benefit-title {
    font-size: clamp(1.85rem, 2.6vw, 2.9rem);
}

.fn-modal .benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 1120px);
    gap: 28px 22px;
}

.fn-modal .benefit-item {
    min-height: 0;
    padding: 0;
    background: transparent;
}

.fn-modal .benefit-icon {
    width: min(100%, 164px);
}

.fn-modal .benefit-name {
    font-size: 1.2rem;
    line-height: 1.34;
}

.fn-modal .benefit-note li {
    font-size: 1.08rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.fn-modal .benefit-note-line {
    display: block;
    margin-top: 4px;
}

.fn-modal .spec-body {
    gap: 28px;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    background: #ffffff;
}

.fn-modal .spec-copy,
.fn-modal .spec-list {
    font-size: 1.08rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.fn-modal .spec-list {
    grid-template-columns: 1fr;
    gap: 6px;
}

@media (max-width: 1024px) {
    .fn-card {
        gap: 1.5rem;
    }

    .fn-card-copy h3 {
        font-size: clamp(1.7rem, 2.35vw, 2.85rem);
    }

    .fn-modal .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 프로모션 배너 영역 */
.promo-sec {
    padding-top: 0;
    background: #ffffff;
}

.promo-banner {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 320px;
    overflow: hidden;
    background: var(--promo-bg, #eef5ff);
}

.promo-banner-media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.promo-banner-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.promo-banner-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.promo-banner--visual {
    min-height: 0;
    aspect-ratio: var(--promo-ratio-pc, var(--promo-ratio, 16 / 6));
}

.promo-banner-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
    padding: 56px 24px;
}

.promo-banner-title {
    margin: 0;
    color: var(--promo-title-color, var(--text));
    font-size: clamp(2rem, 3.2vw, 3.8rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.promo-banner-kicker {
    margin: 0;
    color: var(--promo-title-color, var(--text));
    font-size: clamp(1.42rem, 1.85vw, 2.2rem);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: var(--letter-common);
    word-break: keep-all;
}

.promo-banner-kicker strong {
    font-weight: 600;
}

.promo-banner-copy--active {
    gap: 0.55em;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.24);
}

.promo-banner-copy--active .promo-banner-kicker,
.promo-banner-copy--active .promo-banner-title {
    color: #ffffff;
}

.promo-banner-title--active {
    font-size: clamp(1.8rem, 2.35vw, 2.85rem);
    font-weight: 400;
    line-height: 1.35;
}

.promo-banner-title--active strong,
.promo-banner-title--active .promo-banner-line {
    font-weight: 600;
}

.promo-banner-title--active .promo-banner-line {
    background: linear-gradient(transparent 60%, #1750b4 60%);
}

/* 페이지별 테마 변수 */
.page-index #main-videos {
    --vid-bg: #112b6d;
}

#gold-one-videos {
    --vid-bg: #ffbe02;
    --vid-text: #111111;
    --vid-lead: rgba(17, 17, 17, 0.78);
    --vid-review: rgba(17, 17, 17, 0.68);
    --vid-current: #002b79;
}

#gold-one-rec {
    --rec-accent: #ff7e16;
}

#gold-one-points {
    --point-sec-bg: #fffaec;
    --point-panel-bg: #ffffff;
    --point-accent: var(--text);
    --point-color: #f6851d;
    --point-badge-color: #ffffff;
}

#gold-one-benefits {
    --benefit-bg: #fffaec;
    --benefit-icon-bg: #ffefc8;
}

#gold-one-banner {
    --promo-bg: #fff3d4;
    --promo-ratio-pc: 1920 / 650;
    --promo-ratio-mo: 750 / 980;
}

#gold-premium-rec {
    --rec-accent: #002b79;
    --rec-mark-bg: #f3df9a;
}

#gold-premium-points {
    --point-sec-bg: #eff4ff;
    --point-panel-bg: #ffffff;
    --point-accent: var(--text);
    --point-color: #3a5eab;
    --point-badge-bg: #294277;
    --point-badge-color: #ffffff;
}

#gold-premium-benefits {
    --benefit-bg: #eff4ff;
    --benefit-icon-bg: #e3e7f3;
    --benefit-cols: 6;
    --benefit-grid-max: 100%;
    --benefit-mo-cols: 3;
}

#gold-premium-faq {
    --faq-bg: #dee5fb;
}

#c-plus-videos {
    --vid-bg: #f2fee4;
    --vid-text: #111111;
    --vid-lead: rgba(17, 17, 17, 0.78);
    --vid-review: rgba(17, 17, 17, 0.68);
    --vid-current: #002b79;
}

#c-plus-rec {
    --rec-accent: #569b2c;
    --rec-mark-bg: #e8f6d8;
}

#c-plus-points {
    --point-sec-bg: #edf5ea;
    --point-panel-bg: #ffffff;
    --point-accent: var(--text);
    --point-color: #517f37;
    --point-badge-bg: #517f37;
    --point-badge-color: #ffffff;
}

#c-plus-benefits {
    --benefit-bg: #edf5ea;
    --benefit-icon-bg: #dde9d5;
    --benefit-cols: 3;
    --benefit-grid-max: 780px;
    --benefit-mo-cols: 3;
}

#c-plus-premium-rec {
    --rec-accent: #7fad00;
    --rec-mark-bg: #e8f6d8;
}

#c-plus-premium-points {
    --point-sec-bg: #f9fdf5;
    --point-panel-bg: #ffffff;
    --point-accent: var(--text);
    --point-color: #7fad00;
    --point-badge-bg: #7fad00;
    --point-badge-color: #ffffff;
}

#c-plus-premium-benefits {
    --benefit-bg: #f9fdf5;
    --benefit-icon-bg: #e5f5da;
    --benefit-cols: 5;
    --benefit-mo-cols: 3;
}

#c-plus-premium-banner {
    --promo-bg: #edf8f3;
    --promo-ratio-pc: 1920 / 650;
    --promo-ratio-mo: 750 / 1000;
}

#active-videos {
    --vid-bg: #1750b4;
    --vid-text: #ffffff;
    --vid-lead: rgba(255, 255, 255, 0.82);
    --vid-review: rgba(255, 255, 255, 0.68);
    --vid-current: #fcd800;
}

#active-rec {
    --rec-accent: #1750b4;
    --rec-mark-bg: #faf443;
}

#active-banner {
    --promo-bg: #f4f8ff;
    --promo-ratio-pc: 1920 / 520;
    --promo-ratio-mo: 375 / 220;
    padding-bottom: 0;
}

#active-points {
    --point-sec-bg: #f7fcff;
    --point-panel-bg: #ffffff;
    --point-accent: var(--text);
    --point-color: #044cc9;
    --point-badge-bg: #044cc9;
    --point-badge-color: #ffffff;
}

#active-benefits {
    --benefit-bg: #f7fcff;
    --benefit-icon-bg: #edf5fc;
    --benefit-cols: 4;
    --benefit-mo-cols: 3;
}

#active-faq {
    --faq-bg: #ebf5fd;
}

.point-sec--product .point-media--wide.point-media--cover {
    --point-panel-bg: transparent;
}

#functional-silver-premium {
    --fn-accent: #ffd109;
    --fn-benefit-bg: #fafafa;
    --fn-head-bg: #dfe2e8;
    --benefit-icon-bg: #efefef;
}

#functional-emax-plus {
    --fn-accent: #c8874f;
    --fn-benefit-bg: #fffbf2;
    --fn-head-bg: #e7bd77;
    --benefit-icon-bg: #fff2df;
}

#functional-care-dm {
    --fn-accent: #77c4c1;
    --fn-benefit-bg: #eff8f7;
    --fn-head-bg: #b8ded6;
}

#functional-care-complex {
    --fn-accent: #717fad;
    --fn-benefit-bg: #f4f5f9;
    --fn-head-bg: #c7cde2;
}

/* 태블릿 */
@media (max-width: 1080px) {
    .phm-head {
        padding: 0;
    }

    .phm-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phm-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .phm-wrap {
        --phm-panel-h: 420px;
    }

    .rec-wrap {
        gap: 52px;
    }

    .rec-head,
    .rec-list {
        width: 100%;
    }

    .vid-wrap {
        padding: 68px 0 76px;
    }

    .vid-head {
        margin-bottom: 32px;
    }

    .vid-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .vid-main {
        order: 1;
    }

    .vid-side {
        order: 2;
        width: 100%;
    }

    .vid-list {
        flex-direction: row;
        width: 100%;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .vid-list.is-scroll {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
    }

    .vid-list::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .vid-list::-webkit-scrollbar-track {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
    }

    .vid-list::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.34);
    }

    .vid-item {
        flex: 1 1 0;
        width: calc((100% - 20px) / 3);
        min-width: 0;
        gap: 10px;
    }

    .vid-list.is-scroll .vid-item {
        flex: 0 0 196px;
        width: 196px;
    }

    .vid-copy {
        font-size: 0.96rem;
        line-height: 1.45;
        min-height: 2.9em;
    }

    .vid-play {
        width: 76px;
        height: 76px;
    }

    .vid-play .icon-lucide {
        width: 30px;
        height: 30px;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .phm-head {
        gap: 14px;
    }

    .phm-title {
        font-size: 1.75rem;
        line-height: 1.42;
    }

    .phm-form {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .phm-wrap {
        --phm-panel-h: 320px;
    }

    .phm-list {
        height: 460px;
    }

    .phm-map small {
        left: 0;
        right: 0;
        bottom: 44px;
        font-size: 0.88rem;
    }

    .phm-list-head,
    .phm-items li,
    .phm-paging {
        padding-left: 18px;
        padding-right: 18px;
    }

    .phm-items li {
        gap: 4px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .phm-items span {
        line-height: 1.45;
    }

    .rec-wrap {
        gap: 40px;
    }

    .rec-kicker {
        font-size: clamp(2rem, 6.6vw, 3.2rem);
    }

    .rec-name {
        margin-top: 2px;
        font-size: clamp(2.8rem, 11vw, 4.8rem);
        font-weight: 800;
        line-height: 1.15;
    }

    .rec-hero-media {
        width: min(100%, 420px);
    }

    .rec-divider {
        height: 92px;
    }

    .rec-head {
        gap: 0.35rem;
    }

    .rec-head-line {
        font-size: clamp(1.8rem, 6.8vw, 2.9rem);
    }

    .rec-list {
        gap: 18px;
    }

    .rec-item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
    }

    .rec-item .icon-lucide {
        width: 28px;
        height: 28px;
        margin-top: -0.02em;
        align-self: start;
    }

    .rec-item p {
        margin: 0;
        font-size: 1.16rem;
        line-height: 1.42;
    }

    .vid-wrap {
        padding: 52px 0 60px;
    }

    .vid-head {
        gap: 10px;
        margin-bottom: 28px;
    }

    .vid-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .vid-main {
        order: 1;
    }

    .vid-side {
        order: 2;
        width: 100%;
    }

    .vid-list {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .vid-list.is-scroll {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
    }

    .vid-item {
        flex: 1 1 0;
        width: calc((100% - 16px) / 3);
        min-width: 0;
    }

    .vid-list.is-scroll .vid-item {
        flex: 0 0 152px;
        width: 152px;
    }

    .vid-play {
        width: 68px;
        height: 68px;
    }

    .vid-play .icon-lucide {
        width: 26px;
        height: 26px;
    }

    .vid-title {
        font-size: 1.16rem;
    }

    .vid-review,
    .vid-copy {
        font-size: 0.94rem;
    }
}

@media (max-width: 768px) {
    .point-sec {
        padding-bottom: 80px;
    }

    .point-no {
        min-height: 44px;
        padding: 0 18px;
        font-size: 1.08rem;
    }

    .point-hero {
        min-height: 320px;
    }

    .point-head {
        gap: 10px;
        padding: 56px 0;
    }

    .point-body {
        padding-top: 48px;
    }

    .point-list {
        gap: 64px;
    }

    .point-item,
    .point-top,
    .point-copy,
    .point-card {
        gap: 18px;
    }

    .point-note {
        gap: 28px;
    }

    .point-main {
        font-size: clamp(1.8rem, 7.6vw, 2.5rem);
        line-height: 1.26;
    }

    .point-note-title {
        font-size: 1.2rem;
        line-height: 1.35;
    }

    .point-box-title {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    .point-note-title {
        align-items: flex-start;
        justify-content: center;
        max-width: fit-content;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .point-note-title .point-note-mark {
        margin-top: 0.08em;
    }

    .point-text,
    .point-info-text {
        font-size: 1.16rem;
        line-height: 1.55;
    }

    .point-box-subtitle {
        margin-top: 24px;
        margin-bottom: 18px;
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .point-box > .point-box-subtitle {
        margin-top: 24px;
    }

    .point-box > .point-box-subtitle + .point-box-media {
        margin-top: 18px;
    }

    .point-caption,
    .point-caption-list,
    .point-foot,
    .ref-list {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .point-info-list {
        gap: 20px;
    }

    .point-info-card {
        gap: 18px;
        padding: 0 18px 32px;
    }

    .point-info-title {
        min-height: 44px;
        padding: 0 18px;
        border-radius: 0 0 14px 14px;
        font-size: 1rem;
    }

    .point-info-main {
        margin-top: 20px;
        font-size: clamp(1.16rem, 5.2vw, 1.48rem);
        line-height: 1.28;
    }

    .point-box > .point-foot {
        margin-top: 18px;
    }

    .point-box {
        gap: 0;
        padding: 40px 18px;
    }

    .point-box:has(> .point-box-media:first-child) {
        padding: 0 0 40px;
    }

    .point-box:has(> .point-box-media:first-child) > :not(.point-box-media) {
        padding-left: 18px;
        padding-right: 18px;
    }

    .point-box > .point-box-title:first-child {
        margin-top: 0;
    }

    .point-box > * + * {
        margin-top: 36px;
    }

    .point-box-text {
        font-size: 1rem;
        line-height: 1.2;
    }

    .point-callout {
        margin-top: 28px;
        padding: 16px 18px;
        font-size: clamp(1rem, 4.2vw, 1.25rem);
        line-height: 1.35;
    }

    .point-media--wide,
    .point-box-media,
    .point-card .point-media {
        width: 100%;
    }

    .point-media img,
    .point-box-media img {
        width: 100%;
        max-width: none;
    }

    .point-sec .point-media--wide.point-media--cover {
        height: var(--point-mo-height, clamp(10rem, 25vw, 16rem));
        aspect-ratio: auto;
        min-height: 0;
    }

    .point-sec .point-box-media {
        height: var(--point-box-mo-height, 12rem);
        min-height: 0;
    }

    .point-sec .point-card .point-media.point-media--cover {
        height: var(--point-card-mo-height, clamp(13rem, 70vw, 21rem));
        aspect-ratio: auto;
        min-height: 0;
    }

    .point-sec .point-media--contain.point-media--cover {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        overflow: visible;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .point-sec .point-media--cover > img,
    .point-sec .point-box-media > img,
    .point-sec--product .point-media--cover > img,
    .point-sec--product .point-box-media > img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        object-fit: cover;
        object-position: center center;
    }

    .point-sec .point-media--contain.point-media--cover > img {
        width: min(90%, 30rem);
        height: auto;
        object-fit: contain;
    }

    .point-duo {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ref-note {
        margin-top: 72px;
    }

    .ref-note--v2 {
        margin-top: 0;
    }

    .benefit-wrap {
        gap: 40px;
    }

    .benefit-grid {
        grid-template-columns: repeat(var(--benefit-mo-cols, 2), minmax(0, 1fr));
        justify-content: center;
        gap: 24px 14px;
    }

    .benefit-item {
        gap: 14px;
    }

    .benefit-icon {
        width: min(100%, 7.8rem);
    }

    .benefit-name {
        font-size: 1.08rem;
        line-height: 1.38;
    }

    .benefit-note li {
        font-size: 1rem;
        line-height: 1.7;
    }

    .spec-body {
        gap: 36px;
    }

    .spec-group {
        gap: 16px;
    }

    .spec-copy,
    .spec-list {
        font-size: 1rem;
        line-height: 1.7;
    }

    .faq-wrap {
        gap: 40px;
    }

    .faq-groups {
        gap: 38px;
    }

    .faq-group {
        gap: 14px;
    }

    .faq-category-title {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    .faq-sec--page .faq-main {
        padding: 2.5rem 0 0;
    }

    .faq-sec--page .faq-main-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1rem;
        text-align: center;
    }

    .faq-sec--page .faq-main-copy {
        justify-items: center;
        gap: 6px;
        margin-top: 0.75rem;
    }

    .faq-sec--page .faq-main-title {
        font-size: clamp(2.4rem, 12vw, 4rem);
    }

    .faq-sec--page .faq-main-desc {
        max-width: 21rem;
        font-size: 1rem;
        line-height: 1.5;
    }

    .faq-sec--page .faq-main-img {
        justify-self: center;
    }

    .faq-sec--page .faq-main-img img {
        width: min(58vw, 210px);
    }

    .faq-sec--page .faq-main .faq-tabs {
        margin: 0.5rem 0 2rem;
    }

    .faq-sec--page .faq-wrap {
        gap: 32px;
        padding-top: 0;
    }

    .faq-sec--page .faq-item {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    .faq-sec--page .faq-tabs {
        gap: 8px;
    }

    .faq-sec--page .faq-tabs .tab {
        min-width: 0;
        padding: 1.05rem 0.5rem;
        font-size: 1rem;
    }

    .faq-sec--page .faq-q {
        gap: 12px;
        padding: 1.35rem 0;
    }

    .faq-sec--page .q-mark,
    .faq-sec--page .faq-turn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.5rem;
    }

    .faq-sec--page .q-text {
        font-size: 1rem;
        line-height: 1.58;
    }

    .faq-sec--page .faq-arrow {
        width: 1.35rem;
        height: 1.35rem;
    }

    .faq-sec--page .faq-a {
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .faq-sec--page .faq-a-inner {
        gap: 12px;
        padding: 0 0 1.75rem calc(2.75rem + 12px);
    }

    .faq-sec--page .faq-a-body {
        width: 100%;
    }

    .faq-sec--page .btn-more {
        min-height: 3.8rem;
        font-size: 1rem;
    }

    .faq-head {
        gap: 10px;
    }

    .faq-badge {
        width: 46px;
        height: 46px;
        font-size: 1.7rem;
    }

    .faq-title {
        font-size: clamp(2.2rem, 8vw, 3.6rem);
    }

    .faq-item {
        gap: 18px;
        padding: 28px 0;
    }

    .faq-list {
        padding: 32px;
    }

    .faq-q,
    .faq-a {
        gap: 10px;
    }

    .faq-mark {
        font-size: 1.04rem;
    }

    .faq-q p,
    .faq-a p {
        font-size: 1.12rem;
        line-height: 1.7;
    }

    .faq-a p {
        font-size: 1.04rem;
    }

    .fn-hub {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fn-card {
        grid-template-columns: 6px minmax(0, 36%) minmax(0, 1fr);
        grid-template-areas:
            "bar media title"
            "bar media desc"
            "bar more more"
            "bar note note";
        align-items: center;
        gap: 0.9rem 1rem;
        width: 100%;
        min-height: 0;
        padding: 1.6rem 0;
        text-align: left;
    }

    .fn-card::before {
        grid-area: bar;
        width: 5px;
        height: 100%;
        min-height: 4.5rem;
    }

    .fn-card-media img {
        width: min(100%, 13rem);
    }

    .fn-card-copy {
        display: contents;
    }

    .fn-card-copy h3 {
        grid-area: title;
        align-self: end;
        font-size: clamp(1.58rem, 6.6vw, 2.35rem);
        line-height: 1.16;
        white-space: normal;
    }

    .fn-card-desc {
        grid-area: desc;
        align-self: start;
        font-size: 0.98rem;
    }

    .fn-card-media {
        grid-area: media;
        align-self: center;
    }

    .fn-more {
        grid-area: more;
        width: 100%;
        margin-top: 0.35rem;
        min-width: 0;
        min-height: 3.25rem;
        font-size: 1rem;
    }

    .fn-card-note {
        grid-area: note;
        margin: -0.4rem 0 0;
    }

    .modal-layer.fn-modal-layer {
        place-items: center;
        place-content: center;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }

    .modal-layer__panel.fn-modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100svh - 24px);
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .fn-detail {
        gap: 34px;
        max-height: calc(100svh - 24px);
        padding: 0;
        overflow-x: hidden;
    }

    .fn-detail-head {
        gap: 14px;
        margin-bottom: 0;
        padding: 4.4rem 1.5rem 0;
    }

    .fn-detail-head::before {
        left: 0;
        right: 0;
        height: clamp(11rem, 62vw, 15rem);
    }

    .fn-detail-head h3 {
        font-size: clamp(2.25rem, 9vw, 3rem);
    }

    .fn-detail-kicker {
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .fn-detail-sec {
        gap: 18px;
        margin-right: 20px;
        margin-left: 20px;
    }

    .fn-detail-sec h4 {
        font-size: 1.34rem;
    }

    .fn-modal .rec-head-line {
        font-size: clamp(1.38rem, 6vw, 1.92rem);
    }

    .fn-modal .rec-list {
        gap: 10px;
    }

    .fn-modal .rec-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .fn-modal .rec-item .icon-lucide {
        width: 25px;
        height: 25px;
    }

    .fn-modal .rec-item p,
    .fn-modal .benefit-note li,
    .fn-modal .spec-copy,
    .fn-modal .spec-list {
        font-size: 1rem;
        line-height: 1.55;
    }

    .fn-modal .benefit-wrap,
    .fn-modal .spec-body {
        padding: 28px 20px;
    }

    .fn-modal .benefit-wrap {
        margin-right: 0;
        margin-left: 0;
    }

    .fn-modal .fn-img-ph {
        min-width: 0;
        width: 100%;
        max-width: 15rem;
        overflow-wrap: anywhere;
    }

    .fn-modal .fn-img-ph--icon {
        width: 70%;
        max-width: none;
    }

    .fn-modal .benefit-title {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
    }

    .fn-modal .spec-list {
        grid-template-columns: 1fr;
    }

    .fn-modal .benefit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px 8px;
    }

    #functional-emax-plus .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
        width: min(100%, 24rem);
        margin: 0 auto;
    }

    #functional-emax-plus .benefit-icon {
        width: min(100%, 7.4rem);
    }

    #functional-emax-plus .benefit-name {
        font-size: 1rem;
    }

    .fn-modal .rec-list,
    .fn-modal .benefit-grid,
    .fn-modal .spec-list {
        width: 100%;
    }

    .fn-modal .benefit-item {
        min-height: auto;
        padding: 0;
    }

    .fn-modal .benefit-icon {
        width: min(100%, 4.9rem);
    }

    .fn-modal .benefit-name {
        font-size: 0.86rem;
        line-height: 1.25;
    }

    .promo-banner {
        min-height: 220px;
    }

    .promo-banner--visual {
        min-height: 0;
        aspect-ratio: var(--promo-ratio-mo, var(--promo-ratio-pc, var(--promo-ratio, 16 / 6)));
    }

    .promo-banner-copy {
        gap: 10px;
        padding: 42px 18px;
    }

    .promo-banner-title {
        font-size: clamp(1.8rem, 7vw, 3rem);
    }

    .promo-banner-kicker {
        font-size: clamp(1.08rem, 4.05vw, 1.48rem);
    }

    .promo-banner-title--active {
        font-size: clamp(1.28rem, 5vw, 1.92rem);
        line-height: 1.35;
    }

}