@charset "UTF-8";
/* ==========================================================================
   MSG 회원 화면(front) 스타일 — 2026-10 리뉴얼
   토큰(색·글자·간격·모서리·그림자·동작)은 ../../common/css/msg-tokens.css 에서만 온다.
   select2 는 select2.css (원본 그대로).
   JS 가 붙이고 떼는 상태 클래스(.active .motion .motion_end .only_one .close_eye .touchDis …)는
   모두 여기서 받는다. 클래스 이름은 템플릿과 front.js 가 쓰는 그대로.
   ========================================================================== */

/* ---------- 0. 바탕 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface); }
body {
  margin: 0;
  background: var(--surface);
  min-width: 320px;
}
h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure, form, fieldset, legend, table, th, td { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { max-width: 100%; height: auto; border: 0; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
a { color: var(--link); text-decoration: none; }
i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.touchmode * { outline: 0; }
html.touchDis { overflow: hidden; touch-action: none; }

.hdtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.none { display: none !important; }
.mb_img, .mb_item { display: none !important; }
.mb_br { display: none; }
img.ico_img { max-width: 100%; height: auto; }

.page_wrap { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.middle_wrap { flex: 1 0 auto; width: 100%; }
.page_wrap > .layer_wrap_parent { position: relative; z-index: 100000; }

/* ---------- 1. 머리말 : 로고 · 메뉴 단추 · 언어 ---------- */
.header_wrap, .full_header_wrap {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  /* 흐림은 뒤판(::before)에 건다. 머리말 자체에 걸면 안에 든 폰 서랍(position: fixed)이 머리말 높이 64px 에 갇힌다 */
  .header_wrap, .full_header_wrap { background: transparent; }
  .header_wrap::before, .full_header_wrap::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px);
  }
}
/* 폰 서랍이 열린 동안은 아래 탭바(z-index 900)보다 위로 */
.header_wrap:has(.mobile_mainmenu_zone.active) { z-index: 1000; }
.hgroup_pix, .full_header_pixin {
  position: relative; display: block;
  max-width: var(--page-w); margin: 0 auto; padding: 0 var(--gutter);
  height: 64px;
}
.hgroup_pix_inner { position: relative; display: block; height: 64px; }
.toplogo {
  position: absolute; left: 0; top: 0; bottom: 0; transform: none;
  display: flex; align-items: center; margin: 0; font-size: 0; line-height: 0; z-index: 2;
}
.full_header_pixin .toplogo { left: var(--gutter); }
.toplogo_link { display: flex; align-items: center; min-height: var(--touch); }
.toplogo_link img { display: block; width: 150px; height: auto; }
.nav_list_wrap { display: none; }

.hgroup_util_wrap { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: var(--sp-2); z-index: 3; }
.full_header_pixin .hgroup_util_wrap { right: var(--gutter); }
.btn_hgroup_menu, .btn_mb_menu {
  display: none; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch); border-radius: var(--r-sm);
}
.btn_hgroup_menu img, .btn_mb_menu img { display: block; width: 24px; height: auto; }
.btn_mb_menu { display: flex; }
.btn_hgroup_menu:hover, .btn_mb_menu:hover { background: var(--tint); }

.hgroup_util_list { display: flex; }
.hgroup_util_toggle_item { position: relative; }
.hgroup_util_item {
  display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--tint-line); border-radius: var(--r-pill);
  background: var(--card); color: var(--text-1);
  font-size: var(--fs-cap); font-weight: var(--fw-strong); line-height: var(--lh-snug);
}
.hgroup_util_item .ico_nation { width: 18px; height: 18px; }
.hgroup_util_item .ico_nation img { width: 18px; height: 18px; }
.hgroup_util_item .ico_nation svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hgroup_util_item::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; margin-top: -3px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg);
}
.hgroup_util_option_list_wrap {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 100%;
  display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-2); overflow: hidden; z-index: 60;
}
.hgroup_util_toggle_item.active .hgroup_util_option_list_wrap { display: block; }
.hgroup_option_item {
  display: flex; align-items: center; min-height: var(--touch); padding: 0 18px;
  color: var(--text-1); font-size: var(--fs-cap); font-weight: var(--fw-strong);
}
.hgroup_option_item:hover { background: var(--tint); color: var(--brand); }
/* 언어 11개 : 목록이 길어도 화면 안에서 스크롤 (390px 폰에서도 잘리지 않게) */
.hgroup_util_option_list { max-height: min(calc(100dvh - 96px), 560px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hgroup_util_option_list li { white-space: nowrap; }
.hgroup_util_option_list li.on .hgroup_option_item { color: var(--brand); background: var(--tint); }
.hgroup_util_option_list_wrap { max-width: calc(100vw - 2 * var(--gutter)); }

/* PC 메뉴 : 머리말 아래로 내려오는 판 (1024 이상에서만) */
.nav_depth_list_wrap { display: none; }
@media (min-width: 1024px) {
  .btn_mb_menu { display: none; }
  .btn_hgroup_menu { display: flex; }
  .toplogo_link img { width: 168px; }
  .nav_depth_list_wrap {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
    opacity: 0; visibility: hidden; transform: translateY(-6px); display: block;
    transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
  }
  .nav_depth_list_wrap.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav_depth_list_inner { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-6); display: flex; gap: var(--sp-6); align-items: flex-start; }
  .nav_depth_list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); flex: 1; }
  .nav_depth_one { display: block; padding: 6px 0 var(--sp-3); font-weight: var(--fw-bold); color: var(--brand-ink); border-bottom: 2px solid var(--star); margin-bottom: var(--sp-2); }
  .nav_depth_two { display: block; padding: 8px 0; color: var(--text-2); }
  .nav_depth_two:hover { color: var(--brand); }
  .nav_else_list { width: 200px; padding-left: var(--sp-5); border-left: 1px solid var(--line); }
  .nav_else_item { display: block; padding: 8px 0; font-weight: var(--fw-strong); color: var(--text-1); }
  .nav_else_item.text_emp_red { color: var(--danger); }
}

