@charset "utf-8";
/* ==========================================================================
   Storefront theme layer (KE_HOACH_UI_MOI_0411.md)
   Loaded LAST on storefront pages only (src/app/layout.tsx). The legacy sheets keep the layout; this file gives every
   page the same modern look through shared tokens. Geometry changes for PC sit in (min-width: 769px), mobile ones in
   (max-width: 768px) — the same 768px switch the legacy sheets use.
   ========================================================================== */

:root {
  --ui-font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ui-primary: #116ad4; /* the legacy brand blue, so untouched legacy parts still match */
  --ui-primary-hover: #0d58b3;
  --ui-primary-soft: #eaf2fd;
  --ui-accent: #13a37f;
  --ui-accent-soft: #e8f7f2;
  --ui-danger: #e5484d;
  --ui-ink: #111827;
  --ui-ink-2: #374151;
  --ui-muted: #5f6673; /* QA text.contrast: #6b7280 gave 4.1–4.3:1 on the v2 grey surfaces */
  --ui-line: #e5e7eb;
  --ui-line-2: #f0f2f5;
  --ui-bg-soft: #f7f8fa;
  --ui-r-sm: 8px;
  --ui-r-md: 12px;
  --ui-r-lg: 16px;
  --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --ui-shadow-md: 0 8px 24px -6px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .05);
  --ui-shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, .22);
  --ui-ring: 0 0 0 3px rgba(17, 106, 212, .18);
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- U1 base ---------- */
html:not(.adm):not(.lp):not(.bare) body,
html:not(.adm):not(.lp):not(.bare) body button,
html:not(.adm):not(.lp):not(.bare) body input,
html:not(.adm):not(.lp):not(.bare) body select,
html:not(.adm):not(.lp):not(.bare) body textarea {
  font-family: var(--ui-font);
  letter-spacing: -0.01em;
}
html:not(.adm):not(.lp):not(.bare) body {
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(17, 106, 212, .16); }
#wrap a:focus-visible,
#wrap button:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* shared form controls — colour, radius and focus only (sizes stay with each page) */
#wrap input[type='text'],
#wrap input[type='password'],
#wrap input[type='email'],
#wrap input[type='tel'],
#wrap input[type='number'],
#wrap input[type='search'],
#wrap select,
#wrap textarea {
  border-color: #d9dde4;
  border-radius: var(--ui-r-sm);
  transition: border-color .15s, box-shadow .15s;
}
#wrap input[type='text']:focus,
#wrap input[type='password']:focus,
#wrap input[type='email']:focus,
#wrap input[type='tel']:focus,
#wrap input[type='number']:focus,
#wrap input[type='search']:focus,
#wrap select:focus,
#wrap textarea:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-ring);
}
#wrap input::placeholder,
#wrap textarea::placeholder { color: #9ca3af; }
#wrap input[type='checkbox'],
#wrap input[type='radio'] { accent-color: var(--ui-primary); }

/* ---------- U2 header (PC) ---------- */
#header02 .top {
  border-bottom: 1px solid var(--ui-line-2);
  box-shadow: none;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
#header02 .bottom {
  border-bottom: 1px solid var(--ui-line);
  box-shadow: none;
  background: rgba(255, 255, 255, .96);
}
#header02.fix .bottom { box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .18); }
#header02 .bottom.gray_bg { background: #fff; }
/* marketplace search: the 전체 select and the input read as one bordered pill */
#header02 .top .search_btn_wrap { gap: 0; }
#header02 .top .search_btn_wrap .select_custom_ {
  order: -1;
  height: 50px;
  min-width: 118px;
  padding-left: 20px;
  border: 2px solid var(--ui-primary);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background-color: #fff;
  box-shadow: inset -1px 0 0 var(--ui-line);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-weight: 600;
}
#header02 .top .search_btn_wrap .select_custom_:focus { outline: none; }
#header02 .top .serach_box input {
  width: 400px;
  height: 50px;
  padding-left: 18px;
  border: 2px solid var(--ui-primary);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: #fff;
  color: var(--ui-ink);
  box-sizing: border-box;
}
#header02 .top .serach_box input:focus { outline: none; }
#header02 .top .search_btn_wrap:focus-within .select_custom_,
#header02 .top .search_btn_wrap:focus-within .serach_box input { box-shadow: 0 6px 18px -8px rgba(17, 106, 212, .45); }
#header02 .top .search_btn_wrap:focus-within .select_custom_ { box-shadow: inset -1px 0 0 var(--ui-line), 0 6px 18px -8px rgba(17, 106, 212, .45); }
#header02 .top .serach_box input::placeholder { color: #9ca3af; }
#header02 .top .serach_box .btn_search {
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transition: background-color .15s;
}
#header02 .top .serach_box .btn_search:hover { background-color: var(--ui-primary-hover); }
#header02 .top .language span { color: var(--ui-muted); }
#header02 .top .util_box > a { color: var(--ui-ink-2); font-weight: 600; }
#header02 .top .util_box a.join_link { border-radius: 999px; background: var(--ui-primary) !important; }
#header02 .hd_popular .hd_popular_tit { color: var(--ui-ink-2); }
#header02 .bottom .service_link {
  position: relative;
  color: var(--ui-ink-2);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s;
}
#header02 .bottom .service_link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--ui-primary);
  transform: scaleX(0);
  transition: transform .2s var(--ui-ease);
}
#header02 .bottom .service_link:hover { color: var(--ui-primary); }
#header02 .bottom .service_link:hover::after { transform: scaleX(1); }
#header02 .bottom .all_menu_btn { color: var(--ui-ink); font-weight: 700; white-space: nowrap; }
#header02 .bottom .left { gap: 28px; }
#header02 .bottom .right .category span { white-space: nowrap; }
#header02 .bottom .all_menu_btn .ico {
  background-color: var(--ui-primary);
  border-radius: 11px;
  box-shadow: 0 4px 10px -4px rgba(17, 106, 212, .6);
  transition: transform .15s;
}
#header02 .bottom .all_menu_btn:hover .ico { transform: translateY(-1px); }
.lp_builder_link {
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary) !important;
  background: #fff;
  transition: background-color .15s, color .15s;
}
.lp_builder_link:hover { background: var(--ui-primary-soft) !important; }
.used_header_sell_btn {
  background: var(--ui-danger) !important;
  box-shadow: 0 6px 14px -8px rgba(229, 72, 77, .9);
  transition: transform .15s, box-shadow .15s;
}
.used_header_sell_btn:hover { transform: translateY(-1px); }
#header02 .my_menu_pop,
#header02 .all_menupop {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-lg) !important;
  overflow: hidden;
}

