/* ============================================
   ASAP — modern Toss-inspired redesign
   ============================================ */

/* 폰트는 헤더의 jsDelivr Pretendard dynamic-subset CSS 가 제공한다.
   (예전 로컬 @font-face 는 /assets/fonts/PretendardVariable.subset.woff2 가 서버에 없어 페이지마다 404 가 났다 — 2026-09-30 제거) */

:root {
    --blue: #3182f6;
    --blue-strong: #1b64da;
    --blue-soft: #e8f3ff;
    --violet: #8b5cf6;
    --violet-soft: #f3eeff;
    --mint: #14ae5c;
    --mint-soft: #e6f7ee;
    --coral: #ff6b6b;
    --coral-soft: #ffeded;
    --red: #f04452;

    --text-1: #191f28;
    --text-2: #4e5968;
    --text-3: #8b95a1;
    --line: #e5e8eb;
    --line-soft: #f2f4f6;
    --bg: #ffffff;
    --bg-soft: #f9fafb;
    --bg-tint: #f4f6f8;

    --shadow-sm: 0 1px 2px rgba(17,24,39,0.04);
    --shadow-md: 0 4px 12px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
    --shadow-lg: 0 12px 32px rgba(17,24,39,0.08), 0 2px 4px rgba(17,24,39,0.04);
    --shadow-blue: 0 8px 20px rgba(49,130,246,0.25);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--text-1);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dt, dd { margin: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; vertical-align: middle; }

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; border-radius: 14px; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover { background: var(--blue-strong); transform: translateY(-1px); }
.btn--ghost { background: var(--bg-soft); color: var(--text-1); }
.btn--ghost:hover { background: var(--line-soft); }
.btn--white { background: #fff; color: var(--text-1); }
.btn--white:hover { background: var(--bg-soft); }

/* ============================================
   Sticky navigation
   ============================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nav.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}
.nav__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}
.nav__logo-clip {
    display: block;
    height: 48px;
    overflow: hidden;
    line-height: 0;
}
.nav__logo-img {
    height: 72px;
    width: auto;
    display: block;
}
.nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav__item {
    position: relative;
    /* 호버 영역이 끊기지 않도록 padding 으로 sub 까지 연결 */
}
.nav__link {
    position: relative;
    display: inline-block;
    padding: 10px 16px;
    color: var(--text-2);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    transition: color 0.18s ease;
    cursor: pointer;
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--text-1);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.22s ease;
}
.nav__item:hover .nav__link { color: var(--text-1); }
.nav__item:hover .nav__link::after { width: calc(100% - 32px); }

/* Dropdown */
.nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}
.nav__item:hover .nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* 메뉴와 드롭다운 사이의 보이지 않는 다리 — 호버 끊김 방지 */
.nav__sub::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.nav__sub a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav__sub a:hover {
    background: var(--blue-soft);
    color: var(--blue);
}

.nav__cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--line-soft);
    margin-left: 4px;
}
.nav__login {
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-2);
    transition: color 0.15s;
}
.nav__login:hover { color: var(--text-1); }
.nav__signup { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
.nav__user {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav__user strong { color: var(--blue); font-weight: 800; }

/* Mobile hamburger + drawer (hidden on desktop) */
.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
}
.nav__toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-1);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav.is-menu-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-menu-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__menu-cta { display: none; }
.nav__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 90;
}
.nav.is-menu-open .nav__backdrop { opacity: 1; }

/* ============================================
   Hero
   ============================================ */
.hero {
    position: relative;
    padding: 96px 0 120px;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 60% at 80% 10%, rgba(49,130,246,0.15), transparent 60%),
        radial-gradient(50% 50% at 10% 90%, rgba(139,92,246,0.12), transparent 60%),
        linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
    z-index: -1;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    box-shadow: var(--shadow-sm);
}
.hero__badge-dot {
    width: 8px;
    height: 8px;
    background: var(--mint);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(20,174,92,0.18);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.7; }
}
.hero__title {
    margin: 20px 0 16px;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--text-1);
}
.hero__title-grad {
    background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero__desc {
    margin: 0 0 36px;
    font-size: 19px;
    color: var(--text-2);
    line-height: 1.6;
}
.hero__actions { display: flex; gap: 12px; margin-bottom: 56px; flex-wrap: wrap; }
.hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}
.hero__metric-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
}
.hero__metric-num span {
    font-size: 16px;
    color: var(--text-3);
    font-weight: 600;
    margin-left: 4px;
}
.hero__metric-label { font-size: 14px; color: var(--text-2); margin-top: 2px; }

/* Hero visual */
.hero__visual { position: relative; min-height: 460px; }
.hero-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line-soft);
}
.hero-card--main {
    width: 100%;
    padding: 28px;
    position: relative;
    z-index: 2;
}
.hero-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.hero-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--blue-soft);
    color: var(--blue);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.hero-card__pill::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--blue);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(49,130,246,0.2);
    animation: pulse 1.6s ease-in-out infinite;
}
.hero-card__time { font-size: 12px; color: var(--text-3); }
.hero-card__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.hero-card__progress {
    height: 8px;
    background: var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}
.hero-card__progress-fill {
    height: 100%;
    width: 62%;
    background: linear-gradient(90deg, var(--blue), var(--violet));
    border-radius: 999px;
    animation: progress 2.6s ease-in-out infinite alternate;
}
@keyframes progress {
    from { width: 50%; }
    to { width: 72%; }
}
.hero-card__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}
.hero-card__step {
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--text-3);
}
.hero-card__step.done { background: var(--mint-soft); color: var(--mint); }
.hero-card__step.active { background: var(--blue-soft); color: var(--blue); }

.hero-card--float-1,
.hero-card--float-2 {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    z-index: 3;
}
.hero-card--float-1 { top: -28px; right: -16px; animation: float 4s ease-in-out infinite; }
.hero-card--float-2 { bottom: -24px; left: -12px; animation: float 4s ease-in-out infinite 1.5s; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.hero-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--coral-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.hero-card__icon--blue { background: var(--blue-soft); }
.hero-card__small-title { font-size: 13px; font-weight: 700; color: var(--text-1); }
.hero-card__small-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ============================================
   Section base
   ============================================ */
.section { padding: 100px 0; }
.section--gray { background: var(--bg-soft); }
.section__head { text-align: center; margin-bottom: 56px; }
.section__head--row {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}
.section__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: var(--blue-soft);
    color: var(--blue);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
.section__title {
    margin: 0 0 14px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}
.section__desc {
    margin: 0 auto;
    font-size: 18px;
    color: var(--text-2);
    max-width: 540px;
}

/* ============================================
   Services
   ============================================ */
.services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.service {
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}
.service:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-soft);
}
.service__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}
.service--blue .service__icon { background: var(--blue-soft); }
.service--violet .service__icon { background: var(--violet-soft); }
.service--mint .service__icon { background: var(--mint-soft); }
.service--coral .service__icon { background: var(--coral-soft); }
.service__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.service__desc {
    flex: 1;
    margin: 0 0 20px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}
.service__cta {
    font-weight: 700;
    color: var(--blue);
    font-size: 14px;
    transition: gap 0.15s;
}
.service:hover .service__cta { color: var(--blue-strong); }

/* ============================================
   Flow tabs + steps
   ============================================ */