/* 폰 메뉴 : 오른쪽에서 나오는 서랍 */
.mobile_mainmenu_zone { display: none; position: fixed; inset: 0; z-index: 50; }
.mobile_mainmenu_zone.active { display: block; }
.mainmenu_dim { position: fixed; inset: 0; background: var(--brand-ink); opacity: 0; transition: opacity var(--dur-panel) var(--ease-out); }
.mobile_mainmenu_zone.active.motion .mainmenu_dim { opacity: .5; }
.mobile_mainmenu_wrap {
  position: fixed; top: 0; right: -100%; width: min(340px, 88vw); height: 100%;
  display: flex; flex-direction: column; background: var(--card);
  box-shadow: var(--sh-3); transition: right var(--dur-panel) var(--ease-out);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.mobile_mainmenu_zone.active.motion .mobile_mainmenu_wrap { right: 0; }
.mbutil_low { flex: 0 0 auto; padding: var(--sp-4) 64px var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); min-height: 72px; display: flex; align-items: center; }
.mbutil_hlist { display: flex; gap: var(--sp-3); }
.mbutil { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--tint); color: var(--brand); font-weight: var(--fw-strong); font-size: var(--fs-cap); }
.mbmenu_low { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) var(--sp-3); }
.mbmenu_one {
  display: flex; align-items: center; min-height: 56px; padding: 0 var(--sp-4);
  border-radius: var(--r-md); color: var(--text-1); font-weight: var(--fw-strong);
}
.mbmenu_one:hover, .mbmenu_one:active { background: var(--tint); color: var(--brand); }
.btn_mbmenuclose, .btn_popup_close {
  position: absolute; right: 12px; top: 12px; width: var(--touch); height: var(--touch);
  border-radius: 50%; background: var(--tint); display: block;
}
.btn_mbmenuclose::before, .btn_mbmenuclose::after, .btn_popup_close::before, .btn_popup_close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px;
  background: var(--brand-ink); border-radius: 2px; transform: rotate(45deg);
}
.btn_mbmenuclose::after, .btn_popup_close::after { transform: rotate(-45deg); }
.btn_mbmenuclose:hover, .btn_popup_close:hover { background: var(--tint-line); }

/* ---------- 2. 로그인·가입 틀 ---------- */
.full_page_wrap { background: var(--surface); }
.full_mid_wrap {
  flex: 1 0 auto; width: 100%; max-width: 560px; margin: 0 auto;
  padding: var(--sp-6) var(--gutter) var(--sp-7);
}
.full_mid_wrap.type2 { max-width: 720px; }
.full_mid_title_row { margin-bottom: var(--sp-5); text-align: center; }
.full_mid_title, .screen_form_tit { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-title); font-weight: var(--fw-bold); color: var(--brand-ink); }
.form_screen_item, .mid_form_box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 640px) { .form_screen_item, .mid_form_box { padding: var(--sp-6); } }
.form_screen_field legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.screen_form_titlow { text-align: center; margin-bottom: var(--sp-5); }
.screen_form_titlow::before {
  content: ""; display: block; width: 48px; height: 48px; margin: 0 auto var(--sp-3);
  background: url(/data/skin/common/brand/msg-mark.svg) center / contain no-repeat;
}
.screen_form_tb { display: grid; gap: var(--sp-4); }
.screen_form_cell.define_formth { margin-bottom: 6px; }
.sform_label, .form_label, .mid_form_label {
  display: block; font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-1); line-height: var(--lh-snug);
}
.mid_form_label.important::before { content: "•"; color: var(--danger); margin-right: 4px; }
.sform_inwrap { position: relative; }
.btn_inline_ico.ico_eye {
  position: absolute; right: 4px; top: 50%; width: var(--touch); height: var(--touch); margin-top: calc(var(--touch) / -2);
  background: url("../images/ico_form_eye_01.png") no-repeat center / 24px auto;
}
.btn_inline_ico.ico_eye.close_eye { background-image: url("../images/ico_form_eye_02.png"); }
.sform_inwrap .sform_input { padding-right: 52px; }

.capcha_form_wrap { display: grid; justify-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); }
.capcha_img { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; }
.capcha_img img { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 6px; }
.capcha_copy_wrap a, .capcha_copy { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--brand); font-weight: var(--fw-strong); font-size: var(--fs-cap); border: 0; text-decoration: underline; text-underline-offset: 3px; }
.capcha_form { width: 100%; }
.capcha_form .form_input { text-align: center; }

.btn_formsubmit_low { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; }
.btn_formsubmit_low br { display: none; }
.btn_formsubmit_low a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 var(--sp-3); color: var(--text-2); font-weight: var(--fw-strong); }
/* 「계정 만들기」는 로그인 묶음과 가는 선으로 나눈다 (예전 템플릿의 <br>&nbsp;<br> 띄움 대신) */
.btn_formsubmit_low a.text_emp_sky {
  width: 100%; min-height: calc(var(--touch) + var(--sp-4)); margin-top: var(--sp-2); padding-top: var(--sp-4);
  border-top: 1px solid var(--line); color: var(--brand); text-align: center; text-wrap: balance;
}
.btn_formsubmit {
  width: 100%; min-height: 56px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand); font-size: var(--fs-body); font-weight: var(--fw-bold);
  cursor: pointer; box-shadow: var(--sh-1);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.btn_formsubmit:hover { background: var(--brand-ink); box-shadow: var(--sh-2); }
.btn_formsubmit:active { transform: scale(.98); }

/* 가입 약관 상자 (예전 인라인 style 을 옮김 : 높이 8rem · 안에서 스크롤) */
.agree_box {
  height: 8rem; padding: var(--sp-3) var(--sp-4); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--tint-line); border-radius: var(--r-md); background: var(--field, var(--card));
}

.warn_message { min-height: 0; margin-top: 6px; font-size: var(--fs-cap); line-height: var(--lh-snug); color: var(--danger); }
.warn_message:empty { display: none; }

