/* Hallmark · shape: Mascot hero with a quick panel, then a service strip, mall shelf, step band, perks, address desk and an info band · genre: playful · theme: brand (애니메 직구 로고 2026-11-05, by request) · redesign: restyle
 * hero: Settled, the owner's kitten in its box over a pale Fuji sky · nav: kept · footer: kept · imagery: the owner's mascot, generated illustrations (Gemini) built from it · signature: the kitten mascot on every band · job: apply for forwarding
 * axes: light/sans/cool · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E2 S3 R3 V3 · weakest: E, the composition follows the owner's mockup section by section rather than a dealt shape */
/* waive 8: the section order and composition are the owner's approved mockup (docs/img_1.png) */
/* waive 58: a forwarding portal's main screen carries steps, address and account blocks; the words are the owner's, the hero stays at headline, sentence, two actions */
/* waive 59: sections separate by rules and a band change, the page is a working portal not a story */
/* waive 7b: the logo sits on white, so white stays the paper and the pale sky #F3F8FF bands carry the colour */
/* waive 24b: 2px steps (6, 10, 14) keep the dense info rows aligned with the asap.css controls they sit beside */
/* answered F15: the header and footer keep asap.css widths; this file uses the shared .container */

/* 메인 전용 (views/asap/index.php 의 mn-*). 다른 페이지는 이 파일을 읽지 않는다 — header.php 의 $page_css='main' */
:root {
    /* 애니메 직구 로고 색 (2026-11-05) — japan.css 의 --jp-* 와 같은 값 */
    --mn-primary: #1a5fd6;
    --mn-primary-strong: #1349ab;
    --mn-primary-soft: #e8f1ff;
    --mn-navy: #0b1f5e;
    --mn-navy-strong: #071543;
    --mn-paper: #ffffff;
    --mn-cta: #ff9f1c;
    --mn-cta-strong: #f28c00;
    --mn-cta-ink: #0b1f5e;
    --mn-sub: #f3f8ff;
    --mn-line: #dbe6f6;
    --mn-ink: #1c2440;
    --mn-ink-2: #47506a;
    --mn-ink-3: #667085;          /* 기획서 #777 을 흰 바탕 4.5:1 로 맞춘 값 */
    --mn-veil: rgba(255, 255, 255, 0.94);
    --mn-shadow: rgba(11, 31, 94, 0.12);
    --mn-kakao: #fee500;
    --mn-kakao-ink: #3c1e1e;
    --mn-done: #0d7d40;
    --mn-focus: #0b1f5e;
    --mn-mask: #000000;           /* 사진 가장자리 마스크(알파만 쓴다) */
    /* 쇼핑몰 글자 색 — 각 쇼핑몰 표기 색 */
    --mn-rakuten: #bf0000;
    --mn-mercari: #e0242f;
    --mn-yahoo: #e60033;
    --mn-mono: #111111;

    --mn-font: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --mn-font-display: 'Jua', var(--mn-font);
    --mn-font-ja: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', var(--mn-font);
    --mn-r: 10px;
    --mn-r-lg: 16px;
}

html, body { overflow-x: clip; }

/* 공용 ------------------------------------------------ */
.mn-section { padding: 56px 0; font-family: var(--mn-font); }
.mn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mn-head--stack { display: block; }
.mn-head__title { margin: 0; font-family: var(--mn-font-display); font-size: 30px; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--mn-navy); overflow-wrap: break-word; min-width: 0; }
.mn-head__sub { margin: 8px 0 0; font-size: 15px; color: var(--mn-ink-3); }
.mn-more { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--mn-ink-2); text-decoration: underline; text-decoration-color: var(--mn-line); text-underline-offset: 4px; transition: color 0.15s, text-decoration-color 0.15s; }
.mn-more:hover { color: var(--mn-primary); text-decoration-color: currentColor; }
.mn-more:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }

.mn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; padding: 0 26px;
    border: 1.5px solid transparent; border-radius: var(--mn-r);
    font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.mn-btn:active { transform: translateY(1px); }