.flow__tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    margin: 0 auto 48px;
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}
.flow__tab {
    padding: 10px 24px;
    border-radius: 10px;
    color: var(--text-2);
    font-weight: 700;
    font-size: 15px;
    transition: background 0.15s, color 0.15s;
}
.flow__tab.is-active { background: var(--text-1); color: #fff; }

.flow__list {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.flow__list.is-active { display: grid; }
.flow__step {
    padding: 24px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
    transition: transform 0.18s, box-shadow 0.18s;
}
.flow__step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.flow__num {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.flow__label { display: block; font-size: 16px; font-weight: 700; color: var(--text-1); }

/* ============================================
   Features
   ============================================ */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.feature {
    padding: 28px;
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    transition: background 0.18s, transform 0.18s;
}
.feature:hover { background: #fff; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.feature__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.feature__top h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.feature__chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.feature__chip--red { background: var(--coral-soft); color: var(--red); }
.feature__desc { margin: 0 0 16px; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.feature__link { font-weight: 700; color: var(--blue); font-size: 14px; }

/* ============================================
   Update cards
   ============================================ */
.updates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.update-card {
    background: #fff;
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
}
.update-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}
.update-card__head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.update-card__more { font-size: 13px; color: var(--text-3); font-weight: 600; }
.update-card__more:hover { color: var(--text-1); }
.update-card__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}
.update-card__list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-1);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.update-card__list li a:hover { color: var(--blue); }
.update-card__date { font-size: 12px; color: var(--text-3); flex-shrink: 0; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot--blue { background: var(--blue); }
.dot--mint { background: var(--mint); }
.dot--violet { background: var(--violet); }

/* ============================================
   Address cards
   ============================================ */
.addr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.addr__card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: box-shadow 0.18s, transform 0.18s;
}
.addr__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.addr__flag {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 12px;
}
.addr__card h3 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.addr__table {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px 16px;
    font-size: 14px;
    margin-bottom: 24px;
}
.addr__table dt { color: var(--text-3); font-weight: 600; }
.addr__table dd { color: var(--text-1); line-height: 1.55; }
.addr__table em { color: var(--red); font-style: normal; font-weight: 700; }
.addr__copy {
    width: 100%;
    height: 44px;
    background: var(--bg-soft);
    color: var(--text-1);
    border-radius: 12px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}
.addr__copy:hover { background: var(--blue); color: #fff; }
.addr__copy.is-done { background: var(--mint); color: #fff; }

/* ============================================
   CTA band
   ============================================ */
.cta {
    background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
    padding: 100px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta::before, .cta::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
}
.cta::before { width: 360px; height: 360px; top: -120px; right: -80px; }
.cta::after { width: 240px; height: 240px; bottom: -100px; left: 10%; }
.cta__inner { position: relative; text-align: center; z-index: 1; }
.cta__title {
    margin: 0 0 16px;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.cta__desc {
    margin: 0 0 36px;
    font-size: 19px;
    opacity: 0.92;
    line-height: 1.55;
}
.cta__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta .btn--primary {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.cta .btn--primary:hover { background: var(--bg-soft); }
.cta .btn--white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.cta .btn--white:hover { background: rgba(255,255,255,0.12); }

/* ============================================
   Customer service
   ============================================ */
.cs {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}
.cs__phone, .cs__bank {
    background: var(--bg-soft);
    padding: 40px;
    border-radius: var(--radius-lg);
}
.cs__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: #fff;
    color: var(--text-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}
.cs h3 {
    margin: 0 0 28px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.cs__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 24px; }
.cs__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    background: #fff;
    border-radius: 12px;
}
.cs__list li span { color: var(--text-3); font-size: 13px; font-weight: 600; }
.cs__list li strong { font-size: 16px; font-weight: 700; }
.cs__hours { margin: 0; color: var(--text-2); font-size: 14px; font-weight: 600; }
.cs__hours span { color: var(--text-3); font-weight: 500; }
.cs__bank { display: flex; flex-direction: column; }
.cs__acct {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 4px 0 6px;
}
.cs__owner { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }
.cs__bank .btn { background: #fff; }
.cs__bank .btn.is-done { background: var(--mint); color: #fff; }
/* 입금계좌가 여러 건일 때 두 번째부터 구분선 */
.cs__bank-item--more { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.cs__empty,
.addr__empty { color: var(--text-3); font-size: 14px; margin: 0; }

/* ============================================
   구매대행 적용환율 (화폐관리 → 메인 하단)
   ============================================ */
.fxrate {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 18px 22px;
    background: var(--bg-2, #f6f8fa);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.fxrate__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: -0.01em;
}
.fxrate__list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fxrate__item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
}
.fxrate__code { font-size: 13px; color: var(--text-3); font-weight: 600; }
.fxrate__won { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }

/* ============================================
   Member bar + member panel (logged-in)
   ============================================ */
.mbar {
    background: var(--text-1);
    color: #c6cdd5;
    font-size: 13px;
}
.mbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
}
.mbar__logout {
    color: #fff;
    font-weight: 700;
    transition: color 0.15s;
}
.mbar__logout:hover { color: var(--blue-soft); }
.mbar__sep { color: #6b7684; }
.mbar__bal { color: #c6cdd5; }
.mbar__bal strong { color: #fff; font-weight: 800; margin-left: 4px; }

.member {
    background: var(--bg-soft);
    padding: 32px 0 48px;
    border-bottom: 1px solid var(--line);
}
.member__grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: flex-start;
}
.member__menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: #fff;
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
}
.member__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-1);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.member__link:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-1px);
}
.member__card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}
.member__hello {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}
.member__hello strong { color: var(--blue); font-weight: 800; }
.member__actions {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.member__btn {
    flex: 1;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    transition: filter 0.15s, transform 0.12s;
}
.member__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.member__btn--ghost {
    background: var(--bg-soft);
    color: var(--text-1);
    border: 1px solid var(--line);
}
.member__btn--ghost:hover { background: var(--line-soft); filter: none; }
.member__stats {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}
.member__stats dt { color: var(--text-3); font-weight: 600; }
.member__stats dd { color: var(--text-1); font-weight: 800; text-align: right; }
.member__stats dd span { color: var(--text-3); font-weight: 600; font-size: 12px; margin-left: 4px; }

@media (max-width: 900px) {
    .member__grid { grid-template-columns: 1fr; }
    .member__menu { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .member__menu { grid-template-columns: repeat(2, 1fr); }
    .mbar__inner { justify-content: center; }
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: var(--text-1);
    color: #c6cdd5;
    padding: 64px 0 48px;
    font-size: 14px;
}
.footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand { display: inline-flex; align-items: center; }
.footer__brand-clip {
    display: block;
    height: 56px;
    overflow: hidden;
    line-height: 0;
}
.footer__brand-img {
    height: 84px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}
.footer__nav { display: flex; gap: 24px; }
.footer__nav a { color: #c6cdd5; font-weight: 600; }
.footer__nav a:hover { color: #fff; }
.footer__info p { margin: 6px 0; color: #8b95a1; }
.footer__info strong { color: #fff; }
.footer__legal {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: #6b7684;
    line-height: 1.8;
}

/* ============================================
   Right quick-action bar
   ============================================ */
/* .qbar — 파일 맨 아래 「오른쪽 아래 동그라미 퀵버튼」 절 (2026-09-30 개편) */

/* ============================================
   Customs schedule calendar popup
   ============================================ */
.cscal__backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 200;
}
body.is-cscal-open { overflow: hidden; }

.cscal {
    position: fixed;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
    width: 370px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
    padding: 24px;
    animation: cscalIn 0.25s ease;
}
@keyframes cscalIn {
    from { opacity: 0; transform: translateY(-50%) translateX(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

.cscal__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.cscal__title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
}
.cscal__nav {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text-2);
    transition: background 0.12s;
}
.cscal__nav:hover { background: var(--bg-soft); }
.cscal__close {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 22px;
    color: var(--text-3);
    transition: background 0.12s, color 0.12s;
}
.cscal__close:hover { background: var(--bg-soft); color: var(--text-1); }

/* Day-of-week header */
.cscal__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.cscal__dow-sun { color: var(--coral); }
.cscal__dow-sat { color: var(--blue); }

/* Calendar grid */
.cscal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cscal__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 42px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
    border-radius: 10px;
    cursor: default;
    transition: background 0.12s;
}
.cscal__cell--empty { visibility: hidden; }
.cscal__cell--sun { color: var(--coral); }
.cscal__cell--sat { color: var(--blue); }
.cscal__cell--today {
    font-weight: 800;
    background: var(--bg-soft);
    box-shadow: inset 0 0 0 2px var(--blue);
}
.cscal__cell--has {
    cursor: pointer;
    font-weight: 700;
    background: var(--coral-soft);
    color: #d63031;
}
.cscal__cell--has:hover {
    background: var(--coral);
    color: #fff;
}
.cscal__cell--has:hover .cscal__dot { background: #fff; }

.cscal__dot {
    position: absolute;
    bottom: 4px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--coral);
}

/* Detail panel (shown on date click) */
.cscal__detail {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border-radius: 12px;
    border-left: 3px solid var(--coral);
}
.cscal__detail-date {
    font-size: 13px;
    font-weight: 800;
    color: var(--coral);
    margin-bottom: 6px;
}
.cscal__detail-list {
    list-style: none;
    margin: 0; padding: 0;
}
.cscal__detail-list li {
    position: relative;
    padding: 4px 0 4px 14px;
    font-size: 14px;
    color: var(--text-1);
    line-height: 1.5;
}
.cscal__detail-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--coral);
}

/* Upcoming schedule list */
.cscal__upcoming {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.cscal__upcoming-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-2);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.cscal__upcoming-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cscal__upcoming-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
}
.cscal__upcoming-date {
    flex-shrink: 0;
    width: 44px;
    font-weight: 800;
    color: var(--coral);
    font-variant-numeric: tabular-nums;
}
.cscal__upcoming-text {
    color: var(--text-1);
    line-height: 1.45;
}
.cscal__upcoming-empty {
    color: var(--text-3);
    font-size: 13px;
}

/* ============================================
   Address book (배송주소록)
   ============================================ */
.addr-book {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    padding: 32px;
}
.addr-book__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--text-1);
}
.addr-book__search {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 16px;
}
.addr-book__search-input {
    width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}
.addr-book__search-btn {
    padding: 8px 18px;
    background: var(--text-1);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
.addr-book__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--line);
}
.addr-book__table thead th {
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    text-align: center;
    background: var(--bg-soft);
}
.addr-book__table tbody td {
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-1);
}
.addr-book__td-addr { max-width: 300px; }
.addr-book__link { color: var(--blue); font-weight: 600; }
.addr-book__link:hover { text-decoration: underline; }
.addr-book__btn-del {
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--coral);
    color: var(--coral);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.addr-book__btn-del:hover { background: var(--coral); color: #fff; }
.addr-book__empty { text-align: center; color: var(--text-3); padding: 32px 0; }
.addr-book__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.addr-book__btn-add {
    background: var(--coral);
    box-shadow: none;
    border-radius: 8px;
}
.addr-book__btn-add:hover { background: #d63031; }

/* Address form */
.addr-form__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px dotted var(--coral);
}
.addr-form__table th {
    width: 180px;
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.addr-form__table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}
.addr-form__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}
.addr-form__input--half { width: calc(50% - 4px); }
.addr-form__input--md { width: 60%; }
.addr-form__select {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
    margin-right: 8px;
}
.addr-form__td-row { display: flex; gap: 8px; flex-wrap: wrap; }
.addr-form__radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.addr-form__btn-zip {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 6px;
}
.addr-form__btn-zip:hover { background: var(--bg-soft); }
.addr-form__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}
.addr-form__btn-save {
    min-width: 160px;
    background: var(--coral);
    box-shadow: none;
}
.addr-form__btn-save:hover { background: #d63031; }

@media (max-width: 640px) {
    .addr-book { padding: 20px; }
    .addr-form__table th { width: 120px; font-size: 13px; padding: 10px; }
    .addr-form__input--half { width: 100%; }
    .addr-form__td-row { flex-direction: column; }
}

/* ============================================
   Deposit (예치금)
   ============================================ */
.dep {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    padding: 32px;
}
.dep__balance-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-radius: 12px;
    margin-bottom: 24px;
}
.dep__balance-label { font-size: 15px; font-weight: 700; color: var(--text-1); }
.dep__balance-amount { font-size: 22px; font-weight: 800; color: var(--coral); }

.dep__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
.dep__panel {
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 20px;
}
.dep__panel-title { font-size: 15px; font-weight: 800; color: var(--text-1); margin: 0 0 12px; }
.dep__guide { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.dep__guide p { margin: 0 0 6px; }

.dep__charge-form { display: flex; flex-direction: column; gap: 12px; }
.dep__charge-label { font-size: 14px; font-weight: 700; color: var(--text-1); }
.dep__charge-input {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 16px;
    text-align: right;
}
.dep__charge-btn { width: 100%; }

/* 그리드 아이템 기본 min-width:auto 로 트랙이 밀려 360px 기기에서 가로 스크롤이 생겼다 */
.dep__left, .dep__right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dep__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dep__panel {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 20px 24px;
}
.dep__charge-inline {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
/* number 입력칸의 기본 최소 폭 때문에 390px 폭에서 [충전] 버튼이 4px 밖으로 밀렸다 */
.dep__charge-inline .dep__charge-input { flex: 1 1 auto; min-width: 0; }
.dep__charge-submit {
    padding: 8px 24px;
    background: var(--coral);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.dep__charge-submit:hover { background: #d63031; }

.dep__auto-pay { background: #fafbfc; }
.dep__auto-pay-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}
.dep__auto-pay-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--coral); }
.dep__auto-pay-info {
    margin: 10px 0 12px 26px;
    padding: 0;
    list-style: disc;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.7;
}
.dep__auto-pay-btn {
    padding: 6px 20px;
    background: var(--text-1);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.dep__auto-pay-btn:hover { background: #333; }

.dep__refund-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--text-1);
}
.dep__refund-info {
    margin: 0 0 16px;
    padding: 0 0 0 18px;
    list-style: disc;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
}
.dep__refund-form { display: flex; flex-direction: column; gap: 12px; }
.dep__refund-row { display: flex; gap: 12px; }
.dep__refund-row label {
    width: 72px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    flex-shrink: 0;
    padding-top: 8px;
}
.dep__refund-field { display: flex; align-items: center; gap: 6px; flex: 1; }
.dep__refund-unit { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.dep__refund-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dep__refund-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
}
.dep__refund-row--stack { align-items: flex-start; }
.dep__refund-actions { display: flex; justify-content: flex-end; }
.dep__refund-btn {
    padding: 8px 28px;
    background: var(--text-1);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.dep__refund-btn:hover { background: #333; }
.dep__cancel-btn {
    padding: 2px 8px;
    background: #fff;
    color: #d63031;
    border: 1px solid #d63031;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.dep__cancel-btn:hover { background: #ffeded; }

.dep__history-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--coral);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--coral);
}
.dep__table {
    width: 100%;
    border-collapse: collapse;
}
.dep__table thead th {
    padding: 10px 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    text-align: center;
    background: var(--bg-soft);
}
.dep__table tbody td {
    padding: 10px 8px;
    font-size: 13px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-1);
}
.dep__td-center { text-align: center; }
.dep__td-right { text-align: right; font-variant-numeric: tabular-nums; }
.dep__empty { text-align: center; color: var(--text-3); padding: 28px 0; }
.dep__status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.dep__status--pending { background: #fff8e1; color: #f59f00; }
.dep__status--approved { background: #e6f7ee; color: #14ae5c; }
.dep__status--rejected { background: #ffeded; color: #d63031; }
.dep__status--cancelled { background: var(--bg-soft); color: var(--text-3); }
.dep__pager {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
}
.dep__pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-2);
    text-decoration: none;
    transition: background 0.15s;
}
.dep__pager a:hover { background: var(--bg-soft); }
.dep__pager a.is-active {
    background: var(--text-1);
    color: #fff;
    border-color: var(--text-1);
    font-weight: 700;
}

/* Deposit payment */
.dep__pay-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--text-1);
}
.dep__pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.dep__pay-summary {
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 24px;
}
.dep__pay-info { font-size: 15px; margin: 0; }
.dep__pay-info-label { color: var(--coral); font-weight: 700; }
.dep__pay-info strong { margin-left: 8px; }

/* 카드결제는 좌측 안내가 없어 1열로 세우고 폭을 묶는다 (전폭으로 늘리면 허전하다) */
.dep__pay-grid--single {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
}

.dep__pay-form-wrap {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 24px;
}
.dep__pay-form-title { font-size: 17px; font-weight: 800; margin: 0 0 16px; color: var(--text-1); }
.dep__pay-form { display: flex; flex-direction: column; gap: 0; }
.dep__pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
}
.dep__pay-row--total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.dep__pay-total { font-size: 18px; color: var(--coral); font-weight: 800; }
.dep__pay-method {
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
}
.dep__pay-radio { font-size: 14px; font-weight: 700; cursor: pointer; }
.dep__pay-bank {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--blue);
    line-height: 1.5;
    cursor: pointer;
}
.dep__pay-input {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
    width: 160px;
    text-align: right;
}
/* Payment list */
.dep__pay-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.dep__pay-chip {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--bg-soft);
    color: var(--text-2);
    text-decoration: none;
    border: 1px solid var(--line);
    transition: background 0.12s, color 0.12s;
}
.dep__pay-chip:hover { background: var(--line-soft); }
.dep__pay-chip.is-active { background: var(--text-1); color: #fff; border-color: var(--text-1); }
.dep__pay-chip--pending.is-active { background: var(--coral); border-color: var(--coral); }
.dep__pay-chip--done.is-active { background: var(--mint); border-color: var(--mint); }
.dep__pay-link {
    display: inline-block;
    padding: 4px 12px;
    background: var(--coral);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.dep__pay-link:hover { background: #d63031; }

.dep__pay-notice {
    background: #1a7a4c;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
    line-height: 1.5;
}
.dep__pay-divider { height: 1px; background: var(--line-soft); margin: 8px 0; }
.dep__pay-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.dep__pay-btn-ok { flex: 1; background: var(--coral); box-shadow: none; }
.dep__pay-btn-ok:hover { background: #d63031; }

/* Card deposit */
.dep__card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px;
    background: var(--bg-soft);
    border-radius: 12px;
    margin-bottom: 24px;
}
.dep__card-balance { font-size: 16px; color: var(--text-2); }
.dep__card-balance strong { margin-left: 12px; font-size: 28px; }
.dep__card-charge { display: flex; gap: 8px; }
.dep__card-charge-input {
    width: 220px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 16px;
    text-align: right;
}
.dep__card-charge-btn {
    padding: 12px 28px;
    background: var(--coral);
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}
.dep__card-charge-btn:hover { background: #d63031; }

.dep__card-refund {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}
.dep__card-refund-title { font-size: 16px; font-weight: 800; color: var(--coral); margin: 0 0 12px; }
.dep__card-refund-guide {
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
}
.dep__card-refund-guide p { margin: 0; }
.dep__card-refund-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.dep__card-refund-field { display: flex; flex-direction: column; gap: 8px; }
.dep__card-refund-field label { font-size: 14px; font-weight: 700; color: var(--text-1); }
.dep__card-refund-input-wrap { display: flex; align-items: center; gap: 6px; }
.dep__card-refund-input {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}
.dep__card-refund-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.dep__card-refund-btn {
    padding: 8px 24px;
    background: var(--text-1);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
.dep__card-refund-btn:hover { background: #333; }

.dep__card-filters {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 12px;
}
.dep__card-filter {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--text-1);
    color: #fff;
    opacity: 0.4;
    cursor: pointer;
}
.dep__card-filter.is-active { opacity: 1; }
.dep__card-filter--charge { background: var(--coral); }
.dep__card-filter--use { background: var(--blue); }
.dep__card-filter--refund { background: var(--violet); }

@media (max-width: 768px) {
    .dep { padding: 20px; }
    .dep__grid, .dep__pay-grid { grid-template-columns: 1fr; }
    .dep__card-refund-row { grid-template-columns: 1fr; }
    .dep__card-charge-input { width: 160px; }
}

/* ============================================
   Notifications (알림톡 설정)
   ============================================ */
.notif__guide {
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 12px;
}
.notif__example {
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 24px;
}
.notif__table {
    width: 100%;
    border-collapse: collapse;
}
.notif__table th {
    width: 100px;
    padding: 14px 16px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}
.notif__table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.notif__textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}
.notif__textarea:focus { border-color: var(--blue); outline: none; }
.notif__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

/* ============================================
   Notice board (공지사항)
   ============================================ */
.ntc__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 24px;
}
.ntc__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--text-1);
}
.ntc__table thead th {
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.ntc__th-num { width: 70px; }
.ntc__th-date { width: 110px; }
.ntc__th-views { width: 70px; }
.ntc__table tbody td {
    padding: 13px 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-1);
}
.ntc__td-center { text-align: center; }
.ntc__td-num { color: var(--text-3); }
.ntc__row--pinned { background: var(--bg-soft); }
.ntc__pin {
    display: inline-block;
    padding: 2px 8px;
    background: var(--coral);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
}
.ntc__link {
    color: var(--text-1);
    font-weight: 500;
    transition: color 0.12s;
}
.ntc__link:hover { color: var(--blue); }
.ntc__empty { text-align: center; color: var(--text-3); padding: 40px 0; }

.ntc__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.ntc__btn-write { height: 40px; padding: 0 20px; font-size: 14px; }

.ntc__pager {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
}
.ntc__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    transition: background 0.12s;
}
.ntc__page:hover { background: var(--bg-soft); }
.ntc__page.is-active { background: var(--text-1); color: #fff; }

.ntc__search {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}
.ntc__search-select {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
}
.ntc__search-input {
    width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
}
.ntc__search-btn {
    padding: 8px 18px;
    background: var(--text-1);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}
.ntc__search-btn:hover { background: #333; }

/* Notice view */
.ntc__view-head {
    border-top: 2px solid var(--text-1);
    border-bottom: 1px solid var(--line);
    padding: 20px 16px;
}
.ntc__view-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ntc__view-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-3);
}
.ntc__view-body {
    padding: 28px 16px;
    min-height: 200px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-1);
    border-bottom: 1px solid var(--line);
}
.ntc__view-body img { max-width: 100%; height: auto; }
.ntc__view-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}
.ntc__view-admin { display: flex; gap: 6px; }
.ntc__btn-del { color: var(--coral); border-color: var(--coral); }
.ntc__btn-del:hover { background: var(--coral-soft); }

