/* Hallmark · shape: kept · genre: playful · theme: brand (애니메 직구 로고 2026-11-05, by request) · redesign: restyle
 * hero: n/a (shared stylesheet for every user page) · nav: kept · footer: kept · imagery: none · signature: the logo's rounded Jua heads, navy ink and orange action, carried to every page · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E2 S3 R3 V3 · weakest: E, a restyle keeps each page's layout */
/* ============================================
   ASAP ASIA JAPAN — 사용자 화면 테마 (asap.css 다음에 읽는다)
   1) 색 토큰을 일본판 브랜드(일본 빨강 + 남색)로 바꿔 모든 사용자 화면에 적용
   2) 메인(views/asap/index.php) 의 jp-* 구성 — 스고이직구 메인 배치를 따른다
   3) asap.css 의 접근성 문제를 여기서 덮어쓴다(asap.css 는 asapasia 원본 그대로 둔다)
   관리자 화면(admin.css)은 asapasia 와 똑같이 둔다 — 여기서 건드리지 않는다.
   2026-10-28 hallmark audit 반영: 대비 4.5:1, 포커스 링, 스크립트 없이도 보이는 reveal, 그라데이션·장식 라벨 제거.
   ============================================ */
:root {
    /* 2026-11-05 '애니메 직구' 리브랜드 — 값은 로고(docs/KakaoTalk_Photo_*)에서 뽑았다.
       남색 #0B1F5E(글자·제목) · 파랑 #1A5FD6(선택·링크, 토큰 이름 --jp-red 는 그대로) · 주황 #FF9F1C(주 버튼) · 옅은 하늘 #F3F8FF(바탕 띠) */
    --jp-red: #1a5fd6;            /* 이름은 그대로 두고 값만 로고 파랑으로 */
    --jp-red-strong: #1349ab;
    --jp-red-soft: #e8f1ff;
    --jp-red-light: #a9cbff;      /* 네이비 위 강조 테두리 */
    --jp-navy: #0b1f5e;
    --jp-navy-2: #1b3580;
    --jp-sky: #eaf3ff;            /* 파랑 강조색을 쓰지 않는다 — 중립 바탕 */
    --jp-sky-ink: #0b1f5e;
    --jp-kakao: #fee500;          /* 카카오 브랜드 표시(작은 아이콘)에만 */
    --jp-kakao-ink: #3c1e1e;
    --jp-naver: #03c75a;
    --jp-gray: #f3f8ff;           /* 옅은 하늘 바탕 띠 */
    --jp-paper: #ffffff;
    --jp-ink: #1c2440;            /* 로고 남색을 낮춘 본문색 */
    --jp-ink-2: #47506a;
    --jp-ink-3: #667085;          /* 흰 바탕 4.8:1 · 하늘 바탕 4.5:1 */
    --jp-line: #dbe6f6;
    --jp-line-soft: #e8effa;
    --jp-tab-off: #ffffff;
    /* 로고 주황 — 주 버튼. 흰 글자는 대비가 안 나와 남색 글자를 쓴다(7.4:1) */
    --jp-cta: #ff9f1c;
    --jp-cta-strong: #f28c00;
    --jp-cta-ink: #0b1f5e;
    --jp-font-display: 'Jua', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --jp-shadow: rgba(11, 31, 94, 0.08);
    --jp-shadow-red: rgba(26, 95, 214, 0.2);
    --jp-shadow-navy: rgba(11, 31, 94, 0.2);
    --jp-scrim: rgba(11, 31, 94, 0.6);
    --jp-on-dark: rgba(255, 255, 255, 0.86);
    --jp-focus: #0b1f5e;
    --jp-r: 10px;                  /* 모서리 — 버튼·입력 (로고처럼 둥글게, main.css 와 같은 값) */
    --jp-r-lg: 16px;               /* 카드·표 */

    /* asap.css 토큰 덮어쓰기 — 모든 사용자 화면에 같은 색·모서리·그림자 */
    --blue: var(--jp-red);
    --blue-strong: var(--jp-red-strong);
    --blue-soft: var(--jp-red-soft);
    --violet: var(--jp-navy);
    --violet-soft: #e4ebfa;
    --mint: #0d7d40;              /* 복사 완료 등 흰 글자 5.22:1 */
    --coral: var(--jp-red);
    --coral-soft: var(--jp-red-soft);
    --red: #b3261e;
    --text-1: var(--jp-ink);
    --text-2: var(--jp-ink-2);
    --text-3: var(--jp-ink-3);
    --line: var(--jp-line);
    --line-soft: var(--jp-line-soft);
    --bg-soft: var(--jp-gray);
    --bg-tint: #e9f2ff;
    --shadow-sm: 0 1px 2px var(--jp-shadow);
    --shadow-md: 0 2px 8px var(--jp-shadow);
    --shadow-lg: 0 6px 20px var(--jp-shadow);
    --shadow-blue: none;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* 콘텐츠 폭 — 정보 밀도를 위해 조금 넓힌다 (설계서: 데스크톱 최대 1,440 안쪽에서 기존 화면에 맞춤) */
.container, .nav__inner { max-width: 1240px; }

/* ============================================
   asap.css 접근성 보정 (모든 사용자 화면)
   ============================================ */
/* 스크립트가 실패해도 내용이 보이게: 숨김은 .js 가 붙었을 때만 (header.php 가 html 에 .js 를 붙인다) */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .banner-slider__slide { animation: none; }
}

/* 키보드 포커스 — 테두리 색만 바뀌던 입력칸과 모든 버튼·링크에 바로 보이는 링 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.auth__input:focus-visible, .fees__search-label input:focus-visible {
    outline: 3px solid var(--jp-focus);
    outline-offset: 2px;
    transition: none;
}
.auth__input:focus, .fees__search-label input:focus { box-shadow: 0 0 0 4px var(--jp-shadow); }

/* 네이버 로그인 — 초록 바탕 흰 글자는 2.25:1. 흰 바탕 + 초록 테두리·아이콘으로 */
.mcard__sns--naver { background: var(--jp-paper); color: var(--jp-ink); border: 1.5px solid var(--jp-naver); }
.mcard__sns--naver svg { color: var(--jp-naver); }

/* 헤더 — 흰 바탕 + 하단 선, 메뉴 강조는 빨강 */
.nav { background: var(--jp-paper); box-shadow: 0 1px 0 var(--jp-line-soft); }
.nav__link:hover, .nav__link.is-active { color: var(--jp-red); }
.nav__sub a:hover { color: var(--jp-red-strong); background: var(--jp-red-soft); }
.btn--primary { background: var(--jp-red); box-shadow: none; }
.btn--primary:hover { background: var(--jp-red-strong); }
.btn:active, .jp-tile:active, .jp-bar:active, .jp-slide__cta:active, .jp-fav__item:active { transform: translateY(1px); }

/* ============================================
   메인 상단: 배너 | 신청 타일
   ============================================ */
