@charset "utf-8";

/* Homepage transition to DESIGN.md. Loaded only for body#main.
   Shared foundations stay unchanged for product, application and admin pages. */
#main {
    --main-primary: #3617ce;
    --main-surface: #ffffff;
    --main-canvas: #f5f7fa;
    --main-text: #243247;
    --main-muted: #526071;
    --main-border: #dce2e9;
    --main-radius: 16px;
    --main-font-small: 15px;
    --main-font-body: 16px;
    font-family: "Pretendard", sans-serif;
    font-size: var(--main-font-body);
    font-weight: 500;
    color: var(--main-text);
    background: var(--main-canvas);
}

#main #wrapper {background: var(--main-canvas);}
#main :where(a, button, input, select, textarea, label, legend, p, div, span, small, li, dt, dd) {
    font-family: "Pretendard", sans-serif;
    font-size: inherit;
    font-weight: 500;
}
#main :where(h1, h2, h3, h4, h5, h6, strong, b, .main-best .tit, .main-recommend__result-title, .main-recommend__prices dd) {
    font-family: "Pretendard", sans-serif;
    font-weight: 700;
}
#main :where(h1, h2, h3, h4, h5, h6) {color: var(--main-text); letter-spacing: -.03em;}
#main :where(h1.hide, h2.hide) {
    position: absolute; visibility: visible; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; font: inherit;
}
#main :where(a, button, input, select, textarea) {caret-color: var(--main-primary);}
#main ::selection {background: var(--main-primary); color: var(--main-surface);}
#main :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--main-primary); outline-offset: 3px;
}
#main :where(a, button) {text-underline-offset: .2em;}
#main :where(.main-curated__viewport, .main-best .list) {scrollbar-color: var(--main-muted) var(--main-canvas);}
#main :where(.main-best__price, .main-recommend__prices, .main-curated__status, .date) {font-variant-numeric: tabular-nums;}

/* One UI radius, including responsive overrides and nested controls. */
#main :where(button, input:not([type=radio]):not([type=checkbox]), select, textarea,
    .main-hero-carousel, .main-hero-dots, .main-promotion__card, .main-promotion__visual,
    .main-promotion__arrow, .main-best__head a, .main-best .tab ul, .main-best .tab a,
    .main-best__card, .main-best .telecom, .main-curated__card, .main-curated__visual,
    .main-recommend__shell, .main-recommend__badge, .main-recommend__choices span,
    .main-recommend__result-note, .main-recommend__empty-icon, .main-recommend__card,
    .main-recommend__thumb, .main-recommend__meta span, .main-recommend__prices div,
    .main-recommend__actions, .main-recommend__trend-all, .main-internet__card,
    .main-comm .post, .main-comm .cs-area, .main-comm .more, .cs-social-links a,
    .faq-list, .faq-q, .faq-num, .faq-arrow, .float-kakao) {border-radius: var(--main-radius);}

#main :where(.main-promotion__card, .main-best__card, .main-best .tab a,
    .main-curated__card, .main-recommend__shell, .main-recommend__card,
    .main-recommend__choices span, .main-internet__card) {box-shadow: none;}
#main :where(.main-promotion__card, .main-curated__card, .main-internet__card,
    .main-recommend__card, .main-recommend__submit):hover {transform: none; box-shadow: none;}

/* Preserve original Lucide geometry; do not inherit legacy illustration styles. */
#main .main-icon {
    display: inline-block; width: 20px; height: 20px; flex: 0 0 auto;
    vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; filter: none;
}
#main .main-icon :where(path, rect, circle) {fill: none; stroke: currentColor; stroke-width: 2; animation: none;}

/* Shared header/menu presentation lives in storefront-header.css. */

