/* ─────────────────────────────────────────────────────────────
   온마루 앱 전용 CSS 오버라이드 — 시안(style.css) "다음"에 로드되어 우선 적용.
   시안 원본 파일은 수정하지 않는다(디자인 스냅샷 동기화 시 덮임 방지).
   ───────────────────────────────────────────────────────────── */

/* [2026-07-06 PO 지시] 서브헤더 잔액(my-info)·로그인(form) 상시 표시
   시안 규칙(@media max-width:1440px → display:none)이 1440px 이하 창/줌에서
   코인 표시·로그인을 통째로 숨겨 "사라짐"으로 보였음.
   → 데스크톱·태블릿에서는 축소 배치로 유지하고, 모바일(768px 이하)만 숨김. */
@media (max-width: 1440px) {
  .sub-header .my-info {
    display: flex;
    position: static;       /* 중앙 absolute 해제 → 겹침 방지 위해 우측 흐름 배치 */
    transform: none;
    margin-left: auto;
    gap: 1.25rem;
  }
  .sub-header .form { display: flex; }
  .sub-header .form .form-control { width: 6rem; } /* ID/PASS 인풋 축소 */
}

@media (max-width: 768px) {
  /* 잔액(my-info)은 계속 숨긴다 — 중앙 absolute 배치라 좁은 폭에서 제목과 겹친다 */
  .sub-header .my-info { display: none; }

  /* [2026-08-06 PO 지시] 헤더 우측 메뉴(메인 바로가기·마이페이지·이름·로그아웃)는 모바일에서도 계속 보인다.
     좁은 폭에 들어가도록 글자·여백을 줄이고, 이름은 말줄임 처리한다. */
  .sub-header .form { display: flex; gap: .3rem; font-size: .75rem; min-width: 0; }
  .sub-header .form > a { white-space: nowrap; }
  .sub-header .form img { max-height: 1rem; width: auto; }
  .sub-header .auth-sub-form { gap: .3rem; min-width: 0; }
  .sub-header .auth-sub-form > span.mr-3 {
    max-width: 7rem;
    margin-right: .15rem !important;
    padding: .2rem .55rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sub-header .form .btn:not(.link) { padding: .35rem .6rem; }
  /* 비로그인 인라인 ID/PASS 입력은 자리를 너무 먹는다 → 숨기고 [로그인]이 모달을 열게 둔다(빈 값이면 모달 오픈) */
  .sub-header .form .form-control { display: none; }
  .sub-header h2 { font-size: 1rem; min-width: 0; overflow: hidden; }
  .sub-header h2 img { flex: 0 0 auto; }

  /* 다국어 보정 (2026-08-20) — 헤더 우측 링크가 언어에 따라 길어져 헤더가 가로로 밀렸다.
     실측(375px): ko "메인 바로가기" 63px · en "Go to Main" 58px · ja "メインへ戻る" 69px 가
     50px대 칸을 넘쳐 페이지 가로 스크롤이 최대 111px까지 생겼다(일본어 마케팅 화면).
     시안 CSS는 두고, 모바일에서만 이 링크를 아이콘만 남겨 글자 길이에서 자유롭게 한다.
     (제목·잔액은 이미 위에서 줄이거나 숨겼고, 남은 가변 요소가 이 링크였다) */
  .sub-header .form > a > img { margin: 0; }
  .sub-header .form > a { font-size: 0; gap: 0; }        /* 글자 숨김 — 아이콘은 그대로 */
  .sub-header .form > a img { max-height: 1.15rem; }

  /* ── 홈 바로가기 오터치 개선 (2026-09-04, PO 지시 — 회원 문의 "홈화면 터치가 안된다") ──
     위 2026-08-20 보정이 라벨을 지우면서 홈 링크가 아이콘 18px 짜리 점이 됐고,
     바로 옆 [로그인] 버튼과 4.8px(gap .3rem) 간격이라 손가락이 로그인을 눌렀다.
     (빈 ID/PASS 로 로그인을 누르면 로그인 모달이 떠서 "홈이 안 눌린다"로 보인다.)
     → 아이콘 확대 + 짧은 "Home" 라벨 + 터치 영역 44px + 로그인과의 간격 확보.
     라벨을 원문(메인 바로가기/Go to Main/メインへ戻る)으로 되돌리면 08-20 가로 넘침이 재발하므로
     길이가 고정된 "Home" 을 ::after 로 붙인다(원문 텍스트는 font-size:0 로 계속 숨김).
     ⚠ 선택자를 `.sub-header .form > a` 로 두면 로그인 상태의 **마이페이지 아이콘 링크**에도
        "Home" 이 붙는다(그 링크는 중첩된 .auth-sub-form 의 자식) → 바깥 .form 만 지목한다. */
  .sub-header .container-fluid > .form > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;            /* 손가락 최소 터치 영역 (헤더 높이 50px 안에 들어간다) */
    padding: 0 .35rem;
    margin-right: .6rem;         /* [로그인] 버튼과의 오터치 간격 */
    flex: 0 0 auto;
  }
  .sub-header .container-fluid > .form > a img { max-height: 1.5rem; }
  .sub-header .container-fluid > .form > a::after {
    content: "Home";
    margin-left: .25rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
}

/* 자계정 컨텍스트는 좁은 헤더에서 분리해 모든 회원 화면의 헤더 바로 아래에 한 번만 알린다.
   등급·플랜의 파랑과 경쟁하지 않도록 --sub 앰버를 얕게 쓰고, 계정 코드와 복귀 동작만 절제해 강조한다. */
.acting-account-bar {
  position: relative;   /* 홈 전면 배경 <video>가 뒤에 오면서 바를 덮었음(dev 실측) → 쌓임 맥락 확보 */
  z-index: 20;          /* 모달(1050+)·대리로그인 배너(100000)보다는 낮게 */
  width: 100%;
  padding: .75rem 15px;   /* 위아래 여백 대칭 — 아래가 붙어 보인다는 PO 지적(2026-08-06) */
}
.acting-account-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: .625rem .75rem .625rem 1.125rem;
  border: 1px solid rgba(237, 162, 0, .28);
  border-radius: 999px;
  /* 홈처럼 어두운 전면 배경 위에도 얹히므로 반투명이 아닌 불투명 배경을 쓴다
     (반투명일 때 라벨이 배경 영상에 묻혀 안 읽혔음 — dev 실측 2026-08-06) */
  background: linear-gradient(90deg, #fff8ea, #fffdf8);
  box-shadow: 0 1px 2px rgba(31, 24, 6, .06);
  color: var(--dark);
}
.acting-account-bar__context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  min-width: 0;
}
.acting-account-bar__label {
  color: #755917;
  font-size: .875rem;
  font-weight: 600;
}
.acting-account-bar__code {
  max-width: 100%;
  padding: .25rem .7rem;
  overflow-wrap: anywhere;
  border: 1px solid rgba(237, 162, 0, .22);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .82);
  color: var(--dark);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.35;
}
.acting-account-bar__restore.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: .4rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(117, 89, 23, .2);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .82);
  color: #5f4918;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.acting-account-bar__restore svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.acting-account-bar__restore.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(117, 89, 23, .32);
  background-color: #fff;
}
.acting-account-bar__restore.btn:focus-visible {
  outline: 2px solid rgba(237, 162, 0, .5);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* 좁아져도 복귀 버튼은 오른쪽에 유지한다(PO 지시 2026-08-06) — 세로 스택 금지.
     대신 좌측 라벨/코드가 줄바꿈으로 접히고 버튼은 축소되지 않게 고정한다. */
  .acting-account-bar { padding: .5rem .75rem; }
  .acting-account-bar__inner {
    gap: .625rem;
    padding: .5rem .5rem .5rem .875rem;
    border-radius: var(--radius);
  }
  .acting-account-bar__label { font-size: .8125rem; }
  .acting-account-bar__code { font-size: .8125rem; letter-spacing: .03em; }
  .acting-account-bar__restore.btn { padding: .5rem .7rem; font-size: .78125rem; }
}