.jp-top { padding: 28px 0 8px; }
.jp-top__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: stretch;
}
.jp-top__grid--sub { margin-top: 28px; align-items: start; }

.jp-top__grid:not(.jp-top__grid--sub) { grid-template-rows: 340px; }   /* 설계서: 배너 320~360px — 아래 업무 정보가 첫 화면에 더 보이게 */   /* 배너·타일 행 높이 고정 — auto 면 슬라이드 100% 와 서로 따라가며 늘어난다 */
.jp-hero, .jp-hero .banner-slider, .jp-hero .banner-slider__track { height: 100%; }
.jp-hero .banner-slider { border-radius: var(--jp-r-lg); overflow: hidden; }
.jp-hero .banner-slider__slide { height: 100%; }
.jp-hero .banner-slider__img { height: 100%; object-fit: cover; }
.jp-slide {
    height: 100%;
    background-size: cover;
    background-position: 70% center;
    align-items: center;
}
/* 활성 슬라이드만 보인다 — display:flex 를 늘 주면 asap.css 의 숨김(display:none)을 덮어 세 장이 세로로 쌓인다 */
.banner-slider__slide.jp-slide { display: none; }
.banner-slider__slide.jp-slide.is-active { display: flex; }
.jp-slide__body { padding: 44px 48px; max-width: 520px; min-width: 0; }
.jp-slide__title {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--jp-navy);
    text-wrap: balance;
    overflow-wrap: break-word;
    min-width: 0;
}
.jp-slide__desc { margin: 0 0 24px; font-size: 16px; color: var(--jp-ink); }
.jp-slide__cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--jp-r);
    background: var(--jp-navy);
    color: var(--jp-paper);
    font-weight: 700;
    font-size: 15px;
    transition: background-color 0.15s;
}
.jp-slide__cta:hover { background: var(--jp-red-strong); color: var(--jp-paper); }
.jp-slide--dark .jp-slide__title { color: var(--jp-paper); }
.jp-slide--dark .jp-slide__desc { color: var(--jp-on-dark); }
.jp-slide--dark .jp-slide__cta { background: var(--jp-red); }
.jp-slide--dark .jp-slide__cta:hover { background: var(--jp-paper); color: var(--jp-navy); }

/* 자동 넘김 정지 버튼 (footer.php 슬라이더 스크립트가 붙인다) */
.banner-slider__pause {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 11;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--jp-scrim);
    color: var(--jp-paper);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.banner-slider__pause:hover { background: var(--jp-navy); }
.banner-slider__arrow { opacity: 1; }   /* 마우스를 올려야만 보이던 화살표를 항상 보이게 */

.jp-actions { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.jp-actions__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.jp-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 0;
    border-radius: var(--jp-r-lg);
    color: var(--jp-paper);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    transition: transform 0.15s, background-color 0.15s;
}
.jp-tile:hover { color: var(--jp-paper); }
.jp-tile--red { background: var(--jp-red); }
.jp-tile--red:hover { background: var(--jp-red-strong); }
.jp-tile--navy { background: var(--jp-navy); }
.jp-tile--navy:hover { background: var(--jp-navy-2); }

.jp-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: var(--jp-r);
    font-size: 16px;
    font-weight: 700;
    color: var(--jp-ink);
    background: var(--jp-paper);
    box-shadow: inset 0 0 0 1px var(--jp-line);
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
}
.jp-bar:hover { box-shadow: inset 0 0 0 1px var(--jp-navy); color: var(--jp-navy); }
.jp-bar svg { color: var(--jp-navy); }
/* 카카오는 브랜드 노랑을 아이콘 바탕에만 — 버튼 전체를 노랗게 칠하지 않는다 (설계서: 강조색 남용 금지) */
.jp-bar--kakao svg { box-sizing: content-box; padding: 4px; border-radius: 6px; background: var(--jp-kakao); color: var(--jp-kakao-ink); }

/* 공지사항 */
.jp-notice__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jp-notice__head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--jp-navy); }
.jp-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--jp-ink-2); }
.jp-more span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--jp-navy); color: var(--jp-paper); font-size: 13px; line-height: 1; }
.jp-more:hover { color: var(--jp-red); }
.jp-notice__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--jp-navy); }
.jp-notice__list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--jp-line-soft); font-size: 15px; }
.jp-notice__list a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jp-ink); }
.jp-notice__list a:hover { color: var(--jp-red); }
.jp-notice__date { color: var(--jp-ink-3); font-size: 14px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.jp-notice__empty { color: var(--jp-ink-3); justify-content: center !important; }
.jp-new { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 4px; background: var(--jp-red); color: var(--jp-paper); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.jp-member .mcard { height: 100%; }

/* ============================================
   이용 절차 — 회색 띠 + 아이콘 단계
   ============================================ */
.jp-flow { background: var(--jp-gray); padding: 40px 0 44px; margin-top: 40px; border-top: 1px solid var(--jp-line-soft); border-bottom: 1px solid var(--jp-line-soft); }
.jp-flow__tabs { display: flex; justify-content: center; gap: 12px; margin: 0 0 36px; background: none; padding: 0; border: 0; }
.jp-flow__tabs .flow__tab {
    min-width: 160px;
    height: 42px;
    border-radius: var(--jp-r);
    border: 1.5px solid var(--jp-line);
    background: var(--jp-tab-off);
    color: var(--jp-ink-2);
    font-size: 17px;
    font-weight: 700;
    box-shadow: none;
}
.jp-flow__tabs .flow__tab:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
.jp-flow__tabs .flow__tab.is-active { background: var(--jp-navy); border-color: var(--jp-navy); color: var(--jp-paper); }
.jp-flow__list { display: none; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.jp-flow__list.is-active { display: grid; }
.jp-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.jp-flow__step:not(:last-child)::after {
    content: '›';
    position: absolute;
    right: -10px;
    top: 20px;
    color: var(--jp-ink-3);
    font-size: 26px;
    line-height: 1;
}
/* 단계 아이콘 — 선 아이콘 하나로 통일, 움직임 없음 (설계서: 3D·장식 아이콘 지양) */
.jp-flow__ic {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--jp-r-lg);
    background: var(--jp-paper);
    color: var(--jp-navy);
    box-shadow: inset 0 0 0 1px var(--jp-line);
}
.jp-flow__step:hover .jp-flow__ic { color: var(--jp-red); box-shadow: inset 0 0 0 1px var(--jp-red); }
.jp-flow__no { font-size: 12px; font-weight: 700; color: var(--jp-ink-3); font-variant-numeric: tabular-nums; }
.jp-flow__label { font-size: 14px; font-weight: 600; color: var(--jp-ink); line-height: 1.45; }

/* ============================================
   공용 섹션
   ============================================ */
.jp-section { padding: 56px 0; }
.jp-section--tight { padding: 28px 0 40px; }
.jp-title { margin: 0 0 24px; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--jp-navy); text-wrap: balance; }
.jp-subtitle { margin: -12px 0 28px; text-align: center; color: var(--jp-ink-2); }

/* 자주찾는 서비스 */
.jp-fav { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; }
.jp-fav__label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--jp-navy); padding-right: 6px; }
.jp-fav__label svg { color: var(--jp-navy); }
.jp-fav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 16px 0 10px;
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-r);
    background: var(--jp-paper);
    font-size: 16px;
    font-weight: 700;
    color: var(--jp-ink);
    transition: border-color 0.15s;
}
.jp-fav__item:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
.jp-fav__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--jp-r); background: var(--jp-gray); color: var(--jp-navy); flex-shrink: 0; }