/* Promotion and carousel controls: the marker is small, the hit area is not. */
#main .main-hero-controls {max-width: calc(100% - 24px); gap: 8px; align-items: flex-end;}
#main .main-hero-dots {gap: 0; padding: 0; flex-wrap: wrap; background: var(--main-surface);}
#main :where(.main-hero-dot, .main-curated__dot) {
    position: relative; display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px;
    align-items: center; justify-content: center; padding: 0; border: 0;
    background: transparent; transition: background-color .15s ease;
}
#main :where(.main-hero-dot, .main-curated__dot)::before {
    content: ""; width: 16px; height: 4px; border-radius: var(--main-radius); background: var(--main-muted);
}
#main :where(.main-hero-dot, .main-curated__dot).is-active {width: 44px; background: var(--main-canvas);}
#main :where(.main-hero-dot, .main-curated__dot).is-active::before {background: var(--main-primary);}
#main .main-hero-toggle {
    display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px;
    align-items: center; justify-content: center; background: var(--main-surface); color: var(--main-text);
}
#main .main-hero-toggle .main-icon {position: static; width: 18px; height: 18px; border: 0;}
#main .main-hero-toggle__play,
#main .main-hero-toggle.is-paused .main-hero-toggle__pause {display: none;}
#main .main-hero-toggle.is-paused .main-hero-toggle__play {display: inline-block;}
#main .main-curated__dots {gap: 0; flex-wrap: wrap; min-height: 44px; margin-top: 16px;}
#main .main-curated__controls {height: auto; gap: 8px;}
#main .main-curated__arrow {width: 44px; height: 44px; background: var(--main-surface); border-color: var(--main-border); color: var(--main-text);}
#main .main-curated__arrow:disabled {color: var(--main-muted); opacity: .55;}
#main .main-curated__filter {height: 44px; padding: 0 16px; background: var(--main-surface); border-color: var(--main-border); color: var(--main-text); font-size: var(--main-font-body);}
#main .main-curated__filter.is-active {background: var(--main-primary); border-color: var(--main-primary); color: var(--main-surface);}
#main .main-curated__status {color: var(--main-muted); font-size: var(--main-font-small);}
#main .main-curated__card:hover .main-curated__visual img {transform: none;}

#main .main-promotion__grid {gap: 16px;}
#main .main-promotion__card {
    min-height: 208px; padding: 24px; background: var(--main-surface); border: 1px solid var(--main-border);
    color: var(--main-text); transition: border-color .15s ease;
}
#main .main-promotion__card:hover {border-color: var(--main-primary); color: var(--main-text);}
#main .main-promotion__card::before {display: none;}
#main .main-promotion__content strong {font-size: 20px; margin-top: 8px; color: var(--main-text); letter-spacing: -.03em;}
#main .main-promotion__content strong,
#main .main-promotion__content strong span {font-weight: 700;}
#main .main-promotion__eyebrow {color: var(--main-muted); font-size: var(--main-font-small); letter-spacing: .04em;}
#main .main-promotion__description {max-width: 116px; margin-top: 8px; font-size: var(--main-font-small); line-height: 1.5; color: var(--main-muted);}
#main .main-promotion__visual {
    display: flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; right: 16px; bottom: 16px; padding: 14px;
    background: var(--main-canvas); background: color-mix(in srgb, var(--main-primary) 8%, var(--main-surface));
    color: var(--main-primary);
}
#main .main-promotion__visual .main-icon {width: 56px; height: 56px; max-width: 100%; max-height: 100%;}
/* Match the live artwork dimensions, not the surrounding shortcut box dimensions. */
#main .main-promotion__visual .main-promotion__art {width: 88px; height: 88px; max-width: none; max-height: none; flex: 0 0 auto;}
#main .main-promotion__visual--chart .main-promotion__art {height: 58px;}
/* Live mobile effects come from responsive.css; keep a static fallback offscreen/hidden. */
#main .main-promotion__card:not(.is-promotion-motion-active) .main-promotion__art :where(path, rect, circle) {animation: none;}
/* Existing product PNGs have asymmetric transparent padding; center their visible artwork. */
#main .main-promotion__visual--devices .main-promotion__device {top: auto; bottom: 4px; width: 64px; height: 80px; transform: translateX(-8%);}
#main .main-promotion__visual--devices .main-promotion__device--galaxy {left: 0;}
#main .main-promotion__visual--devices .main-promotion__device--iphone {right: 0;}
#main .main-promotion__arrow {top: 16px; right: 16px; width: 24px; height: 24px; background: transparent; color: var(--main-primary);}
#main .main-promotion__arrow .main-icon {width: 18px; height: 18px;}
#main .main-promotion__visual--chart .main-promotion__chart-line {stroke-dashoffset: 0;}