.mn-btn:focus-visible { outline: 3px solid var(--mn-focus); outline-offset: 2px; transition: none; }
.mn-btn--primary { background: var(--mn-cta); color: var(--mn-cta-ink); }
.mn-btn--primary:hover { background: var(--mn-cta-strong); color: var(--mn-cta-ink); }
.mn-btn--line { background: var(--mn-veil); border-color: var(--mn-navy); color: var(--mn-navy); }
.mn-btn--line:hover { background: var(--mn-navy); color: var(--mn-paper); }
.mn-btn--navy { background: var(--mn-navy); color: var(--mn-paper); }
.mn-btn--navy:hover { background: var(--mn-navy-strong); color: var(--mn-paper); }
.mn-btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }

.mn-copy {
    min-height: 32px; padding: 0 12px;
    border: 1px solid var(--mn-line); border-radius: var(--mn-r);
    background: var(--mn-paper); color: var(--mn-ink-2);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.mn-copy:hover { border-color: var(--mn-navy); color: var(--mn-navy); }
.mn-copy:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; transition: none; }
.mn-copy.is-done { background: var(--mn-done); border-color: var(--mn-done); color: var(--mn-paper); }

/* 히어로 ------------------------------------------------ */
.mn-hero { position: relative; isolation: isolate; font-family: var(--mn-font); background: var(--mn-sub); }
.mn-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.mn-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) 300px; gap: 24px; align-items: center;
    min-height: 500px; padding-top: 56px; padding-bottom: 56px;
}
.mn-hero__copy { min-width: 0; }
.mn-hero__mascot { display: block; width: 100%; height: auto; min-width: 0; align-self: end; }
.mn-hero__title {
    margin: 0 0 16px; font-family: var(--mn-font-display); font-size: 46px; font-weight: 400; line-height: 1.22; letter-spacing: 0; word-break: keep-all;
    color: var(--mn-navy); text-wrap: balance; overflow-wrap: break-word; min-width: 0;
}
.mn-hero__lead { margin: 0 0 32px; max-width: 26em; font-size: 18px; line-height: 1.6; color: var(--mn-ink); text-wrap: pretty; }
.mn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mn-hero__actions .mn-btn { min-width: 184px; }
.mn-hero__first { margin: 20px 0 0; font-size: 14px; color: var(--mn-ink-2); }
.mn-hero__first a { margin-left: 10px; font-weight: 700; color: var(--mn-navy); text-decoration: underline; text-underline-offset: 3px; }
.mn-hero__first a:hover { color: var(--mn-primary); }
.mn-hero__first a:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }

/* 빠른 패널 */
.mn-panel { background: var(--mn-paper); border-radius: var(--mn-r-lg); box-shadow: 0 8px 28px var(--mn-shadow); overflow: hidden; }
.mn-panel__auth { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--mn-line); }
.mn-panel__auth a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-size: 15px; font-weight: 700; color: var(--mn-ink); transition: color 0.15s, background-color 0.15s; }
.mn-panel__auth a + a { border-left: 1px solid var(--mn-line); }
.mn-panel__auth a:hover { color: var(--mn-primary); background: var(--mn-sub); }
.mn-panel__list { list-style: none; margin: 0; padding: 6px 0; }
.mn-panel__list a, .mn-panel__list button {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
    width: 100%; min-height: 52px; padding: 0 20px;
    border: 0; background: none; text-align: left;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--mn-ink); cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.mn-panel__list svg:first-child { color: var(--mn-navy); }
.mn-panel__list svg:last-child { color: var(--mn-ink-3); }
.mn-panel__list a:hover, .mn-panel__list button:hover { background: var(--mn-sub); color: var(--mn-primary); }
.mn-panel__kakao svg:first-child { box-sizing: content-box; margin: -3px; padding: 3px; border-radius: 6px; background: var(--mn-kakao); color: var(--mn-kakao-ink); }
.mn-panel a:focus-visible, .mn-panel button:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: -2px; transition: none; }
/* 로그인 회원 */
.mn-panel__me { padding: 18px 20px 14px; border-bottom: 1px solid var(--mn-line); }
.mn-panel__hello { margin: 0 0 10px; font-size: 16px; color: var(--mn-ink); }
.mn-panel__grade { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 4px; background: var(--mn-primary-soft); color: var(--mn-primary); font-size: 13px; font-weight: 700; }
.mn-panel__mailbox { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--mn-ink-3); }
.mn-panel__mailbox b { color: var(--mn-primary); font-size: 17px; font-variant-numeric: tabular-nums; }
.mn-panel__mailbox .mn-copy { margin-left: auto; }
.mn-panel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--mn-line); border-radius: var(--mn-r); }
.mn-panel__stats a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; font-size: 13px; color: var(--mn-ink-3); }
.mn-panel__stats a + a { border-left: 1px solid var(--mn-line); }
.mn-panel__stats b { font-size: 18px; color: var(--mn-ink); font-variant-numeric: tabular-nums; }
.mn-panel__stats .is-alert b { color: var(--mn-primary); }
.mn-panel__money { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 12px 0 0; font-size: 13px; color: var(--mn-ink-3); }
.mn-panel__money b { text-align: right; color: var(--mn-ink); font-variant-numeric: tabular-nums; }