/* Notice write */
.ntc__write-form { display: flex; flex-direction: column; gap: 16px; }
.ntc__write-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ntc__write-row--editor { align-items: flex-start; flex-direction: column; }
.ntc__write-label {
    flex: 0 0 70px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
}
.ntc__write-input {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
}
.ntc__write-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}
.ntc__write-textarea { width: 100%; min-height: 600px; }
.ntc__write-editor-full {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ntc__write-editor-full .ck-editor { width: 100%; }
.ntc__write-editor-full .ck-editor__editable_inline { min-height: 600px; }
.ntc__write-file { font-size: 13px; }
.ntc__write-existing { font-size: 12px; color: var(--text-3); margin-left: 8px; }
.ntc__write-actions { display: flex; gap: 8px; }

/* Notice file attachments */
.ntc__view-files {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.ntc__view-files-label {
    font-weight: 700;
    color: var(--text-2);
    flex-shrink: 0;
}
.ntc__view-file {
    color: var(--blue);
    font-weight: 500;
}
.ntc__view-file:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .ntc__th-views { display: none; }
    .ntc__table tbody td:last-child { display: none; }
    .ntc__search-input { width: 140px; }
}

/* ============================================
   Banner slider
   ============================================ */
.banner-strip {
    padding: 0 0 20px;
    background: var(--bg);
}
.banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}
.banner-slider__track {
    position: relative;
    width: 100%;
}
.banner-slider__slide {
    display: none;
    width: 100%;
    animation: bannerFade 0.5s ease;
}
.banner-slider__slide.is-active { display: block; }
@keyframes bannerFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.banner-slider__img {
    width: 100%;
    height: auto;
    display: block;
}
.banner-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: var(--text-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    opacity: 0;
    transition: opacity 0.2s;
}
.banner-slider:hover .banner-slider__arrow { opacity: 1; }
.banner-slider__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.banner-slider__arrow--prev { left: 16px; }
.banner-slider__arrow--next { right: 16px; }
.banner-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.banner-slider__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.banner-slider__dot.is-active {
    background: #fff;
}
@media (max-width: 900px) {
    .banner-slider { border-radius: 12px; }
    .banner-slider__arrow { width: 36px; height: 36px; }
    .banner-slider__arrow--prev { left: 8px; }
    .banner-slider__arrow--next { right: 8px; }
}

/* ============================================
   Popup layer (메인화면 팝업)
   ============================================ */
.popup-layer {
    position: fixed;
    z-index: 300;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.popup-layer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    line-height: 0;
}
.popup-layer__body img {
    max-width: 100%;
    height: auto;
    display: block;
}
.popup-layer__body p {
    margin: 0 0 0.5em;
    line-height: 1.55;
    font-size: 14px;
    padding: 0 16px;
}
.popup-layer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
    font-size: 13px;
}
.popup-layer__hide {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-2);
    cursor: pointer;
    font-size: 12px;
}
.popup-layer__close {
    padding: 6px 16px;
    background: var(--text-1);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.popup-layer__close:hover { background: #333; }

@media (max-width: 640px) {
    .popup-layer {
        left: 8px !important;
        right: 8px;
        width: auto !important;
        max-width: calc(100vw - 16px);
    }
}

/* ============================================
   FAB (legacy — hidden, replaced by qbar)
   ============================================ */
.fab {
    display: none;
}

/* ============================================
   Reveal animation
   ============================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================
   Quick-bar / Calendar responsive
   ============================================ */
@media (max-width: 900px) {
    .cscal {
        right: 8px;
        left: 8px;
        width: auto;
        top: auto;
        bottom: 80px;
        transform: none;
        max-height: 80vh;
    }
    @keyframes cscalIn {
        from { opacity: 0; transform: translateY(20px) scale(0.96); }
        to   { opacity: 1; transform: none; }
    }
}
@media (max-width: 480px) {
    .cscal { padding: 16px; border-radius: 16px; }
    .cscal__cell { height: 36px; font-size: 13px; }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .hero { padding: 64px 0 80px; }
    .hero__grid { grid-template-columns: 1fr; gap: 48px; }
    .hero__title { font-size: 48px; }
    .hero__visual { min-height: auto; }
    .hero-card--float-1, .hero-card--float-2 { position: static; margin-top: 16px; }
    .services, .features, .flow__list.is-active { grid-template-columns: repeat(2, 1fr); }
    .updates, .addr { grid-template-columns: 1fr; }
    .cs { grid-template-columns: 1fr; }
    .section { padding: 72px 0; }
    .section__title { font-size: 34px; }
    .section__head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
    /* fixed 자식이 헤더 박스에 갇히지 않도록 backdrop-filter 해제 (containing block 회피) */
    .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.95); }
    .nav__inner { gap: 16px; padding: 10px 16px; }
    .nav__logo-clip { height: 40px; }
    .nav__logo-img { height: 60px; }
    .nav__toggle { display: inline-flex; }
    .nav__cta { display: none; }
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 84vw);
        height: 100vh;
        height: 100dvh;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 88px 20px max(32px, env(safe-area-inset-bottom));
        box-shadow: -12px 0 32px rgba(15, 23, 42, 0.12);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 110;
    }
    .nav.is-menu-open .nav__menu { transform: translateX(0); }
    .nav__item { width: 100%; }
    .nav__link {
        display: block;
        padding: 14px 12px;
        font-size: 16px;
        color: var(--text-1);
        border-bottom: 1px solid var(--line-soft);
    }
    .nav__link::after { display: none; }
    .nav__sub {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 0;
        padding: 4px 0 12px 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0;
    }
    .nav__item:hover .nav__sub { transform: none; }
    .nav__sub::before { display: none; }
    .nav__sub a {
        padding: 10px 12px;
        font-size: 14px;
        color: var(--text-2);
    }
    .nav__menu-cta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--line-soft);
    }
    .nav__menu-cta .btn { width: 100%; justify-content: center; height: 48px; }
    body.is-nav-locked { overflow: hidden; }
}
@media (max-width: 640px) {
    .hero__title { font-size: 38px; }
    .hero__desc { font-size: 16px; }
    .hero__metrics { grid-template-columns: 1fr 1fr; }
    .services, .features, .flow__list.is-active { grid-template-columns: 1fr; }
    .cs__list { grid-template-columns: 1fr; }
    .cta__title { font-size: 32px; }
    .footer__top { flex-direction: column; gap: 20px; align-items: flex-start; }
}

/* ============================================
   Auth (login / register card)
   ============================================ */
.auth {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 96px;
    background: linear-gradient(180deg, #f7faff 0%, var(--bg-soft) 100%);
}
.auth__card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line-soft);
}
.auth__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.auth__brand img {
    height: 56px;
    width: auto;
}
.auth__title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-align: center;
}
.auth__desc {
    margin: 0 0 32px;
    text-align: center;
    color: var(--text-2);
    font-size: 15px;
}
.auth__alert {
    padding: 12px 16px;
    background: var(--coral-soft);
    color: var(--red);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.auth__alert p { margin: 0; }
.auth__alert--success {
    background: var(--mint-soft);
    color: var(--mint);
}

/* Social buttons */
.auth__social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    transition: filter 0.15s, transform 0.12s, box-shadow 0.15s;
}
.auth__btn:hover { filter: brightness(0.96); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.auth__btn-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.auth__btn--kakao { background: #FEE500; color: #181600; }
.auth__btn--naver { background: #03C75A; color: #fff; }

.auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 24px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
}
.auth__divider::before,
.auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}
.auth__input {
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-1);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.auth__input::placeholder { color: var(--text-3); }
.auth__input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(49,130,246,0.12);
}
.auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 13px;
}
.auth__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-weight: 600;
    cursor: pointer;
}
.auth__check input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
    cursor: pointer;
}
.auth__submit {
    margin-top: 8px;
    width: 100%;
}
.auth__foot {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    font-size: 14px;
    color: var(--text-2);
}
.auth__link {
    color: var(--blue);
    font-weight: 700;
    transition: color 0.15s;
}
.auth__link:hover { color: var(--blue-strong); }
.auth__link--muted { color: var(--text-3); font-weight: 600; }
.auth__link--muted:hover { color: var(--text-1); }

@media (max-width: 480px) {
    .auth__card { padding: 32px 24px; }
    .auth__title { font-size: 24px; }
}

/* ============================================
   Register form
   ============================================ */
.auth__card--wide { max-width: 760px; }
.auth__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.reg__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--bg-soft);
    border-radius: 14px;
    margin-bottom: 28px;
}
.reg__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 10px;
    color: var(--text-2);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.reg__tab input { position: absolute; opacity: 0; pointer-events: none; }
.reg__tab.is-active { background: var(--text-1); color: #fff; box-shadow: var(--shadow-sm); }
.reg__form { display: flex; flex-direction: column; gap: 28px; }
.reg__section {
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.reg__section.is-hidden { display: none; }
.reg__section-title {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
}
.reg__section-sub {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
}
.reg__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.reg__col-2 { grid-column: 1 / -1; }
.reg__req { color: var(--red); font-style: normal; }
.reg__hint {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}
.reg__status {
    display: block;
    margin-top: 6px;
    min-height: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
}
.reg__status--ok       { color: var(--mint); }
.reg__status--bad      { color: var(--red); }
.reg__status--checking { color: var(--text-2); font-weight: 600; }

/* Inline validation errors */
.reg__error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--red);
}
.auth__input.is-invalid {
    border-color: var(--red);
    background: rgba(240, 68, 82, 0.04);
}
.auth__input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(240, 68, 82, 0.12);
}
.reg__radios.is-invalid .reg__radio {
    border-color: var(--red);
}
.reg__agree.is-invalid {
    border: 1px solid var(--red);
    background: rgba(240, 68, 82, 0.04);
}
.reg__check, .reg__radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.reg__check input,
.reg__radio input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
    cursor: pointer;
}
.reg__check:has(input:checked),
.reg__radio:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue);
}
.reg__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.reg__file {
    height: 48px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
}
.reg__file::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    background: var(--text-1);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}
.reg__textarea {
    height: auto;
    padding: 14px 16px;
    line-height: 1.5;
    resize: vertical;
}
.reg__notice {
    margin-top: 18px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
}
.reg__notice li {
    position: relative;
    padding-left: 14px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.7;
}
.reg__notice li::before {
    content: '*';
    position: absolute;
    left: 0;
    color: var(--red);
    font-weight: 800;
}

@media (max-width: 640px) {
    .reg__grid { grid-template-columns: 1fr; }
    .reg__col-2 { grid-column: auto; }
    .reg__section { padding: 20px; }
}

/* Agreement (terms/privacy) checkboxes */
.reg__agree-section { background: #fff; border: 1px solid var(--line); }
.reg__agree {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    color: var(--text-1);
}
.reg__agree + .reg__agree { margin-top: 8px; }
.reg__agree:hover { background: var(--bg-soft); }
.reg__agree input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
    flex-shrink: 0;
    cursor: pointer;
}
.reg__agree-link {
    color: var(--blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.reg__agree-link:hover { color: var(--blue-strong); }
.reg__agree .reg__req { margin-left: 4px; font-size: 12px; }

/* ============================================
   Legal pages (terms / privacy)
   ============================================ */
.legal {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}
.legal__head { margin-bottom: 48px; }
.legal__back {
    display: inline-block;
    font-size: 14px;
    color: var(--text-2);
    font-weight: 600;
    margin-bottom: 16px;
}
.legal__back:hover { color: var(--text-1); }
.legal__title {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.legal__meta {
    margin: 0;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 600;
}
.legal__chapter { margin-bottom: 40px; }
.legal__chapter > h2 {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--text-1);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.legal__article {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}
.legal__article:last-child { border-bottom: 0; }
.legal__article > h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.legal__article p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-2);
}
.legal__article p:last-child { margin-bottom: 0; }
.legal__ol {
    counter-reset: legal-item;
    margin: 0;
    padding: 0;
    list-style: none;
}
.legal__ol > li {
    counter-increment: legal-item;
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-2);
}
.legal__ol > li::before {
    content: counter(legal-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--text-1);
}
.legal__sub {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.legal__sub li {
    padding-left: 4px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-2);
}
.legal__sub .legal__sub {
    margin-top: 6px;
    margin-left: 18px;
}
.legal__contact {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px 16px;
    margin: 14px 0;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-radius: 12px;
    font-size: 14px;
}
.legal__contact dt { color: var(--text-3); font-weight: 600; }
.legal__contact dd { color: var(--text-1); font-weight: 600; }
.legal__foot {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    text-align: center;
}

@media (max-width: 640px) {
    .legal { padding: 32px 20px 64px; }
    .legal__title { font-size: 26px; }
    .legal__chapter > h2 { font-size: 18px; }
}

/* ============================================
   Guide pages (이용안내)
   ============================================ */
.guide {
    padding: 56px 0 96px;
    background: var(--bg-soft);
}
.guide__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: flex-start;
}
.guide__sidebar {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    padding: 24px;
    position: sticky;
    top: 88px;
}
.guide__sidebar-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--text-1);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.guide__sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guide__sidebar-list a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    transition: background 0.15s, color 0.15s;
}
.guide__sidebar-list a:hover {
    background: var(--bg-soft);
    color: var(--text-1);
}
.guide__sidebar-list a.is-active {
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 800;
}