/* 이용 혜택 — 같은 모양 카드 3개 반복 대신 제목 | 번호 목록 (설계서: 3열 카드 반복 지양) */
.jp-why { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: start; }
.jp-why__title { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--jp-navy); }
.jp-why__lead { margin: 0; color: var(--jp-ink-2); }
.jp-why__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--jp-navy); counter-reset: why; }
.jp-why__list li { counter-increment: why; border-bottom: 1px solid var(--jp-line); }
.jp-why__list a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; padding: 18px 4px; color: var(--jp-ink); }
.jp-why__list a::before { content: counter(why, decimal-leading-zero); grid-row: span 2; font-size: 14px; font-weight: 700; color: var(--jp-red); font-variant-numeric: tabular-nums; padding-top: 2px; }
.jp-why__list strong { font-size: 18px; font-weight: 700; color: var(--jp-navy); }
.jp-why__list span { font-size: 14px; color: var(--jp-ink-2); }
.jp-why__list a:hover strong { color: var(--jp-red); }

/* 인기 일본 쇼핑몰 (기본 목록) */
.jp-malls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.jp-mall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 84px;
    border: 1px solid var(--jp-line);
    border-radius: var(--jp-r);
    background: var(--jp-paper);
    transition: border-color 0.15s;
}
.jp-mall b { font-size: 17px; font-weight: 800; color: var(--jp-ink); }
.jp-mall span { font-size: 13px; color: var(--jp-ink-3); }
.jp-mall:hover { border-color: var(--jp-navy); }

/* ============================================
   고객센터 · 입금계좌 · 적용환율 · 통관부호
   ============================================ */
/* 고객센터 줄 — 윗선 없이 여백으로 구분(선에 카드가 맞닿아 어색했다, 2026-10-28) */
.jp-section.jp-cs { border-top: 0; padding: 48px 0 72px; }
.jp-cs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.jp-cs__col h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--jp-ink-2); }
.jp-cs__phone { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--jp-ink); font-variant-numeric: tabular-nums; }
.jp-cs__phone--empty { font-size: 18px; color: var(--jp-ink-3); }
.jp-cs__hours { margin: 0 0 18px; color: var(--jp-ink-3); font-size: 14px; line-height: 1.7; }
.jp-cs__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jp-cs__chips a { padding: 8px 14px; border-radius: var(--jp-r); background: var(--jp-paper); box-shadow: inset 0 0 0 1px var(--jp-line); font-size: 13px; font-weight: 600; color: var(--jp-ink); }
.jp-cs__chips a:hover { box-shadow: inset 0 0 0 1px var(--jp-navy); }
.jp-cs__muted { color: var(--jp-ink-3); }
.jp-cs__bank { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--jp-line-soft); }
.jp-cs__bank-name { flex-shrink: 0; padding: 4px 10px; border-radius: 6px; background: var(--jp-gray); color: var(--jp-navy); font-weight: 700; font-size: 14px; }
.jp-cs__bank b { font-size: 18px; color: var(--jp-ink); font-variant-numeric: tabular-nums; }
.jp-cs__bank small { display: block; color: var(--jp-ink-3); font-size: 13px; }
.jp-copy { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--jp-line); border-radius: 6px; background: var(--jp-gray); font-size: 12px; color: var(--jp-ink-2); cursor: pointer; }
.jp-copy:hover { border-color: var(--jp-red); color: var(--jp-red-strong); }
.jp-cs__fx { width: 100%; border-collapse: collapse; border: 1px solid var(--jp-line); text-align: center; }
.jp-cs__fx th { padding: 10px; background: var(--jp-gray); font-weight: 600; font-size: 14px; color: var(--jp-ink); }
.jp-cs__fx th img { width: 20px; vertical-align: -3px; border: 1px solid var(--jp-line); }
.jp-cs__fx td { padding: 12px; font-size: 18px; font-weight: 800; color: var(--jp-navy); font-variant-numeric: tabular-nums; }
.jp-cs__col--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 24px;
    border-radius: var(--jp-r-lg);
    background: var(--jp-gray);
    border: 1px solid var(--jp-line-soft);
}
.jp-cs__avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--jp-navy); color: var(--jp-paper); }
.jp-cs__col--card strong { font-size: 22px; font-weight: 800; color: var(--jp-navy); }
.jp-cs__col--card p { margin: 0; font-size: 14px; color: var(--jp-ink-2); line-height: 1.6; }
.jp-cs__btn { margin-top: 8px; width: 100%; height: 44px; display: grid; place-items: center; border-radius: var(--jp-r); background: var(--jp-navy); color: var(--jp-paper); font-weight: 700; font-size: 14px; }
.jp-cs__btn:hover { background: var(--jp-red-strong); color: var(--jp-paper); }

/* ============================================
   반응형
   ============================================ */