/* 자주 찾는 서비스 ------------------------------------------------ */
.mn-fav { padding-bottom: 48px; }
.mn-fav .mn-head { padding-bottom: 16px; margin-bottom: 0; border-bottom: 1px solid var(--mn-line); }
.mn-fav__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mn-fav__list li + li { border-left: 1px solid var(--mn-line); }
.mn-fav__list a, .mn-fav__list button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    width: 100%; height: 100%; padding: 28px 20px 8px;
    border: 0; background: none; text-align: left; cursor: pointer;
    font: inherit; color: var(--mn-ink);
}
.mn-fav__list svg { margin-bottom: 14px; color: var(--mn-navy); transition: color 0.15s, transform 0.15s; }
.mn-fav__list strong { font-size: 16px; font-weight: 700; transition: color 0.15s; }
.mn-fav__list span { font-size: 14px; line-height: 1.5; color: var(--mn-ink-3); }
.mn-fav__list a:hover strong, .mn-fav__list button:hover strong, .mn-fav__list a:hover svg, .mn-fav__list button:hover svg { color: var(--mn-primary); }
.mn-fav__list a:hover svg, .mn-fav__list button:hover svg { transform: translateY(-2px); }
.mn-fav__list a:focus-visible, .mn-fav__list button:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: -2px; }

/* 공지사항 (2026-10-29 피드백: 자주 찾는 서비스 바로 아래) */
.mn-notice { padding-top: 0; }
.mn-notice .mn-head { margin-bottom: 0; padding-bottom: 16px; }
.mn-notice__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--mn-ink); }
.mn-notice__list li { border-bottom: 1px solid var(--mn-line); }
.mn-notice__list a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 8px; color: var(--mn-ink); transition: background-color 0.15s, color 0.15s; }
.mn-notice__list a:hover { background: var(--mn-sub); color: var(--mn-primary); }
.mn-notice__list a:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: -2px; }
.mn-notice__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 500; }
.mn-notice__list time { flex-shrink: 0; font-size: 14px; color: var(--mn-ink-3); font-variant-numeric: tabular-nums; }
.mn-notice__empty { padding: 20px 8px; font-size: 15px; color: var(--mn-ink-3); }

/* 관리자 배너 */
.mn-banners { padding-top: 0; }
.mn-banners__slider { border-radius: var(--mn-r-lg); overflow: hidden; }

/* 일본 쇼핑몰 ------------------------------------------------ */
.mn-malls { padding-top: 24px; }
.mn-malls__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mn-mall {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 80px; border: 1px solid var(--mn-line); border-radius: var(--mn-r);
    background: var(--mn-paper); transition: border-color 0.15s, transform 0.15s;
}
.mn-mall b { font-family: var(--mn-font-ja); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--mn-mono); white-space: nowrap; }
.mn-mall span { font-family: var(--mn-font-ja); font-size: 12px; color: var(--mn-ink-3); }
.mn-mall--rakuten b { color: var(--mn-rakuten); }
.mn-mall--mercari b { color: var(--mn-mercari); font-weight: 700; }
.mn-mall--yahoo b { color: var(--mn-yahoo); font-size: 17px; }
.mn-mall--amazon b { font-weight: 700; }
.mn-mall:hover { border-color: var(--mn-navy); transform: translateY(-2px); }
.mn-mall:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }

/* 이용 절차 ------------------------------------------------ */
.mn-flow { position: relative; isolation: isolate; padding: 56px 0 64px; background: var(--mn-sub); font-family: var(--mn-font); overflow: clip; }
.mn-flow__bg { position: absolute; top: 0; right: 0; z-index: -1; width: auto; max-width: 100%; height: 300px; object-fit: contain; object-position: right top; -webkit-mask-image: linear-gradient(to right, transparent, var(--mn-mask) 28%); mask-image: linear-gradient(to right, transparent, var(--mn-mask) 28%); }
.mn-flow .mn-head { max-width: 440px; }
.mn-flow__tabs.flow__tabs { display: inline-flex; width: auto; gap: 0; margin: 0 0 24px; padding: 0; border: 1px solid var(--mn-line); border-radius: var(--mn-r); background: var(--mn-paper); box-shadow: none; }
.mn-flow__tabs .flow__tab { min-width: 140px; height: 44px; padding: 0 20px; border: 0; border-radius: 0; background: none; color: var(--mn-ink-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.mn-flow__tabs .flow__tab:first-child { border-radius: var(--mn-r) 0 0 var(--mn-r); }
.mn-flow__tabs .flow__tab:last-child { border-radius: 0 var(--mn-r) var(--mn-r) 0; }
.mn-flow__tabs .flow__tab:hover { color: var(--mn-primary); }
.mn-flow__tabs .flow__tab.is-active { background: var(--mn-primary); color: var(--mn-paper); }
.mn-flow__tabs .flow__tab:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }
.mn-flow__panel { margin-top: 64px; padding: 32px 16px; background: var(--mn-paper); border-radius: var(--mn-r-lg); box-shadow: 0 8px 28px var(--mn-shadow); }
.mn-flow__list.flow__list { display: none; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; }
.mn-flow__list.flow__list.is-active { display: grid; }
.mn-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px; text-align: center; }
.mn-flow__step:not(:last-child)::after { content: '›'; position: absolute; top: 14px; right: -6px; font-size: 22px; line-height: 1; color: var(--mn-ink-3); }
.mn-flow__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border: 1px solid var(--mn-line); border-radius: 50%; background: var(--mn-sub); color: var(--mn-navy); }
.mn-flow__no { font-size: 13px; font-weight: 700; color: var(--mn-primary); font-variant-numeric: tabular-nums; }
.mn-flow__label { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--mn-ink); text-wrap: balance; }
.mn-flow__desc { font-size: 13px; line-height: 1.5; color: var(--mn-ink-3); text-wrap: balance; }

/* 혜택 ------------------------------------------------ */
.mn-perks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mn-perk { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border: 1px solid var(--mn-line); border-radius: var(--mn-r-lg); overflow: hidden; background: var(--mn-paper); }
.mn-perk img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
.mn-perk__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; min-width: 0; }
.mn-perk__body h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--mn-ink); }
.mn-perk__body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mn-ink-3); }
.mn-perk__body .mn-more { margin-top: auto; align-self: flex-start; }

/* 일본 물류센터 주소 ------------------------------------------------ */
.mn-addr { padding: 0; background: var(--mn-sub); font-family: var(--mn-font); border-top: 1px solid var(--mn-line); }
.mn-addr__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: stretch; }
.mn-addr__photo { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.mn-addr__body { padding: 40px 0; min-width: 0; }
.mn-addr__body .mn-head__sub { margin-bottom: 20px; }
.mn-addr__center + .mn-addr__center { margin-top: 28px; }
.mn-addr__center h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--mn-navy); }
.mn-addr .wha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--mn-line); border-radius: var(--mn-r); background: var(--mn-paper); }
.mn-addr .wha__row { grid-template-columns: 84px minmax(0, 1fr) auto; padding: 12px 14px; border-top: 0; border-bottom: 1px solid var(--mn-line); }
.mn-addr .wha__row:nth-child(odd) { border-right: 1px solid var(--mn-line); }
.mn-addr .wha__row:nth-last-child(-n+2):nth-child(odd), .mn-addr .wha__row:last-child { border-bottom: 0; }
.mn-addr .wha__label { font-size: 14px; color: var(--mn-ink-2); }
.mn-addr .wha__label small { font-size: 12px; color: var(--mn-ink-3); }
.mn-addr .wha__value { font-size: 15px; color: var(--mn-ink); }
.mn-addr .wha__value [lang="ja"] { font-family: var(--mn-font-ja); }
.mn-addr .wha__mailbox { color: var(--mn-primary); }
.mn-addr .wha__copy { min-height: 32px; padding: 0 10px; border: 1px solid var(--mn-line); border-radius: var(--mn-r); background: var(--mn-paper); color: var(--mn-ink-2); font-size: 13px; font-weight: 600; }
.mn-addr .wha__copy:hover { border-color: var(--mn-navy); background: var(--mn-paper); color: var(--mn-navy); }
.mn-addr .wha__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.mn-addr .wha__note { font-size: 14px; color: var(--mn-ink-2); }
.mn-addr .wha__note a { color: var(--mn-primary); }
.mn-addr .wha__copy-all { flex-shrink: 0; height: 48px; padding: 0 24px; border: 0; border-radius: var(--mn-r); background: var(--mn-primary); color: var(--mn-paper); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 0.15s; }
.mn-addr .wha__copy-all:hover { background: var(--mn-primary-strong); }
.mn-addr .wha__copy.is-done, .mn-addr .wha__copy-all.is-done { background: var(--mn-done); border-color: var(--mn-done); color: var(--mn-paper); }
.mn-addr .wha__copy:focus-visible, .mn-addr .wha__copy-all:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }

/* 고객센터 · 입금 · 공지 · 통관부호 ------------------------------------------------ */
#address + #cs.mn-info, .mn-info { padding: 44px 0 56px; background: var(--mn-paper); border-top: 1px solid var(--mn-line); font-family: var(--mn-font); }
.mn-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mn-info__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 28px; min-width: 0; }
.mn-info__col:first-child { padding-left: 0; }
.mn-info__col:last-child { padding-right: 0; }
.mn-info__col + .mn-info__col { border-left: 1px solid var(--mn-line); }
.mn-info__head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mn-info__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--mn-ink); }
.mn-info__title svg { color: var(--mn-navy); }
.mn-info__phone { margin: 4px 0 0; font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--mn-navy); font-variant-numeric: tabular-nums; }
.mn-info__phone--empty { font-size: 18px; color: var(--mn-ink-3); }
.mn-info__muted { margin: 0; font-size: 14px; line-height: 1.65; color: var(--mn-ink-3); }
.mn-info__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mn-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--mn-line); border-radius: var(--mn-r); font-size: 14px; font-weight: 600; color: var(--mn-ink); transition: border-color 0.15s, color 0.15s; }
.mn-chip:hover { border-color: var(--mn-navy); color: var(--mn-navy); }
.mn-chip:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }
.mn-chip--kakao { border-color: var(--mn-kakao); background: var(--mn-kakao); color: var(--mn-kakao-ink); }
.mn-chip--kakao:hover { border-color: var(--mn-kakao-ink); color: var(--mn-kakao-ink); }
.mn-info__bank { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; width: 100%; }
.mn-info__bank span { font-size: 14px; font-weight: 700; color: var(--mn-ink-2); }
.mn-info__bank b { font-size: 17px; color: var(--mn-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mn-info__bank small { grid-column: 1 / -1; font-size: 13px; color: var(--mn-ink-3); }
.mn-info__bank .mn-copy { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.mn-info__fx { width: 100%; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--mn-line); }
.mn-info__fx div { display: flex; justify-content: space-between; gap: 12px; }
.mn-info__fx dt { font-size: 14px; color: var(--mn-ink-3); }
.mn-info__fx dd { margin: 0; font-size: 16px; font-weight: 800; color: var(--mn-navy); font-variant-numeric: tabular-nums; }
.mn-info__notices { list-style: none; margin: 0; padding: 0; width: 100%; }
.mn-info__notices li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--mn-line); font-size: 14px; }
.mn-info__notices li:last-child { border-bottom: 0; }
.mn-info__notices a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mn-ink); }
.mn-info__notices a:hover { color: var(--mn-primary); }
.mn-info__notices a:focus-visible { outline: 2px solid var(--mn-focus); outline-offset: 2px; }
.mn-info__notices time { flex-shrink: 0; color: var(--mn-ink-3); font-variant-numeric: tabular-nums; }
.mn-new { margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--mn-primary); }