.guide__content {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    padding: 40px 44px;
    /* 그리드 아이템의 기본 min-width:auto 는 콘텐츠보다 작아지지 않는다.
       넓은 표가 들어오면 트랙 자체가 밀려나 안쪽 overflow-x 가 무력해진다. */
    min-width: 0;
}
.guide__head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.guide__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: var(--blue-soft);
    color: var(--blue);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.guide__title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.guide__intro {
    padding: 20px 24px;
    margin-bottom: 36px;
    background: var(--blue-soft);
    border-radius: 12px;
    color: var(--text-1);
    font-size: 15px;
    line-height: 1.75;
}
.guide__section-title {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.guide__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}
.guide__step {
    position: relative;
    padding: 24px;
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.guide__step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--blue-soft);
    background: #fff;
}
.guide__step-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
    border: 1px solid var(--line-soft);
}
.guide__step-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--blue);
    margin-bottom: 6px;
}
.guide__step-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-1);
}
.guide__step-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-2);
}
.guide__step-desc strong { color: var(--text-1); font-weight: 700; }
.guide__inline-link { color: var(--blue); font-weight: 700; }

.guide__cta {
    padding: 32px;
    background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
    border-radius: var(--radius-lg);
    color: #fff;
    text-align: center;
}
.guide__cta-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.guide__cta-desc  { margin: 0 0 20px; font-size: 14px; opacity: 0.92; }
.guide__cta-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.guide__cta .btn--primary { background: #fff; color: var(--blue); }
.guide__cta .btn--primary:hover { background: var(--bg-soft); }
.guide__cta .btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.guide__cta .btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ============================================
   Fees table
   ============================================ */
.fees__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--bg-soft);
    border-radius: 12px;
    margin-bottom: 24px;
}
.fees__tab {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    font-weight: 700;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.fees__tab:hover { color: var(--text-1); }
.fees__tab.is-active { background: var(--text-1); color: #fff; box-shadow: var(--shadow-sm); }

.fees__notice {
    padding: 20px 24px;
    background: var(--blue-soft);
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-1);
}
.fees__notice ol { padding-left: 20px; margin: 0; }
.fees__notice li + li { margin-top: 10px; }
.fees__notice p { margin: 6px 0 0; color: var(--text-2); font-size: 12px; }
.fees__notice strong { color: var(--blue); }

.fees__details {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-2);
}
.fees__details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-1);
    padding: 4px 0;
    list-style: none;
}
.fees__details summary::after { content: ' ▼'; font-size: 10px; color: var(--text-3); }
.fees__details[open] summary::after { content: ' ▲'; }
.fees__details ul { margin: 12px 0; padding-left: 20px; }
.fees__details li { margin-bottom: 6px; }
.fees__details h4 {
    margin: 20px 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
}
.fees__small {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fees__small th, .fees__small td {
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: #fff;
    text-align: center;
}
.fees__small th {
    background: var(--bg-soft);
    color: var(--text-1);
    font-weight: 700;
    width: 30%;
}

.fees__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 16px;
}
.fees__search-label {
    flex: 1;
    min-width: 0;   /* flex 아이템 기본 min-width:auto — input 최소폭에 갇혀 안 줄어든다 */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
}
.fees__search-label input {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fees__search-label input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(49,130,246,0.12);
}
.fees__search .btn { height: 40px; }

.fees__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 13px;
    display: none;
}
.fees__table.is-active { display: table; }
.fees__table thead th {
    padding: 12px 10px;
    background: var(--text-1);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    border: 1px solid var(--text-1);
}
.fees__table thead th span { display: block; font-size: 10px; font-weight: 600; opacity: 0.7; margin-top: 2px; }
.fees__table tbody td {
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--line);
    color: var(--text-2);
}
.fees__table tbody td.is-bound { background: var(--bg-soft); color: var(--text-1); font-weight: 700; }
.fees__table tbody tr.is-hit td { background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.fees__table tbody tr:hover td { background: var(--bg-soft); }
.fees__table tbody tr.is-hit:hover td { background: var(--blue-soft); }

@media (max-width: 640px) {
    .fees__table { font-size: 11px; }
    .fees__table thead th, .fees__table tbody td { padding: 8px 4px; }

    /* 표 자체에 display:block 을 주면 열 레이아웃이 깨진다 — 래퍼가 스크롤을 맡는다 */
    .fees__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 입력 + [검색] + [초기화] 가 한 줄에 들어가지 않는다 — 버튼을 아래 줄로 */
    .fees__search { flex-wrap: wrap; }
    .fees__search-label { flex: 1 1 100%; }
    .fees__search .btn { flex: 1 1 0; }
}

/* ============================================
   Add-on services table
   ============================================ */
.svc__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
    font-size: 13px;
}
.svc__table thead th {
    padding: 12px;
    background: var(--text-1);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--text-1);
}
.svc__table tbody th,
.svc__table tbody td {
    padding: 14px;
    border: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.6;
}
.svc__table tbody th {
    text-align: left;
    background: var(--bg-soft);
    color: var(--text-1);
    font-weight: 700;
    font-size: 13px;
}
.svc__table tbody td { color: var(--text-2); font-size: 12.5px; }
.svc__table tbody tr:hover th,
.svc__table tbody tr:hover td { background: rgba(49,130,246,0.04); }

.svc__table tbody td.svc__price {
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text-1);
    white-space: nowrap;
}
.svc__table tbody td.svc__price.is-free     { color: var(--text-3); font-weight: 600; }
.svc__table tbody td.svc__price.is-variable { color: var(--coral); }

.svc__legend {
    padding: 14px 18px;
    background: var(--bg-soft);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-2);
    text-align: center;
}
.svc__legend strong { font-weight: 800; letter-spacing: -0.01em; }
.svc__legend .is-free     { color: var(--text-3); }
.svc__legend .is-fixed    { color: var(--text-1); }
.svc__legend .is-variable { color: var(--coral); }

@media (max-width: 640px) {
    .svc__table { font-size: 12px; }
    .svc__table thead th,
    .svc__table tbody th,
    .svc__table tbody td { padding: 10px 8px; }
    .svc__table { display: block; overflow-x: auto; }
}

/* ============================================
   Customs page
   ============================================ */
.customs__notice {
    padding: 20px 24px;
    background: var(--coral-soft);
    border-left: 4px solid var(--coral);
    border-radius: 8px;
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-1);
}
.customs__notice p { margin: 0; }
.customs__notice p + p { margin-top: 10px; }
.customs__notice strong { color: var(--coral); font-weight: 800; }

.customs__formula {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--bg-soft);
    border-radius: 12px;
    margin-bottom: 32px;
    font-family: 'Pretendard Variable', Pretendard, monospace, sans-serif;
}
.customs__formula-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
}
.customs__formula-row:last-child { border-bottom: 0; padding-bottom: 0; }
.customs__formula-row:first-child { padding-top: 0; }
.customs__formula-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--blue);
    text-align: right;
}
.customs__formula-label::after { content: ' ='; color: var(--text-3); margin-left: 4px; }
.customs__formula-expr {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.01em;
}

.customs__compare {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
    font-size: 13px;
}
.customs__compare thead th {
    padding: 14px;
    background: var(--text-1);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid var(--text-1);
    width: 42%;
}
.customs__compare thead th:first-child { width: 16%; background: #2b3340; }
.customs__compare tbody th {
    padding: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-weight: 800;
    color: var(--text-1);
    text-align: center;
    vertical-align: middle;
}
.customs__compare tbody td {
    padding: 16px 18px;
    border: 1px solid var(--line);
    color: var(--text-2);
    vertical-align: top;
    line-height: 1.7;
}
.customs__compare tbody td strong { color: var(--blue); font-weight: 800; }
.customs__compare tbody td small { display: inline-block; margin-top: 4px; color: var(--text-3); font-size: 12px; }
.customs__compare tbody td ul { margin: 0; padding-left: 18px; }
.customs__compare tbody td li { margin-bottom: 4px; }

.customs__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-2);
}
.customs__hint strong { color: var(--blue); font-weight: 700; }

.customs__tariff {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.customs__tariff thead th {
    padding: 12px;
    background: var(--text-1);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--text-1);
    text-align: center;
}
.customs__tariff tbody th {
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-weight: 700;
    text-align: center;
    color: var(--text-1);
    width: 25%;
}
.customs__tariff tbody td {
    padding: 10px 14px;
    border: 1px solid var(--line);
    color: var(--text-1);
    text-align: right;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.customs__tariff tbody tr:nth-child(even) th,
.customs__tariff tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }

@media (max-width: 640px) {
    .customs__formula-row { grid-template-columns: 1fr; }
    .customs__formula-label { text-align: left; }
    .customs__compare,
    .customs__tariff { display: block; overflow-x: auto; }
}

@media (max-width: 900px) {
    .guide__layout { grid-template-columns: 1fr; }
    .guide__sidebar { position: static; }
    .guide__sidebar-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .guide__content { padding: 28px; }
    .guide__steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .guide__title { font-size: 24px; }
    .guide__content { padding: 20px; }
    .guide__sidebar-list { grid-template-columns: 1fr; }
}

/* ============================================
   My Page
   ============================================ */
.mypage {
    padding: 56px 0 80px;
    background: var(--bg-soft);
}
.mypage__hello {
    margin: 0 0 32px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-1);
}
.mypage__hello strong { color: var(--blue); font-weight: 800; }
.mypage__alert {
    padding: 14px 18px;
    background: var(--mint-soft);
    color: var(--mint);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    margin: -16px 0 24px;
}

.mypage__alert--err {
    background: #fdeeee;
    color: #a5322e;
}

/* 회원 기본 정보 */
.mypage__info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    margin-bottom: 24px;
    overflow: hidden;
}
.mypage__info-item {
    padding: 22px 24px;
    margin: 0;
    border-right: 1px solid var(--line-soft);
}
.mypage__info-item:last-child { border-right: 0; }
.mypage__info-item dt {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.mypage__info-item dd {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.mypage__info-item dd.is-grade { color: var(--blue); }
.mypage__info-item dd.is-grade span { color: var(--text-3); font-weight: 600; font-size: 13px; margin-left: 4px; }
.mypage__info-item dd.is-mailbox { color: var(--red); }
.mypage__info-item dd strong { color: var(--blue); font-weight: 800; }

/* 3분할 카드 */
.mypage__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
.mypage__card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    padding: 24px;
}
.mypage__card-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.mypage__row,
.mypage__stat,
.mypage__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: background 0.15s, color 0.15s;
}
.mypage__row { gap: 8px; }
.mypage__row span,
.mypage__stat span { color: var(--text-2); }
.mypage__stat strong { font-size: 16px; font-weight: 800; color: var(--text-1); }
.mypage__stat strong.is-alert { color: var(--red); }
.mypage__row--accent { background: var(--blue-soft); }
.mypage__row--accent span { color: var(--blue); font-weight: 700; }
.mypage__row--accent strong { color: var(--blue); font-size: 18px; font-weight: 800; }
.mypage__row--accent strong.is-alert { color: var(--red); }
.mypage__link:hover,
.mypage__stat:hover,
.mypage__row:hover { background: var(--blue-soft); color: var(--blue); }
.mypage__link::after { content: ''; }
.mypage__link--cta {
    background: #fff;
    border: 1px dashed var(--line);
}
.mypage__link--cta:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
.mypage__chip {
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
}
.mypage__link--cta:hover .mypage__chip {
    background: #fff;
    color: var(--blue);
}
.mypage__btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--text-1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s;
    flex-shrink: 0;
}
.mypage__btn:hover { filter: brightness(1.2); color: #fff; }
.mypage__deposit-actions {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 4px;
}
.mypage__deposit-actions .mypage__btn {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 8px 0;
}
/* 카톡상담 — 다른 .mypage__row 와 같은 카드 모양 + 카카오 노랑. 예전엔 padding 0·밑줄만 있어 카드 가장자리에 붙어 깨져 보였다 (2026-09-30) */
.mypage__row--kakao {
    background: #fee500;
    color: #3c1e1e;
    text-decoration: none;
}
.mypage__row--kakao span { font-size: 14px; font-weight: 700; color: #3c1e1e; }
.mypage__row--kakao strong {
    padding: 4px 10px; border-radius: 999px;
    background: rgba(60, 30, 30, 0.1);
    font-size: 13px; font-weight: 700; color: #3c1e1e;
}
.mypage__row--kakao:hover { background: #fada0a; color: #3c1e1e; }
.mypage__deposit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    margin-bottom: 8px;
    background: var(--bg-soft);
    border-radius: 10px;
}
.mypage__deposit > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mypage__deposit span { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mypage__deposit strong { font-size: 18px; font-weight: 800; color: var(--text-1); }

/* 기간 안내 */
.mypage__period {
    text-align: center;
    padding: 14px 20px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--text-2);
    font-weight: 600;
}
.mypage__period strong {
    color: var(--red);
    font-weight: 800;
    margin: 0 4px;
}
.mypage__period-sep { color: var(--text-3); margin: 0 6px; }

/* 4분할 상태 카운터 */
.mypage__counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.mypage__counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mypage__counter:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--blue-soft);
}
.mypage__counter span { color: var(--text-2); font-size: 14px; font-weight: 700; }
.mypage__counter strong { font-size: 28px; font-weight: 800; color: var(--text-1); letter-spacing: -0.02em; }
.mypage__counter strong.is-alert { color: var(--red); }