@media (max-width: 1024px) {
    .jp-top__grid { grid-template-columns: minmax(0, 1fr); }
    .jp-top__grid:not(.jp-top__grid--sub) { grid-template-rows: 320px auto; }
    .jp-actions__tiles .jp-tile { min-height: 150px; }
    .jp-flow__list.is-active { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
    .jp-flow__step:nth-child(4n)::after { display: none; }
    .jp-fav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jp-fav__label { grid-column: 1 / -1; }
    .jp-malls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jp-cs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .jp-cs__col--card { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .jp-top { padding-top: 16px; }
    .jp-top__grid:not(.jp-top__grid--sub) { grid-template-rows: 280px auto; }
    .jp-slide { background-position: 78% center; }
    .jp-slide__body { padding: 28px 24px; }
    .jp-slide__title { font-size: 25px; }
    .jp-slide__desc { font-size: 15px; }
    .jp-slide--light .jp-slide__body { background: var(--jp-on-dark); border-radius: 0 16px 16px 0; }
    .jp-tile { font-size: 17px; }
    .jp-flow__tabs .flow__tab { min-width: 0; flex: 1; font-size: 15px; }
    .jp-flow__list.is-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jp-flow__step::after { display: none; }
    .jp-fav { grid-template-columns: minmax(0, 1fr); }
    .jp-why { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .jp-malls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jp-cs__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .jp-tile, .jp-bar, .jp-slide__cta, .jp-fav__item, .jp-mall { transition: none; }
}

/* 일본 물류센터 주소 — 주소 등록 전 안내 */
.jp-addr-wait { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 12px; background: var(--jp-gray); color: var(--jp-ink-2); font-size: 15px; line-height: 1.6; }
.jp-addr-wait b { color: var(--jp-ink); }
#address .addr { max-width: 760px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
#address .addr__card { width: 100%; }
.jp-addr-wait p { margin: 0; }

/* 회원등급 및 혜택 (/guide/grade) */
.grade__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); gap: 10px; margin: 0 0 40px; padding: 0; list-style: none; }
.grade__card { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1px solid var(--jp-line); border-radius: 12px; background: var(--jp-paper); }
.grade__card:first-child { border-color: var(--jp-red); background: var(--jp-red-soft); }
.grade__name { color: var(--jp-navy); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.grade__note { color: var(--jp-ink-3); font-size: 13px; }
.grade__cond { margin: 4px 0 0; color: var(--jp-ink-2); font-size: 14px; line-height: 1.55; }
.grade__perk { margin: 4px 0 0; color: var(--jp-red); font-size: 14px; font-weight: 700; }
.grade__tablewrap { overflow-x: auto; margin-bottom: 20px; border: 1px solid var(--jp-line); border-radius: 12px; }
.grade__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.grade__table th, .grade__table td { padding: 12px 14px; border-bottom: 1px solid var(--jp-line-soft); text-align: center; white-space: nowrap; }
.grade__table thead th { background: var(--jp-navy); color: var(--jp-paper); font-weight: 700; }
.grade__table tbody th { background: var(--jp-gray); color: var(--jp-ink); font-weight: 700; text-align: left; }
.grade__table tbody tr:last-child th, .grade__table tbody tr:last-child td { border-bottom: 0; }
.grade__notes { margin: 0; padding-left: 18px; color: var(--jp-ink-3); font-size: 14px; line-height: 1.7; }
.grade__notes a { color: var(--jp-red); font-weight: 700; }
.grade__notes a:focus-visible { outline: 2px solid var(--jp-focus); outline-offset: 2px; }

/* 리뉴얼 보정 (2026-10-28) */
/* 배너 화살표(좌우 16px + 44px)가 글 첫머리를 가리지 않게 본문을 안쪽으로 */
.jp-slide__body { padding-left: 84px; padding-right: 84px; }
@media (max-width: 640px) { .jp-slide__body { padding-left: 24px; padding-right: 24px; } }
/* 오른쪽 빠른 메뉴 — 노란 원 대신 다른 버튼과 같은 흰 바탕, 카톡은 아이콘 색으로만 표시 */
.qbar__btn--kakao { background: var(--jp-paper); border-color: var(--jp-line); color: var(--jp-kakao-ink); }
.qbar__btn { box-shadow: var(--shadow-md); }
.qbar__btn--customs { color: var(--jp-navy); }
/* 모바일 — 핵심 신청 버튼을 배너보다 먼저 (설계서: 모바일은 핵심 CTA 우선) */
@media (max-width: 640px) {
    .jp-top__grid:not(.jp-top__grid--sub) { grid-template-rows: auto 220px; }
    .jp-actions { order: -1; }
    .jp-actions__tiles .jp-tile { min-height: 112px; flex-direction: row; gap: 10px; }
    .jp-actions__tiles .jp-tile br { display: none; }
    .jp-actions__tiles .jp-tile svg { width: 30px; height: 30px; }
}
@media (max-width: 640px) {
    /* 좁은 화면은 화살표 대신 점·정지 버튼으로 넘긴다 — 화살표가 글을 가렸다 */
    .jp-hero .banner-slider__arrow { display: none; }
}

/* ============================================
   리뉴얼 2단계 — 공통 컨트롤 + 로그인·회원가입 (2026-10-28)
   ============================================ */
/* 공통 버튼 — 모서리 통일, 떠오르는 움직임·그림자 없음 */
.btn, .btn--lg { border-radius: var(--jp-r); box-shadow: none; }
.btn--ghost { background: var(--jp-paper); box-shadow: inset 0 0 0 1px var(--jp-line); color: var(--jp-ink); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--jp-navy); color: var(--jp-navy); background: var(--jp-paper); }

/* 로그인·회원가입·비밀번호 찾기 — 아이보리 바탕 + 선 하나짜리 카드 */
.auth { background: var(--jp-gray); }
.auth__card { border-radius: var(--jp-r-lg); box-shadow: none; border: 1px solid var(--jp-line); }
.auth__input { height: 46px; border-radius: var(--jp-r); }
.auth__input:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 1px; box-shadow: none; }
.auth__btn { border-radius: var(--jp-r); }
.auth__btn:hover { transform: none; box-shadow: none; filter: brightness(0.97); }
.auth__btn--naver { background: var(--jp-paper); color: var(--jp-ink); box-shadow: inset 0 0 0 1.5px var(--jp-naver); }   /* 초록 바탕 흰 글자 2.25:1 → 흰 바탕 */
.auth__btn--naver .auth__btn-ic { color: var(--jp-naver); }
.auth__alert { border-radius: var(--jp-r); }

/* 회원가입 — 카드 안 카드 대신 구분선으로 단락을 나눈다 */
.reg__tabs { border-radius: var(--jp-r); background: var(--jp-gray); }
.reg__tab { border-radius: 6px; }
.reg__tab.is-active { background: var(--jp-navy); }
.reg__section { background: none; border-radius: 0; padding: 24px 0 0; border-top: 1px solid var(--jp-line); }
.reg__form > .reg__section:first-of-type { border-top: 0; padding-top: 0; }
.reg__section-title { color: var(--jp-navy); }
.reg__check, .reg__radio { border-radius: var(--jp-r); }
.reg__notice { border-radius: var(--jp-r); background: var(--jp-gray); border-color: var(--jp-line-soft); }

/* ============================================
   리뉴얼 3단계 — 신청서 (배송대행·구매대행·재고 공용 shipform/purchase 클래스, 2026-10-28)
   ============================================ */
.purchase__step { border-radius: 6px; }
.purchase__error { border-radius: var(--jp-r); background: var(--jp-red-soft); border-color: var(--jp-red-light); color: var(--jp-red-strong); }
.purchase__notice-content { border-color: var(--jp-line); border-radius: var(--jp-r-lg); }
.purchase__notice-content table td, .purchase__notice-content table th { border-color: var(--jp-line); }
.purchase__notice { background: var(--jp-gray); border-color: var(--jp-line); border-left: 3px solid var(--jp-red); border-radius: var(--jp-r); }
.purchase__btn { border-color: var(--jp-line); border-radius: var(--jp-r); }
.purchase__btn--primary { background: var(--jp-red); border-color: var(--jp-red); }
.purchase__btn--primary:hover { background: var(--jp-red-strong); border-color: var(--jp-red-strong); }