/* ---------- 3. 입력 ---------- */
.form_input, .sform_input, .form_select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], select, textarea {
  width: 100%; min-height: var(--touch); padding: 10px 14px;
  border: 1px solid var(--field-line, #8791C6); border-radius: var(--r-md); background: var(--field, var(--card)); color: var(--text-1);
  font: inherit; font-size: max(16px, var(--fs-body)); line-height: var(--lh-snug); letter-spacing: 0;
  transition: border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.form_select, select:not(.select_search) {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: var(--field, var(--card)) url("../images/ico_select_allow.png") no-repeat right 14px center / 10px auto;
}
.form_input:focus, .sform_input:focus, .form_select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--field-ring, var(--tint-line)); }
::placeholder { color: var(--text-3); opacity: 1; }
.form_input_group { display: block; width: 100%; }
.mobile_place_para { display: block; margin-top: 6px; font-size: var(--fs-cap); line-height: var(--lh-snug); color: var(--text-2); }
input.form_input.reverse_place { text-align: left; }
.select2-container { width: 100% !important; font-size: max(16px, var(--fs-body)); }
.select2-container .select2-selection--single { min-height: var(--touch); border: 1px solid var(--field-line, #8791C6); border-radius: var(--r-md); background-color: var(--field, #fff); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--touch) - 2px); padding-left: 14px; color: var(--text-1); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--touch) - 2px); }
.select2-dropdown { border-color: var(--field-line, #8791C6); border-radius: var(--r-md); overflow: hidden; }
.select2-search--dropdown .select2-search__field { min-height: 40px; border-radius: var(--r-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand); color: #fff; }
.select2-results__option { padding: 10px 14px; }

.chkrd_item { display: flex; align-items: center; gap: 10px; min-height: var(--touch); }
.chkrd {
  appearance: none; -webkit-appearance: none; flex: 0 0 24px; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0;
  border: 1.5px solid var(--field-line, #8791C6); border-radius: 7px; background: var(--field, var(--card)) no-repeat center / 14px auto; cursor: pointer;
}
.chkrd:checked, .chkrd.checked {
  background-color: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.chkrd_label { cursor: pointer; font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-1); line-height: var(--lh-snug); }

/* ---------- 4. 단추 ---------- */
.btn_submit_box_wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); text-align: center; }
.btn_submit_box_wrap br { display: none; }
.btn_submit_box_wrap.type3 { flex-direction: row; justify-content: center; }
.btn_submit_box {
  position: relative; display: block; width: 100%; max-width: 420px; padding: 0;
  border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-1);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.btn_submit_box:hover { background: var(--brand-ink); box-shadow: var(--sh-2); }
.btn_submit_box:active { transform: scale(.98); }
.btn_submit_box:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.btn_submit_box.size_small, .btn_submit_box.size_xsmall { max-width: 280px; }
.btn_submit_box_inner { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--sp-5); gap: 8px; }
.btn_submit_box_text { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: inherit; text-align: center; }
button.btn_submit_box_text { appearance: none; border: 0; background: none; cursor: pointer; align-self: stretch; flex: 1; padding: 0; }
.submit_origin { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; appearance: none; -webkit-appearance: none; }
.btn_submit_box_wrap a.fontsize_17 { color: var(--brand); }

.btn_submitbox, .btn_linkbox {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 var(--sp-5);
  border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-weight: var(--fw-bold); font-size: var(--fs-body); text-align: center;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.btn_submitbox:hover, .btn_linkbox:hover { background: var(--brand-ink); }
.btn_submitbox:active, .btn_linkbox:active { transform: scale(.97); }
.btn_submitbox.dtype2 { background: var(--tint); color: var(--brand); }
.btn_submitbox.dtype2:hover { background: var(--tint-line); }
.btn_submitbox.small { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-cap); }
.btn_submitbox_w { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; justify-content: center; }
.btn_submitbox_w .btn_submitbox { width: 100%; }

/* ---------- 5. 메인 : 지갑 카드 + 벤토 ---------- */
.visual_wrap { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-5) var(--gutter) 0; }
.visual_title_row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.visual_wallet_row { position: relative; }
.visual_wallet_item {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, #fff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--tint) 0%, var(--tint-3, #E1E6F8) 100%);
  border: 1px solid var(--tint-line);
  padding: var(--sp-5);
}
.visual_wallet_item::after {
  content: ""; position: absolute; right: -44px; top: -52px; width: 190px; height: 190px; pointer-events: none;
  background: var(--star); opacity: .14;
  -webkit-mask: url(/data/skin/common/brand/msg-mark.svg) center / contain no-repeat; mask: url(/data/skin/common/brand/msg-mark.svg) center / contain no-repeat;
}
@media (max-width: 639.98px) { .visual_wallet_item::after { right: -36px; top: -36px; width: 132px; height: 132px; opacity: .1; } }
.visual_wallet_handle, .wallet_stoke { display: none; }
.visual_wallet_inner { position: relative; z-index: 1; display: grid; gap: var(--sp-4); }
.wallet_profile_item { display: flex; align-items: center; gap: var(--sp-4); }
.wallet_profile_img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--card); border: 2px solid var(--card); box-shadow: var(--sh-1); }
.wallet_profile_img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wallet_profile_spec { min-width: 0; }
.wallet_profile_spec_main { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--brand-ink); letter-spacing: var(--ls-title); overflow-wrap: anywhere; }
.wallet_profile_spec_sub { font-size: var(--fs-cap); line-height: var(--lh-snug); color: var(--text-2); margin-top: 2px; }
.wallet_profile_spec_sub span { color: inherit !important; }
.wallet_profile_spec_sub a, .copy_title { color: var(--brand) !important; font-weight: var(--fw-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.wallet_tail_table, .wallet_tail_table tbody, .wallet_tail_table tr { display: block; width: auto; }
.wallet_tail_table tr { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--tint-line); }
.wallet_tail_table th, .wallet_tail_table td { display: inline; border: 0; text-align: left; }
.wallet_tail_key { font-size: var(--fs-cap); color: var(--text-2); }
.wallet_tail_value { font-size: var(--fs-cap); font-weight: var(--fw-bold); color: var(--brand); }

.content_wrap { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-4) var(--gutter) var(--sp-6); display: grid; gap: var(--sp-3); }