/* 반응형 ------------------------------------------------ */
@media (max-width: 1100px) {
    .mn-fav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mn-fav__list li:nth-child(3n+1) { border-left: 0; }
    .mn-fav__list li:nth-child(n+4) { border-top: 1px solid var(--mn-line); }
    .mn-malls__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mn-flow__list.flow__list.is-active { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
    .mn-flow__step:nth-child(4n)::after { display: none; }
    .mn-perks__list { grid-template-columns: minmax(0, 1fr); }
    .mn-perk { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .mn-addr .wha { grid-template-columns: minmax(0, 1fr); }
    .mn-addr .wha__row:nth-child(odd) { border-right: 0; }
    .mn-addr .wha__row:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--mn-line); }
    .mn-addr .wha__row:last-child { border-bottom: 0; }
    .mn-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .mn-info__col { padding: 0 24px 0 0; }
    .mn-info__col + .mn-info__col { border-left: 0; }
    .mn-info__col:nth-child(even) { padding: 0 0 0 24px; border-left: 1px solid var(--mn-line); }
}
@media (max-width: 860px) {
    .mn-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 24px; }
    .mn-hero__copy { padding: 0; }
    .mn-hero__mascot { order: -1; width: min(300px, 72vw); margin-inline: auto; }
    .mn-hero__title { font-size: 32px; }
    .mn-hero__lead { font-size: 16px; margin-bottom: 24px; }
    .mn-panel { box-shadow: none; border: 1px solid var(--mn-line); }
    .mn-flow__bg { height: 180px; opacity: 0.35; }
    .mn-flow__panel { margin-top: 24px; }
    .mn-addr__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mn-addr__photo { height: 220px; min-height: 0; margin-inline: -16px; width: calc(100% + 32px); max-width: none; }
    .mn-addr__body { padding: 28px 0 40px; }
}
@media (max-width: 640px) {
    .mn-section { padding: 40px 0; }
    .mn-head__title { font-size: 22px; }
    .mn-hero__title { font-size: 28px; }
    .mn-hero__actions { flex-direction: column; }
    .mn-hero__actions .mn-btn { width: 100%; }
    .mn-fav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mn-fav__list li:nth-child(n) { border-left: 0; border-top: 1px solid var(--mn-line); }
    .mn-fav__list li:nth-child(even) { border-left: 1px solid var(--mn-line); }
    .mn-fav__list li:nth-child(-n+2) { border-top: 0; }
    .mn-fav__list a, .mn-fav__list button { padding: 20px 14px; }
    .mn-fav__list svg { margin-bottom: 6px; }
    .mn-malls__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mn-mall { height: 68px; }
    .mn-mall b { font-size: 17px; }
    .mn-flow__tabs.flow__tabs { display: flex; }
    .mn-flow__tabs .flow__tab { flex: 1; min-width: 0; }
    .mn-flow__panel { padding: 8px 16px; }
    .mn-flow__list.flow__list.is-active { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .mn-flow__step { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 0; padding: 12px 0; text-align: left; }
    .mn-flow__step + .mn-flow__step { border-top: 1px solid var(--mn-line); }
    .mn-flow__step::after { display: none; }
    .mn-flow__ic { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
    .mn-flow__no { grid-row: span 2; }
    .mn-flow__label, .mn-flow__desc { grid-column: 3; text-wrap: wrap; }
    .mn-perk { grid-template-columns: minmax(0, 1fr); }
    .mn-perk img { height: 180px; }
    .mn-addr .wha__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
    .mn-addr .wha__label { grid-column: 1 / -1; }
    .mn-addr .wha__foot { flex-direction: column; align-items: stretch; }
    .mn-info__grid { grid-template-columns: minmax(0, 1fr); }
    .mn-info__col, .mn-info__col:nth-child(even) { padding: 0 0 28px; border-left: 0; border-bottom: 1px solid var(--mn-line); }
    .mn-info__col:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mn-btn, .mn-copy, .mn-more, .mn-mall, .mn-notice__list a, .mn-fav__list svg, .mn-panel__list a, .mn-panel__list button, .mn-chip { transition: none; }
    .mn-mall:hover, .mn-fav__list a:hover svg, .mn-fav__list button:hover svg, .mn-btn:active { transform: none; }
}