.shipform { border-color: var(--jp-line); border-radius: var(--jp-r-lg); }
.shipform--summary { background: var(--jp-gray); }
.shipform__title { color: var(--jp-navy); }
.shipform__tabs { background: var(--jp-gray); border-radius: var(--jp-r); }
.shipform__tab.is-active { box-shadow: inset 0 0 0 1px var(--jp-line); color: var(--jp-navy); }
.shipform__input, .shipform__select { border-color: var(--jp-line); border-radius: var(--jp-r); }
.shipform__input:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 1px; box-shadow: none; }
.shipform__btn { border-color: var(--jp-line); border-radius: var(--jp-r); }
.shipform__btn:hover, .shipform__btn--ghost:hover { border-color: var(--jp-navy); background: var(--jp-paper); color: var(--jp-navy); }
.shipform__btn--ghost { border-color: var(--jp-line); }
.shipform__btn--accent { background: var(--jp-navy); border-color: var(--jp-navy); }   /* 코랄 → 네이비: 강조는 제출 버튼 하나만 버건디 */
.shipform__btn--accent:hover { background: var(--jp-navy-2); color: var(--jp-paper); }
.shipform__btn--primary { background: var(--jp-red); border-color: var(--jp-red); }
.shipform__btn--primary:hover { background: var(--jp-red-strong); border-color: var(--jp-red-strong); color: var(--jp-paper); }
.shipform__svc-item:hover { background: var(--jp-gray); }
.shipform__hs-list { border-color: var(--jp-line); border-radius: var(--jp-r); box-shadow: var(--shadow-lg); }
/* 제품 카드 — 신청서 상자 안의 또 다른 흰 상자 대신 아이보리 행 */
.ship-pcards .ship-pcard { background: var(--jp-gray); border: 0; border-radius: var(--jp-r); }
.ship-pcards .ship-pcard--stock { background: var(--jp-sky); border: 0; box-shadow: inset 3px 0 0 var(--jp-navy); }
.ship-pcard__head { border-bottom-color: var(--jp-line); }

/* ============================================
   리뉴얼 4단계 — 이용안내 (guide/*, 2026-10-28)
   ============================================ */
.guide__sidebar, .guide__content { border-color: var(--jp-line); border-radius: var(--jp-r-lg); }
.guide__sidebar-list a { border-radius: 6px; }
.guide__sidebar-list a.is-active { background: var(--jp-gray); color: var(--jp-navy); box-shadow: inset 3px 0 0 var(--jp-red); border-radius: 0 6px 6px 0; }
.guide__sidebar-title { border-bottom-color: var(--jp-navy); }
.guide__eyebrow { display: none; }   /* 영문 대문자 라벨(GUIDE·FEES …) — 장식 라벨이라 숨긴다 */
.guide__title { color: var(--jp-navy); }
.guide__intro { background: var(--jp-gray); border-radius: var(--jp-r); box-shadow: inset 3px 0 0 var(--jp-navy); }
.guide__section-title { color: var(--jp-navy); }
/* 단계 — 같은 모양 카드 2열 반복 대신 번호 목록 (이모지 아이콘은 숨김) */
.guide__steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--jp-navy); }
.guide__step {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--jp-line);
    border-radius: 0;
}
.guide__step:hover { transform: none; box-shadow: none; background: none; border-color: var(--jp-line); }
.guide__step-icon { display: none; }
.guide__step-num { grid-row: span 3; margin: 2px 0 0; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--jp-red); font-variant-numeric: tabular-nums; }
.guide__step-title { margin-top: 0; color: var(--jp-navy); }
@media (max-width: 640px) { .guide__step { grid-template-columns: minmax(0, 1fr); } .guide__step-num { grid-row: auto; margin-bottom: 4px; } }

/* 요금표·부가서비스·통관 공용 */
.fees__tab { border-radius: var(--jp-r); }
.fees__notice { border-radius: var(--jp-r); }
.fees__table thead th { background: var(--jp-navy); }
.fees__tablewrap { border-radius: var(--jp-r); }
.fees__tab.is-active { background: var(--jp-navy); }
.fees__notice { background: var(--jp-gray); box-shadow: inset 3px 0 0 var(--jp-red); }
.fees__notice strong { color: var(--jp-red-strong); }
.fees__details { border-radius: var(--jp-r); }
.fees__search { border-radius: var(--jp-r); border-color: var(--jp-line); }

/* ============================================
   리뉴얼 5단계 — 마이페이지 (mypage/*, 2026-10-28)
   ============================================ */
.mypage__card, .mypage__counter, .mypage__info, .mypage__progress-card { border-color: var(--jp-line); border-radius: var(--jp-r-lg); }
.mypage__card-title { color: var(--jp-navy); }
/* 카드 안 회색 상자 대신 선으로 나눈 목록 */
.mypage__link, .mypage__stat { background: none; border-radius: 0; border-bottom: 1px solid var(--jp-line-soft); padding: 12px 4px; }
.mypage__link:hover, .mypage__stat:hover, .mypage__row:hover { background: none; color: var(--jp-navy); }
.mypage__row--accent { background: none; }
.mypage__row--accent span, .mypage__row--accent strong { color: var(--jp-red); }
.mypage__link--cta { border: 1px dashed var(--jp-line); border-radius: var(--jp-r); padding: 12px 14px; margin-top: 4px; }
.mypage__link--cta:hover { background: var(--jp-gray); color: var(--jp-navy); border-color: var(--jp-navy); }
.mypage__chip { border-radius: 6px; background: var(--jp-red); }
.mypage__link--cta:hover .mypage__chip { background: var(--jp-red); color: var(--jp-paper); }
/* 작은 버튼 — 검정 대신 네이비 선 버튼 */
.mypage__btn { background: var(--jp-paper); color: var(--jp-navy); box-shadow: inset 0 0 0 1px var(--jp-line); border-radius: 6px; }
.mypage__btn:hover { filter: none; color: var(--jp-paper); background: var(--jp-navy); box-shadow: none; }
/* 카톡 상담 — 노란 띠 대신 중립 줄, 노랑은 작은 표시에만 */
.mypage__row--kakao { background: var(--jp-paper); box-shadow: inset 0 0 0 1px var(--jp-line); border-radius: var(--jp-r); }
.mypage__row--kakao:hover { background: var(--jp-gray); color: var(--jp-kakao-ink); }
.mypage__row--kakao strong { background: var(--jp-kakao); color: var(--jp-kakao-ink); }
.mypage__counter:hover { transform: none; box-shadow: none; border-color: var(--jp-navy); }
.mypage__row, .mypage__deposit { background: none; border-radius: 0; border-bottom: 1px solid var(--jp-line-soft); }
.mypage__all { background: var(--jp-navy); border-radius: var(--jp-r); }
.shipform__submit-hint { margin: 8px 0 0; text-align: right; color: var(--jp-ink-3); }