.rendar_bar_flex_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.rendar_bar_flex_wrap > .rendar_bar_wrap:first-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .rendar_bar_flex_wrap { grid-template-columns: 1.4fr 1fr 1fr; }
  .rendar_bar_flex_wrap > .rendar_bar_wrap:first-child { grid-column: auto; }
}
.rendar_bar_wrap { min-width: 0; }
.rendar_bar_flex_wrap > .rendar_bar_wrap[onclick] { cursor: pointer; }
.rendar_bar_item {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease;
}
.rendar_bar_wrap[onclick]:hover .rendar_bar_item { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--tint-line); }
.rendar_bar_flex_wrap > .rendar_bar_wrap:first-child .rendar_bar_item { border-top: 3px solid var(--star); }
.rendar_bar_key_cols { display: flex; align-items: center; gap: 10px; }
.rendar_bar_ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--brand); }
.rendar_bar_ico img { width: 18px; height: 18px; }
.rendar_bar_text { font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-2); }
.rendar_bar_value_cols { min-width: 0; text-align: left; }
.rendar_bar_value {
  display: block; font-size: var(--fs-lead); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--brand-ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.rendar_bar_flex_wrap > .rendar_bar_wrap:first-child .rendar_bar_value { font-size: var(--fs-display); letter-spacing: var(--ls-title); }
.rendar_bar_value_cols.text_emp_red .rendar_bar_value { color: var(--danger); }
/* 소수점 뒤 자리: PHP 가 인라인으로 opacity .4 를 박아 대비가 모자람 → 읽히는 선까지만 옅게 */
.money_dot { opacity: .72 !important; font-weight: var(--fw-body); }
/* 안쪽 화면의 한 줄짜리 잔액 카드 */
.sub_contents_row > .rendar_bar_wrap .rendar_bar_item, .rendar_bar_wrap > .rendar_bar_item + .rendar_bar_item { flex-direction: row; align-items: center; justify-content: space-between; }
.sub_contents_row > .rendar_bar_wrap { margin-bottom: var(--sp-4); }

.content_item { min-width: 0; }
.btn_request_box {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 var(--sp-4);
  border-radius: var(--r-lg); background: var(--tint); color: var(--brand); border: 1px solid var(--tint-line);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.btn_request_box:hover { background: var(--tint-line); }
.btn_request_box:active { transform: scale(.98); }
.getboard_box .btn_request_box { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.getboard_box .btn_request_box:hover { background: var(--brand-ink); }
.btn_request_inner { display: flex; align-items: center; gap: var(--sp-3); }
.ico_request { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--brand); }
.getboard_box .ico_request { background: rgba(255,255,255,.18); }
.ico_request img { width: 20px; height: 20px; }
.btn_request_text { font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: var(--lh-snug); }

.getboard_box { position: relative; }
.content_item.getboard_box:has(.getboard_box_title_row) { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.getboard_box_title_row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); padding-right: 52px; }
.getboard_box_title_ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--brand); }
.getboard_box_title_ico img { width: 20px; height: 20px; }
.getboard_box_title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--brand-ink); line-height: var(--lh-snug); }
.getboard_box_content_list { display: grid; gap: 6px; }
.getboard_box_content { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 8px var(--sp-3); border-radius: var(--r-md); color: var(--text-1); }
.getboard_box_content:hover { background: var(--tint-2); }
.ico_getboard_box_content { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--tint); }
.ico_getboard_box_content img { width: 16px; height: 16px; filter: brightness(.55); }
.getboard_box_content_main { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-strong); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.getboard_box_content_else { flex: 0 0 auto; font-size: var(--fs-cap); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn_ico_more { position: absolute; right: var(--sp-3); top: var(--sp-3); width: var(--touch); height: var(--touch); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.btn_ico_more:hover { background: var(--tint); }
.btn_ico_more img { width: 18px; height: 18px; }

.content_copy_wrap { background: var(--tint); border-top: 1px solid var(--tint-line); margin-top: var(--sp-5); }
.content_copy_pix { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-6) var(--gutter); display: grid; gap: var(--sp-4); justify-items: start; }
.content_copy_main { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--brand-ink); text-wrap: balance; }
.content_copy_sub { margin-top: var(--sp-2); max-width: 36em; color: var(--text-2); line-height: var(--lh-long); }
@media (min-width: 900px) {
  .content_copy_pix { grid-template-columns: 1fr auto; align-items: center; }
}
.content_copy_wrap[style] { margin-bottom: var(--sp-5) !important; }

/* ---------- 6. 안쪽 화면 : 제목 띠 · 작은 메뉴 ---------- */
.sub_visual_multi_zone { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-5) var(--gutter) 0; }
.sub_visual_zone {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 112px;
  padding: var(--sp-5); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--tint) 0%, var(--tint-3, #E1E6F8) 100%); border: 1px solid var(--tint-line);
}
.sub_visual_zone::after {
  content: ""; position: absolute; right: 14px; top: -20px; width: 96px; height: 96px; background: var(--star); opacity: .16;
  -webkit-mask: url(/data/skin/common/brand/msg-mark.svg) center / contain no-repeat; mask: url(/data/skin/common/brand/msg-mark.svg) center / contain no-repeat;
}
.sub_visual_copy { position: relative; z-index: 1; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-title); font-weight: var(--fw-bold); color: var(--brand-ink); }
.sub_visual_incopy { display: inline; }

.submenu_item_list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); }
.submenu_item { position: relative; }
.btn_submenu_home { display: flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--brand); }
.ico_maphome img { width: 18px; height: 18px; }
.submenu_one {
  display: flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 0 var(--sp-4);
  border: 1px solid var(--tint-line); border-radius: var(--r-pill); background: var(--card); color: var(--text-1); font-weight: var(--fw-strong); cursor: pointer;
}
.submenu_one::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid var(--brand); border-bottom: 1.5px solid var(--brand); transform: rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
.submenu_one.only_text::after { display: none; }
.submenu_one.active { border-color: var(--brand); background: var(--tint); }
.submenu_one.active::after { transform: rotate(-135deg); margin-top: 3px; }
.submenu_text { line-height: var(--lh-snug); }
.submenu_two_list_wrap {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 100%; width: max-content; max-width: min(320px, 86vw);
  height: 0; overflow: hidden; transition: height .3s var(--ease-out);
}
.submenu_two_list_wrap.active { display: block; }
.submenu_two_list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: 6px; }
.submenu_two { display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--text-1); line-height: var(--lh-snug); }
.submenu_two:hover { background: var(--tint); color: var(--brand); }