.mypage__all {
    display: block;
    text-align: center;
    padding: 14px;
    background: var(--text-1);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 24px;
    transition: filter 0.15s;
}
.mypage__all:hover { filter: brightness(1.2); color: #fff; }

/* 배송대행 / 반품 진행상태 */
.mypage__progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.mypage__progress-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-soft);
    padding: 24px;
}
.mypage__progress-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 10px;
}
.mypage__progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.mypage__progress-dot--blue   { background: var(--blue); }
.mypage__progress-dot--violet { background: var(--violet); }
.mypage__progress-dot--mint   { background: #2ecc71; }
.mypage__progress-dot--orange { background: #f59e0b; }
.mypage__progress-list { display: flex; flex-direction: column; gap: 4px; }
.mypage__progress-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-soft);
    border-radius: 10px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.mypage__progress-list li a:hover { background: var(--blue-soft); color: var(--blue); }
.mypage__progress-list strong { font-size: 16px; font-weight: 800; }
.mypage__progress-list strong.is-alert { color: var(--red); }

@media (max-width: 900px) {
    .mypage__info, .mypage__grid, .mypage__counters, .mypage__progress {
        grid-template-columns: repeat(2, 1fr);
    }
    .mypage__info-item { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .mypage__info-item:nth-child(odd)  { border-right: 1px solid var(--line-soft); }
    .mypage__info-item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
    .mypage__hello { font-size: 24px; }
    .mypage__info, .mypage__grid, .mypage__counters, .mypage__progress {
        grid-template-columns: 1fr;
    }
    .mypage__info-item { border-right: 0 !important; border-bottom: 1px solid var(--line-soft); }
    .mypage__info-item:last-child { border-bottom: 0; }
}

/* ============================================
   쿠폰함 (마이페이지)
   ============================================ */
.cpn { padding: 64px 0 96px; background: var(--bg-soft); }
.cpn__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
.cpn__title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
}
.cpn__sub { margin: 0; color: var(--text-2); font-size: 15px; }
.cpn__sub strong { color: var(--blue); font-weight: 800; font-size: 18px; }

.cpn__search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.cpn__search-input {
    flex: 1 1 320px;
    max-width: 360px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cpn__search-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.12);
}
.cpn__search-btn {
    height: 42px;
    padding: 0 18px;
    background: var(--text-1);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.cpn__search-btn:hover { background: #000; }
.cpn__search-reset {
    height: 42px;
    line-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    text-decoration: none;
}
.cpn__search-reset:hover { color: var(--text-1); border-color: var(--text-2); }

.cpn__table-wrap {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    overflow: auto;
    box-shadow: var(--shadow-sm);
}
.cpn__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cpn__table thead th {
    background: #f7f9fc;
    padding: 14px 18px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.cpn__table tbody td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-1);
    vertical-align: middle;
}
.cpn__table tbody tr:last-child td { border-bottom: 0; }
.cpn__num { text-align: right; white-space: nowrap; }
.cpn__name { display: block; font-weight: 700; color: var(--text-1); }
.cpn__memo {
    display: block;
    margin-top: 4px;
    color: var(--text-3);
    font-size: 12px;
}
.cpn__amount { font-weight: 700; color: var(--blue); }
.cpn__used-at {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-3);
}
.cpn__empty {
    text-align: center;
    padding: 48px 0 !important;
    color: var(--text-3);
}