/* 색값을 직접 적어 둔 asap.css 규칙(#2f6df0 파랑·#8b5cf6 보라·#eef4ff·노랑 안내) — 새 색 체계로 (2026-10-28 리뉴얼) */
.hero__bg, .auth { background: var(--jp-gray); }
.orders__type-tab.is-active, .orders__type-tab--shipping.is-active, .orders__type-tab--purchase.is-active { background: var(--jp-navy); border-color: var(--jp-navy); color: var(--jp-paper); }
.orders__chip { border-radius: 6px; border-color: var(--jp-line); }
.orders__chip.is-active { background: var(--jp-navy); border-color: var(--jp-navy); color: var(--jp-paper); }
.orders__filter-input:focus { border-color: var(--jp-navy); box-shadow: 0 0 0 3px var(--jp-shadow-navy); }
.orders__type-badge { background: var(--jp-sky); color: var(--jp-navy); }
.orders__type-badge--purchase { background: var(--jp-red-soft); color: var(--jp-red-strong); }
.orders__hs, .orders__item-more, .ord-item__url, .ord-item__tracking-lookup { color: var(--jp-navy); }
.ord-item__tracking-lookup:hover, .ord-item__tracking-anchor:hover .ord-item__tracking-arrow { color: var(--jp-red); border-color: var(--jp-red); }
.ord-item__code, .ship-pcard__code { background: var(--jp-sky); color: var(--jp-navy); }
.shipform__hs-item:hover, .shipform__hs-item.is-on { background: var(--jp-sky); }
a.recmall__item:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
/* 사용자 화면 공통 폭 — 목록 화면(신청내역·재고현황 등)도 다른 화면과 같은 폭 */
.purchase .container { max-width: 1240px; padding: 0 24px; }

/* 터치 대상 크기 (설계서 05 접근성 — 모바일에서 누르기 충분한 크기). 보이는 모양은 그대로, 누르는 영역만 넓힌다 */
.banner-slider__dots { gap: 0; }
.banner-slider__dot { position: relative; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; }
.banner-slider__dot::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid var(--jp-on-dark); transition: background-color .2s; }
.banner-slider__dot.is-active { background: transparent; }
.banner-slider__dot.is-active::before { background: var(--jp-paper); }
.banner-slider__dot:focus-visible { outline: 2px solid var(--jp-paper); outline-offset: -2px; }
@media (max-width: 767px) {
    .mcard__copy, .jp-copy, .wha__copy, .banner-slider__pause { min-height: 36px; padding: 0 12px; }
    .mcard__links a, .jp-more { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
}

/* 공지·FAQ 본문 (관리자 편집기 HTML) — 전역 초기화로 빠진 목록 모양을 되살리고 읽기 크기로 */
.ntc__view-body { font-size: 16px; line-height: 1.75; }
.ntc__view-body ul, .ntc__view-body ol { margin: 12px 0; padding-left: 1.4em; }
.ntc__view-body ul { list-style: disc; }
.ntc__view-body ol { list-style: decimal; }
.ntc__view-body li { margin: 4px 0; }
.ntc__view-body h2, .ntc__view-body h3, .ntc__view-body h4 { margin: 28px 0 8px; line-height: 1.4; color: var(--jp-ink); }
.ntc__view-body a { color: var(--jp-navy); text-decoration: underline; text-underline-offset: 2px; }


/* ============================================
   리뉴얼 6단계 — 하위 화면 전체를 메인 시안(docs/img_1.png, 2026-10-29)과 같은 결로
   흰 바탕 · 카드 대신 선 · 제목은 차콜 · 표 머리는 밝게 · 선택 상태는 버건디. 마크업·폼·URL 은 그대로.
   ============================================ */
/* 바탕 — 아이보리 깔고 흰 카드 띄우던 구성을 흰 바탕으로. 헤더 아래 선 하나로 시작 */
.guide, .section, .mypage, .cpn, .purchase, .legal { background: var(--jp-paper); }
.guide, .section, .mypage, .cpn, .purchase { padding: 48px 0 96px; border-top: 1px solid var(--jp-line); }
.auth { background: var(--jp-gray); border-top: 1px solid var(--jp-line); }
.auth__card { border-radius: var(--jp-r-lg); }

/* 화면 제목 — 메인 섹션 제목과 같은 차콜·굵기 */
.guide__title, .purchase__title, .cpn__title, .ntc__title, .auth__title, .legal__title, .txi__title, .nd__title, .mypage__hello {
    color: var(--jp-ink); font-weight: 700; letter-spacing: -0.02em; overflow-wrap: break-word; min-width: 0;
}
.guide__title, .purchase__title, .cpn__title, .ntc__title, .legal__title { font-size: 28px; }
.guide__section-title, .shipform__title, .mypage__card-title, .reg__section-title { color: var(--jp-ink); }
.guide__head { border-bottom-color: var(--jp-line); }

/* 이용안내·고객센터 왼쪽 메뉴 — 상자 없이 선으로 */
.guide__sidebar { padding: 0; border: 0; border-radius: 0; background: none; }
.guide__sidebar-title { margin: 0; padding: 0 0 14px; font-size: 20px; font-weight: 700; color: var(--jp-ink); border-bottom: 2px solid var(--jp-ink); }
.guide__sidebar-list { gap: 0; }
.guide__sidebar-list a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--jp-line); font-size: 15px; font-weight: 500; color: var(--jp-ink-2); }
.guide__sidebar-list a:hover { background: none; color: var(--jp-red); }
.guide__sidebar-list a.is-active { background: none; box-shadow: none; border-radius: 0; color: var(--jp-red); font-weight: 700; }
.guide__content { padding: 0; border: 0; border-radius: 0; background: none; }
.guide__layout { gap: 56px; }
.guide__intro { box-shadow: none; border-radius: var(--jp-r); background: var(--jp-gray); }

/* 안내 상자 — 왼쪽 굵은 띠 대신 아이보리 면 */
.fees__notice, .purchase__notice { box-shadow: none; border-left: 0; border: 1px solid var(--jp-line); background: var(--jp-gray); border-radius: var(--jp-r); }

/* 표 — 머리는 아이보리 면 + 차콜 글자, 윗선은 차콜 2px (공지 목록과 같은 규칙으로 통일) */
.fees__table, .svc__table, .grade__table, .customs__compare, .customs__tariff, .pol__table, .ud__table,
.cpn__table, .dep__table, .notif__table, .addr-book__table, .txi__table, .gp-htable, .pxl__table, .orders__table, .ntc__table {
    border-top: 2px solid var(--jp-ink);
}
.fees__table thead th, .svc__table thead th, .grade__table thead th, .customs__compare thead th, .customs__tariff thead th,
.pol__table thead th, .ud__table thead th, .cpn__table thead th, .dep__table thead th, .notif__table th, .addr-book__table thead th,
.txi__table thead th, .gp-htable thead th, .pxl__table th, .orders__table thead th, .ntc__table thead th, .fees__small th, .shipform__table thead th {
    background: var(--jp-gray); color: var(--jp-ink); font-weight: 700; border-color: var(--jp-line);
}
.svc__table tbody th, .customs__compare tbody th, .customs__tariff tbody th, .grade__table tbody th, .pol__table--info th, .addr-form__table th {
    background: var(--jp-gray); color: var(--jp-ink-2);
}
.fees__tablewrap, .grade__tablewrap { border-radius: 0; border-left: 0; border-right: 0; }
.ntc__table tbody tr:hover td, .orders__table tbody tr:hover td { background: var(--jp-gray); }