.sub_contents_zone { max-width: 960px; margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); }
.sub_title_row { margin-bottom: var(--sp-4); }
.sub_title { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--brand-ink); }
.sub_contents_row { min-width: 0; }
.sub_contents_row.box_type { display: grid; gap: var(--sp-4); }

/* 입출금 이력 */
.history_item_list { display: grid; gap: var(--sp-2); }
.history_item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line);
}
.history_label_cols { flex: 1 1 0; min-width: 0; }
.history_label_text { display: block; font-weight: var(--fw-strong); line-height: var(--lh-snug); white-space: normal !important; overflow-wrap: anywhere; }
.history_data_cols { flex: 0 0 auto; text-align: right; display: grid; gap: 2px; }
.data_price_text { white-space: nowrap; font-variant-numeric: tabular-nums; }
.data_price_number { font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--brand-ink); }
.history_item.fail_type .data_price_number { color: var(--danger); }
/* 수당지급예정: 지급 시각 안내 + 줄마다 발생·지급 시각 */
.pay_sched { margin-bottom: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: var(--tint-2); border: 1px solid var(--tint-line); }
.pay_sched p { margin: 0; line-height: var(--lh-snug); word-break: keep-all; }
.pay_sched_title { font-weight: var(--fw-strong); color: var(--brand-ink); }
.pay_sched_slots { margin-top: var(--sp-1) !important; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pay_sched_next { margin-top: var(--sp-3) !important; font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.pay_sched_local { margin-top: var(--sp-1) !important; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pay_sched_key { font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--text-2); margin-right: var(--sp-1); }
.pay_sched_tz { font-size: var(--fs-cap); font-weight: normal; color: var(--text-2); }
.stay_list .history_data_cols { max-width: 62%; }
.stay_list .pay_state_text { white-space: normal; overflow-wrap: anywhere; }
.stay_list .pay_state_text.is_paid { color: var(--ok); }
.stay_list .history_item.fail_type .pay_state_text { color: var(--danger); }
.pay_sched time, .stay_list time { white-space: nowrap; }
@media (max-width: 639.98px) {
  .stay_list .history_item { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .stay_list .history_data_cols { max-width: none; text-align: left; }
}
.data_price_unit { font-size: var(--fs-cap); color: var(--text-2); }
.data_else_text { font-size: var(--fs-cap); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdata_item { display: block; }

/* 보기 표 : 아이디·이름 … */
.sc_vitem { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.sc_vitem_title_row { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--tint-2); }
.sc_vitem_title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--brand-ink); }
.sc_vitem_content_row { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
.sc_viewer_table, .sc_viewer_table tbody { display: block; width: 100%; }
.sc_viewer_table tr { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.sc_viewer_table tr:last-child { border-bottom: 0; }
.sc_viewer_table th, .sc_viewer_table td { display: block; text-align: left; vertical-align: top; }
.sc_viewer_label { font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-2); line-height: var(--lh-snug); }
.sc_viewer_value { font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc_viewer_value[style] { color: var(--brand) !important; }
.sc_vitem_content_row .btn_submit_box_wrap { margin-top: var(--sp-5); }
@media (max-width: 479px) {
  .sc_viewer_table tr { grid-template-columns: 1fr; gap: 2px; }
}
.fontsize_17 { font-size: var(--fs-lead); }
.fontsize_14 { font-size: var(--fs-cap); }
.font_boldx2 { font-weight: var(--fw-bold); }

/* 입력 표 : 선물하기·전환·정보 변경·가입 */
.rendar_fieldset_row { margin-top: var(--sp-4); }
.rendar_fieldset_title { margin-bottom: 6px; font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-1); line-height: var(--lh-snug); }
.both_rendar_box_wrap { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.both_rendar_box_cols {
  padding: var(--sp-4) var(--sp-5) var(--sp-5); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 0;
}
.both_rendar_box_cols .rendar_fieldset_row:first-child { margin-top: 0; }
.both_rendar_box_cols > .rendar_fieldset_row > .rendar_fieldset_title_row { margin-bottom: var(--sp-3); }
.both_rendar_box_cols > .rendar_fieldset_row > .rendar_fieldset_title_row .rendar_fieldset_title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--brand-ink); }
.rendar_fieldset_content_row { min-width: 0; }
@media (min-width: 840px) {
  .both_rendar_box_wrap { grid-template-columns: 1fr 1fr; align-items: start; }
}
.form_fieldset_table, .form_fieldset_table tbody, .mid_form_table, .mid_form_table tbody { display: block; width: 100%; }
.form_fieldset_table tr, .mid_form_table tr { display: block; margin-top: var(--sp-4); }
.form_fieldset_table tr:first-child, .mid_form_table tr:first-child { margin-top: 0; }
.form_fieldset_table th, .form_fieldset_table td, .mid_form_table th, .mid_form_table td { display: block; text-align: left; }
.form_fieldset_table th, .mid_form_table th { margin-bottom: 6px; }
.mid_form_table td[colspan] { display: block; }
.warn_box { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: var(--star-tint); border: 1px solid #EBD39A; }
.warn_box_para { color: var(--star-text); line-height: var(--lh-long); }
.warn_box_para span { color: var(--star-text); }
.warn_box .maint_note { margin-top: var(--sp-3); font-size: var(--fs-cap); word-break: keep-all; }
.warn_box .maint_form { margin-top: var(--sp-3); }
.warn_box .maint_form .rendar_fieldset_title { display: block; color: var(--star-text); }
.flex_grid { display: flex; align-items: center; gap: var(--sp-3); }
.flex_grid.align_right { justify-content: flex-end; }
.flex_grid.align_both { justify-content: space-between; }
.mt10 { margin-top: var(--sp-3); } .mt40 { margin-top: var(--sp-6); }
.respon_mt20 { margin-top: var(--sp-4); } .respon_mb20 { margin-bottom: var(--sp-3); }
.padding_box_10_15 { padding: var(--sp-3) var(--sp-4); }
.text_emp_sky { color: var(--brand); }
.text_emp_red { color: var(--danger); }

/* 공지 펼침 */
.sort_respon_field_wrap { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sr_field_combo_cols, .sr_field_form_cols { display: flex; gap: var(--sp-2); }
.elements_cols { flex: 1 1 0; min-width: 0; position: relative; }
.elements_cols.has_btn { flex: 0 0 var(--touch); }
.btn_ico_submit {
  appearance: none; -webkit-appearance: none; width: var(--touch); min-height: var(--touch); padding: 0; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--brand) url("../images/ico_search_40.png") no-repeat center / 20px auto;
}
.board_toggle_list { display: grid; gap: var(--sp-2); }
.board_toggle_item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.board_toggle_item.active { border-color: var(--tint-line); box-shadow: var(--sh-1); }
.board_toggle_bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 60px; padding: var(--sp-3) var(--sp-4); color: var(--text-1); }
.board_toggle_primary { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-strong); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.board_toggle_secondary { flex: 0 0 auto; font-size: var(--fs-cap); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board_toggle_contents { display: none; border-top: 1px solid var(--line); background: var(--tint-2); }
.board_toggle_item.active .board_toggle_contents { display: block; }
.board_toggle_contents_inner { padding: var(--sp-4); line-height: var(--lh-long); overflow-wrap: anywhere; }
.board_toggle_contents_inner a[style] { color: var(--brand) !important; text-decoration: underline; }
.board_toggle_contents_inner img { max-width: 100%; height: auto; }

/* QR·고객센터 */
.flex_contents_box_both { display: block !important; }
.flex_title_wrap { display: none; }
.flex_mobile_title_row, .flex_title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--brand-ink); margin-bottom: var(--sp-3); }
.flex_title_cols .flex_title { margin: 0; }
.flex_contents_box { margin-bottom: var(--sp-5) !important; padding: var(--sp-5); display: grid; justify-items: center; gap: var(--sp-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.code_box { width: 200px; max-width: 100%; padding: var(--sp-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.code_box img { display: block; width: 100%; height: auto; }
.flex_inner_else_row { width: 100%; display: flex; justify-content: center; }

/* 페이지 번호 */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--sp-6) 0 0; }
.paginate_button > a {
  display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 6px; position: relative;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text-2); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; cursor: pointer;
}
.paginate_button > a:hover { border-color: var(--brand); color: var(--brand); }
.paginate_button.active > a { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.paginate_button.previous > a, .paginate_button.next > a { font-size: 0; color: transparent; }
.paginate_button.previous > a::after, .paginate_button.next > a::after {
  content: ""; width: 9px; height: 9px; border-left: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); margin-left: 3px;
}
.paginate_button.next > a::after { transform: rotate(-135deg); margin-left: -3px; }

/* ---------- 7. 팝업 ---------- */
.popup_wrap { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: var(--sp-4); overflow: hidden; }
.popup_wrap.active { display: flex; }
.bg_dim { position: fixed; inset: 0; z-index: 0; background: var(--brand-ink); opacity: 0; transition: opacity var(--dur-panel) var(--ease-out); }
.popup_wrap.active.motion_end .bg_dim { opacity: .55; }
.bg_dim.no_transition { transition: none; opacity: .55; }
.popup_item {
  position: relative; z-index: 20; width: 100%; max-width: 520px; max-height: calc(100% - var(--sp-5));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out);
}
.popup_wrap.active.motion_end .popup_item { opacity: 1; transform: none; }
.popup_item.no_transition { transition: none; opacity: 1; transform: none; }
.popup_titlelow { flex: 0 0 auto; padding: var(--sp-4) 72px var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); text-align: left; }
.popup_title { font-size: var(--fs-lead); line-height: var(--lh-snug); font-weight: var(--fw-bold); color: var(--brand-ink); overflow-wrap: anywhere; }
.popup_contentlow { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.popup_confirm_copy_wrap { padding: var(--sp-5); }
.popup_confirm_copy { line-height: var(--lh-long); color: var(--text-1); }
.popup_btnlow { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--tint-2); }
.pcont_inwrap { padding: var(--sp-5); line-height: var(--lh-long); overflow-wrap: anywhere; }
.pcont_inwrap img { max-width: 100%; height: auto; }