/* Product discovery keeps its existing data, ordering, IDs and target URLs. */
#main :where(.main-best, .main-recommend, .main-curated) {margin-bottom: 64px;}
#main :where(.main-best__head, .main-curated__head) {margin-bottom: 24px;}
#main .main-best__head h2,
#main .main-curated__head h2,
#main .main-internet__head h2,
#main .main-sec-tit h2 {font-size: 32px; line-height: 1.25;}
#main .main-best__head a {min-height: 44px; padding: 0 12px; color: var(--main-muted); gap: 8px;}
#main .main-best__head a:hover {color: var(--main-primary); background: var(--main-surface);}
#main .main-best .tab {margin-bottom: 24px;}
#main .main-best .tab ul {gap: 4px; padding: 4px; border-color: var(--main-border); background: var(--main-surface);}
#main .main-best .tab ul li a {min-height: 44px; line-height: 44px; padding: 0 16px; color: var(--main-muted);}
#main .main-best .tab ul li.active a {color: var(--main-primary); background: var(--main-canvas); box-shadow: none; font-weight: 700;}
#main .main-best__card {border-color: var(--main-border); background: var(--main-surface);}
#main .main-best__card:hover {border-color: var(--main-primary);}
#main .main-best__card:focus-visible {outline-offset: -3px;}
#main .main-best .list .thumb {background: var(--main-canvas); border-color: var(--main-border);}
#main .main-best__body {padding: 24px;}
#main .main-best .list .telecom {height: auto; min-height: 24px; padding: 4px 8px; font-size: var(--main-font-small); background: var(--main-canvas); border-color: var(--main-border); color: var(--main-primary);}
#main .main-best .list .tit {color: var(--main-text); letter-spacing: -.03em;}
#main :where(.main-best__price-label, .main-best__plan, .main-curated__head p) {color: var(--main-muted);}
#main :where(.main-best__price-label, .main-best__plan) {font-size: var(--main-font-small);}
#main .main-best__price strong {color: var(--main-text);}