/* 탭 — 메인 이용절차 탭과 같은 모양: 선 하나로 묶고 선택은 버건디 면 */
.fees__tab.is-active, .reg__tab.is-active, .orders__type-tab.is-active, .orders__type-tab--shipping.is-active, .orders__type-tab--purchase.is-active,
.orders__tab.is-active, .shipform__tab.is-active, .flow__tab.is-active {
    background: var(--jp-red); border-color: var(--jp-red); color: var(--jp-paper); box-shadow: none;
}
.fees__tabs, .reg__tabs, .shipform__tabs { background: var(--jp-paper); box-shadow: inset 0 0 0 1px var(--jp-line); border-radius: var(--jp-r); }

/* 마이페이지 카드 — 그림자 없이 선 하나, 흰 바탕 위에 */
.mypage__card, .mypage__counter, .mypage__info, .mypage__progress-card, .shipform { background: var(--jp-paper); box-shadow: none; }
.shipform--summary { background: var(--jp-gray); }
.mypage__counter:hover { border-color: var(--jp-red); }

/* 입력칸·버튼 높이 통일 (기획서: 모든 주요 버튼 같은 높이) */
.shipform__input, .shipform__select, .orders__filter-input, .ntc__search-input, .ntc__search-select { min-height: 44px; }
.ntc__search-btn { min-height: 44px; padding: 0 20px; border-radius: var(--jp-r); background: var(--jp-navy); color: var(--jp-paper); }
.ntc__search-btn:hover { background: var(--jp-navy-2); }
.orders__page-btn.is-active, .ntc__page.is-active { background: var(--jp-red); border-color: var(--jp-red); color: var(--jp-paper); }

@media (max-width: 900px) {
    .guide__layout { gap: 32px; }
    .guide__sidebar { position: static; }
}
@media (max-width: 640px) {
    .guide, .section, .mypage, .cpn, .purchase { padding: 32px 0 64px; }
    .guide__title, .purchase__title, .cpn__title, .ntc__title, .legal__title { font-size: 24px; }
}

/* 6단계 보정 (로그인 화면 확인 후, 2026-10-29) — asap.css 의 검정(--text-1) 버튼과 상자 안 상자 */
/* 검색·확인류 = 네이비, 신청으로 가는 버튼 = 버건디 (기획서: 버튼 색 규칙 통일) */
.cpn__search-btn, .addr-book__search-btn, .dep__card-filter, .dep__auto-pay-btn, .dep__refund-btn, .dep__card-refund-btn, .ord-item__tracking-save {
    background: var(--jp-navy); border-color: var(--jp-navy); color: var(--jp-paper); border-radius: var(--jp-r);
}
.cpn__search-btn:hover, .addr-book__search-btn:hover, .dep__card-filter:hover, .dep__auto-pay-btn:hover, .dep__refund-btn:hover, .dep__card-refund-btn:hover, .ord-item__tracking-save:hover {
    background: var(--jp-navy-2); border-color: var(--jp-navy-2); color: var(--jp-paper);
}
.orders__empty .cpn__search-btn { min-height: 44px; padding: 12px 20px; background: var(--jp-red); border-color: var(--jp-red); }
.orders__empty .cpn__search-btn:hover { background: var(--jp-red-strong); }
.dep__pager a.is-active, .cpn__pager-btn.is-active { background: var(--jp-red); border-color: var(--jp-red); color: var(--jp-paper); }
.dep__pay-chip.is-active { background: var(--jp-navy); border-color: var(--jp-navy); color: var(--jp-paper); }
/* 바깥 흰 상자를 걷어 낸다 — 안쪽 아이보리 면과 표가 바로 페이지 위에 */
.dep { padding: 0; border: 0; border-radius: 0; background: none; }
.dep__panel { border-color: var(--jp-line); border-radius: var(--jp-r-lg); }
.dep__history-title { color: var(--jp-ink); border-bottom: 0; padding-bottom: 0; font-size: 18px; font-weight: 700; }
.dep__balance-amount { color: var(--jp-red); }
.cpn__table-wrap { border: 0; border-radius: 0; box-shadow: none; background: none; }
.orders__empty { border-color: var(--jp-line); border-radius: var(--jp-r-lg); color: var(--jp-ink-2); }
/* 재고현황 창고 탭 — asap.css 에 모양이 없어 글자만 칠해졌다 */
.orders__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.orders__tab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--jp-line); border-radius: var(--jp-r); background: var(--jp-paper); color: var(--jp-ink-2); font-size: 14px; font-weight: 600; }
.orders__tab:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
.orders__tab:focus-visible { outline: 2px solid var(--jp-focus); outline-offset: 2px; }
.addr-book { padding: 0; border: 0; border-radius: 0; background: none; }
.addr-book__title { color: var(--jp-ink); }
/* 신청서 파일 첨부 — 브라우저 기본 '파일 선택' 단추를 다른 보조 버튼과 같은 모양으로 */
.purchase input[type="file"], .section input[type="file"] { font-size: 13px; color: var(--jp-ink-3); }
.purchase input[type="file"]::file-selector-button, .section input[type="file"]::file-selector-button {
    min-height: 36px; margin-right: 10px; padding: 0 14px;
    border: 1px solid var(--jp-line); border-radius: var(--jp-r); background: var(--jp-paper);
    color: var(--jp-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.purchase input[type="file"]::file-selector-button:hover, .section input[type="file"]::file-selector-button:hover { border-color: var(--jp-navy); color: var(--jp-navy); }
textarea.shipform__input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.6; }
/* 주소 등록 표 윗선(코랄 점선) · 카드 예치금 제목(코랄) — 다른 표·제목과 같게 */
.addr-form__table { border-top: 2px solid var(--jp-ink); }
.dep__refund-title, .dep__card-refund-title { color: var(--jp-ink); font-weight: 700; }

/* ============================================
   2026-10-29 피드백 (docs/img_2.png)
   ============================================ */
/* 상단 메뉴 글자 키우기 — "조금 더 잘 보이게" */
@media (min-width: 901px) {
    .nav__link { font-size: 17px; font-weight: 700; color: var(--jp-ink); padding: 10px 18px; }
    .nav__sub a { font-size: 15px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
    .nav__link { font-size: 16px; padding: 10px 12px; }
}

/* 실시간 통관스케줄 — 날짜 칸에 그날 통관 진행 글을 바로 적어 보여 주는 큰 달력 (가운데 창) */
.cscal {
    left: 50%; right: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100% - 32px));   /* fixed 라 100% = 화면 폭(스크롤바 제외) */
    max-height: calc(100vh - 48px);
    padding: 24px 28px 28px;
    border-radius: var(--jp-r-lg);
    background: var(--jp-paper);
    animation: cscalInCenter 0.2s ease;
}
@keyframes cscalInCenter {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
.cscal__head { margin-bottom: 18px; }
.cscal__title { font-size: 22px; font-weight: 700; color: var(--jp-ink); }
.cscal__nav, .cscal__close { width: 40px; height: 40px; border: 1px solid var(--jp-line); border-radius: var(--jp-r); }
.cscal__nav:focus-visible, .cscal__close:focus-visible { outline: 2px solid var(--jp-focus); outline-offset: 2px; }
.cscal__dow { margin: 0; padding: 10px 0; font-size: 14px; color: var(--jp-ink-2); background: var(--jp-gray); border: 1px solid var(--jp-line); border-bottom: 0; }
.cscal__dow-sun, .cscal__cell--sun .cscal__cell-day { color: var(--jp-red); }
.cscal__dow-sat, .cscal__cell--sat .cscal__cell-day { color: var(--jp-navy); }
.cscal__grid { gap: 0; border-top: 1px solid var(--jp-line); border-left: 1px solid var(--jp-line); }
.cscal__cell {
    height: auto; min-height: 112px; min-width: 0;
    align-items: stretch; justify-content: flex-start; gap: 6px;
    padding: 8px 10px; border-radius: 0;
    border-right: 1px solid var(--jp-line); border-bottom: 1px solid var(--jp-line);
    background: var(--jp-paper); color: var(--jp-ink); font-size: 14px; font-weight: 500; text-align: left;
}
.cscal__cell--empty { visibility: visible; background: var(--jp-gray); }
.cscal__cell-day { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cscal__cell--today { box-shadow: inset 0 0 0 2px var(--jp-red); background: var(--jp-paper); }
.cscal__cell--today .cscal__cell-day { color: var(--jp-red); }
.cscal__cell--has { background: var(--jp-paper); color: var(--jp-ink); }
.cscal__cell--has:hover { background: var(--jp-gray); color: var(--jp-ink); }
.cscal__cell--has:hover .cscal__dot { background: var(--jp-red); }
.cscal__cell-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
    font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--jp-ink-2);
    white-space: pre-line; overflow-wrap: anywhere;
}
.cscal__dot { display: none; }
.cscal__detail { border-radius: var(--jp-r); background: var(--jp-gray); }
.cscal__detail-list li { white-space: pre-line; }
@media (max-width: 760px) {
    .cscal { padding: 18px 14px 20px; }
    .cscal__cell { min-height: 48px; align-items: center; justify-content: center; padding: 4px; text-align: center; }
    .cscal__cell-text { display: none; }
    .cscal__dot { display: block; background: var(--jp-red); }
    .cscal__cell--has { background: var(--jp-red-soft); }
}
@media (prefers-reduced-motion: reduce) { .cscal { animation: none; } }
/* 신청서 영문상품명 — 품목 영문명으로 잠긴 상태(세관 신고명). 읽기 전용임을 바탕색으로 */
.shipform__input.is-locked, .ship-pcard input[name$="[name_en]"][readonly] { background: var(--jp-gray); color: var(--jp-ink-2); cursor: not-allowed; }