/* 알림 팝업 : 한 번에 여러 장이 위에서 아래로 쌓임 */
.notice_popup_wrap {
  position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column; align-items: center;
  padding: var(--sp-4); gap: var(--sp-3); overflow-y: auto; overscroll-behavior: contain;
}
.notice_popup_wrap.active { display: flex; }
.notice_popup_cols { position: relative; z-index: 1; width: 100%; max-width: 520px; flex: 0 0 auto; }
.notice_popup_wrap > .notice_popup_cols:nth-of-type(1) { margin-top: auto; }
.notice_popup_wrap > .notice_popup_cols:last-child { margin-bottom: auto; }
.notice_popup_cols .popup_item { max-height: none; }
.popup_item.notice_type { display: block; max-width: 100%; }
.popup_item.notice_type .popup_contentlow { overflow: visible; }

/* ---------- 8. 바닥글 ---------- */
.footer_wrap { position: relative; flex: 0 0 auto; margin-top: auto; background: var(--card); border-top: 1px solid var(--line); }
.footer_pix { max-width: var(--page-w); margin: 0 auto; padding: var(--sp-5) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.footer_item_group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.footer_item { display: flex; align-items: center; }
.footer_item img { display: block; width: 132px; height: auto; }
.footer_item_para { font-size: var(--fs-cap); line-height: var(--lh-snug); color: var(--text-2); overflow-wrap: anywhere; }
.footer_wrap .btn_bottom_go { position: absolute; right: var(--gutter); top: -24px; z-index: 5; background: var(--card); box-shadow: var(--sh-1); }
.btn_bottom_go {
  position: relative; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--tint); border: 1px solid var(--tint-line);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease;
}
.btn_bottom_go::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -2px 0 0 -5px; border-left: 2px solid var(--brand); border-top: 2px solid var(--brand); transform: rotate(45deg); }
.btn_bottom_go:hover { background: var(--tint-line); }