/* 사용·만료·취소 행은 톤 다운 */
.cpn__row--used,
.cpn__row--expired,
.cpn__row--revoked { background: #fafbfd; }
.cpn__row--used .cpn__name,
.cpn__row--expired .cpn__name,
.cpn__row--revoked .cpn__name { color: var(--text-3); text-decoration: line-through; }
.cpn__row--used .cpn__amount,
.cpn__row--expired .cpn__amount,
.cpn__row--revoked .cpn__amount { color: var(--text-3); }

.cpn__pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.cpn__pill--active  { background: var(--blue-soft); color: var(--blue); }
.cpn__pill--used    { background: #eef0f5; color: var(--text-2); }
.cpn__pill--expired { background: #fcecea; color: #d8443a; }
.cpn__pill--revoked { background: #fdf3da; color: #c47a06; }

.cpn__pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 12px;
}
.cpn__pager-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.cpn__pager-btn:hover { border-color: var(--text-2); color: var(--text-1); }
.cpn__pager-info { padding: 0 14px; font-size: 13px; color: var(--text-2); }

.cpn__back {
    margin: 24px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-2);
}
.cpn__back a:hover { color: var(--blue); }

/* ============================================
   Mypage — Messages (쪽지함)
   cpn 스타일을 공유하면서 메시지 전용 컴포넌트만 추가
   ============================================ */
.cpn__notice {
    background: #f7f9fc;
    border: 1px solid #e2e5ec;
    color: #5a6478;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}
.msg__link { color: inherit; text-decoration: none; }
.msg__link:hover { text-decoration: underline; }
.msg__row--unread td:first-child::before {
    content: '●';
    color: #d8443a;
    margin-right: 6px;
    font-size: 10px;
}
.msg__row--unread { background: #fffaf6; }
.msg__del {
    border: 1px solid #e2e5ec;
    background: #fff;
    color: #5a6478;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.msg__del:hover { border-color: #d8443a; color: #d8443a; }

.msg__view {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
}
.msg__body {
    margin: 0;
    font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #1e2433;
    white-space: pre-wrap;
    word-break: break-word;
}
.msg__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 20px;
}
.msg__del-large {
    border: 1px solid #f3c3bf;
    background: #fff;
    color: #d8443a;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.msg__del-large:hover { background: #fdecea; }

/* ============================================
   Mypage — 신청내역 (orders 목록)
   ============================================ */
.orders__type-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
}
.orders__type-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid #e2e5ec;
    border-radius: 999px;
    background: #fff;
    color: #5a6478;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.orders__type-tab:hover { border-color: #8a93a4; color: #1e2433; }
.orders__type-tab.is-active {
    background: #1e2433;
    color: #fff;
    border-color: #1e2433;
}
.orders__type-tab--shipping.is-active { background: #2f6df0; border-color: #2f6df0; }
.orders__type-tab--purchase.is-active { background: #8b5cf6; border-color: #8b5cf6; }

.orders__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}
.orders__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #e2e5ec;
    border-radius: 999px;
    background: #fff;
    color: #5a6478;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.orders__chip:hover { background: #f7f9fc; border-color: #8a93a4; }
.orders__chip.is-active {
    background: #2f6df0;
    color: #fff;
    border-color: #2f6df0;
}
.orders__chip--untracked {
    border-color: #f5b8b3;
    color: #d8443a;
}
.orders__chip--untracked:hover {
    background: #fff5f4;
    border-color: #d8443a;
}
.orders__chip--untracked.is-active {
    background: #d8443a;
    color: #fff;
    border-color: #d8443a;
}

.orders__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    align-items: center;
}
.orders__filter-input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #1e2433;
    min-width: 130px;
}
.orders__filter-input:focus {
    outline: none;
    border-color: #2f6df0;
    box-shadow: 0 0 0 3px rgba(47,109,240,0.12);
}
.orders__filter-input--search { flex: 1 1 200px; }
.orders__filter-sep { color: #8a93a4; }

.orders__empty {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    color: #5a6478;
    font-size: 14px;
}

.orders__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.orders__row {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    padding: 16px 18px;
}
.orders__row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f4;
}
.orders__type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: #eef4ff;
    color: #2f6df0;
}
.orders__type-badge--purchase { background: #f3edff; color: #8b5cf6; }
.orders__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    color: #1e2433;
}
.orders__tracking {
    margin-left: auto;
    font-size: 12px;
    color: #5a6478;
}
.orders__tracking code {
    background: #fff5d6;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #1e2433;
}
.orders__tracking--empty {
    background: #f0f3f8 !important;
    color: #8a93a4 !important;
    font-style: italic;
}
.orders__copy-btn {
    margin-left: 4px;
    border: 1px solid #e2e5ec;
    background: #fff;
    color: #5a6478;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.orders__copy-btn:hover { background: #f7f9fc; color: #1e2433; border-color: #8a93a4; }
/* 출고완료 후 통관·배송조회 (guide/unipass_delivery 새 창) */
.orders__trace-btn { text-decoration: none; color: #1d4ed8; border-color: #bcd0f7; }
.orders__trace-btn:hover { background: #eef3ff; color: #1e40af; border-color: #93b2ee; }

.orders__row-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.orders__row-main { flex: 1 1 auto; min-width: 0; }
.orders__row-side {
    flex: 0 0 auto;
    text-align: right;
    font-size: 13px;
    color: #5a6478;
    line-height: 1.6;
}
.orders__row-side .orders__recv {
    display: block;
    font-weight: 700;
    color: #1e2433;
    margin-top: 2px;
}
.orders__item-name {
    font-size: 14px;
    color: #1e2433;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.orders__hs {
    background: #f0f3f8;
    color: #2f6df0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.orders__hs-name { color: #5a6478; font-size: 12.5px; }
.orders__item-meta {
    font-size: 12.5px;
    color: #5a6478;
    margin-bottom: 2px;
}
.orders__item-more {
    margin-left: 6px;
    color: #2f6df0;
    font-weight: 600;
}
.orders__date { display: block; }

@media (max-width: 640px) {
    .orders__row-body { flex-direction: column; }
    .orders__row-side { text-align: left; }
    .orders__chips { gap: 4px; }
    .orders__chip { padding: 5px 10px; font-size: 12px; }
    .orders__tracking { margin-left: 0; }
}

.orders__code-link { text-decoration: none; color: inherit; }
.orders__code-link:hover .orders__code { color: var(--blue); text-decoration: underline; }

/* ============================================
   신청서 상세 — 제품 카드 (.ord-item__*) + 상태 박스
   ============================================ */
.ord-item {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.ord-item:last-child { margin-bottom: 0; }
.ord-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f4;
}
.ord-item__no {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f3f8;
    color: #5a6478;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.ord-item__code {
    background: #eef4ff;
    color: var(--blue);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
}
.ord-item__tracking {
    margin-left: auto;
    font-size: 12px;
    color: #5a6478;
}
.ord-item__tracking code {
    background: #fff5d6;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
}
.ord-item__body {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.ord-item__image {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: #f7f9fc;
    border: 1px solid #eef0f4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ord-item__image img { width: 100%; height: 100%; object-fit: cover; }
.ord-item__noimg {
    font-size: 11px;
    font-weight: 700;
    color: #cfd5e0;
    letter-spacing: 0.06em;
}
.ord-item__fields {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
}
.ord-item__fields dt {
    color: #8a93a4;
    font-weight: 600;
    font-size: 12px;
}
.ord-item__fields dd {
    margin: 0;
    color: #1e2433;
    word-break: break-all;
}
.ord-item__opt {
    display: inline-block;
    background: #f7f9fc;
    color: #5a6478;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    margin-right: 4px;
}
.ord-item__url {
    color: #2f6df0;
    text-decoration: none;
    font-size: 12px;
    word-break: break-all;
}
.ord-item__url:hover { text-decoration: underline; }

/* 인라인 트레킹 폼 (상세 페이지) */
.ord-item__tracking-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #f7f9fc;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    margin-bottom: 10px;
}
.ord-item__tracking-label {
    font-size: 12px;
    font-weight: 700;
    color: #5a6478;
    white-space: nowrap;
}
.ord-item__tracking-input {
    flex: 1 1 200px;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e2e5ec;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ord-item__tracking-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47,109,240,0.12);
}
.ord-item__tracking-save {
    border: 1px solid var(--text-1);
    background: var(--text-1);
    color: #fff;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ord-item__tracking-save:hover { background: #000; }
.ord-item__tracking-save:disabled { opacity: 0.6; cursor: not-allowed; }
.ord-item__tracking-lookup {
    border: 1px solid #2f6df0;
    background: #fff;
    color: #2f6df0;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.ord-item__tracking-lookup:hover { background: #2f6df0; color: #fff; }
.ord-item__tracking-anchor {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ord-item__tracking-anchor:hover code { background: #ffe69b; }
.ord-item__tracking-anchor:hover .ord-item__tracking-arrow { color: #2f6df0; }
.ord-item__tracking-arrow {
    font-size: 11px;
    color: #8a93a4;
}

/* 상세 페이지 하단 액션 행 — 좌(목록 복귀) / 우(수정·마이페이지) */
.ord-actions {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.ord-actions__right {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}
.ord-actions .purchase__btn { padding: 10px 18px; font-size: 13px; }

@media (max-width: 600px) {
    .ord-actions, .ord-actions__right { flex-direction: column; }
    .ord-actions .purchase__btn { width: 100%; }
}
.ord-item__tracking-status {
    font-size: 12px;
    font-weight: 600;
}
.ord-item__tracking-readonly {
    background: #f7f9fc;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #5a6478;
}
.ord-item__tracking-readonly code {
    background: #fff5d6;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #1e2433;
    margin: 0 2px;
}
.ord-item__tracking-hint { color: #8a93a4; font-size: 11.5px; margin-left: 4px; }

/* 상태 박스 (우측 사이드의 큰 배지) */
.ord-statbox { text-align: center; padding: 6px 0; }

@media (max-width: 640px) {
    .ord-item__body { flex-direction: column; }
    .ord-item__image { width: 100%; height: 160px; }
    .ord-item__fields { grid-template-columns: 90px 1fr; }
}

/* ============================================
   Purchase agent application flow (구매대행 신청)
   ============================================ */
.purchase {
    padding: 56px 0 96px;
    background: var(--bg);
}
.purchase .container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 신청서 작성 페이지(2열 레이아웃)에서는 컨테이너 폭을 확장 */
body.shipping-form-page .purchase .container,
.purchase:has(.shipform-grid) .container {
    max-width: 1280px;
}
.purchase__head {
    margin-bottom: 32px;
    text-align: center;
}
.purchase__title {
    margin: 0 0 16px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
}
.purchase__sub {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    background: #f7f9fc;
    border: 1px solid #e2e5ec;
    border-radius: 999px;
    padding: 6px;
    margin: 0;
}
.purchase__step {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #8a93a4;
    white-space: nowrap;
}
.purchase__step--active {
    background: var(--blue);
    color: #fff;
}

.purchase__error {
    background: #fdecea;
    border: 1px solid #f5b8b3;
    color: #d8443a;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
}

.purchase__section-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
}

/* 배대지 → 받는국가 정보 표시 (Step 1 readonly) */
.purchase__route {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 28px;
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    overflow: hidden;
}
.purchase__route-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 24px;
    min-width: 0;
}
.purchase__route-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.purchase__route-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.purchase__flag {
    width: 26px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
    display: inline-block;
    vertical-align: middle;
}
.purchase__route-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--text-3);
    font-size: 22px;
    background: #f7f9fc;
    border-left: 1px solid #e2e5ec;
    border-right: 1px solid #e2e5ec;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .purchase__route { flex-direction: column; }
    .purchase__route-arrow {
        padding: 6px 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #e2e5ec;
        border-bottom: 1px solid #e2e5ec;
        transform: rotate(90deg);
    }
}

/* ============================================
   배송대행 신청서 (shipping/form.php) — 2열 레이아웃
   ============================================ */
.shipform-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}
.shipform-main { min-width: 0; }
.shipform-side {
    min-width: 0;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 2px;
}
.shipform-side .shipform { padding: 16px 18px; margin-bottom: 12px; }
.shipform-side .shipform__title { font-size: 15px; }
.shipform-side .shipform__grid { grid-template-columns: 1fr; gap: 10px 12px; }
.shipform-side .shipform__field--wide { grid-column: span 1; }
.shipform-side .shipform__counters { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.shipform-side .shipform__counter { padding: 8px 6px; }
.shipform-side .shipform__counter strong { font-size: 16px; }
.shipform-side .shipform__counter span { font-size: 11px; }
.shipform-side__route { margin: 0 0 12px; }

/* 우측 사이드의 라우트 박스는 좀 더 컴팩트 */
.shipform-side__route .purchase__route-cell { padding: 10px 14px; }
.shipform-side__route .purchase__route-value { font-size: 14px; }
.shipform-side__route .purchase__flag { width: 20px; }
.shipform-side__route .purchase__route-label { font-size: 10px; letter-spacing: 0.04em; }

@media (max-width: 1024px) {
    .shipform-grid { grid-template-columns: 1fr; }
    .shipform-side { position: static; max-height: none; overflow: visible; }
}

.shipform {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 18px;
}
.shipform--summary { background: #f7f9fc; }
.shipform__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.shipform__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-1);
}
.shipform__tabs {
    display: inline-flex;
    background: #f0f3f8;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}
.shipform__tab {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.shipform__tab.is-active {
    background: #fff;
    color: var(--text-1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.shipform__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 8px;
}
.shipform__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shipform__field--wide { grid-column: span 2; }
.shipform__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
}
.shipform__label em { color: #d8443a; font-style: normal; margin-left: 2px; }
.shipform__input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-1);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.shipform__input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47,109,240,0.12);
}
select.shipform__input { padding-right: 28px; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235a6478' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.shipform__hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.6;
}
.shipform__file-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shipform__file-row .shipform__input { flex: 1 1 auto; }

.shipform__notes {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
}

.shipform__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
    flex-wrap: wrap;
}
.shipform__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    background: #fff;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.shipform__btn:hover { border-color: #8a93a4; }
/* 보조 버튼(임시 저장 등) — 투명 배경 + 연한 테두리는 눌리는 요소로 안 읽힌다.
   흰 배경 + 진한 글자 + 또렷한 테두리로 보조 액션임을 유지하되 가시성을 확보. */
.shipform__btn--ghost {
    background: #fff;
    color: var(--text-1);
    border-color: #ccd2dc;
}
.shipform__btn--ghost:hover { background: #f2f4f8; border-color: #8a93a4; }
.shipform__btn--accent {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}
.shipform__btn--accent:hover { background: #d63031; }
.shipform__addr-pick {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shipform__select {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    min-width: 120px;
}
.shipform__btn--primary {
    background: var(--text-1);
    border-color: var(--text-1);
    color: #fff;
}
.shipform__btn--primary:hover { background: #000; }
.shipform__btn--xs { padding: 4px 10px; font-size: 12px; }
/* 비활성 상태는 배경뿐 아니라 글자색·테두리도 반드시 재지정한다.
   --primary 의 color:#fff 가 남으면 밝은 배경 위에 흰 글씨가 되어 버튼이 사라진다. */
.shipform__btn:disabled,
.shipform__btn[disabled] {
    opacity: 1;
    cursor: not-allowed;
    background: #eef1f6;
    border-color: #dde2ea;
    color: #7b8494;
}
.shipform__btn:disabled:hover,
.shipform__btn[disabled]:hover { border-color: #dde2ea; background: #eef1f6; }

.shipform__table-wrap { overflow-x: auto; }
.shipform__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.shipform__table thead th {
    background: #f5f7fb;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    border-bottom: 1px solid #e2e5ec;
    white-space: nowrap;
}
.shipform__table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f4;
    vertical-align: middle;
}
.shipform__num { text-align: right; white-space: nowrap; }
.shipform__empty {
    text-align: center;
    color: var(--text-3);
    padding: 24px 0;
    font-size: 13px;
}

/* 제품 카드 — 인라인 편집 가능 */
.ship-pcards { display: flex; flex-direction: column; gap: 10px; }
.ship-pcard {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    padding: 12px 14px;
}
.ship-pcard__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f4;
}
.ship-pcard__no {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f3f8;
    color: #5a6478;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.ship-pcard__code {
    background: #eef4ff;
    color: var(--blue);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
}
.ship-pcard__hs {
    background: #f7f9fc;
    color: var(--text-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ship-pcard__title {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ship-pcard__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
.ship-pcard__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ship-pcard__field--wide { grid-column: span 2; }
.ship-pcard__field span {
    font-size: 12px;
    font-weight: 600;
    color: #5a6478;
}
.ship-pcard__field input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e2e5ec;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}
.ship-pcard__field input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47,109,240,0.12);
}

@media (max-width: 760px) {
    .ship-pcard__grid { grid-template-columns: 1fr; }
    .ship-pcard__field--wide { grid-column: span 1; }
}

/* HS code typeahead */
.shipform__hs-typeahead { position: relative; }
.shipform__hs-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.14);
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
}
.shipform__hs-item {
    display: grid;
    grid-template-columns: 90px 1fr 140px auto;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-1);
}
.shipform__hs-item:hover,
.shipform__hs-item.is-on { background: #eef4ff; }
.shipform__hs-item code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--blue);
}
.shipform__hs-item span { font-weight: 600; }
.shipform__hs-item em { color: var(--text-3); font-style: normal; font-size: 12px; }
.shipform__hs-warn { color: #c47a06; font-weight: 600; }
.shipform__hs-empty { padding: 10px; text-align: center; color: var(--text-3); font-size: 13px; }

/* 부가서비스 */
.shipform__svc-group { margin-bottom: 14px; }
.shipform__svc-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    border-left: 3px solid var(--blue);
    padding-left: 8px;
}
.shipform__svc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 10px;
}
.shipform__svc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    min-width: 0;
}
.shipform__svc-item:hover { background: #f7f9fc; }
.shipform__svc-item input[type=checkbox] { accent-color: var(--blue); flex: 0 0 auto; }
.shipform__svc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shipform__svc-fee {
    flex: 0 0 auto;
    color: var(--text-3);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

/* 부가서비스 탭 패널 */
.shipform__svc-panel { display: none; }
.shipform__svc-panel.is-active { display: block; }

/* 상세 탭 — 서비스 설명 리스트 */
.shipform__svc-desc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shipform__svc-desc li {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    padding: 12px 14px;
}
.shipform__svc-desc-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.shipform__svc-desc-head strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}
.shipform__svc-desc-body {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.shipform__svc-desc-body--empty { color: var(--text-3); font-style: italic; }

.shipform__counters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.shipform__counter {
    background: #f7f9fc;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.shipform__counter span {
    display: block;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 4px;
}
.shipform__counter strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-1);
}

.shipform__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-1);
    cursor: pointer;
}
.shipform__check input { accent-color: var(--blue); width: 18px; height: 18px; }

.shipform__balance {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.shipform__balance div {
    flex: 1 1 220px;
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 10px;
    padding: 12px 16px;
}
.shipform__balance span {
    display: block;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 2px;
}
.shipform__balance strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
}
.shipform__submit {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* 최종 액션 영역 — 폼 안의 작은 버튼들과 확실히 구분되도록 크기·무게를 올린다. */
.shipform__submit .shipform__btn {
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 132px;
}
.shipform__submit .shipform__btn--primary:not(:disabled) {
    box-shadow: 0 2px 8px rgba(25, 31, 40, 0.22);
}
.shipform__submit .shipform__btn--primary:not(:disabled):hover {
    box-shadow: 0 4px 12px rgba(25, 31, 40, 0.3);
}

@media (max-width: 760px) {
    .shipform { padding: 18px 16px; }
    .shipform__grid { grid-template-columns: 1fr; }
    .shipform__field--wide { grid-column: span 1; }
    .shipform__counters { grid-template-columns: repeat(2, 1fr); }
    .shipform__hs-item { grid-template-columns: 80px 1fr; }
    .shipform__hs-item em, .shipform__hs-warn { grid-column: span 2; }
}

.purchase__notice-content {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    padding: 28px 32px;
    line-height: 1.8;
    color: var(--text-1);
    font-size: 15px;
    max-height: 480px;
    overflow-y: auto;
    margin-bottom: 24px;
}
.purchase__notice-content h1,
.purchase__notice-content h2,
.purchase__notice-content h3 {
    margin: 24px 0 12px;
    font-weight: 700;
    color: var(--text-1);
}
.purchase__notice-content h1:first-child,
.purchase__notice-content h2:first-child,
.purchase__notice-content h3:first-child { margin-top: 0; }
.purchase__notice-content p { margin: 0 0 8px; }
.purchase__notice-content ul,
.purchase__notice-content ol { margin: 8px 0 16px; padding-left: 24px; }
.purchase__notice-content li { margin: 4px 0; }
.purchase__notice-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.purchase__notice-content table td,
.purchase__notice-content table th {
    border: 1px solid #e2e5ec;
    padding: 8px 10px;
}

.purchase__notice {
    background: #fffbeb;
    border: 1px solid #f3deb1;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #c47a06;
}
.purchase__notice--empty {
    background: #f7f9fc;
    border-color: #e2e5ec;
    color: var(--text-2);
    text-align: center;
}
.purchase__notice p { margin: 0 0 8px; line-height: 1.7; }
.purchase__notice p:last-child { margin-bottom: 0; }
.purchase__hint {
    color: var(--text-3);
    font-size: 13px;
}

.purchase__agree-form {
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 16px;
}
.purchase__agree-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 0;
    font-size: 15px;
    color: var(--text-1);
    font-weight: 600;
}
.purchase__agree-check input[type=checkbox] {
    width: 20px;
    height: 20px;
    accent-color: var(--blue);
    cursor: pointer;
}
.purchase__agree-check input:disabled { cursor: not-allowed; }
.purchase__agree-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.purchase__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid #e2e5ec;
    background: #fff;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.purchase__btn:hover { border-color: #8a93a4; }
.purchase__btn--ghost { background: transparent; color: var(--text-2); }
.purchase__btn--primary {
    background: var(--text-1);
    border-color: var(--text-1);
    color: #fff;
}
.purchase__btn--primary:hover { background: #000; border-color: #000; }
.purchase__btn--primary:disabled {
    background: #cfd5e0;
    border-color: #cfd5e0;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .purchase { padding: 32px 0 64px; }
    .purchase__title { font-size: 24px; }
    .purchase__notice-content { padding: 18px 16px; max-height: 360px; }
    .purchase__agree-actions { flex-direction: column-reverse; }
    .purchase__btn { width: 100%; }
}

@media (max-width: 640px) {
    .cpn { padding: 40px 0 64px; }
    .cpn__head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cpn__title { font-size: 22px; }
    .cpn__search { flex-wrap: wrap; }
    .cpn__search-input { flex: 1 1 100%; max-width: none; }
    .cpn__table thead { display: none; }
    .cpn__table, .cpn__table tbody, .cpn__table tr, .cpn__table td { display: block; width: 100%; }
    .cpn__table tbody tr {
        padding: 14px 4px;
        border-bottom: 1px solid var(--line-soft);
    }
    .cpn__table tbody tr:last-child { border-bottom: 0; }
    .cpn__table tbody td { padding: 4px 14px; border: 0; }
    .cpn__num { text-align: left; }
    .cpn__num::before { content: attr(data-label); }
}

/* ============================================
   신청서 상세 — 결제 패널 (제목 바로 아래, 2열: 입력 / 결제요약)
   ============================================ */
.ord-pay {
    margin: 0 0 18px;
    padding: 24px 26px;
    background: #fff;
    border: 1px solid #e2e5ec;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.ord-pay__top {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    padding-bottom: 18px; border-bottom: 1px solid var(--line-soft);
}
.ord-pay__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ord-pay__sub { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.ord-pay__top-amount { text-align: right; }
.ord-pay__top-amount span { display: block; font-size: 13px; color: var(--text-3); font-weight: 600; }
.ord-pay__top-amount strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-strong); }
.ord-pay__top-amount small { font-size: 15px; font-weight: 700; }
.ord-pay__note {
    margin: 14px 0 0; padding: 10px 14px; border-radius: 8px;
    background: var(--bg-tint); font-size: 13.5px; color: var(--text-2);
}

/* 요금 내역 (접기/펴기) */
.ord-pay__detail { margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-soft); }
.ord-pay__detail summary {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    font-size: 14px; font-weight: 800; color: var(--text-1); cursor: pointer; list-style: none;
}
.ord-pay__detail summary::-webkit-details-marker { display: none; }
.ord-pay__detail summary span { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.ord-pay__detail summary::after {
    content: ''; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: rotate(45deg); transition: transform .15s;
}
.ord-pay__detail[open] summary::after { transform: rotate(-135deg); }
.ord-pay__detail-list {
    display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px;
    margin: 0; padding: 4px 16px 14px;
}
.ord-pay__detail-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ord-pay__detail-list > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 8px 0; border-top: 1px dashed var(--line);
}
.ord-pay__detail-list dt { font-size: 13.5px; color: var(--text-2); }
.ord-pay__detail-list dt small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ord-pay__detail-list dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-pay__detail-list .is-minus dd { color: var(--red); }
.ord-pay__detail-list .is-total { grid-column: 1 / -1; border-top: 1px solid #dfe3e8; padding-top: 10px; }
.ord-pay__detail-list .is-total dt { font-weight: 800; color: var(--text-1); }
.ord-pay__detail-list .is-total dd { font-size: 15px; font-weight: 800; }

/* 결제수단 — 큰 타일 2개 */
.ord-pay__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 20px; }
.ord-pay__method {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.ord-pay__method:hover { border-color: #c7ccd4; }
.ord-pay__method input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: none; }
.ord-pay__method-body { display: flex; flex-direction: column; gap: 2px; }
.ord-pay__method-body strong { font-size: 15px; font-weight: 800; color: var(--text-1); }
.ord-pay__method-body span { font-size: 12.5px; color: var(--text-3); }
.ord-pay__method:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.ord-pay__method:has(input:checked) strong { color: var(--blue-strong); }

/* 본문 2열 */
.ord-pay__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ord-pay__layout[hidden] { display: none; }
.ord-pay__main { min-width: 0; }
.ord-pay__sec + .ord-pay__sec { margin-top: 22px; }
.ord-pay__h { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--text-1); }
.ord-pay__h span { font-weight: 600; color: var(--text-3); }
.ord-pay__h-row { display: flex; justify-content: space-between; align-items: baseline; }
.ord-pay__reset { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--text-3); text-decoration: underline; cursor: pointer; }
.ord-pay__reset[hidden] { display: none; }
.ord-pay__guide { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-2); line-height: 1.8; }
.ord-pay__empty { margin: 0; font-size: 14px; color: var(--red); }