@media (max-width: 380px) {
  /* 아주 좁은 폭에서는 버튼 글자를 아이콘 옆 최소 표기로 — 그래도 오른쪽 자리는 지킨다 */
  .acting-account-bar__inner { padding-left: .625rem; }
  .acting-account-bar__label { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .acting-account-bar__restore.btn { transition: none; }
  .acting-account-bar__restore.btn:hover:not(:disabled) { transform: none; }
}

/* 리치 에디터 본문 렌더 (2026-07-07 — RichContent / .prose-editor 공통 표시)
   시안 CSS/Tailwind와 무관하게 게시물·공지·약관 등 에디터 저장 HTML의 서식을 보장 */
.rich-content p { margin: 0.4em 0; }
.rich-content h2 { font-size: 1.35em; font-weight: 800; margin: 0.7em 0 0.35em; line-height: 1.3; }
.rich-content h3 { font-size: 1.15em; font-weight: 700; margin: 0.6em 0 0.3em; line-height: 1.3; }
.rich-content ul { list-style: disc; padding-left: 1.4em; margin: 0.4em 0; }
.rich-content ol { list-style: decimal; padding-left: 1.4em; margin: 0.4em 0; }
.rich-content li { margin: 0.15em 0; }
.rich-content a { color: #1a6bff; text-decoration: underline; }
.rich-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.4em 0; }
.rich-content strong { font-weight: 700; }
.rich-content em { font-style: italic; }

/* 로그인/회원가입 등 모달 X 버튼 클릭 영역 확대 (2026-07-08 PO 제보 — 히트박스 협소로 클릭 어려움) */
.modal-header .close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.modal-header .close span,
.modal-header .close i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 푸터 GNB '홈' 버튼 추가 (2026-07-10 PO 지시)
   - FooterNav 공용 컴포넌트가 홈을 첫 항목으로 렌더 → style.css L44~48의 li:nth-child(1~5) 색상이
     한 칸씩 밀린다. 시안 CSS 직접 수정 금지 원칙에 따라 여기서 1~6번을 재매핑한다.
   - 2~6번은 style.css의 기존 값(광고~자금) 그대로 시프트한 것. */
footer nav li:nth-child(1) a {background-color: #00d2ff; background-image: linear-gradient(to bottom, #5ce4ff 0%, #00d2ff 100%);}
footer nav li:nth-child(2) a {background-color: #c1175e; background-image: linear-gradient(to bottom, #e73d84 0%, #c1175e 100%);}
footer nav li:nth-child(3) a {background-color: #d28900; background-image: linear-gradient(to bottom, #f9b020 0%, #d28900 100%);}
footer nav li:nth-child(4) a {background-color: #09a163; background-image: linear-gradient(to bottom, #31c98b 0%, #09a163 100%);}
footer nav li:nth-child(5) a {background-color: #356bcc; background-image: linear-gradient(to bottom, #5e94f5 0%, #356bcc 100%);}
footer nav li:nth-child(6) a {background-color: #6330ca; background-image: linear-gradient(to bottom, #8653ed 0%, #6330ca 100%);}
/* 홈 아이콘 원본(31×30)이 기존 아이콘(19px대)보다 커서 버튼 높이가 6px 더 컸음 → 높이 통일 */
footer nav li:nth-child(1) a img {height: 19px; width: auto;}

/* 메인 헤더 마이페이지 아이콘 li 추가에 따른 시안 nth-child 스타일 보정 (2026-07-10 PO 지시)
   - style.css L15 `.main-header li:nth-child(2)`(라운드 pill)가 아이콘 li 삽입으로 '이름'에 걸림 → 로그아웃으로 되돌린다.
   - style.css L752 `@media(575px) .main-header li:nth-child(3)`(구 햄버거 절대배치)가 로그아웃에 걸림 → 무력화. */
.main-header li.mypage-icon + li {border: 0; padding: 0; border-radius: 0;}
.main-header li.mypage-icon ~ li:last-child {border-radius: 2rem; border: 1px solid rgba(255, 255, 255, 0.5); padding: .35rem 1rem;}
@media (max-width: 575px) {
  .main-header li.mypage-icon ~ li:nth-child(3) {position: static; left: auto;}
}

/* 마이페이지 계보도 메뉴 아이콘 (2026-07-15 PO 지시)
   - 나의 멤버와 중복되던 ic_my2 대신 계층 구조를 나타내는 기존 40x40 ic_customer 사용.
   - SnbNav.tsx는 다른 세션이 수정 중이므로 경로 한정 오버라이드로 충돌을 피한다. */
.mypage-wrap .snb a[href$="/mypage/tree"] img {
  content: url("/assets/images/ic_customer.png");
}
.mypage-wrap .snb li:is(.active, :hover):has(a[href$="/mypage/tree"]) a {
  background-color: #edf3ff;
}

/* 마이페이지 계보도 본문 폰트 +1px (2026-07-15 PO 지시)
   공용 GenealogyGraph를 사용하는 관리자 계보도에는 영향이 없도록 현재 tree 메뉴 활성 상태로 한정한다. */
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) .mypage-cont > h3 {
  font-size: clamp(21px, calc(1.18vw + 14.3296px), 37px);
}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="selectedSummary"] span {font-size: 11px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="selectedSummary"] strong {font-size: 16px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="selectedSummary"] small {font-size: 12px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="metrics"] span {font-size: 11px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="metrics"] strong {font-size: 20px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="metrics"] small {font-size: 11px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="treeActions"] button {font-size: 12px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="legendBar"] {font-size: 11px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="canvas"]::after {font-size: 10px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="nodeIdentity"] strong {font-size: 14px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="rootNode"] [class*="nodeIdentity"] strong {font-size: 15px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="nodeIdentity"] span {font-size: 11px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="badges"] > span {font-size: 10px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="nodeFooter"] {font-size: 10px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="emptyState"] strong,
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="graphLoading"] strong {font-size: 17px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="emptyState"] p,
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="graphLoading"] span {font-size: 13px;}
.mypage-wrap:has(.snb li.active a[href$="/mypage/tree"]) [class*="graphError"] {font-size: 14px;}

/* 재무 선물하기 모달 (2026-07-15 PO 지시)
   - 내용 스크롤은 유지하되 흰 폼 우측에 보이는 브라우저 스크롤바는 숨긴다. */
#popup4 .gift-modal-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#popup4 .gift-modal-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 자금 페이지 '총 보유 자산' 상단 버튼: 카드관리 아이콘(ic_btn_card 54x54)이 커서 버튼 높이가
   '자동결제완료 내역'(아이콘 19x18)보다 컸음 → 두 버튼 아이콘을 같은 높이로 고정해 높이 정렬 (PO 2026-07-15) */
.my-asset .pay .btns .btn img { height: 1.125rem; width: auto; }

/* 총 보유 자산 좌측 = 잔액 + '크리토프지갑 바로가기'(외부 새 창) 한 줄 묶음 (PO 2026-08-06).
   .pay가 space-between 2분할이라 버튼을 직계 자식으로 두면 3분할로 흩어짐 → 좌측 그룹으로 감싼다.
   잔액이 계속 주인공이도록 링크는 회색 저채도·작은 외부 링크 아이콘·1px 리프트만 사용한다. */
.my-asset .pay .asset-total { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.my-asset .pay .asset-total .asset-wallet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem .85rem;
  border-color: #d9dde2;
  border-radius: .75rem;
  background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  color: #606a75;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.my-asset .pay .asset-total .asset-wallet-link svg {
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
  opacity: .72;
}
.my-asset .pay .asset-total .asset-wallet-link:hover {
  transform: translateY(-1px);
  border-color: #c8cdd4;
  background: #fff;
  color: #404a55;
}
.my-asset .pay .asset-total .asset-wallet-link:focus-visible {
  outline: 2px solid rgba(0, 137, 242, .28);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .my-asset .pay .asset-total .asset-wallet-link { transition: none; }
  .my-asset .pay .asset-total .asset-wallet-link:hover { transform: none; }
}

/* A-10 수동 자계정 생성 — 활성 플랜 카드 하단 프리미엄 버튼 (PO "고급스럽게" 2026-07-20)
   플랜 카드 활성 톤(파랑)과 동계열 그라데이션 + 글로우 섀도 + ✚ 아이콘 + 호버 리프트 */
.plan-select .subaccount-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  margin-top: .5rem;
  padding: .8125rem 1rem;
  border: 0;
  border-radius: .75rem;
  background: linear-gradient(135deg, #4e9fff 0%, #356bcc 55%, #2b57ad 100%);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(53, 107, 204, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.plan-select .subaccount-add-button::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / .55rem 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px .55rem no-repeat,
    rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.plan-select .subaccount-add-button:hover,
.plan-select .subaccount-add-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(53, 107, 204, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
  filter: brightness(1.05);
}
.plan-select .subaccount-add-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(53, 107, 204, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.plan-select .subaccount-add-button:focus-visible {
  outline: 2px solid #9cc4ff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .plan-select .subaccount-add-button { transition: none; }
  .plan-select .subaccount-add-button:hover { transform: none; }
}

.subaccount-modal .modal-dialog { max-width: 430px; }
.subaccount-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 1.5rem 3rem rgba(26, 54, 108, .2);
}
.subaccount-modal .modal-header {
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.subaccount-modal .modal-header h5 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.subaccount-modal .modal-header .close { margin: 0 0 0 auto; color: var(--text); opacity: 1; }
.subaccount-modal .modal-body { padding: 1.5rem; }
.subaccount-modal .modal-body > p { margin: 0 0 1rem; color: var(--gray); line-height: 1.6; }
.subaccount-charge-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  padding: 1.25rem;
  border: 1px solid #dbe6ff;
  border-radius: var(--radius);
  background: #f5f8ff;
}
.subaccount-charge-summary span { align-self: center; color: var(--gray); }
.subaccount-charge-summary strong { color: #234f9f; font-size: 1.375rem; }
.subaccount-charge-summary b { grid-column: 2; color: #356bcc; font-size: .875rem; text-align: right; }
.subaccount-modal .modal-body > ul { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--gray); font-size: .875rem; }
.subaccount-modal .modal-body > ul li { margin-top: .35rem; list-style: disc; }
.subaccount-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.5rem; }
.subaccount-modal-actions .btn,
.subaccount-complete > .btn { width: 100%; padding: .875rem 1rem; }
.subaccount-error { margin-top: 1rem !important; color: #c62828 !important; font-weight: 700; }
.subaccount-complete { text-align: center; }
.subaccount-complete > span { display: block; color: var(--gray); font-size: .875rem; }
.subaccount-complete > strong { display: block; margin: .4rem 0 1.25rem; color: #356bcc; font-size: 1.75rem; }
.subaccount-complete dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-align: left;
}
.subaccount-complete dt { color: var(--gray); font-weight: 400; }
.subaccount-complete dd { margin: 0; text-align: right; font-weight: 700; }

@media (max-width: 575px) {
  .subaccount-modal .modal-dialog { margin: 1rem; }
  .subaccount-modal .modal-body { padding: 1.25rem; }
}

/* 메인 국가 배너: 데스크톱은 한 줄 10개로 센터 정렬하고 초과 항목은 다음 줄 중앙에 배치한다 (PO 2026-07-30).
   변경 이력: 구 12열(2026-07-22) → 10열 센터(2026-07-30 PO).
   모바일(768px 이하)은 style.css의 5열 규칙을 그대로 사용한다. */
@media (min-width: 769px) {
  .index section { max-width: 970px; }
  .index nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .index nav ul > li { flex: 0 0 calc((100% - 9rem) / 10); }
}

/* 파트너 팝업 목록 아이콘 라운딩 통일: 업로드 원본의 사각/원형 편차를 CSS로 통일 (PO 2026-07-31).
   긴 프로모 배너도 동일 반경으로 통일한다 (PO 2026-07-31). */
.partner-popup .list img { border-radius: var(--radius); }
.partner-popup .notice img { border-radius: var(--radius); }

/* 자금 상단 인사말 — 자계정으로 로그인한 상태 배지 (PO 지시 2026-08-04).
   이름은 모계정 명의라 그대로 두고, 뒤에 배지를 붙여 "지금 자계정을 보고 있다"를 알린다.
   색은 시안 팔레트 --sub(앰버). --main(파랑)은 이미 등급·플랜 강조(.spot)가 쓰고 있어
   같은 문장에서 겹치면 무엇이 강조인지 흐려진다. 글자색은 --dark로 잡아 대비를 확보했다. */
.user-lv .w-box p .sub-account-tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .2rem .75rem;
  border-radius: var(--radius-lg);
  background-color: var(--sub);
  color: var(--dark);
  font-size: .875rem;
  font-weight: bold;
  line-height: 1.5;
  vertical-align: .35em;   /* 본문 2.25rem 대비 시각 중앙 */
  white-space: nowrap;
}

/* 결제 팝업(플랜 승급 등) — 화면에 여유가 있는데도 늘 스크롤바가 생기던 문제 (PO 지시 2026-08-06).
   원인 두 가지: ① .modal-content가 aspect-ratio 440/680으로 고정돼 뷰포트가 남아도 커지지 않는다
   ② .inner-scroll이 max-height:50vh로 못박혀 있다. 팝업이 남는 높이를 쓰도록 풀고,
   내용이 진짜 넘칠 때만 스크롤한다. 기본 크기(680px)는 min-height로 유지해 종전 인상을 지킨다.
   시안 CSS는 건드리지 않는다(활성 제약 1). */
.c-layer-popup .modal-content {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  min-height: min(680px, calc(100vh - 3rem));
  min-height: min(680px, calc(100dvh - 3rem));
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
}
.c-layer-popup .modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.c-layer-popup .c-layer-popup__cont { display: flex; flex-direction: column; min-height: 0; }
.c-layer-popup .c-layer-popup__cont .inner-scroll { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; }

/* 결제 항목 카드 — 왼쪽 설명 블록이 금액 칸까지 바짝 붙어 답답했다. 오른쪽에 숨 쉴 틈을 준다 (PO 지시 2026-08-06) */
.c-layer-popup .list.angle li .tit { padding-right: 0.75rem; }

/* ─────────────────────────────────────────────────────────────
   다국어 대응 — 모바일 푸터 GNB 라벨 (2026-08-14)

   시안은 모바일에서 라벨(span)을 아이콘 아래 절대배치하고 `width:100%`로 li 폭(≈40px)에 가둔다.
   한국어 2글자("광고")는 들어가지만 영어 "Distribution"(62px)·일본어 "マーケティング"(82px)는
   넘쳐 이웃 라벨과 겹친다(dev 실측 375px). 시안 CSS는 손대지 않고(활성 제약 1) 여기서만 보정한다.

   ① 항목 간격을 좁혀 li 폭을 40 → 50px로 넓히고
   ② 라벨은 글자 폭만큼만 차지하게(max-content) 중앙 정렬, 글자를 한 단계 줄인다.
   실측: 가장 긴 en "Distribution" 52px·ja "マーケティング" 70px < 항목 중심 간격 58px → 겹침 없음.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  footer nav ul { gap: 0.5rem; }
  footer nav li span {
    width: max-content;
    max-width: 5.5rem;
    left: 50%;
    transform: translate(-50%, 100%);
    /* 2026-09-04 PO 지시 — 라벨이 너무 작아 안 읽힌다: 기존 크기 +3px → 같은 날 +2px 추가(누계 +5px).
       루트 글꼴이 반응형(clamp 13~16px)이라 rem 로만 쓰면 폭마다 증가폭이 달라진다 → calc 로 증가폭 고정.
       라벨은 li 밖으로 절대배치돼 아이콘 배치는 그대로이고, ul 의 padding-bottom(1.7rem) 안에 들어간다
       (실측 375px: 라벨 아래끝이 footer 바닥보다 12px 위 — 잘리지 않음). */
    font-size: calc(0.625rem + 5px);
    line-height: 1.2;
    white-space: nowrap;
  }
  /* ⚠ en·ja 는 라벨이 길어 같이 키우면 이웃 라벨과 겹친다 — 320px 실측(현재 크기 기준)
     이웃 간 최소 여백이 en 12.8px · ja 10.5px 뿐이고, +3px 로 키우면 ja "マーケティング" 는 54→74px 로
     늘어 그 여백을 넘어선다. → 한국어만 키우고 두 언어는 08-14 크기를 유지한다. */
  html[lang="en"] footer nav li span,
  html[lang="ja"] footer nav li span { font-size: 0.625rem; }
}

/* ─────────────────────────────────────────────────────────────
   홈 화면 하단 GNB 고정 (2026-09-04, PO 지시 — "고정해봐")

   홈만 GNB 가 화면에 붙어 있지 않았다. 시안에 규칙이 둘 있고 명시도로 갈린다:
     .body-index footer        (0,1,1) position: relative · background: none   ← 이김
     @media(≤575) footer       (0,0,1) position: fixed; bottom/left/right: 0
   미디어쿼리는 명시도를 올려주지 않으므로 홈에서는 relative 가 남아 GNB 가 문서 끝에 놓인다.
   실측(360×740): 문서 높이 780 > 화면 740 이라 스크롤이 생기고, 화면이 더 짧은 기기
   (아이폰 SE 사파리 ≒ 553px)에서는 .index 의 min-height:600px 때문에 GNB 가 통째로 화면 밖이다.
   → 위치만 고정하고 **배경은 투명(background:none) 그대로 둔다** — 홈 전면 영상 위에 검은 띠를
   만들지 않기 위함(PO 권고안 채택). 시안 CSS 는 손대지 않는다(활성 제약 1).

   ⚠ 흐름에서 빠진 만큼 본문에 하단 여백을 준다 — 안 주면 국가 타일 마지막 줄이 GNB 뒤로 숨는다.
     .index 는 height 가 지정된 flex 박스이고 box-sizing:border-box 라(common.css) 패딩이 높이를
     파고들어 내용이 위로 밀린다 = 문서를 늘리지 않고 겹침만 없앤다.
   ⚠ 여백 값은 GNB 높이보다 커야 한다. GNB 높이는 폭에 따라 변한다 — li a 가 aspect-ratio:1/1 이라
     li 폭(= 화면 폭에 비례)이 곧 아이콘 높이다(실측 360px 93px · 430px 약 104px). 8rem(104px)으로 덮는다.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .body-index footer { position: fixed; height: auto; }
  .body-index #content.index { padding-bottom: 8rem; }
}

/* ── 품앗이 플랜 선택 3장 좌우 균형 (2026-08-19, D91 — PO 지시) ──────────
   C플랜 카드 제외로 3장이 되어 시안의 4칸 그리드(repeat(4,1fr))가 우측 빈칸을 남김 → 3칸 균등 배분.
   ⚠ 이 파일이 style.css보다 뒤에 실려 아래 기본 규칙이 시안의 모바일(≤575px) 2칸 규칙까지 이기므로,
   모바일 2칸은 미디어 블록으로 명시 보존한다. C플랜 재개 시 이 블록 전체를 제거할 것. */
.plan-select ul { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575px) {
  .plan-select ul { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   다국어 — 모바일 헤더가 가로로 밀리지 않게 (2026-08-20)

   언어 버튼은 언어 이름을 그대로 쓴다("한국어"·"English"·"日本語"). 좁은 화면에서는
   이 폭이 그대로 헤더를 넘겨 페이지에 가로 스크롤을 만든다(375px 실측: 버튼 우측 끝 414px).
   모바일에서는 지구본 아이콘만 남기고 이름과 화살표를 접는다 — 눌러 열면 목록에 이름이 그대로 나온다.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  [data-lang-switcher] > button {
    font-size: 0;              /* 언어 이름 숨김 — 아이콘만 */
    gap: 0;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  [data-lang-switcher] > button > svg:last-of-type { display: none; }  /* 화살표 */
  [data-lang-switcher] > button > svg:first-of-type { width: 16px; height: 16px; }
  [data-lang-switcher] [role="listbox"] { font-size: .8125rem; }
}

/* 다국어 — 모바일에서 본문 블록이 뷰포트를 넘지 않게 (2026-08-20)

   시안은 한국어 문장 길이에 맞춰 짜여 있어, 같은 자리에 일본어·영어가 들어가면
   블록이 뷰포트를 넘긴다(375px 실측: ja 마케팅 111px·자금 63px·글로벌 84px 가로 스크롤,
   한국어에서도 8~12px는 이미 넘고 있었다).
   레이아웃을 바꾸지 않고, **넘치지 않도록 접히게만** 한다. */
@media (max-width: 575px) {
  #wrap, #content, .sub-content { overflow-x: hidden; }   /* 마지막 안전망 */
  #content p, #content strong, #content b, #content h3, #content .info,
  #content label, #content .btn { overflow-wrap: anywhere; }
  #content .w-box > .left, #content .w-box > .right { max-width: 100%; min-width: 0; }
}

/* ── 광고 카테고리 라벨 — 긴 번역어가 칸을 넘어 옆 라벨과 겹치던 문제 (2026-08-21) ──────────
   시안 CSS 는 한국어 기준으로 word-break:keep-all 이라 단어 안에서 끊기지 않는다.
   한국어(오픈마켓 55px)는 칸에 맞지만 일본어(オープンマーケット 96px)는 넘쳐
   375px 화면에서 옆 라벨(F&B)과 시각적으로 충돌했다(운영 실측).
   overflow-wrap:anywhere = "평소엔 단어를 지키되, 넘칠 때만 끊는다" —
   한국어 표시는 그대로 두고 넘치는 언어만 줄바꿈시킨다. 시안 CSS 는 건드리지 않는다(활성 제약 1). */
.sub.ad ul.list > li > a {
  overflow-wrap: anywhere;
}

/* ── 자동 생성 게시판 섹션 (PO 지시 2026-09-08) ──────────────────────────────
   카테고리 관리의 노출 설정(가로 3~6·세로 1~20)이 --auto-cols 로 내려온다.
   가로 3 = 생애 라이프 사이클 · 4 = 마스터 클래스(시안 기본) · 6 = 프레스티지와 같은 폭.
   소비자(.network)뿐 아니라 마케팅·광고 페이지에도 붙으므로 섹션 여백·제목 중앙을 자체 보장한다. */
.auto-board-section { padding: 5rem 0; }
.auto-board-section h3 { text-align: center; justify-content: center; letter-spacing: 0; }
.auto-board-section .tab-nav { margin-bottom: 2.5rem; }
.auto-board-section ul.board-list { grid-template-columns: repeat(var(--auto-cols, 4), 1fr); }
@media (max-width: 575px) {
  .auto-board-section { padding: 3rem 0; }
  /* 시안 lifecycle 모바일과 동일 축 — 한 줄 1개 */
  .auto-board-section ul.board-list { grid-template-columns: 1fr; }
}
/* 가로 6은 프레스티지 아너스와 같은 간격(1.875rem)으로 — 카드 폭까지 동일해진다(PO 크기 매핑, 실측 213→221px) */
.auto-board-section[data-cols="6"] ul.board-list { gap: 1.875rem; }

/* 게시물 태그 칩(정렬 탭 대체, PO 지시 2026-09-08) — 태그가 많으면 줄바꿈, 시안 .tab-nav 알약 스타일 그대로 */
.tab-nav.tag-nav ul { flex-wrap: wrap; row-gap: .625rem; justify-content: center; }

@media (max-width: 575px) {
  /* 모바일 기간 검색: 고정 폭 날짜 입력과 버튼이 한 줄에 몰려 화면 밖으로 밀리던 문제를 막는다.
     날짜는 첫 줄의 남는 폭을 나눠 쓰고, 버튼이 2개인 문의 화면만 둘째 줄을 반씩 채운다. */
  .search-form .date-search {
    width: 100%;
    flex-wrap: wrap;
  }
  .search-form .date-search .form-control {
    flex: 1 1 calc((100% - 2rem) / 2);
    min-width: 0;
    max-width: none;
  }
  .search-form .date-search .bridge { flex: 0 0 auto; }
  .search-form .date-search .btn {
    flex: 0 0 auto;
    min-height: 44px;
    height: auto;
    white-space: nowrap;
  }
  .search-form .date-search:has(.btn + .btn) .btn {
    flex: 1 1 calc((100% - var(--gap-sm)) / 2);
    min-width: 0;
  }
  .search-form .date-search .btn:only-of-type { margin-left: auto; }
}

/* 문의 답변 메타: 작성자와 날짜가 붙어 한 단어처럼 보이지 않도록 간격을 둔다.
   날짜는 한 덩어리로 줄바꿈하고 크기와 색을 낮춰 보조 정보의 위계를 유지한다.
   데스크톱 신고까지 해소하도록 모바일 전용이 아닌 전 폭 공통 규칙으로 적용한다. */
.reply-content > b + .date {
  display: inline-block;
  margin-left: .5rem;
  color: var(--gray);
  font-size: .875rem;
  white-space: nowrap;
}

/* ─── 공지사항 요약 박스 (자금 화면) — 시안 sub8_1 `section.notice-section`, 2026-09-15 ───
   섹션 여백·h3 정렬은 기존 `.finance section` 규칙이 그대로 받으므로 따로 두지 않는다.
   다만 [전체보기]는 시안에 없던 버튼이라 `.btn-box .btn` 기본 크기(min-width 20% ·
   max-width 300px)가 요약 박스에 비해 과하게 크다 — 이 섹션에서만 줄인다.
   🚨 목록 페이지(`/notice`)의 버튼은 건드리지 않는다(선택자를 .finance 안으로 한정). */
.finance .notice-section .btn-box { margin-top: 1.5rem; margin-bottom: 0; }
.finance .notice-section .btn-box .btn {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  font-size: 1rem;
  padding: .75rem 2.25rem;
}

/* ── 자금 멤버십 타일 중 '모달을 여는' 항목은 button 이다 (2026-09-16)
   시안 CSS 는 `.membership li` 와 `.membership li img` 만 잡고 a 자체에는 스타일이 없어,
   button 기본 모양(테두리·배경·폰트·패딩)만 지우면 링크 타일과 픽셀이 같아진다.
   전역 `a {color: inherit; text-decoration: none}` 에 맞춰 색도 상속시킨다. */
.membership li > button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

/* ── 카드·타일 그리드 열 폭 균등화 (PO 신고 2026-09-22 — 1차 게시물 카드 · 2차 프레스티지 · 3차 메인)
   증상: /ja 에서 카드·타일 크기가 제각각(유통 4장은 원본 240x170 동일인데 렌더 366/376/492/474).

   원인 = 그리드 `1fr` 은 `minmax(auto, 1fr)` 이라 셀 내용의 min-content 가 열 폭의 **하한**이 된다.
   body 의 `word-break: keep-all`(common.css — 한국어 어절 보호)은 공백 없는 일본어 문장을 끊을 수 없는
   한 덩어리로 만들어 그 하한을 키운다(ko·en 은 공백에서 끊겨 무사).

   🚨 2차에서 넣었던 `:lang(ja) { word-break: normal }`(전역)은 **3차에서 철회했다.**
      그리드는 고쳐졌지만 그리드와 무관한 곳까지 바뀌어 메인이 깨졌다 — 로그인 버튼이 한 글자씩 세로로
      쌓이고(ログイン 48x88 · 会員登録 19x91) 국가 라벨이 `ラハプワール/ド` 로 떨어졌다.
      교훈: 원인은 keep-all 이 아니라 그리드 `1fr` 의 자동 최소 폭이고, keep-all 은 그걸 드러낸 조건일 뿐이다.
      텍스트 규칙을 전역으로 바꾸지 말고 **그리드 쪽**을 고친다. (auto-phrase 도 실측했으나 긴 가타카나
      복합어가 한 문절로 묶여 프레스티지 5번째 열이 여전히 넓었다 — 어떤 word-break 값 하나로도 해결 안 됨)

   조치 (언어 무관 · 표준 속성만 — 브라우저 간 차이 없음):
   - 카드·타일 그리드 셀에 `min-width: 0` — 셀 폭을 `1fr` 로 강제한다.
   - 같은 셀에 `overflow-wrap: anywhere` — 좁아진 셀에서 넘칠 때만 끊는다(keep-all 은 그대로 유지되므로
     넘치지 않는 짧은 문구는 한 단어로 남는다).
   목록은 style.css 의 `display: grid` 카드·타일 선언을 전수 대조해 만들었다. 섹션 레이아웃용 2열
   (`.network .visual .container`)·자금 `user-lv`(의도된 923/527 비대칭)는 제외. 새 카드 그리드를
   추가하면 여기에도 한 줄 넣을 것 — 빠뜨려도 원래 상태(일본어에서 약간 밀림)라 회귀는 아니다. */
ul.board-list > li,
.prestige-honors ul > li,
.platform-guide ul > li,
.premium-exhibition ul > li,
.today-ad ul > li,
.sub.country .main .tab-contents ul > li,
.marketing-lounge ul > li,
.my-asset ul > li,
.plan-select ul > li,
.membership ul > li,
.dreamland ul > li,
.bonus-guide ul > li,
.global-shop-network ul > li,
.goods-list > *,
.exhibition-hall .list > *,
.partner-popup .list > *,
.sub.ad .list > *,
.pricing-grid > * { min-width: 0; overflow-wrap: anywhere; }

/* ── 메인 로그인 폼 버튼 보호 (PO 신고 2026-09-22 3차)
   `.index .box` 는 flex 이고 입력칸(.form-control, width:100%)이 공간을 다 가져가면 버튼이 min-content 까지
   눌린다. 시안은 `会員ログイン` 글자(span)에만 nowrap 을 걸고 버튼은 보호하지 않았다 — 일본어는 keep-all 이
   우연히 막아 주고 있었을 뿐이고 **영어는 원래부터** `Log in 58x53 · Sign up 30x47`(2줄)로 깨져 있었다.
   실측: ja 88x35 · ko 71x35 · en 73x35 (전부 한 줄). */
.index .box .btn { flex-shrink: 0; white-space: nowrap; }

/* ── 메인 국가 타일 — 크기 균등 + 긴 이름은 보기 좋은 두 줄 (PO 신고 2026-09-22 3차)
   셀 폭이 **라벨 길이**를 따라간 것이 원인이다(flex·grid 아이템의 기본 min-width:auto = 내용 최소 폭).
   운영 실측(구 파일 제거 후 재현, 1480px):
     ko·en  타일 67px 균등 (라벨이 짧아 기준 폭 안에 들어간다)
     ja     타일 58/68/82/95px 불균등 · 국기 42~69px 제각각 ← PO 가 지적한 "크기가 다르다"
   모바일(grid 5열)도 같다(ja 375px 70/82/58/70/58).
   → 셀 폭을 라벨에서 떼어(`min-width:0`) 기준 폭으로 고정하고, 넘치는 긴 이름은 두 줄로 보기 좋게 나눈다.
   ko·en 은 원래 기준 폭 안이라 **무변화**(67px·국기 48px 그대로 실측).
   ⚠ 비교 기준 주의: dev 는 국가가 11개라 타일이 84px 로 보인다 — 운영(12개)과 폭이 다르니 섞어 판정하지 말 것.

   두 줄을 보기 좋게 나누는 규칙 (실측으로 하나씩 확인):
   - `overflow-wrap: anywhere` 는 쓰지 않는다 — 넘칠 때만 최대한 채우고 끊는 비상 규칙이라
     `インドネシ/ア` 처럼 한 글자가 떨어지고, 영어는 `Philippine/s` 로 단어가 부서진다.
   - 일본어만 `word-break: normal` — 글자 사이 정상 줄바꿈 지점을 준다(한국어는 keep-all 어절 보호 유지).
   - `text-wrap: balance` — 두 줄 길이를 고르게. 🚨 **블록 요소에만** 먹으므로 `<a>` 를 block 으로(인라인이면 무효).
   - `line-break: strict` — 일본어 금칙처리. 없으면 `オンチ/ャンプ`·`ラハプワ/ールド` 처럼
     작은 가나(ャ)·장음(ー)이 줄 첫머리에 온다.
   결과(ja): 1480px 타일 67px·국기 48px 균등, `フィ/リピン`·`インド/ネシア`·`ラハプ/ワールド` /
             375px 타일 59px 균등, `インド/ネシア`·`オンチャ/ンプ`. 영어 `RAHAPH/WORLD`(단어 경계). */
.index nav ul > li { min-width: 0; }
.index nav ul > li a { display: block; text-wrap: balance; line-break: strict; }
:lang(ja) .index nav ul > li a { word-break: normal; }

/* ── 사이트 팝업 본문 — 일본어 줄바꿈 허용 (PO 신고 2026-09-22 3차 동반)
   팝업은 폭이 고정된 박스에 **문장**이 들어간다. 전역 keep-all 아래에서는 공백 없는 일본어 문장이
   끊기지 않아 제목·본문이 박스 오른쪽으로 잘려 나갔다(실측 `…していただければすぐに` 이후 소실 —
   원래부터 있던 결함). 2차에서 전역 normal 을 걸었을 때 3줄로 정상 줄바꿈되는 것을 이미 확인했으므로,
   전역 대신 **팝업 한정**으로 같은 동작을 준다. 금칙처리(strict)로 작은 가나·장음이 줄 첫머리에 오지 않게.
   팝업 루트는 SitePopupDialog 의 `data-site-popup-dialog` 속성으로 지목한다(컴포넌트 무수정). */
:lang(ja) [data-site-popup-dialog] { word-break: normal; line-break: strict; }

/* ── 메인 국기 아이콘 크기 통일 — 원본 크기와 무관하게 (PO 지시 2026-09-22)
   시안은 `max-width: 72%`(최대치)라 원본이 작으면 늘리지 않는다 — 말레이시아(`main_flag11.png`)만
   원본이 50x50 이라 50px 로, 나머지(84x84)는 60px 로 보였다.
   PO 결정: "나중에 크게 넣든 작게 넣든 사이즈가 맞게" → 최대치가 아니라 **고정 비율**로 채운다.
   - `width: 72%` — 타일 폭의 72%(데스크톱 60px · 모바일 42px, 시안 의도 그대로)로 항상 맞춘다
   - `aspect-ratio: 1` + `object-fit: contain` — 정사각형이 아닌 이미지가 들어와도 찌그러지거나
     잘리지 않고 비율을 유지해 가운데 맞춘다
   ⚠ 작은 원본은 늘어나므로 흐려질 수 있다 — 국가 등록 화면에 권장 크기(120x120px 이상)를 안내한다. */
.index nav img { width: 72%; height: auto; aspect-ratio: 1; object-fit: contain; }