/* ---------- 9. 큰 화면 ---------- */
@media (min-width: 1024px) {
  .visual_wallet_item { padding: var(--sp-6); }
  .visual_wallet_inner { grid-template-columns: 1fr auto; align-items: center; }
  .content_wrap { padding-top: var(--sp-5); }
  .sub_visual_zone { min-height: 132px; }
  .mb_br { display: none; }
}
@media (max-width: 1023px) {
  .nav_depth_list_wrap { display: none !important; }
}

/* ---------- 10. 스크롤 등장 (되는 브라우저에서만) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rendar_bar_wrap, .getboard_box, .history_item, .sc_vitem, .both_rendar_box_cols, .content_copy_pix, .board_toggle_item, .flex_contents_box {
      animation: msg-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
  }
}

/* ---------- 11. 로그인·가입 : 첫 화면(intro)과 같은 아침 빛 ----------
   색은 첫 화면 그림에서 뽑은 한 벌(msg-intro.css --in-* 와 같은 값) : 벽 #ECE5DB · 종이 #F8F4E9 · 먹 #3F3D37 · 올리브 #344A3E.
   토큰만 바꿔서 위 규칙들이 그대로 따라오게 한다. :root 에서 --brand 로 이미 풀린 --link·--focus-ring 은 여기서 다시 푼다.
   대비(종이 위) : 먹 9.9 · 먹2 7.9 · 올리브 글자 8.7 · 단추 글자/올리브 9.4 · 입력 테두리 3.7 */
.full_screen {
  --brand: #344A3E; --brand-ink: #2A3D33; --brand-2: #3F5A4B; --on-brand: #FFFDF4;
  --link: var(--brand); --focus-ring: var(--brand);
  --tint: #EFE9DF; --tint-2: #F4EFE6; --tint-line: #DCD3C5;
  --surface: #ECE5DB; --card: #F8F4E9; --line: #E3DBCE;
  --text-1: #3F3D37; --text-2: #4E4B43; --text-3: #5F5A51;
  --field: #FFFDF8; --field-line: #857E72; --field-ring: rgba(52, 74, 62, .2);
  --edge: clamp(16px, 4.5vw, 64px);   /* 첫 화면 손잡이와 같은 가장자리 여백 (msg-intro.css .intro-ui) */
  --sh-1: 0 1px 2px rgba(52, 46, 36, .06), 0 1px 3px rgba(52, 46, 36, .06);
  --sh-2: 0 4px 12px rgba(52, 46, 36, .06), 0 18px 44px rgba(52, 46, 36, .12);
  --sh-3: 0 12px 28px rgba(52, 46, 36, .16), 0 32px 64px rgba(52, 46, 36, .16);
}
html:has(> body.full_screen) { background: #ECE5DB; }
/* 바탕 = 첫 화면 그림을 흐리게 한 것(lodella-morning-soft.webp 2KB). 폰 Safari 는 background-attachment: fixed 를 안 받아서 고정 뒤판(::before)으로 깐다 */
.full_screen .full_page_wrap { background: transparent; isolation: isolate; }
.full_screen .full_page_wrap::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--surface) url(/data/skin/common/intro/lodella-morning-soft.webp) 30% 50% / cover no-repeat;
}