/* ============================================
   리브랜드 '애니메 직구' (2026-11-05) — 로고의 둥근 글씨·남색·주황을 모든 사용자 화면에 입힌다. 마크업·기능은 그대로.
   ============================================ */
/* 주 버튼은 주황 + 남색 글자, 파랑은 선택·링크에만 */
.btn--primary { background: var(--jp-cta); color: var(--jp-cta-ink); font-weight: 700; }
.btn--primary:hover { background: var(--jp-cta-strong); color: var(--jp-cta-ink); }
.btn--primary:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 2px; }
/* 로고: 예전 파일은 위아래 여백을 잘라 썼다 — 새 파일은 여백을 다듬어 그대로 보여 준다 */
.nav__logo-clip { height: auto; overflow: visible; }
.nav__logo-img { height: 58px; width: auto; }
.footer__brand-clip { height: auto; overflow: visible; }
.footer__brand-img { height: 72px; width: auto; filter: none; opacity: 1; }
.auth__brand img { height: 84px; width: auto; }
@media (max-width: 900px) {
    .nav__logo-clip { height: auto; }
    .nav__logo-img { height: 46px; }
}
/* 제목 글꼴 — 로고처럼 둥근 Jua (한 가지 굵기라 400 으로 둔다) */
.guide__title, .purchase__title, .cpn__title, .ntc__title, .auth__title, .legal__title, .txi__title, .nd__title, .shipform__title,
.guide__section-title, .mypage__card-title, .reg__section-title, .addr-book__title, .cscal__title {
    font-family: var(--jp-font-display); font-weight: 400; letter-spacing: 0; color: var(--jp-navy);
}

/* 회원가입 (2026-11-06 개편) — 한 칸 폭을 줄이고, 연락처 칸 안에서 인증을 끝내고, 동의는 제출 바로 위에 모은다 */
.reg__card { max-width: 620px; }
.reg__grid > * { min-width: 0; }
.reg__file { width: 100%; min-width: 0; }
.reg__radios { flex-wrap: wrap; }
.reg__tab:has(input:focus-visible) { outline: 3px solid var(--jp-focus); outline-offset: 2px; }
.reg__phone-row { display: flex; gap: 8px; align-items: stretch; }
.reg__phone-row [hidden] { display: none; }   /* .btn 의 display 가 hidden 을 덮지 않게 */
.reg__phone-row .auth__input { flex: 1 1 0; width: 0; min-width: 0; }   /* width 0: 입력칸 기본 폭이 좁은 화면의 칸을 밀어내지 않게 */
.reg__phone-row--code > * { margin-top: 8px; }   /* 숨겨진 동안 자리를 차지하지 않는다 */
.reg__phone-btn { flex: 0 0 auto; min-width: 116px; min-height: 46px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.reg__phone-btn:focus-visible { outline: 3px solid var(--jp-focus); outline-offset: 2px; }
.reg__phone-btn:disabled { opacity: 0.6; cursor: not-allowed; }
#reg-phone-status:empty, #reg-password-status:empty, #reg-username-status:empty { display: none; }   /* 빈 안내가 줄 간격을 벌리지 않게 */
.reg__agree-section { border-width: 1px 0 0; border-style: solid; border-color: var(--jp-line); }
.reg__agree { min-height: 44px; padding: 10px 12px; }
.reg__agree + .reg__agree { margin-top: 0; }
.reg__agree--all { margin-bottom: 8px; background: var(--jp-gray); border-radius: var(--jp-r); font-size: 15px; font-weight: 700; color: var(--jp-navy); }