#main .main-recommend__shell {background: var(--main-canvas); border-color: var(--main-border);}
#main .main-recommend__intro {padding: 32px;}
#main .main-recommend__intro h2 {margin-top: 16px; font-size: 32px; color: var(--main-text); letter-spacing: -.03em;}
#main .main-recommend__badge {background: var(--main-surface); color: var(--main-muted); border-color: var(--main-border); font-size: var(--main-font-small);}
#main .main-recommend__intro > p {color: var(--main-muted);}
#main .main-recommend__form {margin-top: 24px;}
#main .main-recommend__question {margin-bottom: 24px;}
#main .main-recommend__question legend {
    position: static; visibility: visible; overflow: visible; width: auto; height: auto;
    margin: 0; padding: 0; font-family: "Pretendard", sans-serif;
    font-size: var(--main-font-body); font-weight: 700; line-height: 1.5; color: var(--main-text);
}
#main .main-recommend__choices {gap: 8px; margin-top: 8px;}
#main .main-recommend__choices span {min-height: 48px; padding: 8px; color: var(--main-text); background: var(--main-surface); border-color: var(--main-border); font-size: var(--main-font-body); letter-spacing: -.02em;}
#main .main-recommend__choices input:checked + span {color: var(--main-primary); border-color: var(--main-primary); background: var(--main-surface); box-shadow: none; font-weight: 700;}
#main .main-recommend__choices input:focus-visible + span {outline: 2px solid var(--main-primary); outline-offset: 3px;}
#main .main-recommend__submit {min-height: 48px; height: auto; padding: 12px 16px; background: var(--main-primary); color: var(--main-surface); font-weight: 500;}
#main .main-recommend__submit:hover {background: var(--main-primary);}
#main .main-recommend__submit:disabled {background: var(--main-border); color: var(--main-muted);}
#main .main-recommend__notice {margin-top: 8px; color: var(--main-muted); font-size: var(--main-font-small);}
#main .main-recommend__result {padding: 32px; background: var(--main-surface); border-color: var(--main-border);}
#main .main-recommend__result-head {gap: 16px; flex-wrap: wrap;}
#main .main-recommend__result-head span {color: var(--main-muted); font-size: var(--main-font-small); letter-spacing: 0;}
#main .main-recommend__result-title {color: var(--main-text);}
#main .main-recommend__asof {color: var(--main-muted); font-size: var(--main-font-small); white-space: normal;}
#main .main-recommend__result-note {padding: 12px 16px; background: var(--main-canvas); color: var(--main-muted); font-size: var(--main-font-small);}
#main .main-recommend__empty-icon {background: var(--main-canvas); color: var(--main-muted);}
#main .main-recommend__empty-icon .main-icon {width: 36px; height: 36px;}
#main .main-recommend__empty strong {color: var(--main-text);}
#main :where(.main-recommend__empty p, .main-recommend__loading p) {color: var(--main-muted);}
#main .main-recommend__card {padding: 16px; border-color: var(--main-border); color: var(--main-text);}
#main .main-recommend__card:hover {border-color: var(--main-primary);}
#main .main-recommend__thumb {background: var(--main-canvas);}
#main .main-recommend__meta {flex-wrap: wrap; gap: 4px 8px;}
#main .main-recommend__meta span {height: auto; min-height: 24px; padding: 4px 8px; background: var(--main-canvas); color: var(--main-muted); font-size: var(--main-font-small);}
#main .main-recommend__meta small {color: var(--main-muted); font-size: var(--main-font-small); white-space: normal; overflow: visible;}
#main .main-recommend__card h3 {color: var(--main-text); white-space: normal; overflow: visible; font-size: 16px;}
#main .main-recommend__prices div {padding: 8px; background: var(--main-canvas);}
#main .main-recommend__prices dt {font-size: var(--main-font-small); color: var(--main-muted);}
#main .main-recommend__prices dd {font-size: 20px; color: var(--main-text); white-space: normal; overflow-wrap: anywhere;}
#main .main-recommend__prices dd[class*="main-recommend__trend-value--"] {font-size: var(--main-font-small);}
/* Semantic price direction, not brand accents. Text/signs retain the meaning;
   both colours exceed 4.5:1 on the canvas and white (DESIGN.md Colors). */
#main .main-recommend__prices dd.main-recommend__trend-value--up {color: #b42333;}
#main .main-recommend__prices dd.main-recommend__trend-value--down {color: #1257a0;}
#main .main-recommend__prices dd.main-recommend__trend-value--unavailable {color: var(--main-muted);}
#main :where(.main-recommend__reason, .main-recommend__condition) {font-size: var(--main-font-small); color: var(--main-muted);}
#main .main-recommend__actions {margin: 0 -16px -16px; border-color: var(--main-border); background: var(--main-canvas);}
#main .main-recommend__action {min-height: 44px; padding: 8px 16px; color: var(--main-text); white-space: normal;}
#main .main-recommend__action::after {content: none;}
#main .main-recommend__action:hover {color: var(--main-primary); background: var(--main-canvas);}
#main :where(.main-recommend__more, .main-recommend__trend-all) {min-height: 44px; font-size: var(--main-font-body); padding: 8px 16px; color: var(--main-text); border-color: var(--main-border); background: var(--main-surface);}
#main :where(.main-recommend__more, .main-recommend__trend-all):hover {color: var(--main-primary); border-color: var(--main-primary); background: var(--main-surface);}