/* 머리말 : 흰 띠 없이 그림 위에 로고·언어만. 언어는 첫 화면과 같은 유리 알약 */
.full_screen .full_header_wrap { position: relative; background: transparent; border-bottom: 0; }
.full_screen .full_header_wrap::before { content: none; }
.full_screen .full_header_pixin { max-width: none; height: 80px; padding: 0; }
.full_screen .full_header_pixin .toplogo { left: var(--edge); }
.full_screen .full_header_pixin .hgroup_util_wrap { right: var(--edge); }
.full_screen .toplogo_link img { width: auto; height: 36px; }
@media (min-width: 1024px) {
  .full_screen .full_header_pixin { height: 104px; }
  .full_screen .toplogo_link img { height: 44px; }
}
.full_screen .hgroup_util_item {
  min-height: var(--touch); gap: 10px; padding: 0 18px 0 16px;
  border-color: rgba(78, 75, 67, .30); background: rgba(255, 250, 241, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: var(--fs-body); color: var(--text-1);
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {
  .full_screen .hgroup_util_item:hover { background: rgba(255, 250, 241, .88); border-color: rgba(78, 75, 67, .5); }
}
.full_screen .hgroup_util_item .ico_nation { width: 20px; height: 20px; }
.full_screen .hgroup_util_option_list_wrap {
  padding: 6px; border-color: rgba(78, 75, 67, .18); border-radius: var(--r-lg);
  background: rgba(251, 248, 242, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(52, 46, 36, .18);
}
.full_screen .hgroup_option_item { border-radius: var(--r-sm); }
.full_screen .hgroup_util_option_list li.on .hgroup_option_item { background: var(--brand); color: var(--on-brand); }

/* 카드 · 제목 : 제목은 먹색(첫 화면 LODELLA 글자색), 올리브는 누르는 것(단추·링크)에만 */
.full_screen .form_screen_item, .full_screen .mid_form_box { border-color: rgba(78, 75, 67, .12); }
.full_screen .screen_form_tit, .full_screen .full_mid_title { color: var(--text-1); }
.full_screen .select2-dropdown { background-color: var(--field); }
.full_screen .select2-search--dropdown .select2-search__field { border-color: var(--field-line); }
.full_screen .select2-results__option--selected:not(.select2-results__option--highlighted) { background-color: var(--tint); }
.full_screen .capcha_img { background: var(--field); }
/* 대문자 경고 : 템플릿 JS 가 color:red 를 직접 넣는다(종이 위 3.7:1) → 토큰 빨강(6.0:1) */
.full_screen #chkMsg_caplock { color: var(--danger) !important; }
/* 창 뒤 어둠막 : 기본은 --brand-ink 인데 여기선 그 값이 짙은 올리브라 그림이 초록으로 탁해진다 → 첫 화면 먹색 */
.full_screen .bg_dim { background: #3F3D37; }

/* 로그인 판을 짧게 (재 보니 1440×900 에서 로그인 단추가 892~948px = 첫 화면 밖, 폰 390 에서는 「아이디 저장」·빈 경고 줄이 따로 떠서 틈이 둘) :
   별 표시는 바로 위 머리말 로고와 겹쳐 빼고, 「아이디 저장」은 아이디 이름 줄 오른쪽, 대문자 경고는 자리를 미리 잡지 않고 입력칸 아래 틈에.
   「아이디 저장」 누르는 자리는 ::after 로 48px 그대로(위 16 · 아래 8 → 입력칸에 안 겹침) */
.login_screen .screen_form_titlow::before { content: none; }
.login_screen .screen_form_tr:has(#saveid) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px var(--sp-3); }
.login_screen .screen_form_tr:has(#saveid) > .define_formth { margin: 0; }
.login_screen .screen_form_tr:has(#saveid) > .define_formtd { display: contents; }
.login_screen .screen_form_tr:has(#saveid) .sform_inwrap { grid-column: 1 / -1; }
.login_screen .screen_form_tr:has(#saveid) .flex_grid { grid-area: 1 / 2; margin: 0; }
.login_screen .screen_form_tr:has(#saveid) .chkrd_item { position: relative; min-height: 0; }
.login_screen .screen_form_tr:has(#saveid) .chkrd_label::after { content: ""; position: absolute; inset: -16px -8px -8px; }
.login_screen .define_formtd { position: relative; }
.login_screen #chkMsg_caplock { position: absolute; inset: 100% 0 auto; margin-top: 2px; }

/* PC 로그인 : 왼쪽 = 첫 화면 그림의 제품 부분(제목 글자 없는 오른쪽 55.7% 를 잘라 둔 lodella-morning-shelf.webp 931×941), 오른쪽 = 종이 판.
   로고(왼쪽 위)·언어(오른쪽 위)는 첫 화면과 같은 자리. 판이 화면보다 길면 판만 흐르고 그림·로고는 제자리.
   판 폭 : 기본 40vw, 화면이 납작하면(가로 > 세로×1.2+판) 판을 넓혀 그림 칸 비율을 1.2 이하로 → 병 끝·크림 통 밑동(그림 세로 7~80%)이 안 잘린다.
   세로로 긴 큰 화면(태블릿 세로)은 그림 칸이 너무 좁아져서 폰 배치를 쓴다 */
.morning_scene { display: none; }
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .login_screen { --panel-w: clamp(480px, max(40vw, 100vw - 120vh), 960px); background: var(--card); }
  html:has(> body.login_screen) { background: #F8F4E9; }
  .login_screen .full_page_wrap { width: var(--panel-w); margin-left: auto; }
  .login_screen .full_page_wrap::before { content: none; }
  /* 배경 그림이라 폰에서는 내려받지 않는다. 오른쪽 끝(창 빛)만 종이로 녹인다 — 제품(크림 통 왼쪽 끝 5%)은 가장자리에서 떨어져 있다 */
  .login_screen .morning_scene {
    display: block; position: fixed; top: 0; bottom: 0; left: 0; right: var(--panel-w);
    background: #E8DED3 url(/data/skin/common/intro/lodella-morning-shelf.webp) 0% 35% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 56px); mask-image: linear-gradient(to left, transparent, #000 56px);
  }
  .login_screen .toplogo { position: fixed; top: 0; bottom: auto; height: 104px; }
  .login_screen .full_mid_wrap { width: calc(100% - 2 * var(--sp-6)); max-width: 440px; padding: var(--sp-3) 0 var(--sp-7); }
  .login_screen .form_screen_item { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  /* 판을 900px 높이 안에 : 보안문자 「새로 받기」는 그림 옆 (폰은 폭이 모자라 그림 아래 그대로) */
  .login_screen .capcha_form_wrap { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: var(--sp-4); }
  .login_screen .capcha_form { grid-column: 1 / -1; }
}
/* 세로가 낮은 노트북(1280×720 = 1920×1080 을 150% 로 볼 때) : 머리말만 24px 낮춰 로그인 단추를 첫 화면 안에 */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .login_screen .full_header_pixin, .login_screen .toplogo { height: 80px; }
}

/* ---------- 12. 회원 화면 : 아침 빛 (<html data-mood="morning"> = _header.htm, 색은 msg-tokens.css) ----------
   로그인에서 넘어와도 같은 방 : 벽 바탕 · 종이 카드 · 올리브 단추 · 먹 제목. 나비는 _footer.htm 이 띄운다.
   머리말은 흰 띠 대신 종이 빛. 지갑 카드·제목 띠 오른쪽에 첫 화면의 잎 그림자(leaf-light.webp 410×440)를
   곱하기로 얹어 밝은 곳은 바탕에 녹고 그림자만 남게, 글자가 있는 왼쪽은 가린다 */
:root[data-mood="morning"] .header_wrap { background: rgba(255, 253, 248, .94); }
@supports (backdrop-filter: blur(8px)) {
  :root[data-mood="morning"] .header_wrap { background: transparent; }
  :root[data-mood="morning"] .header_wrap::before { background: rgba(255, 253, 248, .8); }
}
:root[data-mood="morning"] .visual_wallet_item,
:root[data-mood="morning"] .sub_visual_zone { isolation: isolate; }
:root[data-mood="morning"] .visual_wallet_item::before,
:root[data-mood="morning"] .sub_visual_zone::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(64%, 560px); pointer-events: none;
  background: url(/data/skin/common/intro/leaf-light.webp) right 30% / cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent);
}