/* 입금 계좌 카드 */
.ord-pay__bank {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
}
.ord-pay__bank + .ord-pay__bank { margin-top: 8px; }
.ord-pay__bank input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: none; }
.ord-pay__bank:has(input:checked) { border-color: var(--blue); background: #f7fbff; }
.ord-pay__bank-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ord-pay__bank-name { font-size: 13px; font-weight: 700; color: var(--text-2); }
.ord-pay__bank-name em { font-style: normal; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.ord-pay__bank-no { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; color: var(--text-1); font-variant-numeric: tabular-nums; word-break: break-all; }
.ord-pay__bank-holder { font-size: 12.5px; color: var(--text-3); }
.ord-pay__copy {
    flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.ord-pay__copy:hover { border-color: var(--blue); color: var(--blue); }

.ord-pay__input {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
    font-size: 15px; background: #fff; box-sizing: border-box; color: var(--text-1);
}
.ord-pay__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ord-pay__input:disabled { background: var(--bg-soft); color: var(--text-3); }

/* 예치금 사용 */
.ord-pay__dep { padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-soft); }
.ord-pay__dep + .ord-pay__dep { margin-top: 8px; }
.ord-pay__dep.is-empty { opacity: .6; }
.ord-pay__dep-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-1); }
.ord-pay__dep-bal { font-size: 13px; font-weight: 600; color: var(--text-3); }
.ord-pay__dep-bal strong { color: var(--text-1); font-weight: 800; }
.ord-pay__dep-row { display: flex; gap: 6px; margin-top: 10px; }
.ord-pay__num { position: relative; flex: 1; min-width: 0; }
.ord-pay__num .ord-pay__input { padding-right: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.ord-pay__num span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-3); pointer-events: none; }
.ord-pay__dep-btn {
    flex: none; padding: 0 14px; border: 0; border-radius: 10px;
    background: #4e5968; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.ord-pay__dep-btn:hover { background: var(--text-1); }
.ord-pay__dep-btn:disabled { background: var(--line); color: var(--text-3); cursor: not-allowed; }
.ord-pay__charge { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--blue); }

/* 결제 요약 (우측, 스크롤 따라옴) */
.ord-pay__aside {
    position: sticky; top: 90px;
    padding: 18px 18px 20px; border-radius: 12px; background: var(--bg-tint);
}
.ord-pay__sum-row {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.ord-pay__sum-row[hidden] { display: none; }
.ord-pay__sum-row--minus span:last-child { color: var(--red); font-weight: 700; }
.ord-pay__sum-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 8px; padding-top: 14px; border-top: 1px solid #dfe3e8;
    font-size: 14px; font-weight: 800; color: var(--text-1);
}
.ord-pay__sum-total strong { font-size: 22px; font-weight: 800; color: var(--blue-strong); font-variant-numeric: tabular-nums; }
.ord-pay__aside-hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.ord-pay__submit {
    display: block; width: 100%; margin-top: 14px; padding: 15px 16px;
    border: 0; border-radius: 12px; background: var(--blue); color: #fff;
    font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-blue);
}
.ord-pay__submit:hover { background: var(--blue-strong); }