/* Internet cards retain their original facts and routes, with flat surfaces. */
#main .main-internet {padding: 64px 0; background: var(--main-surface);}
#main .main-internet__head {margin-bottom: 24px;}
#main .main-internet__head > div > span {font-size: var(--main-font-small); color: var(--main-muted);}
#main .main-internet__head p {color: var(--main-muted);}
#main .main-internet__cards {gap: 16px;}
#main .main-internet__card {padding: 32px; border-color: var(--main-border); background: var(--main-canvas); color: var(--main-text);}
#main .main-internet__card:hover {background: var(--main-canvas); border-color: var(--main-primary); color: var(--main-text);}
#main .main-internet__copy {max-width: calc(100% - 112px);}
#main .main-internet__copy > span {font-size: var(--main-font-small); color: var(--main-muted); letter-spacing: .02em;}
#main .main-internet__copy h3 {color: var(--main-text);}
#main .main-internet__copy p {color: var(--main-muted);}
#main .main-internet__copy strong {font-size: var(--main-font-body); color: var(--main-primary);}
#main .main-internet__art {right: 24px; bottom: 32px; width: 96px; height: 112px; color: var(--main-primary);}
#main .main-internet__art::before {display: none;}
#main .main-internet__art .main-icon {width: 80px; height: 80px; stroke-width: 2; filter: none;}

#main .main-comm {padding: 64px 0; background: var(--main-canvas);}
#main .main-comm .row,
#main .main-comm .col:first-child {gap: 16px;}
#main .main-comm :where(.post, .cs-area) {padding: 24px; border-color: var(--main-border); color: var(--main-text); background: var(--main-surface);}
#main .main-comm .post ul li {grid-template-columns: 92px minmax(0, 1fr); border-color: var(--main-border); color: var(--main-muted); font-weight: 500;}
#main .main-comm .post ul li .date {font-size: var(--main-font-small); color: var(--main-muted);}
#main .main-comm .post ul li a {color: var(--main-text);}
#main .main-comm .post .more {display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; top: 16px; right: 16px; background: var(--main-canvas); color: var(--main-muted);}
#main .main-comm .post .more::before,
#main .main-comm .post .more::after {content: none;}
#main .main-comm .post .more:hover {color: var(--main-primary); transform: none;}
#main .main-comm .cs-area :where(.txt, .tel, .hour) {color: var(--main-muted);}
#main .main-comm .cs-area .tel strong {color: var(--main-text);}
#main .main-comm .cs-area .cs-social-links a {background: var(--main-surface); border-color: var(--main-border); color: var(--main-muted); font-weight: 500;}

/* FAQ uses actual hidden state, so long answers and zoom cannot be clipped. */
#main .main-faq {padding: 64px 0 80px; background: var(--main-surface);}
#main .main-faq .faq-list {overflow: hidden; border: 1px solid var(--main-border); background: var(--main-surface);}
#main .main-faq .faq-item {border-bottom: 1px solid var(--main-border);}
#main .main-faq .faq-item:last-child {border-bottom: 0;}
#main .main-faq .faq-q {display: flex; align-items: center; width: 100%; min-height: 68px; padding: 16px 24px; border: 0; gap: 16px; background: transparent; text-align: left;}
#main .main-faq .faq-q:hover,
#main .main-faq .faq-item.open .faq-q {background: var(--main-canvas);}
#main .main-faq .faq-q:focus-visible {outline-offset: -3px;}
#main .main-faq .faq-num {display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 4px; color: var(--main-primary); font-size: var(--main-font-small); font-weight: 700;}
#main .main-faq .faq-txt {flex: 1; font-size: 16px; color: var(--main-text);}
#main .main-faq .faq-arrow {display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--main-muted); transition: transform .15s ease;}
#main .main-faq .faq-item.open .faq-arrow {transform: rotate(180deg);}
#main .main-faq .faq-a[hidden] {display: none;}
#main .main-faq .faq-a p {padding: 0 72px 24px; color: var(--main-muted); font-size: var(--main-font-body); line-height: 1.75; margin: 0;}
#main .main-faq .faq-a strong {font-weight: 700; color: var(--main-text);}