/* section titles — one style for the home and the sub pages */
.main_ttl_row { gap: 12px; }
.main_ttl_row .main_ttl {
  font-size: 26px;
  font-weight: 800;
  color: var(--ui-ink);
  letter-spacing: -0.03em;
}
.main_ttl_row .main_ttl strong {
  color: var(--ui-ink);
  font-size: inherit;
  font-weight: 800;
  margin-right: 0;
}
.list_ttl,
.list_ttl strong { color: var(--ui-ink); font-weight: 800; letter-spacing: -0.03em; }
.main_ttl_row .main_ttl strong::before,
.list_ttl strong::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 22px;
  margin-right: 10px;
  vertical-align: -2px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ui-primary), var(--ui-accent));
}
.main_ttl_row .ad_link {
  margin-left: 0;
  height: 30px;
  border-color: var(--ui-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-muted);
  transition: border-color .15s, color .15s, background-color .15s;
}
.main_ttl_row .ad_link:hover {
  border-color: var(--ui-primary);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.prd_sec .control_box button {
  border-radius: 999px !important;
  border-color: var(--ui-line) !important;
  background-color: #fff;
  transition: box-shadow .15s;
}
.prd_sec .control_box button:hover { box-shadow: var(--ui-shadow-sm); }

/* product card (home, 상품 list, seller pages): white card, image inset with its own radius */
.prd_item {
  overflow: hidden;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), var(--ui-shadow-sm);
  box-sizing: border-box;
  transition: transform .25s var(--ui-ease), box-shadow .25s;
}
.prd_item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px transparent, 0 22px 40px -18px rgba(16, 24, 40, .28);
}
.prd_item .thumb { overflow: hidden; border-radius: 12px; background: var(--ui-line-2); }
.prd_item .thumb span {
  border-radius: 0;
  transition: transform .6s var(--ui-ease);
}
.prd_item:hover .thumb span { transform: scale(1.05); }
.prd_item .txt { padding: 14px 8px 8px; border-top: 0; }
.prd_item .txt .seller_id .seller { color: var(--ui-muted); font-size: 13px; }
.prd_item .txt .subject {
  display: block;
  overflow: hidden;
  color: var(--ui-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.prd_item .txt .price_row { margin-top: 8px; color: var(--ui-ink-2); }
.prd_item .txt .price_row strong { color: var(--ui-ink); font-size: 17px; font-weight: 800; }

/* 중고 cards — the same card as .prd_item */
.used_card {
  padding: 8px;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), var(--ui-shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--ui-ease), box-shadow .25s;
}
.used_card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px transparent, 0 22px 40px -18px rgba(16, 24, 40, .28); }
.used_card_thumb_wrap { border-radius: 12px; }
.used_card_body { padding: 12px 6px 6px; }
.used_card_title { color: var(--ui-ink); font-weight: 600; }
.used_card_price { color: var(--ui-ink); font-weight: 800; }
.used_badge_condition { border-radius: 999px; padding: 3px 9px; font-weight: 600; }

/* shared section bits */
.promotion_sec .promotion_tab button.on,
.promotion_sec .promotion_tab button:hover { color: var(--ui-primary); }
.ui_more_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background-color .15s;
}
.ui_more_link:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }

/* ---------- U4 sub page frame ---------- */
@media (min-width: 769px) {
  .sub_layout { padding-top: 32px; }
  .sub_layout .snb_box,
  .mypage_layout .mypage_nav {
    padding: 22px 18px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-lg);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
    box-sizing: border-box;
  }
  .sub_layout .snb_box { width: 212px; }
  .snb_box .snb_ttl { margin-top: 0; padding: 0 6px 14px; }
  .mypage_nav .nav_ttl { margin-top: 26px; padding: 0 6px 14px; }
  .mypage_nav .nav_ttl:first-child { margin-top: 0; }
}
.mypage_nav .nav_ttl,
.mypage_nav .nav_ttl * { color: var(--ui-ink); font-weight: 800; letter-spacing: -0.03em; }
.snb_profile {
  padding-top: 4px;
}
.snb_profile .thumb {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.snb_profile .thumb span {
  border-color: var(--ui-line);
  box-shadow: 0 0 0 4px var(--ui-bg-soft);
}
.snb_profile .name {
  color: var(--ui-ink);
  font-weight: 700;
  font-size: 15px;
  margin-top: 12px;
  text-align: center;
  word-break: break-all;
}
.snb_profile .profile_grade_wrap {
  margin-top: 6px;
  text-align: center;
}
.snb_profile .grade_badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  line-height: 1.4;
}
.snb_profile .profile_util {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  margin-top: 14px;
  background: var(--ui-primary, #116ad4);
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px -2px rgba(17, 106, 212, 0.35);
  transition: background-color 0.15s;
}
.snb_profile .profile_util:hover {
  background: #0d5bb8;
}
.snb_profile .profile_util .profile_modify {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.snb_profile .profile_util .profile_modify span {
  display: inline-flex;
  align-items: center;
  padding-left: 24px;
  line-height: 38px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  background: url(/img/ico/profile_modify.png) left center no-repeat;
  background-size: 16px 16px;
}
.snb_profile .profile_util .grade {
  display: none;
}
.snb_box .snb_ttl,
.snb_box .snb_ttl * {
  color: var(--ui-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.snb_box .snb_list01,
.mypage_nav .snb_list01 {
  border-top: 1px solid var(--ui-line);
  padding-top: 10px;
}
.snb_box .snb_list01 > li > a,
.mypage_nav .snb_list01 > li > a {
  margin: 2px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background-image: none;
  color: var(--ui-ink-2);
  font-weight: 500;
  transition: background-color .15s, color .15s;
}
.snb_box .snb_list01 > li > a:hover,
.mypage_nav .snb_list01 > li > a:hover { background-color: var(--ui-bg-soft); color: var(--ui-ink); }
.snb_box .snb_list01 > li > a.on,
.mypage_nav .snb_list01 > li > a.on {
  background-color: var(--ui-primary-soft);
  background-image: none;
  color: var(--ui-primary);
  font-weight: 700;
}
.snb_box .snb_list02 > ul,
.mypage_nav .snb_list02 > ul {
  background: var(--ui-bg-soft);
  border-radius: 10px;
}
.snb_box .snb_list02 > ul > li > a.on > span { color: var(--ui-primary); border-color: var(--ui-primary); }

/* page title row */
.mp_ttl_row .mp_ttl,
.mp_ttl_row .mp_ttl * {
  color: var(--ui-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* tables */
.list_table table,
.listTable table {
  border-top: 2px solid var(--ui-ink);
}
.list_table table tr,
.listTable table tr { border-bottom-color: var(--ui-line-2); }
.list_table table thead th,
.listTable table thead th {
  background: var(--ui-bg-soft);
  color: var(--ui-ink-2);
  font-weight: 600;
}
.list_table table tbody tr,
.listTable table tbody tr { transition: background-color .12s; }
.list_table table tbody tr:hover,
.listTable table tbody tr:hover { background: #fafbfd; }
.list_table table tbody td.subject a:hover { color: var(--ui-primary); }

/* pagers */
.next_prev_box ul li a {
  border-radius: 10px;
  outline: none;
  border: 1px solid var(--ui-line);
  background-color: #fff;
  color: var(--ui-ink-2);
  box-sizing: border-box;
  transition: border-color .15s, color .15s, background-color .15s;
}
.next_prev_box ul li .first_page,
.next_prev_box ul li .preview,
.next_prev_box ul li .next,
.next_prev_box ul li .last_page {
  background-color: #fff;
  background-size: 36px 36px;
  background-position: center;
}
.next_prev_box ul li a:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.next_prev_box ul li.on a,
.next_prev_box ul li a.on {
  outline: none;
  border-color: var(--ui-primary);
  background-color: var(--ui-primary);
  color: #fff;
  font-weight: 700;
}
.paging ul li a,
.paging ul li strong { border-radius: 10px; }
.paging ul li.active strong,
.paging ul li.active a { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }

/* tabs (고객센터 이용안내 / 이벤트 / 약관) — one segmented style */
.contact_tab_menu li a,
.event_tab li a {
  border-color: var(--ui-line);
  background: #fff;
  color: var(--ui-ink-2);
  transition: background-color .15s, color .15s, border-color .15s;
}
.contact_tab_menu li a:hover,
.event_tab li a:hover { background: var(--ui-bg-soft); color: var(--ui-ink); }
.contact_tab_menu li a.active,
.event_tab li a.active {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  font-weight: 700;
}
.event_tab { gap: 8px; }
.event_tab li + li { margin-left: 0; }
.event_tab li a { height: 52px; line-height: 50px; font-size: 17px; border-radius: var(--ui-r-md); }
.contact_tab_menu li:first-child a { border-top-left-radius: var(--ui-r-md); }
.contact_tab_menu li:nth-child(4) a { border-top-right-radius: var(--ui-r-md); }
.trems_tab_menu li { border-bottom-color: var(--ui-primary); }
.trems_tab_menu li a { border-color: var(--ui-line); background: var(--ui-bg-soft); color: var(--ui-ink-2); }
.trems_tab_menu li:first-child a { border-top-left-radius: var(--ui-r-md); }
.trems_tab_menu li:last-child a { border-top-right-radius: var(--ui-r-md); }
.trems_tab_menu li.selected a { border-color: var(--ui-primary); color: var(--ui-primary); font-weight: 700; border-radius: var(--ui-r-md) var(--ui-r-md) 0 0; }

/* buttons shared by the sub pages */
.mem_container .form_box .submit_btn,
.write_table .write_btn_row .submit_btn,
.pop_wrap .pop_box .pop_btn_row .submit_btn,
.btn03 {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  border-radius: var(--ui-r-md);
  font-weight: 700;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
/* the button next to the primary one (취소 / 목록) gets the same shape (QA ui.button-row-consistent: radius 0 / 12) */
.write_table .write_btn_row button,
.write_btn_row button { border-radius: var(--ui-r-md); }
.mem_container .form_box .submit_btn { border-radius: 999px; }
.login .form_box .submit_btn { box-shadow: 0 10px 22px -10px rgba(17, 106, 212, .7); }
.mem_container .form_box .submit_btn:hover,
.write_table .write_btn_row .submit_btn:hover,
.pop_wrap .pop_box .pop_btn_row .submit_btn:hover,
.btn03:hover { background: var(--ui-primary-hover); }
.btn01 {
  border-color: var(--ui-line);
  border-radius: var(--ui-r-md);
  background: #fff;
  transition: border-color .15s, color .15s;
}
.btn01:hover { border-color: var(--ui-ink-2); color: var(--ui-ink); }
.mp_search_box .search_btn {
  border: 0;
  border-radius: var(--ui-r-sm);
  background: var(--ui-ink);
  color: #fff;
  font-weight: 600;
  transition: background-color .15s;
}
.mp_search_box .search_btn:hover { background: var(--ui-primary); }

/* 고객센터 phone box under the side menu */
.contact .contact_phone_number {
  padding: 18px 16px;
  border: 0;
  border-radius: var(--ui-r-md);
  background: var(--ui-primary-soft);
  color: var(--ui-ink-2);
  font-weight: 600;
}
.contact .contact_phone_number span {
  color: var(--ui-primary);
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* board view */
.board_view { border-top: 2px solid var(--ui-ink); }
.board_view .subject { border-bottom-color: var(--ui-line); }

/* ---------- U5 product pages ---------- */
.view_top .info_list li .il_option select { border-color: #d9dde4; border-radius: var(--ui-r-sm); }
.view_top .info_list li.point {
  border: 0;
  border-radius: var(--ui-r-md);
  background: var(--ui-primary-soft);
  padding: 14px 18px;
}
.view_top .info_list li.point .point_label { font-weight: 700; color: var(--ui-ink); }
.view_top .vit_btn_wrap button {
  border-color: var(--ui-line);
  border-radius: var(--ui-r-md);
  background: #fff;
  font-weight: 700;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.view_top .vit_btn_wrap button:hover { border-color: var(--ui-ink-2); }
.view_top .vit_btn_wrap .order_btn {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  box-shadow: 0 12px 24px -12px rgba(17, 106, 212, .75);
}
.view_top .vit_btn_wrap .order_btn:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.view_top .vit_btn_wrap > button.used_chat_btn,
.view_top .vit_btn_wrap > button.used_offer_btn { border-radius: var(--ui-r-md); }
.view_tab_row { background: var(--ui-bg-soft); border-radius: var(--ui-r-md); }
.vc_nav_total .btn_wrap .order_btn { border-radius: var(--ui-r-md); background: var(--ui-primary); border-color: var(--ui-primary); }

/* cart / order */
.order_top { border-bottom: 2px solid var(--ui-ink); }
.order_top .order_ttl { color: var(--ui-ink); font-weight: 800; letter-spacing: -0.03em; }
.order_top .order_step li { color: #5f6673; } /* QA text.contrast: #9ca3af was 2.4:1 */
.order_top .order_step li.on { color: var(--ui-primary); }
.cart_wrap .cart_btn { border-color: var(--ui-line); border-radius: var(--ui-r-sm); }
.cart_wrap .cart_btn_primary { background: var(--ui-primary); border-color: var(--ui-primary); }
.cart_wrap .cart_btn_primary:hover { background: var(--ui-primary-hover); }

/* ---------- U6 mypage ---------- */
.my_status_row {
  border-bottom: 1px solid var(--ui-line);
}
.my_status_row .status_item .label span {
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 500;
}
.my_status_row .status_item .data {
  color: var(--ui-ink);
}
.my_status_row .status_item .data strong {
  color: var(--ui-ink);
  font-weight: 800;
}
.my_status_row .cash_status .label {
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 500;
}
.my_status_row .cash_status .data {
  color: var(--ui-primary);
  font-weight: 800;
}

/* mypage status badges */
.mypage_mo_wrap .state_badge,
.list_table table td.state .state_badge,
.ps_list .prd_info .state {
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.mypage_mo_wrap .state_badge.cobalt,
.list_table table td.state .state_badge.cobalt,
.ps_list .prd_info .state.cobalt {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}
.mypage_mo_wrap .state_badge.orange,
.list_table table td.state .state_badge.orange {
  background: #fff4e6 !important;
  color: #b45309 !important;
}
.mypage_mo_wrap .state_badge.gray,
.ps_list .prd_info .state.gray {
  background: var(--ui-bg-soft) !important;
  color: var(--ui-muted) !important;
}
.ps_list .prd_info .state.red {
  background: #fee2e2 !important;
  color: #b91c1c !important; /* QA text.contrast: --ui-danger was 3.2:1 on #fee2e2 */
}
.ps_list .prd_info .state.blue,
.list_table table td.state .state_badge.blue {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

/* mypage charge & action buttons */
.charge_form .charge_select {
  border-bottom-color: var(--ui-line);
}
.charge_form .price_row .price_item input + label {
  border-color: var(--ui-line);
  background: #fff;
  border-radius: var(--ui-r-md);
  color: var(--ui-ink-2);
  transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.charge_form .price_row .price_item input + label:hover {
  border-color: var(--ui-primary);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.charge_form .price_row .price_item input:checked + label {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(17, 106, 212, .4);
}
.charge_form .total_row .total_price {
  color: var(--ui-primary);
  font-weight: 800;
}
.charge_form .btn_row button {
  border-radius: var(--ui-r-md);
  font-weight: 700;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.charge_form .btn_row .back_btn {
  background: #fff;
  border: 1px solid var(--ui-line);
  color: var(--ui-ink-2);
}
.charge_form .btn_row .back_btn:hover {
  border-color: var(--ui-ink-2);
  color: var(--ui-ink);
}
.charge_form .btn_row .submit_btn {
  background: var(--ui-primary);
  box-shadow: 0 10px 22px -10px rgba(17, 106, 212, .7);
}
.charge_form .btn_row .submit_btn:hover {
  background: var(--ui-primary-hover);
}
.charge_form .charge_notice {
  border-radius: var(--ui-r-md);
  background: var(--ui-bg-soft);
  padding: 24px 28px;
}

/* ---------- U7 member ---------- */
.join_type { background: var(--ui-bg-soft); }
.join_type .join_type_btn {
  border-radius: var(--ui-r-md);
  transition: transform .15s, box-shadow .15s;
}
.join_type .join_type_btn:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-md); }
.join_type .join_type_btn.google,
.join_type .join_type_btn.email { border-color: var(--ui-line); }
.join_type .etc_link a { border-radius: var(--ui-r-md); }

/* ---------- U8 footer ---------- */
#footer {
  margin-top: 40px;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-bg-soft);
}
#footer .top { border-bottom: 0; }
#footer .fnb_list { flex-wrap: wrap; gap: 4px 6px; padding: 14px 0; }
#footer .fnb_list li:not(:last-of-type) { margin-right: 0; }
#footer .fnb_list li a {
  padding: 0 12px;
  line-height: 34px;
  border-radius: 999px;
  color: var(--ui-muted);
  transition: background-color .15s, color .15s;
}
#footer .fnb_list li a:hover { background: #fff; color: var(--ui-ink); }
#footer .fnb_list li a strong { color: var(--ui-ink); font-weight: 700; }
#footer .bottom { border-top: 1px solid var(--ui-line); border-bottom: 0; }
#footer .foot_logo img { mix-blend-mode: multiply; }
#footer .foot_info address > div span { color: var(--ui-muted); }
#footer .foot_info address > div.point span { color: var(--ui-ink-2); }
#footer .cs_info {
  padding: 22px 26px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  background: #fff;
}
#footer .cs_info .subject { color: var(--ui-muted); font-size: 13px; letter-spacing: .08em; }
#footer .cs_info .call_num { color: var(--ui-primary); font-weight: 800; letter-spacing: -0.02em; }
#footer .cs_info .cs_time span { color: var(--ui-muted); font-size: 14px; }
#footer .cs_info .link_row a {
  border-color: var(--ui-line);
  border-radius: 999px;
  color: var(--ui-ink-2);
  transition: border-color .15s, color .15s;
}
#footer .cs_info .link_row a:hover { border-color: var(--ui-primary); color: var(--ui-primary); }

/* ==========================================================================
   Sub pages in the marketplace look of the home page (home.css): soft top band, page head with eyebrow,
   4:3 cards, category tiles, pill tabs. Overrides the earlier card/title rules above.
   ========================================================================== */
#container.sub,
#container.sub_container,
#container.mypage_container {
  background-image: linear-gradient(180deg, #f3f7fd 0, rgba(243, 247, 253, 0) 240px);
  background-repeat: no-repeat;
}

/* shared page head (used on /used, available to every page) */
.ui-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 24px;
}
.ui-eyebrow { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--ui-primary); }
.ui-page-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: var(--ui-ink); }
.ui-page-desc { margin: 6px 0 0; font-size: 14px; color: var(--ui-muted); }

/* titles: no accent bar any more (the home sections have none) */
.main_ttl_row .main_ttl strong::before,
.list_ttl strong::before { display: none; }
.main_ttl_row .main_ttl { font-size: 26px; }
.list_ttl_row .list_ttl { font-size: 22px; }

/* product card = .hm-card */
.prd_item {
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  box-shadow: none;
}
.prd_item:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 36px -18px rgba(16, 24, 40, .3); }
.prd_item .thumb { border-radius: 0; border-bottom: 1px solid var(--ui-line-2); }
.prd_item .thumb span { padding-top: 75%; background-position: top center; }
.prd_item:hover .thumb span { transform: none; }
.prd_item .txt,
.prd_sec .prd_item .txt { padding: 14px 16px 16px; }
.prd_item .txt .subject {
  display: -webkit-box;
  min-height: 2.8em;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prd_item .txt .price_row strong { font-size: 18px; }

/* 중고 / shop card = .hm-card */
.used_card {
  padding: 0;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  box-shadow: none;
}
.used_card:hover { border-color: transparent !important; box-shadow: 0 20px 36px -18px rgba(16, 24, 40, .3); }
.used_card_thumb_wrap { padding-top: 75%; border-radius: 0; border-bottom: 1px solid var(--ui-line-2); }
.used_card:hover .used_card_thumb_wrap img { transform: none; }
.used_card_body { padding: 14px 16px 16px; }
.used_card_title { font-size: 15px; }
.used_card_price { font-size: 18px; letter-spacing: -0.02em; }

/* category tiles (상품 list, 맞춤견적) = .hm-cat */
.category_tab { gap: 10px; }
.category_tab .cat_btn {
  margin-right: 0 !important;
  padding: 16px 6px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.category_tab .cat_btn:hover,
.category_tab .cat_btn.on { border-color: var(--ui-primary); background: var(--ui-primary-soft); }
.category_tab .cat_btn:hover { transform: translateY(-2px); }
.category_tab .cat_btn .ico,
.main .category_tab .cat_btn .ico:hover { width: 52px; height: 52px; }
.category_tab .cat_btn .ico::before,
.category_tab .cat_btn.on .ico::before,
.custom_list_wrap .category_tab .cat_btn.on .ico::before { display: none; }
.category_tab .cat_btn img { width: 100%; height: 100%; object-fit: contain; }
.category_tab .cat_btn .txt { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ui-ink-2); white-space: nowrap; }
.category_tab .cat_btn.on .txt,
.category_tab .cat_btn:hover .txt { color: var(--ui-primary); }

/* 중고 filters: chips like the home tabs, the filter box as a white card */
.used_filter_chip { border-radius: 999px; }
.used_filter_chip.active { background: var(--ui-ink); }
.used_filter_bar {
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff !important;
}

/* empty states: one dashed card everywhere */
.cart_wrap .cart_empty,
.list_table table .data_none {
  border: 1px dashed var(--ui-line);
  border-radius: 16px;
  background: #fff;
}
.cart_wrap .cart_empty { margin-top: 28px; padding: 72px 0; }
.cart_wrap .cart_empty p { color: var(--ui-muted); font-size: 16px; }
.cart_wrap .cart_empty .cart_btn_primary { height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 700; }
.list_table table .data_none { color: var(--ui-muted); }

/* ---------- /item category list (PC) — ItemListViews.tsx .il ---------- */
.il .il-head { margin-bottom: 20px; }
.il .il-head__sub { color: var(--ui-muted); font-weight: 700; }
.il .ui-page-desc b { color: var(--ui-primary); font-weight: 800; }
.prd_list_wrap.il .category_tab { padding: 0 0 16px; }
.il .category_tab .cat_btn { flex-direction: row; justify-content: center; gap: 10px; padding: 10px 12px; }
.il .category_tab .cat_btn .ico { width: 36px; height: 36px; margin: 0; }
.il .category_tab .cat_btn .txt { margin-top: 0; }

/* sub-category chips */
.il .il-chips { margin-bottom: 8px; }
/* one row that scrolls sideways instead of wrapping: the row is ~1160px wide in the fallback font and ~1040px once
   Noto Sans KR loads, so a wrapping row went from 2 lines to 1 and the whole list jumped 44px (QA CLS 0.43) */
.il .tab_category .snb_list01 {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  /* room for the focus ring, which a scrolling box would clip */
  margin: -4px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.il .tab_category .snb_list01::-webkit-scrollbar { display: none; }
.il .tab_category .snb_list01::after { content: none; display: none; }
.il .tab_category .snb_list01 li { flex: 0 0 auto; padding: 0; border: 0; border-radius: 999px; background: none; }
.il .tab_category .snb_list01 li a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink-2);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, color .15s, background-color .15s;
}
.il .tab_category .snb_list01 li a:hover { border-color: var(--ui-ink-2); color: var(--ui-ink); }
.il .tab_category .snb_list01 li.on { border: 0; background: none; }
.il .tab_category .snb_list01 li.on a { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff; }

.il .sub_layout { padding-top: 24px; }
.il .il-plus { margin-bottom: 40px; padding: 28px 28px 32px !important; border-radius: 20px; background: var(--ui-bg-soft); }
.il .il-plus .main_ttl .ui-eyebrow { margin-bottom: 4px; }

/* toolbar */
.il .il-toolbar {
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-line);
}
.il .il-toolbar .list_ttl { margin-right: 0; }
.il .il-toolbar .item_detail_tab {
  order: 3;
  margin-left: 0;
  padding: 4px;
  border-radius: 999px;
  background: #f1f3f6;
}
.il .il-toolbar .item_detail_tab button {
  height: 34px;
  margin: 0 !important;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 600;
}
.il .il-toolbar .item_detail_tab button::before,
.il .il-toolbar .item_detail_tab button::after { display: none !important; }
.il .il-toolbar .item_detail_tab button.active { background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow-sm); }
.il .il-search { order: 4; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.il .il-search select {
  height: 40px;
  padding: 0 30px 0 14px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background-color: #fff;
  font-size: 14px;
  color: var(--ui-ink-2);
}
.il .il-search__box {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.il .il-search__box:focus-within { border-color: var(--ui-primary); box-shadow: var(--ui-ring); }
#wrap .il .il-search__box input {
  width: 220px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}
.il .il-search__box button {
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ui-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .15s;
}
.il .il-search__box button:hover { background: var(--ui-primary); }

/* grid */
.prd_list_wrap.il .itme_type01 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.prd_list_wrap.il .itme_type01 li { width: auto; margin: 0; }
.il .il-empty {
  padding: 80px 0;
  border: 1px dashed var(--ui-line);
  border-radius: 16px;
  color: var(--ui-muted);
  text-align: center;
}

/* ---------- product detail (/item?gcode=) — purchase panel as a sticky card ---------- */
@media (min-width: 769px) {
  .item_view_pc .view_top { padding-top: 28px; }
  .item_view_pc .view_top_info { align-items: flex-start; }
  .item_view_pc .vti_left .vit_img { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 20px; background: #fff; }
  .item_view_pc .vti_right {
    position: sticky;
    top: 188px;
    padding: 28px 28px 30px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 48px -28px rgba(16, 24, 40, .28);
    box-sizing: border-box;
  }
  .item_view_pc .vti_item_tit { font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; color: var(--ui-ink); }
  .item_view_pc .vti_money .m_after strong { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ui-ink); }
  .item_view_pc .vti_util { padding-bottom: 16px; border-bottom: 1px solid var(--ui-line-2); }
  .item_view_pc .vti_util .average_work { color: var(--ui-ink-2); font-weight: 500; }
  .item_view_pc .vti_item_opt button { border: 1px solid var(--ui-line) !important; border-radius: 12px !important; background-color: #fff; }

  .item_view_pc .seller_info { margin-top: 20px; border: 0; border-radius: 16px; background: var(--ui-bg-soft); }
  .item_view_pc .summary_info { display: none; }

  .item_view_pc .view_content { padding-bottom: 40px; }
  .item_view_pc .vc_box { margin-top: 48px; }
  .item_view_pc .vc_box .vc_ttl {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ui-line);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ui-ink);
  }
  .item_view_pc .vc_box .prd_desc { overflow: hidden; border-radius: 16px; }
  .item_view_pc .vc_box .cancel_notice { padding: 20px 24px; border-radius: 16px; background: var(--ui-bg-soft); color: var(--ui-ink-2); }
  .item_view_pc .broker_notice_box { margin-top: 24px; color: var(--ui-muted); }
}

/* ---------- 맞춤견적 list: the dark banner becomes a light card ---------- */
@media (min-width: 769px) {
  .custom_list_pc .custom_top_banner { padding-top: 28px; background: none; }
  .custom_list_pc .custom_top_banner .inner {
    position: relative;
    overflow: hidden;
    padding: 26px 32px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eaf2fd 0%, #d6e6fb 100%);
    box-sizing: border-box;
    isolation: isolate;
  }
  .custom_list_pc .custom_top_banner .inner::after {
    position: absolute;
    right: -40px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    content: '';
    z-index: -1;
  }
  .custom_list_pc .custom_top_banner .subject { color: var(--ui-ink); font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
  .custom_list_pc .custom_top_banner .subject_desc { margin-top: 4px; font-size: 14px; color: var(--ui-ink-2); }
  .custom_list_pc .custom_top_banner .add_box { height: auto; padding-left: 0; }
  .custom_list_pc .custom_top_banner .add_subject { display: none; }
  .custom_list_pc .custom_top_banner .add_link {
    width: auto;
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--ui-primary);
    line-height: 48px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 12px 24px -12px rgba(17, 106, 212, .75);
    transition: background-color .15s;
  }
  .custom_list_pc .custom_top_banner .add_link:hover { background: var(--ui-primary-hover); }
  .custom_list_pc .category_tab:empty { display: none; }
  .custom_list_pc .sub_layout { padding-top: 28px; }
}

/* ---------- forms: .write_table everywhere, 맞춤견적 등록 sections as cards ---------- */
.write_table table { border-top: 0; }
.write_table table tr { border-bottom: 1px solid var(--ui-line-2); }
.write_table table tr:last-child { border-bottom: 0; }
.write_table table th {
  padding: 14px 20px;
  background: var(--ui-bg-soft);
  color: var(--ui-ink-2);
  font-size: 14px;
  font-weight: 600;
}
.write_table table td { padding: 12px 18px; font-size: 14px; }
#wrap .write_table table td input:not([type='radio']):not([type='checkbox']),
#wrap .write_table table td select { height: 40px; padding: 0 12px; box-sizing: border-box; }
#wrap .write_table table td textarea { padding: 12px 14px; border-color: #d9dde4; border-radius: 12px; }
.write_table table td .file_box label,
.write_table table td .button_row button {
  height: 40px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-ink-2);
  font-weight: 600;
  line-height: 38px;
  box-sizing: border-box;
  cursor: pointer;
}
.write_table table td .file_box label { width: 84px; margin-left: 8px; }
.write_table table td .button_row button { width: auto; padding: 0 14px; }
.write_table table td .file_box label:hover,
.write_table table td .button_row button:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
/* a write_table directly in the page (no card around it) gets its own rounded frame */
.write_table { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 16px; background: #fff; }

.custom_write_wrap .inner { max-width: 1170px; }
.custom_write_wrap .custom_write_ttl {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ui-ink);
}
.custom_write_box {
  padding: 24px 28px 28px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: #fff;
}
.custom_write_box + .custom_write_box { margin-top: 20px; }
.custom_write_box .subject { margin-bottom: 16px; font-size: 18px; font-weight: 800; color: var(--ui-ink); }
.custom_write_box .write_table { border-radius: 12px; }
.custom_write_box .write_table table th { width: auto; }
.custom_write_box .file_row label {
  width: 84px;
  height: 36px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-ink-2);
  font-weight: 600;
  line-height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.custom_write_box .file_row label:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.custom_write_box .file_row .file_name,
.custom_write_box .file_row .file_size { color: var(--ui-muted); }
#wrap .custom_write_box textarea { border-color: #d9dde4; border-radius: 12px; padding: 14px 16px; }

/* button rows: pills, primary last */
.custom_write_btn_row { gap: 10px; margin-top: 36px; }
.custom_write_btn_row button + button { margin-left: 0; }
.custom_write_btn_row button {
  width: auto;
  min-width: 120px;
  height: 48px;
  padding: 0 24px;
  border-color: var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink-2);
  font-size: 15px;
  font-weight: 700;
  transition: border-color .15s, color .15s, background-color .15s;
}
.custom_write_btn_row button:hover { border-color: var(--ui-ink-2); color: var(--ui-ink); }
.custom_write_btn_row .point_line { border-color: var(--ui-primary); color: var(--ui-primary); }
.custom_write_btn_row .point_bg,
.custom_write_btn_row .point_bg:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(17, 106, 212, .75);
}
.custom_write_btn_row .point_bg:hover { background: var(--ui-primary-hover); }

/* ---------- mypage: the status bar as one card ---------- */
@media (min-width: 769px) {
  .mypage_layout .my_status_row {
    align-items: center;
    padding: 18px 28px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
  }
  .mypage_layout .my_status_row .status_item { border-radius: 14px; transition: background-color .15s; }
  .mypage_layout .my_status_row .cash_status { padding-left: 24px; border-left: 1px solid var(--ui-line); }
  .custom_list_pc .custom_top_banner .inner { max-width: 1170px; width: calc(100% - 30px); }
  /* legacy content min-width 960 + 280 nav ran ~70px past the 1170 content edge */
  .mypage_layout .mypage_nav { width: 224px; min-width: 224px; margin-right: 28px; }
  .mypage_layout .content_box { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* ---------- 약관 pages: pill tabs + the text in a readable card ---------- */
.terms .trems_tab_menu { margin: 0 0 20px; }
.terms .trems_tab_menu ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #f1f3f6;
}
.terms .trems_tab_menu li,
.terms .trems_tab_menu li.selected { float: none; width: auto; border: 0; }
.terms .trems_tab_menu li a,
.terms .trems_tab_menu li.selected a {
  display: flex;
  align-items: center;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px !important;
  background: none;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.terms .trems_tab_menu li.selected a { background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow-sm); }
.terms .trems_con {
  margin-bottom: 80px;
  padding: 32px 36px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: #fff;
  color: var(--ui-ink-2);
  font-size: 14px;
  line-height: 1.85;
}
.terms .trems_con * { font-family: var(--ui-font) !important; line-height: 1.85 !important; }
@media (max-width: 768px) {
  .terms .trems_tab_menu ul { display: flex; border-radius: 16px; }
  .terms .trems_tab_menu li { flex: 1 1 0; }
  .terms .trems_tab_menu li a,
  .terms .trems_tab_menu li.selected a { justify-content: center; padding: 6px 8px; height: auto; min-height: 40px; border-radius: 12px !important; text-align: center; font-size: 13px; }
  .terms .trems_con { padding: 20px 18px; border-radius: 16px; font-size: 13px; }
}

/* ---------- 주문하기 / 주문완료 (/pay, /pay/result) ---------- */
.order_wrap .odn_box .order_step {
  height: auto;
  margin: 36px 0 16px;
  padding: 0;
  border: 0;
  gap: 12px;
}
.order_wrap .odn_box .order_step .step {
  width: auto;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: .06em;
}
.order_wrap .odn_box .order_step h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ui-ink); }
.order_wrap .odn_box #od_tb {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  background: #fff;
}
.order_wrap .odn_box #od_tb thead tr { border-bottom: 0; }
.order_wrap .odn_box #od_tb th {
  padding: 14px 0;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-bg-soft);
  color: var(--ui-ink-2);
  font-size: 14px;
  font-weight: 600;
}
.order_wrap .odn_box #od_tb td { padding: 20px 0; }
.order_wrap .odn_box #od_tb td.item_info { padding-left: 20px; }
.order_wrap .odn_box #od_tb .order_info_item .img_box span { border-radius: 12px; }
.order_wrap .odn_box #od_tb .txt_box .subject { font-weight: 700; color: var(--ui-ink); }
.order_wrap .order_row .order_cont { border-top: 0; border-bottom: 0; }
.order_wrap .order_row .order_cont table tr { border-color: var(--ui-line-2); }
.order_wrap .order_row .order_cont button,
.order_wrap .point_row button {
  border-color: var(--ui-line) !important;
  border-radius: 10px;
  background: #fff;
  color: var(--ui-ink-2);
  font-weight: 600;
  transition: border-color .15s, color .15s;
}
.order_wrap .order_row .order_cont button:hover,
.order_wrap .point_row button:hover { border-color: var(--ui-primary) !important; color: var(--ui-primary); }
@media (min-width: 769px) {
  .order_wrap .point_row { display: flex; align-items: flex-start; }
  .order_wrap .point_row .pt_right { flex: 0 0 420px; width: 420px; margin-left: 24px; }
  .order_wrap .point_row .pt_left {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 24px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: #fff;
    box-sizing: border-box;
  }
}
.order_body .pt_right {
  padding: 24px;
  border: 1px solid var(--ui-line);
  border-top: 1px solid var(--ui-line);
  border-radius: 20px;
  background: var(--ui-bg-soft);
}
.order_body .pt_right .pay_tit { padding-left: 0; background: none; font-size: 20px; font-weight: 800; color: var(--ui-ink); }
.order_body .pt_right .pay_box { overflow: hidden; border-radius: 16px; box-shadow: var(--ui-shadow-sm); }
.order_body .order_btn_row { display: flex; justify-content: center; gap: 10px; }
.order_body .order_btn_row button {
  width: 220px;
  height: 56px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: normal !important;
}
.order_body .order_btn_row .btn_paynone { margin-right: 0; border-color: var(--ui-line); background: #fff; color: var(--ui-ink-2); }
.order_body .order_btn_row .btn_paynone:hover { border-color: var(--ui-ink-2); color: var(--ui-ink); }
.order_body .order_btn_row .btn_payment {
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(17, 106, 212, .8);
  transition: background-color .15s;
}
.order_body .order_btn_row .btn_payment:hover { background: var(--ui-primary-hover); }

@media screen and (max-width: 768px) {
  .order_wrap .order_step,
  .od_wrap.oding .order_step {
    height: auto !important;
    margin: 24px 0 12px !important;
    gap: 10px;
    border: 0 !important;
    background: none !important;
  }
  .order_wrap .order_step .step,
  .od_wrap.oding .order_step .step {
    width: auto !important;
    height: 26px !important;
    margin-right: 0 !important;
    padding: 0 10px !important;
    border-radius: 999px;
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 26px !important;
  }
  .order_wrap .order_step h3,
  .od_wrap.oding .order_step h3 { font-size: 18px !important; font-weight: 800 !important; line-height: 1.3 !important; color: var(--ui-ink) !important; }
  .order_wrap #od_tb { border: 1px solid var(--ui-line) !important; border-radius: 16px; }
  .order_wrap .pt_right,
  .od_wrap.oding .pay_wrap { border: 1px solid var(--ui-line) !important; border-radius: 16px !important; background: var(--ui-bg-soft) !important; }
  .order_body .order_btn_row button { width: auto; flex: 1 1 0; height: 52px; }
  .order_wrap .order_btn_row .btn_paynone,
  .order_wrap .order_btn_row .btn_payment { border-radius: 999px !important; }
  .order_wrap .order_btn_row .btn_paynone { border-color: var(--ui-line) !important; color: var(--ui-ink-2) !important; }
}

/* ---------- 주문완료 (/pay/result) ---------- */
.order_wrap.comple .ok_txtopbox { position: relative; }
.order_wrap.comple .ok_txtopbox::before {
  display: block;
  width: 64px;
  height: 64px;
  margin: 40px auto 18px;
  border-radius: 50%;
  background: var(--ui-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
  box-shadow: 0 16px 30px -14px rgba(17, 106, 212, .8);
  content: '';
}
.order_row .ok_txt01 { color: var(--ui-ink); font-weight: 800; letter-spacing: -0.03em; }
.order_row .comple_main_desc { border: 0; border-radius: 20px; background: var(--ui-bg-soft); }
.order_wrap .order_ttl02 { font-size: 20px; font-weight: 800; color: var(--ui-ink); }
.order_row .comple_info_table,
.order_row .comple_info_table02 {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  background: #fff;
}
.order_row .comple_info_table th,
.order_row .comple_info_table02 th { background: var(--ui-bg-soft); color: var(--ui-ink-2); font-weight: 600; }
.order_row .comple_info_table tbody tr,
.order_row .comple_info_table02 tr { border-color: var(--ui-line-2); }
.order_row .comple_info_table td + td { border-left-color: var(--ui-line-2); }
.order_wrap.comple .btn_row { gap: 10px; }
.order_wrap.comple .btn_row .btn + .btn { margin-left: 0; }
.order_wrap.comple .btn_row .btn {
  height: 52px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink-2);
  font-weight: 700;
  line-height: 50px;
  transition: border-color .15s, color .15s, background-color .15s;
}
.order_wrap.comple .btn_row .btn.btn01,
.order_wrap.comple .btn_row .btn.btn02,
.order_wrap.comple .btn_row .btn.btn04 { border-color: var(--ui-line); background: #fff; color: var(--ui-ink-2); }
.order_wrap.comple .btn_row .btn.btn01:hover,
.order_wrap.comple .btn_row .btn.btn02:hover,
.order_wrap.comple .btn_row .btn.btn04:hover { border-color: var(--ui-ink-2); color: var(--ui-ink); }
.order_wrap.comple .btn_row .btn.btn03,
.order_wrap.comple .btn_row .btn.btn03:hover { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; }

/* ---------- mypage lists (.ps_list: 구매/판매/상품/리뷰/맞춤견적) — one card per row ---------- */
@media (min-width: 769px) {
  .mypage_container .ps_list { padding: 0; border: 0; }
  .mypage_container .ps_list > li {
    gap: 20px;
    padding: 18px 22px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
  }
  .mypage_container .ps_list > li:not(:last-of-type) { margin-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
  .mypage_container .ps_list > li:hover { border-color: #d5dbe4; box-shadow: var(--ui-shadow-sm); }
  .mypage_container .ps_list .prd_info { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; align-items: center; }
  .mypage_container .ps_list .prd_info .prd_thumb {
    overflow: hidden;
    width: 120px;
    height: 90px;
    margin-right: 18px;
    border: 1px solid var(--ui-line-2);
    border-radius: 12px;
    background: var(--ui-line-2);
  }
  .mypage_container .ps_list .prd_info .prd_thumb a,
  .mypage_container .ps_list .prd_info .prd_thumb span { background-position: top center; }
  .mypage_container .ps_list .prd_cont { min-width: 0; flex: 1 1 auto; }
  .mypage_container .ps_list .prd_info .top { gap: 6px 12px; margin-bottom: 8px; }
  .mypage_container .ps_list .prd_info .state {
    width: auto;
    margin-right: 0;
    padding: 0 10px;
    line-height: 24px;
    font-weight: 700;
  }
  .mypage_container .ps_list .prd_info .order_num { margin-right: 0; color: var(--ui-muted); font-size: 13px; }
  .mypage_container .ps_list .prd_info .user { margin: 0; }
  .mypage_container .ps_list .prd_info .user_thumb { width: 22px; height: 22px; margin-right: 6px; }
  .mypage_container .ps_list .prd_info .user_name { color: var(--ui-ink-2); font-size: 13px; max-width: 160px; }
  .mypage_container .ps_list .prd_info .prd_desc {
    max-width: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-ink);
  }
  .mypage_container .ps_list .prd_info .prd_opt,
  .mypage_container .ps_list .prd_info .order_date { gap: 6px; margin-top: 2px; }
  .mypage_container .ps_list .prd_info .prd_opt .label,
  .mypage_container .ps_list .prd_info .order_date .label { width: auto; white-space: nowrap; color: var(--ui-muted); }
  .mypage_container .ps_list .prd_info .prd_opt .data,
  .mypage_container .ps_list .prd_info .order_date .data { color: var(--ui-ink-2); }

  .mypage_container .ps_list .prd_method {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 120px;
    max-width: none;
  }
  .mypage_container .ps_list .prd_method span {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ui-bg-soft);
    color: var(--ui-ink-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .mypage_container .ps_list .prd_method span:empty { display: none; }
  .mypage_container .ps_list .prd_method span + span { margin-top: 0; padding-top: 3px; }
  .mypage_container .ps_list .prd_method span + span::before { display: none; }

  .mypage_container .ps_list .prd_util { width: 150px; padding-left: 20px; border-left: 1px solid var(--ui-line-2); text-align: right; }
  .mypage_container .ps_list .prd_util .prd_price { color: var(--ui-ink-2); }
  .mypage_container .ps_list .prd_util .prd_price strong { font-weight: 800; color: var(--ui-ink); letter-spacing: -0.02em; }
  .mypage_container .ps_list .ps_btn_row,
  .mypage_container .ps_list .ps_status { justify-content: flex-end; gap: 6px; }
  .mypage_container .ps_list .ps_btn_row button,
  .mypage_container .ps_list .ps_status button,
  .mypage_container .ps_list .ps_status a {
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--ui-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--ui-ink-2) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
    transition: border-color .15s, color .15s;
  }
  .mypage_container .ps_list .ps_btn_row button:hover,
  .mypage_container .ps_list .ps_status button:hover,
  .mypage_container .ps_list .ps_status a:hover { border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }
  .mypage_container .ps_list .ps_btn_row button.bg_btn {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: #fff !important;
  }
  .mypage_container .ps_list .ps_status select { height: 32px; border-radius: 8px; }
  .mypage_container .ps_list .ps_status button + button,
  .mypage_container .ps_list .ps_status button + a,
  .mypage_container .ps_list .ps_status a + button,
  .mypage_container .ps_list .ps_status a + a { margin-left: 0; }
  /* "no rows" line inside a list */
  .mypage_container .ps_list > li[style*='text-align'] { justify-content: center; border-style: dashed; color: var(--ui-muted) !important; }
}

/* notifications (/mypage/my_notification) */
.noti-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.noti-readall {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ui-ink-2);
  font-size: 13px;
  font-weight: 600;
}
.noti-readall:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.noti-list { display: flex; flex-direction: column; gap: 8px; }
.noti-item a {
  position: relative;
  display: block;
  padding: 14px 18px 14px 34px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.noti-item a:hover { border-color: #d5dbe4; box-shadow: var(--ui-shadow-sm); }
.noti-item a::before {
  position: absolute;
  top: 21px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-line);
  content: '';
}
.noti-item.is-unread a { border-color: #cfe0f8; background: var(--ui-primary-soft); }
.noti-item.is-unread a::before { background: var(--ui-primary); }
.noti-title { display: block; font-size: 15px; font-weight: 600; color: var(--ui-ink); }
.noti-item.is-unread .noti-title { font-weight: 800; }
.noti-msg { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ui-ink-2); }
.noti-date { display: block; margin-top: 6px; font-size: 12px; color: var(--ui-muted); }
.noti-empty,
.mypage_container .ps_list:empty::before {
  display: block;
  padding: 64px 0;
  border: 1px dashed var(--ui-line);
  border-radius: 16px;
  color: var(--ui-muted);
  text-align: center;
}
.mypage_container .ps_list:empty::before { content: '내용이 없습니다.'; }

/* long prices / several buttons in a list row */
@media (min-width: 769px) {
  .mypage_container .ps_list .prd_util { width: auto; min-width: 150px; }
  .mypage_container .ps_list .prd_util .prd_price { white-space: nowrap; }
  .mypage_container .ps_list .ps_status { flex: 0 0 auto; flex-wrap: nowrap; }
  .mypage_container .ps_list .ps_status button,
  .mypage_container .ps_list .ps_status a { width: auto !important; min-width: 0; white-space: nowrap; }
}

/* ---------- mobile (≤768px): the same tokens on the mobile markup ---------- */
@media screen and (max-width: 768px) {
  #header_mobile { box-shadow: 0 1px 0 var(--ui-line-2); }
  #header_mobile #gnb a { background-color: var(--ui-primary) !important; }
  .item_sear_top .main_tit strong { color: var(--ui-ink); font-weight: 800; }
  .ui-page-title { font-size: 22px; }
  .ui-eyebrow { font-size: 11px; margin-bottom: 4px; }
  .used_card_body { padding: 10px 10px 12px; }
  .used_card_price { font-size: 16px; }
  .item_sear_top .main_tit strong::before { display: none; }
  #footer { background: var(--ui-bg-soft) !important; }
  .footer_mobile { border-top: 1px solid var(--ui-line) !important; background: var(--ui-bg-soft) !important; }
  .next_prev_box ul li a { margin-left: 6px; }
  /* the three 약관 tab labels wrap on a phone: let the tab grow instead of spilling out */
  .trems_tab_menu li a,
  .trems_tab_menu li.selected a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 40px;
    padding: 6px 4px;
    font-size: 13px;
    line-height: 1.3;
    word-break: keep-all;
    box-sizing: border-box;
  }
  .custom_wrap .go_custom {
    border-radius: 999px !important;
    background-color: var(--ui-primary) !important;
    box-shadow: 0 10px 20px -12px rgba(17, 106, 212, .75);
  }
  .trems_tab_menu ul { display: flex; }
  .trems_tab_menu li { float: none; display: flex; }
  .trems_tab_menu li a { width: 100%; }
}

/* ---------- mypage on phones: one left edge, order rows as cards, pill buttons ---------- */
@media screen and (max-width: 768px) {
  .mypage_mo_wrap .mytit { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--ui-ink); }
  .mypage_mo_wrap .od_wrap { padding-top: 20px; }
  .mypage_mo_wrap .od_wrap .od_list_top { padding: 0 0 12px; border-bottom: 0; }
  .mypage_mo_wrap .od_wrap .od_list_top h3,
  .mypage_mo_wrap .od_wrap .od_list_top .od_type { font-size: 17px; font-weight: 800; color: var(--ui-ink); }
  .mypage_mo_wrap .od_wrap .od_list_top .od_type { color: var(--ui-muted); font-weight: 600; }
  .mypage_mo_wrap .od_list { display: flex; flex-direction: column; gap: 12px; }
  .mypage_mo_wrap .od_list .od_row {
    padding: 0 14px 14px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
  }
  .mypage_mo_wrap .od_list .od_row .data { padding: 12px 0 10px; border-bottom-color: var(--ui-line-2); }
  .mypage_mo_wrap .od_list .od_row .data .date { color: var(--ui-ink); }
  .mypage_mo_wrap .od_list .od_row .data .codenum { color: var(--ui-muted); }
  .mypage_mo_wrap .od_list .od_row .od_state {
    margin-top: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .mypage_mo_wrap .od_list .od_row .od_state .now_state {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ui-bg-soft);
    font-weight: 700;
  }
  .mypage_mo_wrap .od_list .od_row .od_state .now_state.st01 { background: #fee2e2; color: #b91c1c; }
  .mypage_mo_wrap .od_list .od_row .od_state .now_state.st02,
  .mypage_mo_wrap .od_list .od_row .od_state .now_state.st04 { background: var(--ui-primary-soft); color: var(--ui-primary); }
  .mypage_mo_wrap .od_list .od_row .od_state .goods_info span { color: var(--ui-muted); }
  .mypage_mo_wrap .od_list .od_row .od_box { margin-top: 12px; align-items: flex-start; }
  .mypage_mo_wrap .od_list .od_row .od_box .od_img { width: 96px; overflow: hidden; border-radius: 12px; }
  .mypage_mo_wrap .od_list .od_row .od_box .od_img a,
  .mypage_mo_wrap .od_list .od_row .od_box .od_img span { padding-top: 75%; background-position: top center; }
  .mypage_mo_wrap .od_list .od_row .od_box .od_info { width: calc(100% - 108px); }
  .mypage_mo_wrap .od_list .od_row .od_box .od_comp { margin-bottom: 4px; }
  .mypage_mo_wrap .od_list .od_row .od_box .od_comp .comp_name { color: var(--ui-muted); font-weight: 600; }
  .mypage_mo_wrap .od_list .od_row .od_box .subject { font-size: 14px; font-weight: 700; color: var(--ui-ink); }
  .mypage_mo_wrap .od_list .od_row .od_box .type { color: var(--ui-muted); }
  .mypage_mo_wrap .od_list .od_row .od_box .od_price { margin-top: 6px; color: var(--ui-ink-2); }
  .mypage_mo_wrap .od_list .od_row .od_box .od_price strong { font-weight: 800; color: var(--ui-ink); }
  .mypage_mo_wrap .od_list .od_row .od_btn { margin-top: 12px; gap: 8px; }
  .mypage_mo_wrap .od_list .od_row .od_btn * {
    flex: 1 1 0;
    width: auto;
    height: 38px;
    border-color: var(--ui-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-ink-2);
    font-weight: 700;
    line-height: 36px;
  }
  .mypage_mo_wrap .od_list .od_row .od_btn button + button { margin-left: 0; }
  .mypage_mo_wrap .od_list .od_row .od_btn .btn_bk { border: 1px solid var(--ui-primary); background: var(--ui-primary); color: #fff; }
  .mypage_mo_wrap .od_list .od_row .od_btn:empty { display: none; }
  .mypage_mo_wrap .od_list .od_row[style*='text-align'] { padding: 48px 14px !important; border-style: dashed; }

  /* the search block and the list share the page's edge: no extra inner padding */
  .mypage_mo_wrap .my_date { border-bottom: 0 !important; }
  .mypage_mo_wrap .my_date .inner { width: 100% !important; padding: 0 !important; }
  .mypage_mo_wrap .my_date .date_box,
  .mypage_mo_wrap .my_date .search_box { margin-left: 0 !important; margin-right: 0 !important; }
  .mypage_mo_wrap .my_date input { border-radius: 10px !important; }
}

/* mypage phones: point / cash / coupon / ad lists (.my_list) as cards, 등록 buttons and pagers rounded */
@media screen and (max-width: 768px) {
  /* page title on the same left edge as the search block and the cards */
  #my_wrap.mypage_mo_wrap h2.mytit,
  #my_wrap.mypage_mo_wrap .my_bttop { padding-left: 0; padding-right: 0; }
  #my_wrap.mypage_mo_wrap .my_bttop h2.mytit { padding: 0; }
  #my_wrap.mypage_mo_wrap .my_list > ul { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  #my_wrap.mypage_mo_wrap .my_list > ul > li {
    padding: 14px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
  }
  #my_wrap.mypage_mo_wrap .my_list li .state_ico {
    margin-bottom: 8px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    font-weight: 700;
  }
  #my_wrap.mypage_mo_wrap .my_list li .date { color: var(--ui-muted); }
  #my_wrap.mypage_mo_wrap .my_list li .subject { color: var(--ui-ink); font-weight: 700; }
  #my_wrap.mypage_mo_wrap .my_date .go_write {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--ui-primary);
    line-height: 44px;
    font-weight: 700;
    box-shadow: 0 10px 20px -12px rgba(17, 106, 212, .75);
  }
  #container .pager li { border: 0; }
  #container .pager li a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background-color: #fff;
    line-height: 32px;
    box-sizing: border-box;
  }
  #container .pager li a.on { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; }
}