/* 입금 확인 중 */
.ord-pay--waiting { background: #fbfcfd; }
.ord-pay__wait-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ord-pay__wait-head p { margin: 0; font-size: 14px; color: var(--text-2); }
.ord-pay__wait-badge {
    padding: 5px 12px; border-radius: 999px; background: #fff4e5; color: #c46a00;
    font-size: 13px; font-weight: 800;
}
.ord-pay__wait-info {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
    margin: 16px 0 0;
}
.ord-pay__wait-info > div { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.ord-pay__wait-info dt { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.ord-pay__wait-info dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text-1); word-break: break-all; }
.ord-pay__wait-info dd small { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.ord-pay__wait-info dd.is-amount { color: var(--blue-strong); font-size: 18px; font-weight: 800; }

@media (max-width: 860px) {
    .ord-pay { padding: 20px 16px; }
    .ord-pay__layout { grid-template-columns: 1fr; gap: 18px; }
    .ord-pay__aside { position: static; }
}
@media (max-width: 480px) {
    .ord-pay__detail-list--2col { grid-template-columns: 1fr; }
    .ord-pay__methods { grid-template-columns: 1fr; }
    .ord-pay__top-amount { text-align: left; }
    .ord-pay__dep-btn { padding: 0 11px; }
}

/* ============================================================
   인기 온라인몰 추천 (해외추천사이트) — 메인화면
   로고를 가로로 흘려보내는 캐러셀. 항목이 4개 이상이면
   목록을 두 번 깔아 끊김 없이 순환한다 (뷰의 $loop 참고).
   ============================================================ */
.recmall__viewport {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.recmall__track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    animation: recmall-scroll 40s linear infinite;
}

.recmall__viewport:hover .recmall__track { animation-play-state: paused; }

/* 항목이 적어 복제하지 않은 경우 — 흐르지 않고 가운데 정렬 */
.recmall__track--static {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes recmall-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.recmall__item {
    flex: 0 0 auto;
    width: 190px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e9ecf1;
    border-radius: 12px;
    transition: border-color .15s, transform .15s;
}

a.recmall__item:hover {
    border-color: var(--blue, #3182f6);
    transform: translateY(-2px);
}

.recmall__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 모션 최소화를 선호하는 사용자에게는 흐르지 않게 한다 */
@media (prefers-reduced-motion: reduce) {
    .recmall__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

@media (max-width: 640px) {
    .recmall__item { width: 148px; height: 70px; padding: 10px 14px; }
}

/* ============================================================
   아주 좁은 화면(320px — 구형 iPhone SE 등) 여백 축소
   ============================================================ */
@media (max-width: 360px) {
    .dep__panel { padding: 16px; }
    .update-card { padding: 20px; }


}


/* ============ 회원탈퇴 ============ */
.wdr__notice {
    margin: 4px 0 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfc;
}
.wdr__list {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.75;
}
.wdr__list li + li { margin-top: 6px; }
.wdr__blockers {
    margin: 8px 0 0;
    padding-left: 18px;
    line-height: 1.7;
}
.wdr__textarea { min-height: 84px; resize: vertical; font-family: inherit; }
.wdr__agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 20px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
.wdr__agree input { margin-top: 2px; flex: none; }
/* 되돌릴 수 없는 동작이라 기본 버튼과 색을 다르게 둔다 */
.wdr__submit {
    background: #d64545;
    border-color: #d64545;
    color: #fff;
}
.wdr__submit:hover { background: #b93b3b; border-color: #b93b3b; }
.wdr__cancel { display: block; margin-top: 14px; text-align: center; }
/* 마이페이지 목록에서 탈퇴 링크는 눈에 덜 띄게 */
.mypage__link--quiet { color: var(--text-3); }


/* ============ 취소·환불 정책 / 사업자정보 (PG 심사 대응) ============ */
.pol__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 28px;
    font-size: 14px;
}
.pol__table th,
.pol__table td {
    border: 1px solid var(--line);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}
.pol__table thead th {
    background: var(--bg-soft);
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
}
.pol__table td { color: var(--text-2); }
/* 사업자정보는 라벨:값 2열 */
.pol__table--info th {
    width: 200px;
    background: var(--bg-soft);
    white-space: nowrap;
}
.pol__ok   { color: #1a7f4b; font-weight: 700; white-space: nowrap; }
.pol__no   { color: #d64545; font-weight: 700; white-space: nowrap; }
.pol__part { color: #b8860b; font-weight: 700; white-space: nowrap; }

.pol__box {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0 0 28px;
    background: #fafbfc;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.8;
}
.pol__box p { margin: 0 0 10px; }
.pol__box p:last-child { margin-bottom: 0; }
.pol__box--warn { background: #fff7f7; border-color: #f3d4d4; }

.pol__list { margin: 0; padding-left: 18px; }
.pol__list li + li { margin-top: 8px; }

.pol__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 20px;
}
.pol__step {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.5;
}
.pol__step-no {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 표는 좁은 화면에서 가로 스크롤 — 페이지 본문이 밀리지 않게 */
@media (max-width: 720px) {
    .pol__steps { grid-template-columns: 1fr; }
    .pol__table--info th { width: 120px; }
}

/* 신청서 참고 이미지 — 편집 시 현재 등록된 이미지 미리보기 */
.shipform__refimg { margin-top: 8px; }
.shipform__refimg img { max-width: 220px; border: 1px solid #e5e7eb; border-radius: 6px; display: block; }
.shipform__refimg p { margin: 4px 0 0; font-size: 12px; color: #6b7280; }

/* ============================================================
   구매대행 엑셀등록 (.pxl) — 참고 사이트 service_02_excel.php 2열 구성
   ============================================================ */
.pxl__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pxl__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pxl__col--side { position: sticky; top: 96px; }
.pxl__box { background: #fff; border: 1px solid #e2e5ec; border-radius: 12px; padding: 20px 22px; }
.pxl__box-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--blue); }
.pxl__notice { max-height: 240px; padding: 16px 18px; font-size: 13px; margin-bottom: 8px; }
.pxl__agree { padding: 6px 0 0; font-size: 14px; }
.pxl__agree--opt { padding: 0; }
.pxl__fixed { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-1); }
.pxl__fixed-hint { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.pxl__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pxl__pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 14px; border: 1px solid #b9c0cc; border-radius: 999px; background: #fff;
    font-size: 13px; color: var(--text-1); cursor: pointer; text-decoration: none; font-family: inherit;
}
.pxl__pill:hover { border-color: var(--text-1); }
.pxl__pill--wide { width: 100%; padding: 10px 14px; font-weight: 600; }
.pxl__hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.pxl__table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.pxl__table th, .pxl__table td { border: 1px solid #e2e5ec; padding: 6px 10px; text-align: left; }
.pxl__table th { background: var(--bg-soft); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pxl__num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-1); white-space: nowrap; }
.pxl__empty { text-align: center; color: var(--text-3); padding: 18px 10px !important; }
.pxl__warn { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--coral-soft); color: var(--red); font-size: 11px; }
.pxl__fx { color: var(--text-3); }
.pxl__rules { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.pxl__file { width: 100%; font-size: 13px; }
.pxl__submit { width: 100%; padding: 14px; font-size: 15px; background: var(--red); border-color: var(--red); }
.pxl__submit:hover { background: #d63a47; border-color: #d63a47; }
.pxl__input { width: 100%; padding: 10px 12px; border: 1px solid #cfd5e0; border-radius: 8px; font-size: 14px; font-family: inherit; }
.pxl__errors { background: var(--coral-soft); border: 1px solid #ffc9c9; border-radius: 10px; padding: 12px 16px 12px 32px; margin-bottom: 16px; font-size: 13px; color: #a12a2a; line-height: 1.7; max-height: 260px; overflow-y: auto; }
.pxl__errors ul { margin: 0; padding: 0 0 0 4px; }
.pxl__message { background: var(--mint-soft); border: 1px solid #b7e4c9; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: #0f7a40; }
@media (max-width: 900px) {
    .pxl__grid { grid-template-columns: 1fr; }
    .pxl__col--side { position: static; }
}

/* 품목코드표 모달 */
.pxl-modal { position: fixed; inset: 0; z-index: 1200; }
.pxl-modal[hidden] { display: none; }
.pxl-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.pxl-modal__panel {
    position: relative; width: 640px; max-width: calc(100vw - 32px); max-height: 80vh; margin: 8vh auto 0;
    background: #fff; border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden;
}
.pxl-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e2e5ec; }
.pxl-modal__head h3 { margin: 0; font-size: 16px; }
.pxl-modal__close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-3); }
.pxl-modal__body { padding: 16px 18px; overflow-y: auto; }

/* ============================================
   헤더 [중국센터 주소] 패널 + 주소표(.wha) — asap/_wh_address.php 공용
   참고 사이트(asap-china.com) 헤더의 [중국센터] 팝업을 새 창 대신 드롭다운 패널로
   ============================================ */
/* 헤더 폭(1180) 안에 로고·메뉴5·중국센터·로그인 영역이 다 들어가도록 간격 40→28, 메뉴 글자 줄바꿈 금지 */
@media (min-width: 901px) {   /* 파일 뒤쪽이라 900px 이하 모바일 규칙을 덮지 않게 데스크톱으로 한정 */
    .nav__inner { gap: 28px; }
    .nav__menu { flex-shrink: 0; }
    .nav__link { white-space: nowrap; }
}
.nav__center { position: relative; flex-shrink: 0; }
.nav__center-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 12px 0 10px;
    border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: var(--text-1);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.nav__center-btn:hover { border-color: var(--blue); background: var(--blue-soft); }
.nav__center.is-open .nav__center-btn { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(49,130,246,0.12); }
.nav__center-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav__center-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex-shrink: 0; }
.nav__center-caret { color: var(--text-3); transition: transform 0.15s; }
.nav__center.is-open .nav__center-caret { transform: rotate(180deg); }
.nav__center-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
    width: 440px; max-height: calc(100vh - 100px); overflow-y: auto;
    padding: 20px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 20px 48px rgba(17,24,39,0.16);
}
.nav__center-panel[hidden] { display: none; }
.nav__center-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.nav__center-head strong { font-size: 16px; }
.nav__center-head span { margin-left: auto; font-size: 12px; color: var(--text-3); }
.nav__center-head ~ .nav__center-head { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.wha { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; }
.wha__row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; }
.wha__row + .wha__row { border-top: 1px solid var(--line-soft); }
.wha__label { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-2); line-height: 1.3; }
.wha__label small { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); }
.wha__value { margin: 0; font-size: 14px; color: var(--text-1); line-height: 1.5; word-break: break-all; }
.wha__mailbox { color: var(--blue); font-weight: 800; white-space: nowrap; }
.wha__hint { color: var(--red); font-style: normal; font-weight: 700; white-space: nowrap; }
.wha__copy {
    height: 30px; padding: 0 12px; border: 0; border-radius: 8px;
    background: var(--bg-tint); color: var(--text-2);
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.wha__copy:hover { background: var(--blue); color: #fff; }
.wha__copy.is-done, .wha__copy-all.is-done { background: var(--mint); color: #fff; }
.wha__foot { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.wha__note { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.wha__note b { color: var(--text-1); }
.wha__note a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wha__copy-all {
    height: 44px; border: 0; border-radius: 12px;
    background: var(--blue); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.wha__copy-all:hover { background: var(--blue-strong); }

/* 메인 [해외 물류센터 주소] 카드 — 주소표가 넓어서 배대지 1곳이면 카드 폭을 넓힌다 */
.addr { grid-template-columns: repeat(auto-fit, minmax(340px, 560px)); justify-content: center; }
.addr__card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.addr__card-head h3 { margin: 0; }
.addr__flag-img { width: 32px; height: 22px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }

@media (max-width: 900px) {
    .nav__center { margin-left: auto; }
    .nav__logo { margin-right: 0; }
    .nav__center-btn { height: 40px; padding: 0 10px; font-size: 13px; }
    /* 모바일은 화면 폭 시트 — 900px 이하에선 .nav 의 backdrop-filter 가 풀려 fixed 가 뷰포트 기준 */
    .nav__center-panel { position: fixed; top: 68px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 84px); padding: 16px; }
}
@media (max-width: 480px) {
    .nav__center-label { font-size: 0; }        /* 국기 + 화살표만 */
    .nav__center-label::before { content: '주소'; font-size: 13px; }
    .wha__row { grid-template-columns: 1fr auto; gap: 4px 10px; }
    .wha__label { grid-column: 1 / -1; display: flex; gap: 6px; align-items: baseline; }
    .wha__label small { display: inline; }
    .addr { grid-template-columns: 1fr; }
    .addr__card { padding: 20px; }
}



/* 901~1099px 헤더 압축 — 로그인 상태(이름·마이페이지·로그아웃) + [중국센터] 가 한 줄에 안 들어가 1024px 에서
   헤더가 65px 넘쳐 가로 스크롤이 생겼다 (2026-09-30 배포 후 확인) */
@media (min-width: 901px) and (max-width: 1099px) {
    .nav__inner { gap: 14px; padding-left: 16px; padding-right: 16px; }
    .nav__link { padding-left: 10px; padding-right: 10px; }
    .nav__item:hover .nav__link::after { width: calc(100% - 20px); }
    .nav__user { display: none; }
    .nav__cta { padding-left: 10px; gap: 4px; }
    .nav__login { padding: 10px 8px; }
}
@media (min-width: 901px) and (max-width: 999px) {
    .nav__center-label { display: none; }   /* 국기 + 화살표만 (title 로 안내) */
    .nav__center-btn { padding: 0 8px; }
}

/* ============================================
   메인 첫 화면 (2026-09-30 개편) — [배너 | 회원 카드] + 바로가기 8개
   국내 배대지 공통 구성(몰테일·오마이집·asap-china.com). 예전 .hero 규칙은 이제 안 쓴다 (dead CSS)
   ============================================ */
.mtop { padding: 28px 0 12px; background: linear-gradient(180deg, #f4f8ff 0%, #fff 72%); }
.mtop__grid {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(300px, 1fr);   /* 배너 원본 750×428 을 거의 그대로 */
    gap: 20px;
    align-items: stretch;
}
.mtop__banner { min-width: 0; }
.mtop__banner .banner-slider {
    aspect-ratio: 750 / 428;
    height: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--bg-tint);
}
.mtop__banner .banner-slider__track,
.mtop__banner .banner-slider__slide,
.mtop__banner .banner-slider__slide > a { height: 100%; }
.mtop__banner .banner-slider__img { height: 100%; object-fit: cover; }
@media (hover: none) { .mtop__banner .banner-slider__arrow { opacity: 1; } }

.mtop__intro {   /* 배너 0개일 때 */
    height: 100%; min-height: 320px;
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
    padding: 40px; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%); color: #fff;
}
.mtop__intro-badge { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.18); font-size: 13px; font-weight: 700; }
.mtop__intro-title { margin: 0; font-size: 40px; line-height: 1.2; letter-spacing: -0.03em; }
.mtop__intro-title em { font-style: normal; color: #ffe066; }
.mtop__intro-desc { margin: 0; font-size: 16px; opacity: 0.9; }

/* 회원 카드 */
.mcard {
    height: 100%;
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.mcard__title strong { display: block; font-size: 20px; letter-spacing: -0.02em; }
.mcard__title span { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.mcard__form { display: flex; flex-direction: column; gap: 8px; }
.mcard__input {
    height: 46px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 10px;
    font: inherit; font-size: 15px; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mcard__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,130,246,0.15); }
.mcard__submit { height: 48px; width: 100%; justify-content: center; font-size: 16px; border-radius: 10px; margin-top: 2px; }
.mcard__social { display: flex; gap: 8px; }
.mcard__sns {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 42px; border-radius: 10px; font-size: 14px; font-weight: 700;
}
.mcard__sns--naver { background: #03c75a; color: #fff; }
.mcard__sns--kakao { background: #fee500; color: #191919; }
.mcard__links { margin-top: auto; display: flex; justify-content: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.mcard__links a:hover { color: var(--text-1); }
.mcard__links b { color: var(--blue); }

.mcard__hello { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
.mcard__hello strong { font-size: 18px; }
.mcard__grade { padding: 3px 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); font-size: 12px; font-weight: 800; }
.mcard__mailbox {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px; background: var(--blue-soft);
}
.mcard__mailbox span { font-size: 13px; color: var(--text-2); }
.mcard__mailbox b { font-size: 17px; color: var(--blue); letter-spacing: 0.02em; }
.mcard__copy {
    margin-left: auto; height: 28px; padding: 0 10px; border: 0; border-radius: 8px;
    background: #fff; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.mcard__copy.is-done { background: var(--mint); color: #fff; }
.mcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mcard__stats a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 4px; border-radius: 12px; background: var(--bg-soft);
    transition: background 0.15s;
}
.mcard__stats a:hover { background: var(--line-soft); }
.mcard__stats span { font-size: 12px; color: var(--text-3); }
.mcard__stats b { font-size: 20px; color: var(--text-1); }
.mcard__stats small { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.mcard__stats a.is-alert b { color: var(--coral); }
.mcard__money { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mcard__money li { display: flex; justify-content: space-between; font-size: 14px; }
.mcard__money span { color: var(--text-2); }
.mcard__money small { color: var(--text-3); font-weight: 600; }
.mcard__addr {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px;
    background: #fff; color: var(--text-1); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.mcard__addr svg:first-child { color: var(--red); }
.mcard__addr svg:last-child { margin-left: auto; color: var(--text-3); }
.mcard__addr:hover { border-color: var(--blue); background: var(--blue-soft); }
.mcard__actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mcard__actions .btn { height: 44px; justify-content: center; font-size: 14px; border-radius: 10px; }

/* 바로가기 8개 */
.mquick {
    margin-top: 20px;
    display: grid; grid-template-columns: repeat(8, 1fr);
    padding: 14px 8px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.mquick__item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 4px; border: 0; background: none; border-radius: 14px;
    font: inherit; color: var(--text-1); cursor: pointer; text-decoration: none;
    transition: background 0.15s;
}
.mquick__item:hover { background: var(--bg-soft); }
.mquick__item:hover .mquick__ic { transform: translateY(-2px); }
.mquick__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mquick__ic {
    width: 52px; height: 52px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.mquick__ic--blue   { background: var(--blue-soft);   color: var(--blue); }
.mquick__ic--violet { background: var(--violet-soft); color: var(--violet); }
.mquick__ic--mint   { background: var(--mint-soft);   color: var(--mint); }
.mquick__ic--orange { background: #fff4e5;            color: #f59f00; }
.mquick__ic--coral  { background: var(--coral-soft);  color: var(--coral); }
.mquick__ic--red    { background: #ffecee;            color: var(--red); }
.mquick__ic--kakao  { background: #fee500;            color: #3c1e1e; }
.mquick__label { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }

@media (max-width: 1024px) {
    /* 태블릿은 배너 위·카드 아래 한 줄 — 옆에 두면 카드 높이만큼 배너가 늘어나 비율이 깨지고 양옆이 잘렸다 (768px 에서 381×437).
       폭은 820 으로 묶어 배너가 원본(750)보다 크게 늘어나지 않게 */
    .mtop__grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; gap: 14px; }
    .mtop__banner .banner-slider { height: auto; }
    .mquick { grid-template-columns: repeat(4, 1fr); row-gap: 4px; max-width: 820px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
    .mtop { padding-top: 16px; }
    .mtop__grid { grid-template-columns: 1fr; gap: 14px; }
    .mtop__banner .banner-slider { border-radius: 14px; }
    .mcard { padding: 18px; }
    .mquick { margin-top: 14px; padding: 10px 4px; }
    .mquick__ic { width: 46px; height: 46px; border-radius: 14px; }
    .mquick__label { font-size: 12.5px; }
    .mtop__intro { padding: 28px; min-height: 0; }
    .mtop__intro-title { font-size: 30px; }
}
@media (max-width: 360px) {
    .mquick__label { font-size: 11.5px; }
}

/* ============================================
   오른쪽 아래 동그라미 퀵버튼 (.qbar, 전 페이지) — 2026-09-30 개편
   예전 오른쪽 가운데 세로 카드는 본문 오른쪽(배너 등)을 덮고 떠 보였다. 라벨은 hover 툴팁
   ============================================ */
.qbar {
    position: fixed; right: 20px; bottom: 24px; z-index: 90;
    display: flex; flex-direction: column; gap: 10px;
}
.qbar__btn {
    position: relative;
    width: 50px; height: 50px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%;
    background: #fff; color: var(--text-2);
    box-shadow: 0 6px 18px rgba(17,24,39,0.12);
    cursor: pointer; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
}
.qbar__btn:hover { transform: translateY(-2px); color: var(--text-1); box-shadow: 0 10px 24px rgba(17,24,39,0.16); }
.qbar__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.qbar__btn--kakao { background: #fee500; border-color: #fee500; color: #3c1e1e; }
.qbar__btn--kakao:hover { color: #3c1e1e; }
.qbar__btn--customs { color: var(--coral); }
.qbar__btn--top { display: none; }
.qbar__btn--top.is-shown { display: inline-flex; }
.qbar__tip {
    position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 6px 10px; border-radius: 8px;
    background: var(--text-1); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.qbar__btn:hover .qbar__tip, .qbar__btn:focus-visible .qbar__tip { opacity: 1; }
@media (hover: none) { .qbar__tip { display: none; } }
@media (max-width: 760px) {
    .qbar { right: 12px; bottom: 16px; gap: 8px; }
    .qbar__btn { width: 44px; height: 44px; }
    .qbar__btn svg { width: 20px; height: 20px; }
}

/* ============================================
   사업자/마켓 리스트 (/mypage/markets, 089) — 표는 배송주소록 .addr-book__* 재사용
   ============================================ */
.mkt__desc { margin: -6px 0 18px; font-size: 14px; color: var(--text-2); }
.mkt__alert--err { background: var(--coral-soft); color: var(--coral); }
.mkt__form {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
    margin-bottom: 20px; padding: 18px; border-radius: var(--radius-md); background: var(--bg-soft);
}
.mkt__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mkt__field span { font-size: 13px; font-weight: 700; color: var(--text-2); }
.mkt__input {
    height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; font-size: 15px; background: #fff; min-width: 0;
}
.mkt__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,130,246,0.15); }
.mkt__submit { height: 44px; padding: 0 22px; border-radius: 10px; }
@media (max-width: 640px) {
    .mkt__form { grid-template-columns: 1fr; }
    .mkt__submit { width: 100%; justify-content: center; }
}

/* 메인 공지·FAQ·통관스케줄 카드 (2026-09-30 실제 데이터 연결) — 통관스케줄 줄·[달력 →] 은 달력을 여는 button */
button.update-card__more { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.update-card__list li .update-card__link {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.update-card__list li .update-card__link:hover { color: var(--blue); }
.update-card__list li a { min-width: 0; }
.update-card__list li.update-card__empty { justify-content: flex-start; font-size: 13px; color: var(--text-3); }

/* 마이페이지 카운터(출고보류·대형화물 인계·반품 단계)에서 들어온 목록 필터 안내 (2026-09-30) */
.orders__subfilter {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
    background: var(--blue-soft); color: var(--text-2); font-size: 14px;
}
.orders__subfilter b { color: var(--text-1); }
.orders__subfilter a { margin-left: auto; color: var(--blue); font-weight: 700; }

/* .purchase__sub 는 신청서 단계 알약(테두리·배경). 일반 안내문엔 --text 를 같이 붙인다 — 반품내역·그룹결제·신청서 상세가 알약 박스로 보였다 (2026-09-30) */
.purchase__sub--text {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    text-align: center;
}

/* ============================================
   메인 타이포 톤다운 (2026-09-30) — '템플릿 같다' 피드백
   영문 소제목 제거, 제목 굵기·크기·자간 완화, 그라데이션 CTA → 단색, 이모지 → 선 아이콘
   ============================================ */
body { letter-spacing: -0.005em; }
.section__head { margin-bottom: 44px; }
.section__title { font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 10px; }
.section__desc { font-size: 16px; line-height: 1.6; max-width: 620px; }
.service__icon { font-size: 0; }
.service--blue .service__icon { color: var(--blue); }
.service--violet .service__icon { color: var(--violet); }
.service--mint .service__icon { color: var(--mint); }
.service--coral .service__icon { color: var(--red); }
.service__title { font-size: 18px; letter-spacing: -0.01em; }
.cta { background: #1f2a44; padding: 64px 0; }
.cta::before, .cta::after { display: none; }
.cta__title { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
.cta__desc { font-size: 16px; margin-bottom: 28px; opacity: 0.8; }
.cta .btn--primary { box-shadow: none; }
.cs h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 22px; }
.cs__eyebrow { display: block; padding: 0; background: none; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
@media (max-width: 900px) {
    .section__title { font-size: 26px; }
    .cta__title { font-size: 22px; }
}
/* 로그인 회원은 가입 권유 띠(.cta)가 없어 주소·고객센터 섹션 여백이 겹친다 */
#address + #cs { padding-top: 0; }