/* Official Kakao logo/colour remains a brand asset, not a new accent palette. */
#main .float-kakao {border-radius: var(--main-radius); box-shadow: none;}
#main .float-kakao.collapsed {border-radius: var(--main-radius);}
#main .float-kakao:hover {box-shadow: none;}
#main #footer :where(p, div, ul, li, a, span, small) {font-size: var(--main-font-small);}
#main #skipToContent a:focus {font-size: var(--main-font-body);}

@media (max-width: 1024px) {
    #main .main-promotion__grid {gap: 16px;}
    #main .main-recommend__intro,
    #main .main-recommend__result {padding: 24px;}
    #main .main-recommend__intro h2 {font-size: 28px;}
    #main .main-internet__card {padding: 24px;}
    #main .main-internet__copy {max-width: calc(100% - 88px);}
    #main .main-internet__art {width: 72px; right: 16px;}
    #main .main-internet__art .main-icon {width: 64px; height: 64px;}
}

@media (min-width: 768px) and (max-width: 1120px) {
    #main .main-promotion__grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (min-width: 901px) and (max-width: 1024px) {
    #main .main-promotion__visual--chart .main-promotion__art {width: 76px; height: 50px;}
}
@media (min-width: 768px) and (max-width: 900px) {
    #main .main-promotion__visual--chart .main-promotion__art {width: 86px; height: 56px;}
}
@media (max-width: 767px) {
    /* Mobile density study: adapt the reference rhythm, not its assets or small type. */
    #main {--main-mobile-gutter: 20px;}
    #main .main-promotion .contain,
    #main .main-best > .contain,
    #main .main-recommend > .contain,
    #main .main-curated > .contain,
    #main .main-internet > .contain,
    #main .main-comm > .contain,
    #main .main-faq > .contain {padding-right: var(--main-mobile-gutter); padding-left: var(--main-mobile-gutter);}
    #main .main-promotion {padding: 24px 0 32px;}
    #main .main-promotion__grid {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;}
    #main .main-promotion__card {height: auto; min-height: 96px; padding: 0; border: 0; background: transparent;}
    #main .main-promotion__visual {position: relative; right: auto; bottom: auto; width: 64px; max-width: 100%; height: 64px; padding: 9px; border: 1px solid var(--main-border);}
    #main .main-promotion__visual .main-icon {width: 44px; height: 44px;}
    #main .main-promotion__visual .main-promotion__art {width: 62px; height: 62px;}
    #main .main-promotion__visual--chart .main-promotion__art {width: 48px; height: 48px;}
    #main .main-promotion__visual--devices .main-promotion__device {width: 46px; height: 56px;}
    #main .main-promotion__content {margin-top: 8px;}
    #main .main-promotion__content strong {margin-top: 0; font-size: var(--main-font-small); line-height: 1.5;}
    #main .main-promotion__description,
    #main .main-promotion__arrow {display: none;}
    #main :where(.main-best, .main-recommend, .main-curated) {margin-bottom: 40px;}
    #main .main-best__head h2,
    #main .main-curated__head h2,
    #main .main-internet__head h2,
    #main .main-sec-tit h2 {font-size: 20px; line-height: 1.4;}
    #main .main-best__head,
    #main .main-curated__head,
    #main .main-internet__head,
    #main .main-sec-tit {margin-bottom: 16px;}
    #main .main-best__head {flex-wrap: wrap; gap: 8px;}
    #main .main-best__head h2 {flex: 1 1 180px; min-width: 0; word-break: keep-all;}
    #main .main-best__head a {flex-shrink: 0; padding: 0 4px; gap: 4px; font-size: var(--main-font-small);}
    #main .main-best .tab {margin-bottom: 16px;}
    #main .main-best__body {padding: 16px;}
    #main .main-best .list .tit {font-size: var(--main-font-body);}
    #main .main-best__price-label {margin-top: 12px;}
    #main .main-best__price strong {font-size: 20px;}
    #main .main-curated__head {flex-wrap: wrap; gap: 16px;}
    #main .main-curated__head h2 {word-break: keep-all;}
    #main .main-recommend__intro,
    #main .main-recommend__result {padding: 24px 16px;}
    #main .main-recommend__intro h2 {font-size: 20px; line-height: 1.4;}
    #main .main-recommend__question {margin-bottom: 16px;}
    #main .main-recommend__choices--price {grid-template-columns: repeat(2, minmax(0, 1fr));}
    #main .main-recommend__empty,
    #main .main-recommend__loading {min-height: 240px;}
    #main .main-recommend__card {grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px;}
    #main .main-recommend__prices {gap: 8px;}
    #main .main-recommend__actions {margin: 0 -16px -16px;}
    #main .main-recommend__more,
    #main .main-recommend__trend-all {width: 100%;}
    #main :where(.main-internet, .main-comm, .main-faq) {padding: 40px 0;}
    #main .main-internet__card {min-height: 208px; padding: 24px;}
    #main .main-internet__copy {max-width: calc(100% - 72px);}
    #main .main-internet__copy h3 {font-size: 18px; line-height: 1.4;}
    #main .main-internet__copy p {font-size: var(--main-font-body);}
    #main .main-internet__art {width: 64px; height: 80px; right: 16px; bottom: 32px;}
    #main .main-internet__art .main-icon {width: 56px; height: 56px;}
    #main .main-faq .faq-q {min-height: 64px; padding: 16px; gap: 8px;}
    #main .main-faq .faq-txt {font-size: var(--main-font-body);}
    #main .main-faq .faq-a p {padding: 0 24px 24px; font-size: var(--main-font-body);}

    /* Mobile footer: separate legal links from readable business information. */
    #main #footer {padding: 32px 0; line-height: 24px;}
    #main #footer .foot-logo {margin-bottom: 32px;}
    #main #footer .foot-info {padding-right: 0;}
    #main #footer .f-links {margin-bottom: 24px; line-height: 24px;}
    #main #footer .f-links ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px;}
    #main #footer .f-links ul::after,
    #main #footer .f-links ul li::before {display: none;}
    #main #footer .f-links ul li {float: none; min-width: 0; padding: 0;}
    #main #footer .f-links a {display: flex; align-items: center; min-height: 44px; padding: 4px 0;}
    #main #footer address {display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere;}
    #main #footer address > span {display: block; margin: 0;}
    #main #footer address > br {display: none;}
}