/* 광고신청 on phones: description and summary on the page edge, the form as one padded card */
@media screen and (max-width: 768px) {
  .mypage_container .ad_order .ad_info_top { padding: 0; }
  .mypage_container .ad_order .ad_info_box .ad_ttl { margin-bottom: 16px; font-size: 18px; font-weight: 800; color: var(--ui-ink); }
  .mypage_container .ad_order .ad_info_box .ad_desc { font-size: 14px; line-height: 1.6; color: var(--ui-ink-2); }
  .mypage_container .ad_order .ad_summary { margin-top: 24px; padding: 20px 0 0; border-top-color: var(--ui-line); }
  .mypage_container .ad_order .ad_summary li:not(:last-of-type) { margin-bottom: 14px; }
  .mypage_container .ad_order .ad_summary li .label { width: auto; min-width: 84px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ui-ink); }
  .mypage_container .ad_order .ad_summary li .data { font-size: 14px; line-height: 1.5; }
  .mypage_container .ad_order .ad_form { margin-top: 24px; }
  /* responsive.css took the radios' left padding away, so the round icon sat on the label text */
  .radio_list input + label { padding-left: 34px; background-size: 24px 24px; font-size: 16px; }
  .mypage_container .ad_order .ad_form_in {
    padding: 20px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
  }
}

/* 광고신청하기 and the other form submit buttons of the mypage payment forms */
.ad_order .submit_btn.btn_payment {
  border-radius: 999px;
  background: var(--ui-primary);
  font-weight: 700;
  box-shadow: 0 12px 24px -12px rgba(17, 106, 212, .75);
  transition: background-color .15s;
}
.ad_order .submit_btn.btn_payment:hover { background: var(--ui-primary-hover); }
.mypage_container .ad_order .ad_summary li .label { width: auto; min-width: 84px; white-space: nowrap; }

/* ---------- line breaking (owner review 11/2026) ----------
   Korean text breaks between words (at spaces), never inside a word; a single word longer than its box may still
   break so nothing runs out. Titles balance their lines, paragraphs avoid a one-word last line. */
body { word-break: keep-all; overflow-wrap: break-word; }
:is(h1, h2, h3, h4, h5, [class*="title"], [class*="ttl"], [class*="subject"]) { text-wrap: balance; }
:is(p, li, dd, blockquote, [class*="desc"]) { text-wrap: pretty; }