/* Keep the existing phone carousel below 640px; only refine its card footprint. */
@media (max-width: 640px) {
    #main .main-best .list {
        margin-right: calc(-1 * var(--main-mobile-gutter)); margin-left: calc(-1 * var(--main-mobile-gutter));
        padding-right: var(--main-mobile-gutter); padding-left: var(--main-mobile-gutter);
        scroll-padding-inline: var(--main-mobile-gutter);
    }
    #main .main-best .list ul li {width: min(64vw, 248px); flex: 0 0 min(64vw, 248px);}
    #main .main-best .list .thumb {height: 176px;}
    #main .main-curated__filters,
    #main .main-curated__viewport {
        margin-right: calc(-1 * var(--main-mobile-gutter)); margin-left: calc(-1 * var(--main-mobile-gutter));
        padding-right: var(--main-mobile-gutter); padding-left: var(--main-mobile-gutter);
    }
}

@media (max-width: 359px) {
    #main {--main-mobile-gutter: 16px;}
    #main .main-promotion__grid {gap: 4px;}
    #main .main-promotion__visual {width: 56px; height: 56px; padding: 7px;}
    #main .main-promotion__visual .main-icon {width: 40px; height: 40px;}
    #main .main-promotion__visual--devices .main-promotion__device {width: 40px; height: 48px;}
}

@media (prefers-reduced-motion: reduce) {
    #main .main-faq .faq-arrow,
    #main .float-kakao,
    #main .float-kakao span {transition: none;}
}