/*
 * 직번 Design System V2
 * Friendly professional marketplace UI
 * Loaded after app.css to preserve existing functional layouts safely.
 */
:root{
  --navy:#183b56;
  --navy-deep:#102f48;
  --navy-soft:#edf5fa;
  --blue:#2b79a8;
  --blue-bright:#2f8fd0;
  --blue-soft:#eaf6fd;
  --sky:#dff2ff;
  --accent:#f6bd52;
  --accent-strong:#eea92b;
  --accent-soft:#fff4db;
  --mint:#4fc6a0;
  --mint-deep:#24916d;
  --mint-soft:#e8f8f2;
  --lavender:#9278d7;
  --lavender-soft:#f1edff;
  --coral:#ef8377;
  --coral-soft:#fff0ee;
  --ink:#203445;
  --text:#405768;
  --muted:#718494;
  --line:#dce7ee;
  --line-soft:#ebf1f5;
  --surface:#fff;
  --surface-alt:#f7fafc;
  --page:#f4f8fb;
  --danger:#d85e68;
  --danger-soft:#fff0f1;
  --success:#27966f;
  --success-soft:#eaf8f2;
  --warning:#b97916;
  --warning-soft:#fff5e4;
  --radius-xs:9px;
  --radius-sm:13px;
  --radius:18px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-xs:0 4px 14px rgba(24,59,86,.06);
  --shadow-sm:0 10px 28px rgba(24,59,86,.08);
  --shadow:0 18px 50px rgba(24,59,86,.11);
  --shadow-lg:0 28px 70px rgba(24,59,86,.15);
  --shell:1200px;
}

html{scroll-padding-top:116px}
body{
  color:var(--ink);
  background:var(--page);
  letter-spacing:-.015em;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 5% 12%,rgba(121,199,239,.12),transparent 23rem),
    radial-gradient(circle at 95% 32%,rgba(246,189,82,.11),transparent 22rem),
    linear-gradient(180deg,#fff 0,#f8fbfd 38rem,#f4f8fb 100%);
}
main{min-height:55vh}
a,button,input,select,textarea{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(47,143,208,.35);
  border-radius:var(--radius-xs);
}
.shell{width:min(calc(100% - 44px),var(--shell))}
.section{padding-top:82px;padding-bottom:82px}
.ui-icon{
  width:1.15em;
  height:1.15em;
  display:inline-block;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-.16em;
}
.icon-flip{transform:rotate(180deg)}
.pagination .ui-icon{width:14px;height:14px}
.contact-icon .ui-icon,.bank-icon .ui-icon,.device-icon .ui-icon{width:24px;height:24px}

/* --------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------- */
.site-header{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(220,231,238,.95);
  box-shadow:0 7px 24px rgba(24,59,86,.045);
  backdrop-filter:blur(18px) saturate(135%);
}
.top-strip{
  height:34px;
  background:linear-gradient(90deg,var(--navy-deep),var(--navy));
  color:#ddecf6;
}
.top-strip-inner{height:34px}
.top-benefits{display:flex;align-items:center;gap:24px;font-size:12px;font-weight:650}
.top-benefits span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.top-benefits .ui-icon{color:#7ee1bd;font-size:14px}
.test-badge{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  padding:3px 9px;
  letter-spacing:.1em;
  font-weight:800;
}
.header-main{height:82px;gap:40px}
.brand{width:112px;transition:transform .2s ease}
.brand:hover{transform:translateY(-1px)}
.desktop-nav{gap:7px;color:#29465b}
.desktop-nav>a,.market-menu-trigger{
  min-height:46px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  background:transparent;
  color:inherit;
  font-weight:800;
  font-size:15px;
  transition:.18s ease;
}
.desktop-nav>a::after{display:none}
.desktop-nav>a:hover,.desktop-nav>a.active,.market-menu-trigger:hover,.market-menu-trigger.active,.desktop-market-menu.is-open .market-menu-trigger{
  background:var(--navy-soft);
  color:var(--navy);
}
.market-menu-trigger .ui-icon{width:15px;height:15px;transition:transform .18s ease}
.desktop-market-menu.is-open .market-menu-trigger .ui-icon{transform:rotate(180deg)}
.header-actions{gap:9px}
.login-link{display:flex;align-items:center;gap:6px;color:var(--navy)}
.point-pill{
  height:44px;
  padding:0 15px;
  background:#f3f8fb;
  border-color:#d8e7ef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.point-pill .ui-icon{color:var(--accent-strong)}
.member-avatar-link{display:grid;place-items:center;border-radius:50%}
.avatar{
  background:linear-gradient(145deg,#dff3ff,#fef1d4);
  border:2px solid #fff;
  box-shadow:0 4px 13px rgba(24,59,86,.13);
}
.header-register{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:7px 15px 7px 8px;
  color:#183044;
  background:linear-gradient(135deg,#ffd46f,#f6bd52);
  border:1px solid rgba(195,136,17,.18);
  border-radius:15px;
  box-shadow:0 9px 22px rgba(238,169,43,.23);
  transition:.18s ease;
}
.header-register:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(238,169,43,.29)}
.header-register-icon{width:37px;height:37px;border-radius:11px;background:rgba(255,255,255,.7);display:grid;place-items:center}
.header-register-icon .ui-icon{width:20px;height:20px;stroke-width:2.5}
.header-register span:last-child{display:flex;flex-direction:column;line-height:1.15}
.header-register b{font-size:14px;font-weight:900}
.header-register small{font-size:10px;margin-top:3px;color:#76520e;font-weight:750}
.menu-toggle{border-radius:12px;color:var(--navy);background:var(--navy-soft)}
.menu-toggle .ui-icon{width:24px;height:24px}

/* Mega menu */
.desktop-market-menu{position:static}
.market-mega{
  position:absolute;
  top:100%;
  left:50%;
  display:block;
  grid-template-columns:none;
  width:min(calc(100vw - 44px),1160px);
  min-width:0;
  transform:translate(-50%,14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  padding:18px;
  border:1px solid rgba(214,228,237,.98);
  border-radius:0 0 28px 28px;
  background:rgba(255,255,255,.98);
  box-shadow:0 28px 70px rgba(18,54,80,.17);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  word-break:keep-all;
  overflow-wrap:normal;
}
.desktop-market-menu:hover .market-mega,.desktop-market-menu:focus-within .market-mega,.desktop-market-menu.is-open .market-mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
.market-mega-intro{
  display:flex;align-items:center;gap:13px;
  padding:11px 13px 17px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:15px;
}
.mega-intro-icon{width:44px;height:44px;border-radius:14px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}
.mega-intro-icon .ui-icon{width:21px;height:21px}
.market-mega-intro div{flex:1}
.market-mega-intro b{font-size:15px}
.market-mega-intro p{margin:2px 0 0;color:var(--muted);font-size:12px}
.market-mega-intro>a{display:flex;align-items:center;gap:6px;color:var(--blue);font-size:13px;font-weight:850}
.market-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;min-width:0}
.mega-column{
  min-width:0;
  padding:15px;
  border:1px solid var(--line-soft);
  border-radius:20px;
  background:#fbfdfe;
  transition:.18s ease;
}
.mega-column:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);background:#fff}
.mega-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mega-category-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--navy)}
.mega-column.personal .mega-category-icon{background:var(--blue-soft);color:var(--blue)}
.mega-column.corporate .mega-category-icon{background:var(--navy-soft);color:var(--navy)}
.mega-column.forwarding .mega-category-icon{background:var(--lavender-soft);color:var(--lavender)}
.mega-column.taxi .mega-category-icon{background:var(--accent-soft);color:#b17412}
.mega-title>div{display:flex;flex-direction:column;line-height:1.15}
.mega-title small{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.1em}
.mega-title b{font-size:17px;margin-top:3px}
.mega-title em{font-style:normal;color:var(--muted);font-size:11px;margin-top:3px}
.mega-link-list{display:grid;gap:4px}
.mega-link-list>a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:11px;color:var(--text)}
.mega-link-list>a:hover{background:#f0f6fa;color:var(--navy)}
.mega-link-list>a span{display:flex;flex-direction:column}
.mega-link-list b{font-size:13px}
.mega-link-list small{font-size:10px;color:var(--muted);margin-top:1px}
.mega-link-list .ui-icon{width:14px;height:14px;color:#9aaab6}
.mega-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.mega-action{min-height:39px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:850}
.mega-action.sell{background:var(--coral-soft);color:#b85048}
.mega-action.buy{background:var(--blue-soft);color:#246b97}

/* app.css의 구형 메뉴 규칙보다 우선 적용 */
.desktop-nav .market-mega{display:block}
.desktop-nav .market-mega .market-mega-intro>a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  color:var(--blue);
  border-radius:10px;
  white-space:nowrap;
}
.desktop-nav .market-mega .market-mega-intro>a:hover{
  background:var(--blue-soft);
  color:var(--blue);
  text-decoration:none;
}
.desktop-nav .market-mega .mega-link-list>a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:9px 10px;
  color:var(--text);
  text-decoration:none;
}
.desktop-nav .market-mega .mega-link-list>a:hover{
  background:#f0f6fa;
  color:var(--navy);
  text-decoration:none;
}
.desktop-nav .market-mega .mega-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  padding:8px 7px;
  text-align:center;
  text-decoration:none;
  white-space:normal;
}
.desktop-nav .market-mega .mega-action:hover{
  text-decoration:none;
  filter:brightness(.985);
}
.mega-title>div,.mega-link-list>a span{min-width:0}
.mega-title b,.mega-title em,.mega-link-list b,.mega-link-list small{word-break:keep-all;overflow-wrap:normal}

/* Mobile menu */
.mobile-menu{background:#fff;border-top:1px solid var(--line);box-shadow:0 22px 50px rgba(24,59,86,.16)}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding-top:18px}
.mobile-menu-head div{display:flex;flex-direction:column}
.mobile-menu-head b{font-size:18px}.mobile-menu-head span{color:var(--muted);font-size:12px}
.mobile-menu-head button{width:38px;height:38px;border:0;border-radius:11px;background:var(--surface-alt);display:grid;place-items:center}
.mobile-menu-grid{grid-template-columns:1fr 1fr;gap:9px;padding-top:14px;padding-bottom:13px}
.mobile-menu-grid>a{display:flex;align-items:center;gap:9px;padding:13px;background:#f8fbfd;border:1px solid var(--line-soft);border-radius:15px}
.mobile-menu-grid>a>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.mobile-menu-grid>a.personal>span{background:var(--blue-soft);color:var(--blue)}
.mobile-menu-grid>a.corporate>span{background:var(--navy-soft);color:var(--navy)}
.mobile-menu-grid>a.forwarding>span{background:var(--lavender-soft);color:var(--lavender)}
.mobile-menu-grid>a.taxi>span{background:var(--accent-soft);color:#ad7418}
.mobile-menu-grid>a>div{flex:1}.mobile-menu-grid b{font-size:14px}.mobile-menu-grid small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.mobile-menu-grid>a>.ui-icon{width:14px;height:14px;color:#a0afb9}
.mobile-menu-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding-bottom:13px}
.mobile-menu-actions a{display:grid;place-items:center;gap:5px;padding:10px 4px;border:1px solid var(--line-soft);border-radius:12px;font-size:11px;font-weight:750;color:var(--text)}
.mobile-menu-actions .ui-icon{font-size:18px;color:var(--blue)}
.mobile-register-wrap{padding-bottom:20px}

/* --------------------------------------------------------------------------
   Buttons, fields, shared cards
---------------------------------------------------------------------------- */
.button{
  border-radius:13px;
  min-height:46px;
  font-weight:850;
  letter-spacing:-.02em;
  box-shadow:none;
}
.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(135deg,var(--navy),#245f83);box-shadow:0 9px 20px rgba(24,59,86,.18)}
.button-primary:hover{background:linear-gradient(135deg,#214c6c,#2a6d95);box-shadow:0 13px 26px rgba(24,59,86,.23)}
.button-accent{background:linear-gradient(135deg,#ffd36b,var(--accent));color:#26394a;border-color:rgba(183,126,12,.13);box-shadow:0 10px 22px rgba(238,169,43,.22)}
.button-accent:hover{background:linear-gradient(135deg,#ffdc83,#f8c35b)}
.button-light{background:#fff;border-color:var(--line);box-shadow:var(--shadow-xs)}
.button-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25);backdrop-filter:blur(8px)}
.button-ghost:hover{background:rgba(255,255,255,.17)}
.button-secondary{background:var(--blue-soft);border-color:#cde7f6;color:#266d99}
.button-danger-outline{border-color:#f1c7cb;color:var(--danger);background:#fff}
.button-lg{min-height:55px;border-radius:15px;padding:14px 21px}
.button-small{min-height:36px;border-radius:10px}
.field{gap:7px}
.field>span,.field>legend{font-weight:800;color:#334b5d;font-size:13px}
.field em{color:var(--coral);font-style:normal;font-size:11px}
.field input,.field select,.field textarea,input,select,textarea{
  border-color:#d8e4eb;
  border-radius:13px;
  background:#fff;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{
  border-color:#72b5dd;
  box-shadow:0 0 0 4px rgba(47,143,208,.11);
  background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:#a0adb7}
.field-icon-input{position:relative}.field-icon-input>.ui-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#899aa6}.field-icon-input input{padding-left:42px!important;width:100%}
.input-unit{border-radius:13px;border-color:#d8e4eb;background:#fff}
.input-unit:focus-within{border-color:#72b5dd;box-shadow:0 0 0 4px rgba(47,143,208,.11)}
.notice-box{border-radius:15px;border-color:var(--line);background:#f7fafc}
.notice-box .ui-icon{margin-right:6px}
.notice-box.warning{background:var(--warning-soft);border-color:#f1dbad}
.notice-box.danger{background:var(--danger-soft);border-color:#efc6cb}
.form-card,.detail-card,.table-card,.member-section,.auth-card,.sticky-card{
  border-color:var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  background:rgba(255,255,255,.97);
}
.form-card:hover{box-shadow:var(--shadow-sm)}

/* --------------------------------------------------------------------------
   Hero and home
---------------------------------------------------------------------------- */
.hero-v2{
  position:relative;
  min-height:590px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 82% 18%,rgba(91,185,231,.3),transparent 27rem),
    radial-gradient(circle at 11% 83%,rgba(246,189,82,.16),transparent 24rem),
    linear-gradient(130deg,#102f48 0%,#184662 48%,#1f6686 100%);
}
.hero-v2::after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(180deg,transparent,rgba(9,37,56,.17));pointer-events:none}
.hero-deco{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.hero-deco-one{width:440px;height:440px;left:-190px;top:70px}.hero-deco-two{width:310px;height:310px;right:-95px;bottom:-130px}
.hero-v2 .hero-grid{position:relative;z-index:2;min-height:590px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:42px;padding-top:55px;padding-bottom:68px}
.hero-v2 .hero-copy{max-width:650px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:800;color:#eaf6fd}
.hero-eyebrow .ui-icon{color:#ffd56f}
.hero-v2 h1{font-size:clamp(42px,5vw,62px);line-height:1.14;letter-spacing:-.055em;margin:22px 0 22px;font-weight:900}
.hero-v2 h1 em{color:#ffd267;font-style:normal;position:relative}
.hero-v2 h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='8' viewBox='0 0 160 8'%3E%3Cpath d='M2 5c34-4 94-4 156 0' fill='none' stroke='%23ffd267' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-v2 .hero-copy>p{max-width:590px;color:#d7e8f2;font-size:18px;line-height:1.75;margin-bottom:28px}
.hero-v2 .hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-v2 .hero-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px;color:#d8e9f2;font-size:12px}
.hero-v2 .hero-trust span{display:flex;align-items:center;gap:6px}
.hero-v2 .hero-trust .ui-icon{color:#72d6b2}
.hero-visual{position:relative;min-height:475px;display:grid;place-items:center}
.hero-visual>img{width:min(100%,570px);filter:drop-shadow(0 30px 45px rgba(7,28,44,.18))}
.hero-float{position:absolute;display:grid;grid-template-columns:40px 1fr;column-gap:9px;padding:12px 14px;border-radius:17px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 15px 34px rgba(10,38,57,.21);backdrop-filter:blur(8px)}
.hero-float>.ui-icon{grid-row:1/3;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--blue-soft);color:var(--blue)}
.hero-float b{font-size:13px}.hero-float small{font-size:10px;color:var(--muted)}
.hero-float.float-one{left:1%;bottom:12%}.hero-float.float-two{right:-1%;top:14%}.hero-float.float-two>.ui-icon{background:var(--mint-soft);color:var(--mint-deep)}

.starter-wrap{position:relative;z-index:5;margin-top:-42px}
.trade-starter{padding:23px;border:1px solid rgba(211,227,237,.95);border-radius:28px;background:rgba(255,255,255,.98);box-shadow:0 22px 58px rgba(24,59,86,.14)}
.starter-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px;padding:0 4px}
.starter-heading h2{font-size:25px;margin:4px 0 0;letter-spacing:-.045em}.starter-heading>p{margin:0;color:var(--muted);font-size:12px}
.trade-start-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trade-start-card{min-height:93px;display:flex;align-items:center;gap:11px;padding:15px;border:1px solid var(--line-soft);border-radius:18px;background:#fbfdfe;transition:.18s ease}
.trade-start-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);background:#fff}
.trade-start-card>span{width:45px;height:45px;border-radius:14px;display:grid;place-items:center}
.trade-start-card.sell>span{background:var(--coral-soft);color:#c15f56}.trade-start-card.buy>span{background:var(--blue-soft);color:var(--blue)}.trade-start-card.lease>span{background:var(--mint-soft);color:var(--mint-deep)}.trade-start-card.rent>span{background:var(--lavender-soft);color:var(--lavender)}
.trade-start-card>div{flex:1}.trade-start-card b{display:block;font-size:14px}.trade-start-card small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.trade-start-card>.ui-icon{width:16px;color:#a1afb9}
.home-search-bar{display:grid;grid-template-columns:1fr 1fr 1.5fr auto;gap:9px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.home-search-bar label{display:flex;align-items:center;gap:7px;min-height:51px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.home-search-bar label>span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;white-space:nowrap}.home-search-bar select,.home-search-bar input{flex:1;min-width:0;border:0!important;padding:0!important;box-shadow:none!important;background:transparent;font-weight:700;font-size:13px}.home-search-bar button{min-width:124px}

.section-heading-v2{align-items:flex-end}
.section-heading-v2 h2{font-size:clamp(27px,3vw,37px);letter-spacing:-.055em;margin:4px 0 7px}
.section-heading-v2 p{margin:0;color:var(--muted);font-size:14px}
.section-more{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:850;color:var(--navy);box-shadow:var(--shadow-xs)}

.category-grid-v2{grid-template-columns:repeat(4,1fr);gap:14px}
.category-grid-v2 .category-tile{position:relative;overflow:hidden;display:block;min-height:330px;padding:21px;border-radius:25px;border:1px solid var(--line);box-shadow:var(--shadow-xs);background:#fff;transition:.22s ease}
.category-grid-v2 .category-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.category-grid-v2 .category-tile::before{content:"";position:absolute;inset:0 0 auto;height:128px;opacity:.9}
.category-grid-v2 .category-tile.personal-cargo::before{background:linear-gradient(135deg,#e4f4ff,#d7effd)}
.category-grid-v2 .category-tile.corporate-cargo::before{background:linear-gradient(135deg,#e8f0f6,#dbe8f0)}
.category-grid-v2 .category-tile.forwarding::before{background:linear-gradient(135deg,#f2edff,#e7ddff)}
.category-grid-v2 .category-tile.taxi::before{background:linear-gradient(135deg,#fff4dc,#ffe8b8)}
.category-spark{position:absolute;right:18px;top:17px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.68)}
.category-spark::before,.category-spark::after{content:"";position:absolute;background:currentColor;border-radius:999px;opacity:.35}.category-spark::before{width:14px;height:2px;left:12px;top:18px}.category-spark::after{width:2px;height:14px;left:18px;top:12px}
.category-icon{position:relative;width:54px;height:54px;border-radius:17px;background:rgba(255,255,255,.8);display:grid;place-items:center;color:var(--navy);box-shadow:0 8px 18px rgba(24,59,86,.08)}
.category-icon .ui-icon{width:27px;height:27px}
.category-plate{position:relative;margin:20px 0 21px;width:100%;height:82px;border:3px solid currentColor;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 5px rgba(255,255,255,.8),0 8px 19px rgba(24,59,86,.08)}
.category-plate i{position:absolute;left:13px;top:10px;font-size:10px;font-style:normal;font-weight:850;opacity:.68}.category-plate b{font-size:22px;letter-spacing:-.04em}.category-plate em{position:absolute;right:14px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
.personal-cargo .category-plate{color:#357da9}.corporate-cargo .category-plate{color:#36566d}.forwarding .category-plate{color:#735bb1}.taxi .category-plate{color:#a56e16}
.category-grid-v2 .category-tile>div{position:relative}.category-grid-v2 .category-tile>div>small{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--muted)}.category-grid-v2 .category-tile h3{font-size:22px;margin:3px 0 5px}.category-grid-v2 .category-tile p{min-height:42px;color:var(--muted);font-size:12px}.category-grid-v2 .category-tile>div>span{display:flex;align-items:center;gap:6px;color:var(--blue);font-size:12px;font-weight:850}

.stats-band-v2{background:transparent;padding:0}
.stats-band-v2 .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats-band-v2 .stats-grid>div{display:flex;align-items:center;gap:13px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-xs)}
.stats-band-v2 .stats-grid>div>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.stats-band-v2 .stats-grid>div:nth-child(2)>span{background:var(--mint-soft);color:var(--mint-deep)}.stats-band-v2 .stats-grid>div:nth-child(3)>span{background:var(--lavender-soft);color:var(--lavender)}.stats-band-v2 .stats-grid>div:nth-child(4)>span{background:var(--accent-soft);color:#ad7418}
.stats-band-v2 p{margin:0;display:flex;flex-direction:column}.stats-band-v2 strong{font-size:23px;line-height:1.1}.stats-band-v2 small{margin-top:4px;color:var(--muted);font-size:11px}

.recent-deals-section{padding-top:88px}
.home-deal-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.how-section-v2{background:linear-gradient(180deg,#f8fbfd,#eef6fa);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.steps-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.steps-v2::before{content:"";position:absolute;left:12%;right:12%;top:43px;border-top:2px dashed #cfdfe8}
.steps-v2 article{position:relative;z-index:1;text-align:center;padding:20px 17px 22px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-xs)}
.step-icon{width:72px;height:72px;margin:0 auto 12px;border-radius:23px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border:6px solid #fff;box-shadow:0 8px 18px rgba(24,59,86,.09)}
.steps-v2 article:nth-child(2) .step-icon{background:var(--mint-soft);color:var(--mint-deep)}.steps-v2 article:nth-child(3) .step-icon{background:var(--lavender-soft);color:var(--lavender)}.steps-v2 article:nth-child(4) .step-icon{background:var(--accent-soft);color:#ad7418}
.step-icon .ui-icon{width:30px;height:30px}.steps-v2 em{font-style:normal;font-size:10px;font-weight:900;color:#95a6b2;letter-spacing:.1em}.steps-v2 b{display:block;font-size:16px;margin:5px 0}.steps-v2 p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}
.safe-banner.safe-banner-v2{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:25px 28px;
  border:1px solid #d4e8df;
  border-radius:25px;
  background:linear-gradient(135deg,#effaf6,#fff);
  color:var(--ink);
  box-shadow:var(--shadow-sm)
}
.safe-banner.safe-banner-v2>.safe-visual{
  position:relative;
  width:78px;
  height:78px;
  border-radius:24px;
  background:var(--mint-soft);
  color:var(--mint-deep);
  display:grid;
  place-items:center;
  gap:0
}
.safe-banner.safe-banner-v2>div:not(.safe-visual){
  display:block;
  min-width:0
}
.safe-visual .ui-icon{width:36px;height:36px}.safe-visual i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent)}.safe-visual i:nth-child(2){right:3px;top:8px}.safe-visual i:nth-child(3){left:4px;bottom:10px;width:6px;height:6px}
.safe-banner-v2 .eyebrow{display:block;margin-bottom:3px;color:var(--mint-deep)}
.safe-banner-v2 h2{margin:4px 0 6px;font-size:22px;color:var(--ink)}
.safe-banner-v2 p{margin:0;color:var(--muted);font-size:13px;max-width:none}

/* --------------------------------------------------------------------------
   Page hero and listing
---------------------------------------------------------------------------- */
.page-hero{
  background:linear-gradient(135deg,#173d58,#246684);
  color:#fff;
  border-bottom:0;
}
.page-hero.compact{padding:55px 0}
.page-hero .eyebrow{color:#afdff5}
.page-hero h1{letter-spacing:-.05em}
.page-hero p{color:#d4e6ef}
.listing-hero-v2{position:relative;overflow:hidden;padding:61px 0}
.listing-hero-v2::before{content:"";position:absolute;right:7%;top:-72px;width:280px;height:280px;border-radius:50%;border:55px solid rgba(255,255,255,.045)}
.listing-hero-v2 .shell{position:relative;z-index:1}
.category-quick-tabs-v2{margin-top:-22px;position:relative;z-index:3;display:flex;gap:7px;padding:9px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}
.category-quick-tabs-v2 a{display:flex;align-items:center;gap:7px;min-height:45px;padding:0 15px;border-radius:12px;color:var(--text);font-weight:800}
.category-quick-tabs-v2 a:hover{
  background:#eef6fb;
  border-color:#bed8e8;
  color:var(--navy)
}
.category-quick-tabs-v2 a.active,
.category-quick-tabs-v2 a.active:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  box-shadow:0 8px 17px rgba(24,59,86,.18)
}
.category-quick-tabs-v2 .ui-icon{font-size:17px}
.listing-layout{grid-template-columns:278px 1fr;gap:24px;align-items:start}
.filter-panel{position:sticky;top:132px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-xs);padding:18px}
.filter-panel form{display:grid;gap:16px}
.filter-head{padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.filter-head h2{display:flex;align-items:center;gap:7px;font-size:17px}.filter-head a{color:var(--blue);font-size:11px;font-weight:800}
.filter-trade{margin:0;padding:0;border:0}.filter-trade legend{font-size:13px;font-weight:800;margin-bottom:7px}
.filter-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.filter-choice-grid label:first-child{grid-column:1/-1}.filter-choice-grid input{position:absolute;opacity:0}.filter-choice-grid span{display:grid;place-items:center;min-height:39px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:11px;font-weight:750}.filter-choice-grid input:checked+span{border-color:#79b6da;background:var(--blue-soft);color:#266d99;box-shadow:inset 0 0 0 1px #79b6da}
.field-grid.compact{gap:7px}.field-grid.compact .field>span{font-size:11px}
.filter-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}.filter-checks label{margin:0}.filter-checks input{position:absolute;opacity:0}.filter-checks span{min-height:42px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:10px;font-weight:750}.filter-checks input:checked+span{border-color:#73b89e;background:var(--mint-soft);color:var(--mint-deep)}
.filter-mobile-head{display:none}
.listing-main{min-width:0}
.listing-toolbar-v2{align-items:flex-start;margin-bottom:16px;padding:2px 2px 15px;border-bottom:1px solid var(--line)}
.listing-title-row{display:flex;align-items:center;gap:10px}.listing-title-row h2{font-size:22px;margin:0}.listing-title-row h2 strong{color:var(--blue)}
.listing-toolbar-v2 p{margin:5px 0 0;color:var(--muted);font-size:12px}
.sort-select select{min-width:138px;height:43px;border-radius:12px;background:#fff;font-size:12px;font-weight:750}
.filter-mobile-button{display:none}
.active-filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.active-filter-chips a{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:10px;font-weight:750;color:var(--text)}.active-filter-chips small{color:var(--muted)}.active-filter-chips .ui-icon{width:12px;height:12px}

/* Deal list card */
.deal-list{display:grid;gap:11px}
.deal-list-card{position:relative;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:var(--shadow-xs);overflow:hidden;transition:.2s ease}
.deal-list-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#6caed4}
.deal-list-card.category-corporate_cargo::before{background:#526f83}.deal-list-card.category-forwarding::before{background:#9278d7}.deal-list-card.category-taxi::before{background:#e3a936}
.deal-list-card:hover{transform:translateY(-3px);border-color:#bfd6e4;box-shadow:var(--shadow-sm)}
.deal-card-main{display:grid;grid-template-columns:116px 1fr minmax(185px,auto);gap:17px;align-items:center;padding:15px 17px 15px 20px}
.deal-media{width:116px;height:95px;border-radius:16px;overflow:hidden;background:#eef6fa;border:1px solid var(--line-soft)}
.deal-media img{width:100%;height:100%;object-fit:cover}
.deal-media.is-placeholder{display:grid;place-items:center;padding:10px;background:linear-gradient(135deg,#eff8fd,#fff7e8)}
.mini-plate-mark{position:relative;width:100%;height:59px;border:3px solid #497999;border-radius:11px;background:#fff;display:grid;place-items:center;color:#315b77;box-shadow:inset 0 0 0 3px #edf4f8}
.mini-plate-mark i{position:absolute;left:7px;top:5px;font-style:normal;font-size:7px;font-weight:900;opacity:.75}.mini-plate-mark b{font-size:17px}.mini-plate-mark em{position:absolute;right:7px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.deal-content{min-width:0}.deal-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.trade-chip,.category-chip,.plate-type-chip,.verified-chip{border-radius:999px;padding:5px 8px;font-size:9px;font-weight:850;line-height:1.1}
.trade-sell{background:var(--coral-soft);color:#b5524b}.trade-buy{background:var(--blue-soft);color:#266c98}.trade-lease{background:var(--mint-soft);color:var(--mint-deep)}.trade-rent{background:var(--lavender-soft);color:#7056b2}
.category-chip{background:#f2f6f8;color:#4a6172}.plate-type-chip{background:#fff;border:1px solid var(--line);color:#607585}.verified-chip{display:inline-flex;align-items:center;gap:3px;background:var(--mint-soft);color:var(--mint-deep)}
.deal-content h3{font-size:18px;line-height:1.35;margin:0 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deal-content h3:hover{color:var(--blue)}
.deal-location{display:flex;align-items:center;gap:4px;margin:0 0 9px;color:var(--muted);font-size:11px}.deal-location .ui-icon{color:#85a0b2}
.deal-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#7d8f9d;font-size:10px}.deal-meta span,.deal-meta time{display:flex;align-items:center;gap:3px}.deal-meta .ui-icon{width:12px;height:12px}
.deal-summary{min-width:185px;padding-left:17px;border-left:1px dashed var(--line);display:flex;flex-direction:column;align-items:flex-end}
.deal-state{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:850}.state-open{background:var(--mint-soft);color:var(--mint-deep)}.state-selected{background:var(--lavender-soft);color:#7257b6}.state-closed{background:#f1f4f6;color:#70808b}.state-completed{background:var(--blue-soft);color:var(--blue)}.state-cancelled{background:var(--danger-soft);color:var(--danger)}
.deal-summary>small{margin-top:11px;color:var(--muted);font-size:9px}.deal-summary>strong{font-size:20px;margin-top:1px;letter-spacing:-.04em;text-align:right}.deal-detail-link{display:flex;align-items:center;gap:4px;margin-top:9px;color:var(--blue);font-size:10px;font-weight:850}
.home-deal-list .deal-card-main{grid-template-columns:95px 1fr}.home-deal-list .deal-summary{grid-column:2;border:0;border-top:1px dashed var(--line);padding:10px 0 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.home-deal-list .deal-summary>small{display:none}.home-deal-list .deal-summary>strong{font-size:17px;margin:0;text-align:right}.home-deal-list .deal-detail-link{margin:0}

.pagination{margin-top:25px}.pagination a,.pagination strong{width:39px;height:39px;border-radius:11px;border-color:var(--line);background:#fff}.pagination strong{background:var(--navy);color:#fff}
.empty-state{padding:55px 24px;border:1px dashed #cbdce6;border-radius:24px;background:rgba(255,255,255,.7)}
.empty-illustration{width:180px;margin:0 auto 5px}.empty-state h2{font-size:20px}.empty-state p{color:var(--muted);font-size:13px}

/* --------------------------------------------------------------------------
   Registration forms
---------------------------------------------------------------------------- */
.register-hero{background:linear-gradient(135deg,#173f5b,#2b738f)}
.register-hero .shell{display:flex;align-items:center;justify-content:space-between;gap:20px}
.register-free-badge,.edit-state-badge{display:flex;align-items:center;gap:10px;padding:12px 17px;border-radius:17px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff}.register-free-badge>.ui-icon{width:30px;height:30px;color:#7de0ba}.register-free-badge span{display:flex;flex-direction:column;font-size:10px}.register-free-badge strong{font-size:21px;color:#ffd46f}.edit-state-badge{font-weight:800}
.form-layout-v2{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
.deal-register-form{display:grid;gap:15px}
.register-progress{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 17px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-xs);overflow-x:auto}
.register-progress span{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#8a9aa6;font-size:10px;font-weight:750}.register-progress span b{width:24px;height:24px;border-radius:8px;background:#edf2f5;display:grid;place-items:center;color:#728590}.register-progress span.active{color:var(--navy)}.register-progress span.active b{background:var(--navy);color:#fff}.register-progress i{width:24px;border-top:1px dashed #cbd8e0}
.register-step{margin:0;overflow:hidden}
.register-step .form-card-head{background:linear-gradient(180deg,#fbfdfe,#f6fafc);border-bottom:1px solid var(--line-soft);padding:20px 23px}
.register-step .form-card-head>span{width:38px;height:38px;border-radius:13px;background:var(--navy);font-size:14px;box-shadow:0 8px 17px rgba(24,59,86,.17)}
.register-step .form-card-head h2{font-size:18px}.register-step .form-card-head p{font-size:11px;color:var(--muted)}
.register-step .form-card-body{padding:23px}
.choice-grid{gap:9px}.choice-card>span{border-radius:16px;min-height:86px;border-color:var(--line);background:#fff}.choice-card input:checked+span{border-color:#66a8d0;background:linear-gradient(145deg,#edf8fe,#fff);box-shadow:0 0 0 2px rgba(47,143,208,.12),0 10px 22px rgba(24,59,86,.08)}
.choice-grid.categories .choice-card>span{position:relative;padding-left:17px}.choice-grid.categories .choice-card>span::after{content:"";position:absolute;right:13px;top:13px;width:18px;height:18px;border:2px solid #d6e2e8;border-radius:50%}.choice-grid.categories input:checked+span::after{border:5px solid var(--blue)}
.choice-card b{font-size:14px}.choice-card small{font-size:10px;color:var(--muted);line-height:1.4}
.category-guide{border-radius:14px;background:var(--blue-soft);border-color:#cce6f5;color:#315c77}.category-guide b{font-size:12px}.category-guide span{font-size:10px}
.inline-radios label span{border-radius:11px}.inline-radios input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.char-count{font-size:10px;color:var(--muted)}
.upload-zone{min-height:170px;border:2px dashed #bfd6e4;border-radius:19px;background:linear-gradient(180deg,#fafdff,#f4f9fc)}
.upload-zone:hover{border-color:#6facd0;background:#f0f9fe}.upload-icon{width:48px;height:48px;border-radius:15px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}.upload-icon .ui-icon{width:24px;height:24px}
.image-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:12px}.image-preview-item{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#eef3f6;border:1px solid var(--line)}.image-preview-item img{width:100%;height:100%;object-fit:cover}.image-preview-item span{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:7px;background:rgba(17,48,69,.82);color:#fff;font-size:9px;font-weight:800}
.existing-images{grid-template-columns:repeat(5,1fr);gap:9px}.existing-images label{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.form-submit-bar{position:sticky;bottom:13px;z-index:10;padding:13px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 15px 40px rgba(24,59,86,.15);backdrop-filter:blur(14px)}
.form-submit-bar .button-primary{min-width:190px}
.register-help-card{padding:20px;overflow:hidden}
.help-mascot{display:block;width:150px;margin:-16px auto -4px}.register-help-card h2{text-align:center;font-size:17px}.register-help-card ul{display:grid;gap:10px;padding:0;margin:17px 0;list-style:none}.register-help-card li{display:flex;align-items:flex-start;gap:7px;color:var(--text);font-size:11px;line-height:1.5}.register-help-card li .ui-icon{margin-top:2px;color:var(--blue)}
.free-label{display:flex;flex-direction:column;align-items:center;padding:14px;border-radius:15px;background:var(--accent-soft);color:#74520f}.free-label span{font-size:10px}.free-label strong{font-size:19px}.free-label small{font-size:9px;opacity:.75}

/* --------------------------------------------------------------------------
   Detail page
---------------------------------------------------------------------------- */
.breadcrumb{padding-top:24px;padding-bottom:16px;color:var(--muted);font-size:11px}.breadcrumb a:hover{color:var(--blue)}
.detail-layout{gap:24px;padding-bottom:85px}.detail-main{display:grid;gap:15px}.detail-gallery,.detail-card{border-radius:22px}.main-image{border-radius:22px;background:#eaf2f6}.main-image.placeholder{min-height:330px;background:linear-gradient(135deg,#edf8fe,#fff6e6)}
.post-content-card{padding:26px}.detail-title-meta{align-items:flex-start}.detail-title-meta>div{display:flex;flex-wrap:wrap;gap:5px}.status-badge{border-radius:999px;font-weight:850}.status-badge.is-open{background:var(--mint-soft);color:var(--mint-deep)}.status-badge.is-closed{background:#eef2f4;color:#6d7e89}
.post-content-card h1{font-size:30px;line-height:1.35;letter-spacing:-.05em;margin:17px 0}
.seller-line{padding:14px;border-radius:17px;background:#f7fafc;border:1px solid var(--line-soft)}
.seller-line em{border-radius:999px;background:var(--mint-soft);color:var(--mint-deep);padding:3px 6px;font-style:normal;font-size:9px}
.detail-info-grid{gap:8px}.detail-info-grid>div{border-radius:16px;background:#f8fbfd;border:1px solid var(--line-soft)}.detail-info-grid span{color:var(--muted);font-size:10px}.detail-info-grid strong{font-size:14px}
.detail-content{font-size:15px;line-height:1.85;color:#334c5e;padding:24px 4px}
.extra-detail{border-radius:17px;background:#f8fbfd;border-color:var(--line-soft)}.extra-detail>div{padding:12px 14px}.extra-detail dt{color:var(--muted);font-size:11px}.extra-detail dd{font-weight:800}
.detail-bottom-stats{color:var(--muted);font-size:10px}
.detail-side{width:310px}.deal-card{padding:22px;border-radius:23px}.deal-card>h2{font-size:27px;margin:15px 0 6px}.deal-card>p{color:var(--muted);font-size:11px}.fee-note{border-radius:14px;background:var(--warning-soft);border:1px solid #f0dcad;padding:13px}.fee-note b{font-size:11px}.fee-note p{font-size:10px;color:#755715}
.quotes-owner{padding:23px}.quote-row{border-radius:17px;border-color:var(--line);background:#fff}.quote-row.selected{border-color:#b9aae4;background:var(--lavender-soft)}
.contact-card{border-radius:22px}.contact-card.active{background:var(--mint-soft);border-color:#bde2d3}.contact-icon{background:#fff;border-radius:17px}

/* --------------------------------------------------------------------------
   Auth, member, quote, points and secondary pages
---------------------------------------------------------------------------- */
.auth-page{background:linear-gradient(135deg,#edf7fc,#fff7e9)}
.auth-shell-v2{width:min(calc(100% - 40px),1050px);min-height:650px;margin:55px auto 85px;display:grid;grid-template-columns:.92fr 1.08fr;border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden}
.auth-card-v2{border:0;border-radius:0;box-shadow:none;padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.auth-brand-mini{display:flex;align-items:center;gap:8px;margin-bottom:23px;color:var(--navy);font-weight:850;font-size:13px}.auth-brand-mini img{width:34px;height:34px}
.auth-card-v2 h1{font-size:36px;line-height:1.25;letter-spacing:-.055em;margin-bottom:13px}.auth-card-v2>p{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:23px}
.social-buttons{display:grid;gap:9px}.social-button{min-height:58px;border-radius:15px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;padding:0 15px;box-shadow:none}.social-button>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}.social-button .ui-icon{width:17px}.social-button.naver>span{background:rgba(255,255,255,.18)}.social-button.kakao>span{background:rgba(0,0,0,.05)}
.auth-security-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.auth-security-list span{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;background:#f4f8fa;color:var(--text);font-size:9px;font-weight:750}.auth-security-list .ui-icon{color:var(--mint-deep)}
.auth-terms{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:10px;color:var(--muted)}
.auth-side-v2{position:relative;overflow:hidden;padding:35px 38px;color:#fff;background:linear-gradient(145deg,#173d58,#246d8c);display:flex;flex-direction:column;justify-content:flex-end}.auth-side-v2::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 8%,rgba(255,255,255,.12),transparent 18rem)}
.auth-visual{position:absolute;left:30px;right:30px;top:23px}.auth-visual img{width:100%}.auth-float{position:absolute;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.93);color:var(--ink);font-size:9px;font-weight:850;box-shadow:var(--shadow-sm)}.auth-float.one{left:5px;bottom:18px}.auth-float.two{right:1px;top:40px}.auth-float .ui-icon{color:var(--mint-deep);margin-right:4px}
.auth-side-v2>span,.auth-side-v2>h2,.auth-side-v2>p{position:relative;z-index:1}.auth-side-v2 h2{font-size:30px;line-height:1.25;margin:5px 0 9px}.auth-side-v2 p{color:#d9e9f1;font-size:12px}

.member-layout{gap:22px}.member-nav{border-radius:21px;border-color:var(--line);box-shadow:var(--shadow-xs);background:#fff;padding:10px}.member-nav a{border-radius:11px}.member-nav a.active{background:var(--navy);color:#fff}
.member-hero{background:linear-gradient(135deg,#183e59,#2b708c)}
.wallet-card{border-radius:23px;background:linear-gradient(135deg,#183e59,#286d8a);box-shadow:var(--shadow)}
.dashboard-grid{gap:10px}.dashboard-grid a{border-radius:18px;border-color:var(--line);box-shadow:var(--shadow-xs)}
.quick-actions{gap:10px}.quick-actions a{border-radius:18px;border-color:var(--line);box-shadow:var(--shadow-xs)}.quick-actions a>span{border-radius:13px;background:var(--blue-soft);color:var(--blue)}
.table-card{overflow:hidden}.responsive-table th{background:#f5f9fb;color:#607485}.responsive-table tr:hover td{background:#fbfdfe}
.subnav{padding:6px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-xs)}.subnav a{border-radius:10px}.subnav a.active{background:var(--navy);color:#fff}
.quote-create-layout{gap:20px}.quote-target-card{border-radius:22px;border-color:var(--line);box-shadow:var(--shadow-xs)}.fee-confirm{border-radius:18px;background:#f8fbfd;border-color:var(--line)}
.contact-reveal{border-radius:25px;background:linear-gradient(145deg,#edf9f5,#fff);border-color:#b9e0d1;box-shadow:var(--shadow-sm)}
.point-balance-card{border-radius:25px;background:linear-gradient(135deg,#183e59,#286c89);box-shadow:var(--shadow)}
.transaction-list>div{border-radius:14px}.tx-icon{border-radius:11px}
.market-summary-grid>div,.market-stat-card{border-radius:20px;border-color:var(--line);box-shadow:var(--shadow-xs)}
.market-filter{border-radius:20px;border-color:var(--line);box-shadow:var(--shadow-xs);background:#fff}
.notice-list article,.inquiry-list article,.review-card{border-radius:18px;border-color:var(--line);box-shadow:var(--shadow-xs);background:#fff}
.page-content,.terms-content{border-radius:22px;border-color:var(--line);box-shadow:var(--shadow-xs)}
.verification-result{border-radius:24px;box-shadow:var(--shadow-sm)}

/* flash and states */
.flash-stack{top:126px}.flash{border-radius:15px}.flash>span{display:flex;align-items:center;gap:7px}.flash-success{border-color:#bce2d3;background:#f0fbf7}.flash-warning{border-color:#edd9ac;background:#fff8e9}.flash-error{border-color:#efc8cc;background:#fff4f5}
.is-loading{position:relative;pointer-events:none;opacity:.78}.is-loading::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-left:7px}.is-error{color:var(--danger)!important}.is-success{color:var(--success)!important}@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.site-footer{background:#102f48;color:#d9e8f1;margin-top:40px}
.footer-ribbon{border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.footer-ribbon .shell{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-ribbon .shell>div{display:flex;align-items:center;gap:12px}.footer-ribbon-icon{width:46px;height:46px;border-radius:15px;background:rgba(255,211,103,.13);color:#ffd36b;display:grid;place-items:center}.footer-ribbon b{display:block;color:#fff;font-size:16px}.footer-ribbon p{margin:2px 0 0;color:#a9c0ce;font-size:11px}.footer-ribbon a{display:flex;align-items:center;gap:6px;padding:11px 14px;border-radius:12px;background:#ffd36b;color:#23394a;font-weight:850;font-size:12px}
.footer-grid{grid-template-columns:1.35fr .75fr .75fr 1fr;padding-top:55px;padding-bottom:38px}.footer-grid h2{font-size:12px;color:#fff}.footer-grid a{color:#b8ccd8;font-size:11px}.footer-grid a:hover{color:#fff}.footer-brand-block>p{max-width:360px;color:#a9c0ce;font-size:11px}.footer-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.footer-badges span{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.06);font-size:9px}.footer-caution{margin-top:12px;padding:10px;border-radius:11px;background:rgba(255,255,255,.045);color:#9fb5c2;font-size:9px;line-height:1.55}
.footer-business{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  padding-top:26px;
  padding-bottom:28px;
  border-top:1px solid rgba(255,255,255,.08)
}
.footer-business-heading{display:flex;flex-direction:column;gap:3px}
.footer-business-heading span{font-size:9px;font-weight:900;letter-spacing:.14em;color:#ffd36b}
.footer-business-heading b{font-size:14px;color:#fff}
.footer-business-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 26px;min-width:0}
.footer-business-list>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.footer-business-list em{font-style:normal;font-size:9px;color:#7894a5}
.footer-business-list strong,.footer-business-list a{font-size:10px;line-height:1.55;color:#c6d8e3;font-weight:700;word-break:keep-all}
.footer-business-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-business-address{grid-column:2/4}
.footer-bottom{border-top-color:rgba(255,255,255,.08);color:#7894a5;font-size:9px}

/* Mobile bottom nav */
.mobile-bottom-nav{background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -9px 28px rgba(24,59,86,.1);backdrop-filter:blur(16px)}
.mobile-bottom-nav a{color:#8495a1}.mobile-bottom-nav a.active{color:var(--navy)}.mobile-bottom-nav a>.ui-icon{width:21px;height:21px}.mobile-bottom-nav b{font-size:9px;margin-top:2px}.mobile-bottom-nav .mobile-write{position:relative}.mobile-bottom-nav .mobile-write>span{width:48px;height:48px;margin-top:-26px;border-radius:17px;background:linear-gradient(135deg,#ffd36b,#f3b844);color:#273a49;display:grid;place-items:center;border:4px solid #fff;box-shadow:0 9px 20px rgba(223,155,26,.27)}.mobile-bottom-nav .mobile-write>span .ui-icon{width:22px;height:22px;stroke-width:2.5}

/* --------------------------------------------------------------------------
   Responsive
---------------------------------------------------------------------------- */
@media (max-width:1100px){
  .desktop-nav{gap:1px}.desktop-nav>a,.market-menu-trigger{padding:0 10px;font-size:13px}.header-main{gap:24px}.header-register small{display:none}.header-register{padding-right:11px}
  .footer-business-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-business-address{grid-column:1/-1}
  .market-mega-grid{grid-template-columns:1fr 1fr}.market-mega{max-height:75vh;overflow:auto}
  .hero-v2 .hero-grid{grid-template-columns:1.06fr .94fr}.hero-v2 h1{font-size:48px}
  .category-grid-v2{grid-template-columns:1fr 1fr}.category-grid-v2 .category-tile{min-height:300px}
  .home-deal-list{grid-template-columns:1fr}
}
@media (max-width:900px){
  .top-benefits span:nth-child(2){display:none}
  .desktop-nav,.header-register,.header-actions>.text-button,.point-pill{display:none}.menu-toggle{display:grid;place-items:center}.header-main{height:70px}.brand{width:103px}
  .hero-v2{min-height:auto}.hero-v2 .hero-grid{min-height:auto;grid-template-columns:1fr;padding-top:70px;padding-bottom:75px}.hero-visual{min-height:390px;max-width:600px;margin:auto;width:100%}.hero-v2 .hero-copy{text-align:center;margin:auto}.hero-v2 .hero-actions,.hero-v2 .hero-trust{justify-content:center}
  .starter-wrap{margin-top:-35px}.trade-start-grid{grid-template-columns:1fr 1fr}.home-search-bar{grid-template-columns:1fr 1fr}.home-search-keyword{grid-column:1/-1}.home-search-bar button{grid-column:1/-1}
  .stats-band-v2 .stats-grid{grid-template-columns:1fr 1fr}.steps-v2{grid-template-columns:1fr 1fr}.steps-v2::before{display:none}
  .listing-layout{display:block}.filter-panel{position:fixed;z-index:260;left:0;top:0;bottom:0;width:min(88vw,360px);border-radius:0 24px 24px 0;transform:translateX(-105%);transition:transform .22s ease;overflow:auto;padding:18px}.filter-panel.is-open{transform:translateX(0)}.filter-mobile-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}.filter-mobile-head div{display:flex;flex-direction:column}.filter-mobile-head span{font-size:10px;color:var(--muted)}.filter-mobile-head button{width:38px;height:38px;border:0;border-radius:11px;background:#f2f6f8}.filter-scrim{position:fixed;z-index:250;inset:0;border:0;background:rgba(9,33,49,.48);backdrop-filter:blur(3px)}.filter-mobile-button{display:inline-flex;align-items:center;gap:5px;min-height:39px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 11px;font-size:11px;font-weight:800}.filter-mobile-button em{width:18px;height:18px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-size:9px}.listing-toolbar-v2{align-items:center}
  body.filter-open{overflow:hidden}
  .form-layout-v2{grid-template-columns:1fr}.form-help{order:-1}.register-help-card{display:grid;grid-template-columns:105px 1fr;align-items:center;column-gap:15px}.help-mascot{grid-row:1/4;width:105px;margin:0}.register-help-card h2{text-align:left}.register-help-card ul{margin:7px 0}.free-label{grid-column:1/-1}
  .detail-layout{grid-template-columns:1fr}.detail-side{width:auto}.detail-side .sticky-card{position:static}.auth-shell-v2{grid-template-columns:1fr;max-width:600px}.auth-side-v2{min-height:470px;order:-1}.auth-card-v2{padding:40px}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}
}
@media (max-width:680px){
  .footer-business{grid-template-columns:1fr;gap:16px;padding-top:22px;padding-bottom:24px}
  .footer-business-list{grid-template-columns:1fr;gap:12px}
  .footer-business-address{grid-column:auto}

  html{scroll-padding-top:80px}.shell{width:min(calc(100% - 28px),var(--shell))}.section{padding-top:58px;padding-bottom:58px}.top-strip{display:none}.header-main{height:66px}.site-header{top:0}.flash-stack{top:76px}
  .hero-v2 .hero-grid{padding-top:52px;padding-bottom:62px}.hero-v2 h1{font-size:36px;line-height:1.2}.hero-v2 .hero-copy>p{font-size:14px;line-height:1.7}.hero-v2 .hero-actions{display:grid}.hero-v2 .hero-actions .button{width:100%}.hero-v2 .hero-trust{gap:9px 14px}.hero-v2 .hero-trust span{font-size:10px}.hero-visual{min-height:315px}.hero-float{transform:scale(.82)}.hero-float.float-one{left:-5%;bottom:2%}.hero-float.float-two{right:-5%;top:6%}
  .trade-starter{padding:16px;border-radius:22px}.starter-heading{display:block}.starter-heading>p{margin-top:4px}.trade-start-grid{gap:7px}.trade-start-card{min-height:104px;display:grid;grid-template-columns:40px 1fr;padding:12px}.trade-start-card>span{width:40px;height:40px}.trade-start-card>.ui-icon{display:none}.trade-start-card b{font-size:12px}.home-search-bar{grid-template-columns:1fr}.home-search-keyword,.home-search-bar button{grid-column:auto}
  .section-heading-v2{align-items:flex-start}.section-heading-v2 h2{font-size:27px}.section-heading-v2 p{font-size:12px}.section-more{font-size:10px;padding:8px 10px}
  .category-grid-v2{grid-template-columns:1fr;gap:10px}.category-grid-v2 .category-tile{min-height:auto;display:grid;grid-template-columns:66px 105px 1fr;align-items:center;gap:12px;padding:15px;border-radius:20px}.category-grid-v2 .category-tile::before{inset:0 auto 0 0;width:78px;height:auto}.category-icon{width:48px;height:48px;margin-left:2px}.category-plate{height:58px;margin:0;border-radius:11px}.category-plate b{font-size:14px}.category-plate i{font-size:7px;left:7px;top:5px}.category-plate em{right:7px;width:6px;height:6px}.category-grid-v2 .category-tile>div>small{font-size:7px}.category-grid-v2 .category-tile h3{font-size:17px;margin:1px 0 2px}.category-grid-v2 .category-tile p{min-height:auto;margin:0 0 5px;font-size:10px}.category-spark{display:none}
  .stats-band-v2 .stats-grid{gap:7px}.stats-band-v2 .stats-grid>div{padding:13px;gap:8px}.stats-band-v2 .stats-grid>div>span{width:36px;height:36px;border-radius:11px}.stats-band-v2 strong{font-size:17px}.stats-band-v2 small{font-size:9px}
  .steps-v2{grid-template-columns:1fr;gap:9px}.steps-v2 article{display:grid;grid-template-columns:60px 1fr;text-align:left;column-gap:12px;padding:14px}.step-icon{grid-row:1/4;width:60px;height:60px;margin:0;border-radius:18px}.steps-v2 em{align-self:end}.steps-v2 b{margin:0}.safe-banner-v2{grid-template-columns:58px 1fr;padding:18px;gap:12px}.safe-visual{width:58px;height:58px;border-radius:18px}.safe-banner-v2 .button{grid-column:1/-1;width:100%}.safe-banner-v2 h2{font-size:17px}.safe-banner-v2 p{font-size:11px}
  .page-hero.compact{padding:38px 0}.page-hero h1{font-size:27px}.listing-hero-v2 .shell,.register-hero .shell{align-items:flex-start}.listing-hero-v2 .button{min-height:42px;padding:9px 11px;font-size:10px}.category-quick-tabs-v2{overflow-x:auto;justify-content:flex-start;padding:7px;margin-top:-16px}.category-quick-tabs-v2 a{flex:0 0 auto;min-height:39px;padding:0 11px;font-size:10px}
  .listing-toolbar-v2{display:block}.sort-select{display:block;margin-top:10px}.sort-select select{width:100%}.active-filter-chips{max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.active-filter-chips a{flex:0 0 auto}
  .deal-card-main{grid-template-columns:72px 1fr;gap:11px;padding:13px}.deal-media{width:72px;height:72px;border-radius:13px}.mini-plate-mark{height:46px;border-width:2px}.mini-plate-mark b{font-size:13px}.deal-content h3{font-size:15px}.deal-badges{gap:3px}.trade-chip,.category-chip,.plate-type-chip,.verified-chip{font-size:8px;padding:4px 6px}.deal-location{margin-bottom:6px}.deal-meta{gap:7px}.deal-meta span:nth-child(3){display:none}.deal-summary{grid-column:1/-1;min-width:0;border-left:0;border-top:1px dashed var(--line);padding:10px 0 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px}.deal-summary>small{display:none}.deal-summary>strong{font-size:16px;margin:0;text-align:right}.deal-detail-link{margin:0;font-size:9px}.home-deal-list .deal-card-main{grid-template-columns:72px 1fr}.home-deal-list .deal-summary{grid-column:1/-1}
  .register-free-badge{padding:9px 11px}.register-free-badge>.ui-icon{width:23px;height:23px}.register-progress{justify-content:flex-start;padding:11px}.register-progress span{font-size:9px}.register-progress span b{width:21px;height:21px}.register-progress i{width:12px}.register-step .form-card-head{padding:16px}.register-step .form-card-body{padding:16px}.choice-grid.categories,.choice-grid.trades{grid-template-columns:1fr 1fr}.choice-card>span{min-height:76px;padding:12px}.image-preview,.existing-images{grid-template-columns:repeat(3,1fr)}.form-submit-bar{bottom:76px}.form-submit-bar .button-primary{min-width:0;flex:1}.form-help{display:none}
  .detail-layout{padding-top:0}.post-content-card{padding:18px}.post-content-card h1{font-size:23px}.detail-info-grid{grid-template-columns:1fr 1fr}.detail-content{padding:18px 2px;font-size:14px}.detail-side{padding-bottom:20px}.detail-side .deal-card{position:fixed;z-index:90;left:0;right:0;bottom:64px;border-radius:18px 18px 0 0;padding:11px 14px;display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;box-shadow:0 -13px 36px rgba(24,59,86,.16)}.detail-side .deal-card>.status-badge,.detail-side .deal-card>p,.detail-side .deal-card>.fee-note{display:none}.detail-side .deal-card>h2{font-size:17px;margin:0}.detail-side .owner-actions,.detail-side .deal-card>form,.detail-side .deal-card>a{grid-column:2}.detail-side .owner-actions{display:flex;gap:5px}.detail-side .owner-actions form,.detail-side .owner-actions a{width:auto}.detail-side .button{min-height:42px;font-size:10px;padding:8px 11px}.post-content-card{margin-bottom:82px}
  .auth-shell-v2{width:calc(100% - 24px);margin:22px auto 75px;border-radius:23px}.auth-side-v2{min-height:360px;padding:25px}.auth-visual{left:14px;right:14px;top:0}.auth-side-v2 h2{font-size:24px}.auth-card-v2{padding:29px 21px}.auth-card-v2 h1{font-size:28px}.social-button{min-height:54px}
  .member-layout{display:block}.member-nav{display:flex;overflow-x:auto;position:static;margin-bottom:13px}.member-nav a{flex:0 0 auto}.dashboard-grid{grid-template-columns:1fr 1fr}.quick-actions{grid-template-columns:1fr}.responsive-table table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table thead{display:none}.responsive-table tr{padding:13px;border-bottom:1px solid var(--line)}.responsive-table td{padding:3px 0;border:0}
  .footer-ribbon .shell{display:block;padding-top:18px;padding-bottom:18px}.footer-ribbon a{margin-top:12px;justify-content:center}.footer-grid{grid-template-columns:1fr 1fr;gap:25px;padding-top:38px}.footer-brand-block{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{display:block;text-align:center}.footer-bottom span{display:block;margin:3px}
}
@media (max-width:420px){
  .trade-start-grid{grid-template-columns:1fr}.trade-start-card{min-height:72px;display:flex}.trade-start-card>.ui-icon{display:block}
  .stats-band-v2 .stats-grid{grid-template-columns:1fr}.category-grid-v2 .category-tile{grid-template-columns:56px 92px 1fr;gap:9px}.category-icon{width:42px;height:42px}.category-plate{height:52px}.category-grid-v2 .category-tile h3{font-size:15px}
  .choice-grid.categories,.choice-grid.trades{grid-template-columns:1fr}.detail-info-grid{grid-template-columns:1fr}.mobile-menu-grid{grid-template-columns:1fr}.mobile-menu-actions{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Phase 6 hotfix: PC 메가메뉴 hover 이동 안정화
   ========================================================================== */
@media (min-width: 1025px) {
  .market-mega {
    z-index: 360;
  }

  /* 트리거와 메뉴 사이의 미세한 빈 공간도 hover 영역으로 연결합니다. */
  .market-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    height: 30px;
    background: transparent;
  }

  .desktop-market-menu.is-open .market-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

/* ==========================================================================
   Phase 8 hotfix: OTP 성공·오류 상태
   ========================================================================== */
.otp-message.is-error {
  color: var(--danger) !important;
  font-weight: 700;
}

.otp-message.is-success {
  color: var(--success) !important;
  font-weight: 700;
}

/* ==========================================================================
   Phase 9: 거래 등록 선택 상태·조건 폼·사진 누적 선택
   ========================================================================== */
.deal-register-form .choice-card > span {
  position: relative;
  border: 2px solid #d7e4ec;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.deal-register-form .choice-card:hover > span {
  transform: translateY(-2px);
  border-color: #8fbfdc;
  box-shadow: 0 12px 26px rgba(24, 59, 86, .10);
}

.deal-register-form .choice-card input:checked + span {
  transform: translateY(-3px);
  border-color: #237fb7;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 202, 83, .28), transparent 24%),
    linear-gradient(145deg, #dff3ff 0%, #f7fcff 62%, #fff8e7 100%);
  box-shadow:
    0 0 0 4px rgba(47, 143, 208, .16),
    0 18px 34px rgba(26, 93, 134, .18);
}

.deal-register-form .choice-card input:checked + span::before {
  content: "✓";
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #237fb7;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(35, 127, 183, .28);
}

.deal-register-form .choice-grid.categories .choice-card input:checked + span::before {
  bottom: 11px;
}

.deal-register-form .choice-grid.categories .choice-card > span::after {
  width: 20px;
  height: 20px;
  border-width: 2px;
  background: #fff;
}

.deal-register-form .choice-grid.categories input:checked + span::after {
  border: 6px solid #237fb7;
  box-shadow: 0 0 0 3px rgba(35, 127, 183, .12);
}

.choice-emoji {
  display: block;
  margin-bottom: 6px;
  font-size: 23px;
  line-height: 1;
  font-style: normal;
  filter: drop-shadow(0 4px 7px rgba(24, 59, 86, .12));
}

.price-mode-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.price-mode-picker label {
  cursor: pointer;
}

.price-mode-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.price-mode-picker label > span {
  min-height: 94px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 15px 17px;
  border: 2px solid #d9e5ec;
  border-radius: 17px;
  background: #fff;
  transition: .18s ease;
}

.price-mode-picker label > span > i {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #edf7fc;
  font-size: 21px;
  font-style: normal;
}

.price-mode-picker label > span > b {
  align-self: end;
  font-size: 14px;
}

.price-mode-picker label > span > small {
  align-self: start;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.price-mode-picker input:checked + span {
  transform: translateY(-2px);
  border-color: #237fb7;
  background: linear-gradient(145deg, #e5f5ff, #fff9ea);
  box-shadow:
    0 0 0 4px rgba(47, 143, 208, .13),
    0 14px 28px rgba(24, 59, 86, .13);
}

.price-mode-picker input:checked + span > i {
  background: #237fb7;
  color: #fff;
  box-shadow: 0 8px 16px rgba(35, 127, 183, .24);
}

.price-condition-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #cce2ef;
  border-radius: 19px;
  background: linear-gradient(180deg, #f8fcff, #f1f8fc);
}

.price-condition-panel[hidden],
.negotiable-state[hidden] {
  display: none !important;
}

.condition-panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}

.condition-panel-head > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #d8e8f1;
  font-size: 20px;
}

.condition-panel-head b,
.condition-panel-head small {
  display: block;
}

.condition-panel-head b {
  font-size: 14px;
}

.condition-panel-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.rental-condition-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.negotiable-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 17px 18px;
  border: 1px solid #f0d39a;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8e8, #fffdf8);
  color: #634a19;
}

.negotiable-state > span {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  font-size: 20px;
}

.negotiable-state b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.negotiable-state p {
  margin: 0;
  color: #7a653b;
  font-size: 10px;
  line-height: 1.6;
}

.upload-zone.is-dragover {
  border-color: #237fb7;
  background: linear-gradient(180deg, #e8f7ff, #f7fcff);
  box-shadow: 0 0 0 5px rgba(35, 127, 183, .12);
}

.image-preview-item,
.existing-image-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #eef3f6;
}

.existing-image-item img,
.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-order-badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(17, 48, 69, .86);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  backdrop-filter: blur(5px);
}

.image-preview-remove,
.existing-image-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  min-width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(193, 69, 65, .94);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(89, 31, 29, .24);
  transition: transform .16s ease, background .16s ease;
}

.image-preview-remove:hover,
.existing-image-remove:hover {
  transform: scale(1.08);
  background: #aa302c;
}

.existing-image-remove input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.existing-image-remove em {
  position: absolute;
  right: 34px;
  display: none;
  width: max-content;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(17, 48, 69, .90);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  line-height: 1.2;
}

.existing-image-remove:hover em {
  display: block;
}

.existing-image-item.is-deleted img {
  filter: grayscale(1);
  opacity: .28;
}

.existing-image-item.is-deleted::after {
  content: "삭제 예정";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .35);
  color: #a63732;
  font-size: 12px;
  font-weight: 900;
}

.existing-image-item.is-deleted .existing-image-remove {
  background: #237fb7;
}

.image-selection-count {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.image-selection-count.is-full {
  color: #b5524b;
}

@media (max-width: 781px) {
  .price-mode-picker {
    grid-template-columns: 1fr;
  }

  .rental-condition-grid {
    grid-template-columns: 1fr;
  }

  .price-mode-picker label > span {
    min-height: 82px;
  }

  .choice-emoji {
    font-size: 21px;
  }
}

/* ==========================================================================
   Phase 9 hotfix: 로그아웃 버튼
   ========================================================================== */
.header-logout-form,
.member-logout-form,
.mobile-menu-logout {
  margin: 0;
}

.header-logout-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #d8e3ea;
  border-radius: 11px;
  background: #fff;
  color: #53697a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

.header-logout-button .ui-icon {
  font-size: 16px;
  transform: rotate(180deg);
}

.header-logout-button:hover {
  transform: translateY(-1px);
  border-color: #d66c67;
  background: #fff4f3;
  color: #b73f3a;
}

.member-logout-form {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

.member-logout-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid #f0cfcd;
  border-radius: 11px;
  background: #fff7f6;
  color: #b4423d;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.member-logout-button .ui-icon {
  font-size: 18px;
  transform: rotate(180deg);
}

.member-logout-button:hover {
  transform: translateY(-1px);
  border-color: #dc7e79;
  background: #ffefed;
}

.mobile-menu-logout {
  grid-column: 1 / -1;
}

.mobile-menu-logout button {
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #efcfcd;
  border-radius: 12px;
  background: #fff5f4;
  color: #b4423d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.mobile-menu-logout .ui-icon {
  font-size: 18px;
  transform: rotate(180deg);
}

@media (max-width: 781px) {
  .header-logout-form {
    display: none;
  }

  .member-nav .member-logout-form {
    flex: 0 0 auto;
    margin: 0 0 0 7px;
    padding: 0 0 0 7px;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
  }

  .member-nav .member-logout-button {
    width: auto;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Phase 10: 거래 유형별 견적 폼
   ========================================================================== */
.quote-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 211, 107, .22), transparent 18rem),
    linear-gradient(135deg, #173f5b, #2b738f);
}

.quote-create-layout-v2 {
  align-items: start;
  gap: 24px;
}

.quote-target-card-v2 {
  position: sticky;
  top: 132px;
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 107, .28), transparent 12rem),
    linear-gradient(145deg, #f5fbff, #fffaf0);
}

.quote-target-card-v2::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #2f8fd0, #ffd36b);
}

.quote-target-emoji {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 1px solid #d6e7f0;
  border-radius: 19px;
  background: rgba(255, 255, 255, .88);
  font-size: 29px;
  box-shadow: 0 10px 24px rgba(24, 59, 86, .10);
}

.quote-target-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}

.quote-target-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.quote-target-card-v2 h2 {
  margin: 0 0 13px;
  font-size: 22px;
  line-height: 1.38;
  letter-spacing: -.035em;
}

.quote-target-meta {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid #dce9f0;
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  color: #597083;
  font-size: 11px;
}

.quote-target-card-v2 > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
}

.quote-offer-card {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}

.quote-offer-card .form-card-head {
  padding: 22px 24px;
  background:
    radial-gradient(circle at 95% 15%, rgba(255, 211, 107, .22), transparent 11rem),
    linear-gradient(180deg, #fbfdff, #f3f9fc);
}

.quote-head-emoji {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center;
  border-radius: 16px !important;
  background: #fff !important;
  color: inherit !important;
  font-size: 24px !important;
  box-shadow: 0 9px 20px rgba(24, 59, 86, .11) !important;
}

.quote-kind-banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 19px;
  padding: 16px 17px;
  border: 1px solid;
  border-radius: 18px;
}

.quote-kind-banner > span {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  font-size: 22px;
}

.quote-kind-banner b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.quote-kind-banner p {
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
}

.quote-kind-banner.sale {
  border-color: #efd69e;
  background: linear-gradient(135deg, #fff8e7, #fffdf8);
  color: #6f5218;
}

.quote-kind-banner.rental {
  border-color: #bfe0d4;
  background: linear-gradient(135deg, #eaf9f3, #f8fffc);
  color: #276b55;
}

.quote-rental-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quote-rental-grid .field,
.quote-main-price {
  padding: 16px;
  border: 1px solid #d8e6ee;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f9fcfd);
}

.quote-rental-grid .field:focus-within,
.quote-main-price:focus-within {
  border-color: #68acd3;
  box-shadow: 0 0 0 4px rgba(47, 143, 208, .11);
}

.quote-money-preview {
  display: block;
  min-height: 17px;
  margin-top: 7px;
  color: #2876a5;
  font-size: 10px;
  font-weight: 850;
}

.quote-memo-field {
  margin-top: 19px;
}

.quote-fee-confirm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dce7ed;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.quote-fee-confirm > div {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border-right: 1px solid #e3ebef;
}

.quote-fee-confirm > div:last-child {
  border-right: 0;
}

.quote-fee-confirm span {
  color: var(--muted);
  font-size: 10px;
}

.quote-fee-confirm strong {
  margin-top: 5px;
  font-size: 20px;
}

.quote-fee-confirm .after {
  background: linear-gradient(145deg, #edf8fe, #fff9e9);
}

.quote-confirm-check {
  border-radius: 16px;
  border: 1px solid #ead8ad;
  background: #fffaf0;
}

.quote-submit-button {
  min-height: 58px;
  border-radius: 17px;
  font-size: 14px;
  box-shadow: 0 13px 27px rgba(27, 100, 143, .20);
}

.quote-condition-pills,
.quote-condition-compact {
  display: flex;
  align-items: stretch;
  gap: 7px;
  flex-wrap: wrap;
}

.quote-condition-pill {
  min-width: 104px;
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  padding: 9px 10px;
  border: 1px solid #dce7ed;
  border-radius: 13px;
  background: #f8fbfd;
}

.quote-condition-pill > i {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 17px;
  font-style: normal;
}

.quote-condition-pill > small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.quote-condition-pill > b {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.quote-condition-pill.price {
  border-color: #ecd59f;
  background: #fff9eb;
}

.quote-condition-pill.deposit {
  border-color: #d2dfeb;
  background: #f4f8fc;
}

.quote-condition-pill.monthly {
  border-color: #bfe0d4;
  background: #edf9f4;
}

.quote-condition-pill.months {
  border-color: #d8cfee;
  background: #f7f3ff;
}

.quote-condition-compact {
  max-width: 390px;
}

.quote-condition-compact .quote-condition-pill {
  min-width: 92px;
  padding: 7px 8px;
}

.quote-condition-compact .quote-condition-pill > b {
  font-size: 10px;
}

.quote-row .quote-condition {
  min-width: 310px;
}

@media (max-width: 980px) {
  .quote-target-card-v2 {
    position: static;
  }

  .quote-rental-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 781px) {
  .quote-create-layout-v2 {
    gap: 15px;
  }

  .quote-target-card-v2 {
    padding: 20px;
  }

  .quote-fee-confirm {
    grid-template-columns: 1fr;
  }

  .quote-fee-confirm > div {
    min-height: 70px;
    border-right: 0;
    border-bottom: 1px solid #e3ebef;
  }

  .quote-fee-confirm > div:last-child {
    border-bottom: 0;
  }

  .quote-row .quote-condition {
    min-width: 0;
  }

  .quote-condition-pills,
  .quote-condition-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-condition-pill {
    min-width: 0;
  }
}

/* ==========================================================================
   Phase 11: 거래 상세 모바일 전면 개선
   ========================================================================== */
.detail-breadcrumb {
  min-width: 0;
}

.detail-breadcrumb b {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-detail-page {
  position: relative;
}

.detail-gallery-v2 {
  position: relative;
  border: 1px solid #dbe7ed;
  box-shadow: 0 15px 38px rgba(24, 59, 86, .10);
}

.gallery-top-badges {
  position: absolute;
  z-index: 4;
  top: 13px;
  left: 13px;
  right: 13px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.gallery-top-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(17, 48, 69, .78);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 15px rgba(17, 48, 69, .16);
}

.post-content-card-v2 {
  overflow: hidden;
  border: 1px solid #dce7ed;
  background:
    radial-gradient(circle at 96% 0, rgba(255, 211, 107, .13), transparent 15rem),
    #fff;
}

.post-content-card-v2 .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-content-card-v2 .status-badge i {
  font-style: normal;
}

.detail-info-grid-v2 > div {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce8ef;
  background: linear-gradient(145deg, #f8fcff, #fffdf8);
}

.detail-info-grid-v2 > div::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -25px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(63, 153, 207, .07);
}

.detail-info-grid-v2 span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-info-grid-v2 span i {
  font-style: normal;
  font-size: 15px;
}

.detail-bottom-stats-v2 {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.detail-bottom-stats-v2 span {
  padding: 6px 9px;
  border: 1px solid #e1e9ee;
  border-radius: 999px;
  background: #f8fbfd;
}

.deal-card-v2 {
  overflow: hidden;
  border: 1px solid #dce6ec;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 107, .22), transparent 13rem),
    linear-gradient(145deg, #fff, #f8fcff);
}

.deal-card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deal-card-status-row .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deal-card-status-row .status-badge i {
  font-style: normal;
}

.deal-card-status-row small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.deal-price-block {
  margin: 18px 0 15px;
}

.deal-price-block > small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.deal-price-block h2 {
  margin: 0;
  color: #183b53;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.deal-price-block p {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.deal-price-block p span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(234, 245, 251, .9);
}

.deal-card-actions {
  display: grid;
  gap: 8px;
}

.deal-card-actions > form {
  margin: 0;
}

.deal-card-actions .button {
  border-radius: 13px;
}

.deal-fee-note {
  margin-top: 15px;
  border-radius: 14px;
  border-color: #efd49b;
  background: linear-gradient(145deg, #fff8e8, #fffdf8);
}

.deal-fee-note b {
  color: #71541d;
}

.deal-fee-note p {
  color: #7b653b;
}

@media (max-width: 680px) {
  .detail-breadcrumb {
    width: calc(100% - 24px);
    overflow-x: auto;
    padding: 13px 0 11px;
    gap: 6px;
    font-size: 9px;
    scrollbar-width: none;
  }

  .detail-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .detail-breadcrumb > * {
    flex: 0 0 auto;
  }

  .post-detail-page {
    width: 100%;
    padding-bottom: 154px;
  }

  .post-detail-page .detail-main {
    width: 100%;
    gap: 12px;
  }

  .detail-gallery-v2,
  .post-content-card-v2,
  .post-detail-page .quotes-owner,
  .post-detail-page .contact-card {
    width: calc(100% - 20px);
    margin-right: auto;
    margin-left: auto;
    border-radius: 19px;
  }

  .detail-gallery-v2 .main-image {
    height: clamp(250px, 72vw, 360px);
    border-radius: 19px 19px 0 0;
  }

  .detail-gallery-v2 .main-image > img {
    object-fit: contain;
  }

  .detail-gallery-v2 .thumb-list {
    gap: 7px;
    overflow-x: auto;
    padding: 9px;
    scrollbar-width: none;
  }

  .detail-gallery-v2 .thumb-list::-webkit-scrollbar {
    display: none;
  }

  .detail-gallery-v2 .thumb-list button {
    flex: 0 0 58px;
    width: 58px;
    height: 50px;
    border-radius: 10px;
  }

  .gallery-top-badges {
    top: 9px;
    left: 9px;
    right: 9px;
  }

  .gallery-top-badges span {
    min-height: 26px;
    padding: 0 8px;
    font-size: 8px;
  }

  .post-content-card-v2 {
    margin-bottom: 0 !important;
    padding: 17px !important;
  }

  .post-content-card-v2 h1 {
    margin: 13px 0;
    font-size: 22px !important;
    line-height: 1.35;
  }

  .detail-title-meta {
    gap: 8px;
  }

  .detail-title-meta > div {
    gap: 4px;
  }

  .seller-line {
    padding: 12px;
    border: 1px solid #e0e9ee;
    border-radius: 15px;
    background: #f8fbfd;
  }

  .detail-info-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .detail-info-grid-v2 > div {
    min-height: 76px;
    padding: 11px;
    border-radius: 14px;
  }

  .detail-info-grid-v2 span {
    font-size: 9px;
  }

  .detail-info-grid-v2 strong {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
  }

  .detail-content {
    margin-top: 5px;
    padding: 16px 2px !important;
    font-size: 13px !important;
    line-height: 1.8;
  }

  .extra-detail {
    grid-template-columns: 1fr 1fr;
  }

  .detail-bottom-stats-v2 {
    gap: 5px;
  }

  .detail-bottom-stats-v2 span {
    padding: 5px 7px;
    font-size: 8px;
  }

  /*
   * 기존 모바일 흰색 대형 오버레이 원인:
   * sticky-card의 top 값이 fixed 전환 후 남아서 top~bottom 전체를 덮었습니다.
   * top:auto를 명시하고 비방문자 카드만 작은 하단 액션 바로 고정합니다.
   */
  .post-detail-page .detail-side {
    width: 100%;
    padding: 0;
  }

  .post-detail-page .detail-side .deal-card-v2 {
    top: auto !important;
    right: 9px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 9px;
    width: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(198, 218, 230, .96);
    border-radius: 20px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -10px 32px rgba(24, 59, 86, .18);
    backdrop-filter: blur(14px);
  }

  .post-detail-page .detail-side .deal-card-v2.is-visitor {
    position: fixed;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "price actions";
    gap: 9px;
    align-items: center;
  }

  .deal-card-v2.is-visitor .deal-card-status-row,
  .deal-card-v2.is-visitor .deal-fee-note {
    display: none;
  }

  .deal-card-v2.is-visitor .deal-price-block {
    grid-area: price;
    min-width: 0;
    margin: 0;
    padding-left: 3px;
  }

  .deal-card-v2.is-visitor .deal-price-block > small {
    margin: 0 0 2px;
    font-size: 8px;
  }

  .deal-card-v2.is-visitor .deal-price-block h2 {
    overflow: hidden;
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .deal-card-v2.is-visitor .deal-price-block p {
    display: none;
  }

  .deal-card-v2.is-visitor .deal-card-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .deal-card-v2.is-visitor .deal-card-actions .button {
    width: auto;
    min-height: 45px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 10px;
    white-space: nowrap;
  }

  .deal-card-v2.is-visitor .favorite-action .button {
    width: 45px;
    overflow: hidden;
    padding: 0;
    color: transparent;
    font-size: 0;
  }

  .deal-card-v2.is-visitor .favorite-action .button::before {
    content: "💛";
    color: initial;
    font-size: 18px;
  }

  .deal-card-v2.is-visitor .report-link {
    display: none;
  }

  .post-detail-page .detail-side .deal-card-v2.is-owner {
    position: static;
    width: calc(100% - 20px);
    margin: 3px auto 20px;
    padding: 17px;
  }

  .deal-card-v2.is-owner .owner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .deal-card-v2.is-owner .owner-actions > * {
    width: 100%;
  }

  .deal-card-v2.is-owner .owner-actions .button {
    width: 100%;
    min-height: 43px;
    padding: 8px;
    font-size: 9px;
  }

  .deal-card-v2.is-owner .deal-price-block {
    margin: 13px 0;
  }

  .deal-card-v2.is-owner .deal-price-block h2 {
    font-size: 22px;
  }

  .post-detail-page .quotes-owner,
  .post-detail-page .contact-card {
    padding: 17px;
  }

  .post-detail-page .quote-row {
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
  }
}

@media (max-width: 390px) {
  .detail-gallery-v2 .main-image {
    height: 245px;
  }

  .gallery-top-badges span:last-child {
    display: none;
  }

  .detail-info-grid-v2 {
    grid-template-columns: 1fr !important;
  }

  .deal-card-v2.is-visitor .deal-card-actions .button {
    max-width: 172px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 9px;
  }

  .deal-card-v2.is-owner .owner-actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Phase 12: 마이페이지 PC 레이아웃·디자인 전면 개선
   ========================================================================== */

/* 마이페이지용 작은 타이틀 카드 */
.member-page-hero.page-hero.compact {
  min-height: 0;
  padding: 0 !important;
  background:
    radial-gradient(circle at 91% 10%, rgba(255, 211, 107, .18), transparent 13rem),
    linear-gradient(135deg, #173f5b, #286f8b);
}

.member-page-hero.page-hero.compact .shell {
  min-height: 126px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 0 16px;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}

.member-page-hero .shell::before {
  content: attr(data-member-emoji);
  grid-column: 1;
  grid-row: 1 / 4;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 19px;
  background: rgba(255, 255, 255, .12);
  font-size: 27px;
  box-shadow: 0 10px 24px rgba(4, 32, 50, .14);
  backdrop-filter: blur(8px);
}

.member-page-hero .shell > div {
  grid-column: 2;
  grid-row: 1 / 4;
  min-width: 0;
}

.member-page-hero .eyebrow {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 2px;
  color: #bfe8f7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.member-page-hero h1 {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.member-page-hero p {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin: 3px 0 0;
  color: #d7e9f1;
  font-size: 11px;
  line-height: 1.55;
}

.member-page-hero .shell > div .eyebrow,
.member-page-hero .shell > div h1,
.member-page-hero .shell > div p {
  display: block;
}

.member-page-hero .shell > div h1 {
  margin: 1px 0 2px;
  font-size: 27px;
}

.member-page-hero .shell > div p {
  margin: 0;
}

.member-page-hero .shell > .button {
  grid-column: 3;
  grid-row: 1 / 4;
  min-height: 43px;
  border-radius: 13px;
  box-shadow: 0 9px 20px rgba(5, 35, 54, .14);
}

/* 마이페이지 홈 */
.member-hero-v2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 89% 8%, rgba(255, 211, 107, .22), transparent 15rem),
    linear-gradient(135deg, #173e59, #2a718d);
}

.member-hero-v2::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: -95px;
  width: 230px;
  height: 230px;
  border: 42px solid rgba(255, 255, 255, .045);
  border-radius: 50%;
}

.member-hero-v2 > .shell {
  position: relative;
  z-index: 1;
  min-height: 172px;
}

.member-profile-head-v2 {
  position: relative;
}

.member-hello-emoji {
  position: absolute;
  top: -16px;
  left: 51px;
  z-index: 2;
  font-size: 25px;
  filter: drop-shadow(0 5px 8px rgba(4, 31, 48, .18));
  transform: rotate(-9deg);
}

.member-profile-head-v2 .avatar.large {
  border: 4px solid rgba(255, 255, 255, .72);
  box-shadow: 0 13px 28px rgba(4, 31, 48, .18);
}

.member-profile-head-v2 .member-code {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #d7edf6;
  font-size: 9px;
  letter-spacing: .04em;
}

.member-profile-head-v2 h1 {
  margin: 5px 0 2px;
  font-size: 29px;
}

.member-profile-edit {
  border-radius: 13px;
}

/* PC 마이페이지 레이아웃 */
.member-layout-v2 {
  padding-top: 32px;
  padding-bottom: 58px;
}

.member-content {
  width: 100%;
  min-width: 0;
}

.member-content.narrow {
  width: 100%;
  max-width: 920px;
}

@media (min-width: 801px) {
  .member-layout,
  .member-layout-v2 {
    display: grid !important;
    grid-template-columns: 238px minmax(0, 1fr) !important;
    align-items: start;
    gap: 22px !important;
  }

  .member-layout > .member-content,
  .member-layout-v2 > .member-content {
    grid-column: 2;
    min-width: 0;
  }
}

/* 이모지 사이드 메뉴 */
.member-nav-v2 {
  width: 100%;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #dbe6ec;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 107, .12), transparent 10rem),
    #fff;
  box-shadow: 0 12px 30px rgba(24, 59, 86, .08);
}

.member-nav-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid #edf2f5;
}

.member-nav-heading > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: linear-gradient(145deg, #e9f6fd, #fff7e4);
  font-size: 19px;
}

.member-nav-heading b,
.member-nav-heading small {
  display: block;
}

.member-nav-heading b {
  font-size: 13px;
}

.member-nav-heading small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
}

.member-nav-list {
  display: grid;
  gap: 3px;
  padding-top: 7px;
}

.member-nav-v2 .member-nav-list a {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 0;
  border-radius: 12px;
  color: #42596a;
  font-size: 12px;
  font-weight: 800;
  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.member-nav-v2 .member-nav-list a:hover {
  transform: translateX(2px);
  background: #f0f7fb;
  color: #1d5e86;
}

.member-nav-v2 .member-nav-list a.active {
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 211, 107, .18), transparent 6rem),
    linear-gradient(145deg, #173f5b, #215f7d);
  color: #fff;
  box-shadow: 0 9px 20px rgba(24, 59, 86, .17);
}

.member-nav-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf6fb;
  font-size: 16px;
}

.member-nav-v2 a.active .member-nav-icon {
  background: rgba(255, 255, 255, .15);
}

.member-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-nav-arrow {
  color: #a3b2bc;
  font-size: 18px;
  font-weight: 500;
}

.member-nav-v2 a.active .member-nav-arrow {
  color: rgba(255, 255, 255, .72);
}

.member-nav-v2 .member-logout-form {
  margin-top: 8px;
  padding-top: 9px;
}

.member-nav-v2 .member-logout-button {
  min-height: 44px;
  border-radius: 12px;
}

/* PC에서 4열로 눌리던 가로 거래 카드 수정 */
.member-content .post-grid,
.member-content .member-deal-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100%;
}

.member-content .deal-list-card {
  width: 100%;
  min-width: 0;
}

@media (min-width: 801px) {
  .member-content .deal-card-main {
    grid-template-columns: 116px minmax(0, 1fr) minmax(185px, 220px);
    width: 100%;
  }

  .member-content .deal-content {
    min-width: 0;
  }

  .member-content .deal-content h3 {
    max-width: 100%;
  }
}

/* 마이페이지 홈 카드 */
.wallet-card-v2 {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  overflow: hidden;
  padding: 23px 25px;
  background:
    radial-gradient(circle at 90% 0, rgba(255, 211, 107, .22), transparent 13rem),
    linear-gradient(135deg, #173e59, #286d89);
}

.wallet-card-v2::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -52px;
  width: 130px;
  height: 130px;
  border: 25px solid rgba(255, 255, 255, .045);
  border-radius: 50%;
}

.wallet-emoji {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  z-index: 1;
  border-radius: 17px;
  background: rgba(255, 255, 255, .13);
  font-size: 26px;
}

.wallet-card-v2 > div,
.wallet-card-v2 > a {
  position: relative;
  z-index: 1;
}

.dashboard-grid-v2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-grid-v2 .dashboard-card {
  min-height: 105px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dce7ed;
  background: #fff;
  transition: transform .17s ease, box-shadow .17s ease;
}

.dashboard-grid-v2 .dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(24, 59, 86, .10);
}

.dashboard-emoji {
  width: 44px;
  height: 44px;
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  font-size: 21px !important;
}

.dashboard-card.posts .dashboard-emoji { background: #e9f6fd; }
.dashboard-card.sent .dashboard-emoji { background: #fff5de; }
.dashboard-card.received .dashboard-emoji { background: #ebf8f2; }
.dashboard-card.favorites .dashboard-emoji { background: #fff0ef; }

.dashboard-grid-v2 .dashboard-card div span {
  font-size: 10px;
}

.dashboard-grid-v2 .dashboard-card div strong {
  margin-top: 2px;
  font-size: 25px;
}

.member-section-v2,
.member-content .member-section,
.member-content .form-card,
.member-content .table-card,
.member-content .settings-links,
.member-content .device-list,
.member-content .quote-list.standalone,
.member-content .verification-result {
  border-color: #dce7ed;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(24, 59, 86, .06);
}

.member-content .section-heading h2::before {
  content: "✨";
  margin-right: 7px;
  font-size: .82em;
}

.quick-actions-v2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-actions-v2 a {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 95% 5%, rgba(255, 211, 107, .14), transparent 8rem),
    #fff;
}

.quick-actions-v2 a > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 15px;
  font-size: 23px;
}

.member-content .subnav {
  gap: 6px;
  padding: 7px;
  border: 1px solid #dce7ed;
  border-radius: 16px;
  background: #fff;
}

.member-content .subnav a {
  border: 0;
  border-radius: 11px;
}

.member-content .subnav a.active {
  background: linear-gradient(145deg, #173f5b, #215f7d);
  color: #fff;
}

/* 중간 PC·태블릿 */
@media (max-width: 1050px) and (min-width: 801px) {
  .member-layout,
  .member-layout-v2 {
    grid-template-columns: 214px minmax(0, 1fr) !important;
    gap: 17px !important;
  }

  .member-content .deal-card-main {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .member-content .deal-media {
    width: 96px;
    height: 82px;
  }

  .member-content .deal-summary {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
    border-top: 1px dashed var(--line);
    border-left: 0;
  }

  .member-content .deal-summary > small {
    display: none;
  }

  .member-content .deal-summary > strong,
  .member-content .deal-detail-link {
    margin: 0;
  }

  .dashboard-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 모바일 기존 구조 유지 */
@media (max-width: 800px) {
  .member-page-hero.page-hero.compact .shell {
    min-height: 102px !important;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    gap: 0 11px;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .member-page-hero .shell::before {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    font-size: 21px;
  }

  .member-page-hero h1,
  .member-page-hero .shell > div h1 {
    font-size: 21px;
  }

  .member-page-hero p,
  .member-page-hero .shell > div p {
    max-width: 100%;
    font-size: 9px;
  }

  .member-page-hero .shell > .button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 9px;
  }

  .member-layout-v2 {
    padding-top: 18px;
  }

  .member-nav-v2 {
    position: static;
  }

  .member-nav-heading {
    min-height: 52px;
  }

  .member-hero-v2 > .shell {
    min-height: 156px;
  }

  .dashboard-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-card-v2 {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px;
  }

  .wallet-emoji {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 22px;
  }

  .wallet-card-v2 > a {
    grid-column: 1 / -1;
    width: 100%;
  }

  .quick-actions-v2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .member-page-hero.page-hero.compact .shell {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 94px !important;
  }

  .member-page-hero .shell::before {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 19px;
  }

  .member-page-hero .shell > .button {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin-top: 9px;
  }

  .member-page-hero h1,
  .member-page-hero .shell > div h1 {
    font-size: 19px;
  }

  .member-profile-head-v2 h1 {
    font-size: 23px;
  }

  .member-hello-emoji {
    left: 37px;
  }

  .dashboard-grid-v2 {
    gap: 8px;
  }

  .dashboard-grid-v2 .dashboard-card {
    min-height: 88px;
    gap: 8px;
    padding: 12px;
  }

  .dashboard-emoji {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 18px !important;
  }
}

/* ==========================================================================
   Phase 14: 이용안내 전체 콘텐츠·FAQ·축소 타이틀
   ========================================================================== */
.guide-page-hero.page-hero.compact {
  min-height: 0;
  padding: 0 !important;
  background:
    radial-gradient(circle at 91% 5%, rgba(255, 211, 107, .22), transparent 14rem),
    linear-gradient(135deg, #173f5b, #2a718e);
}

.guide-page-hero .shell {
  min-height: 134px !important;
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding-top: 19px !important;
  padding-bottom: 19px !important;
}

.guide-hero-emoji {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  font-size: 29px;
  box-shadow: 0 11px 25px rgba(4, 31, 48, .16);
  backdrop-filter: blur(8px);
}

.guide-page-hero .eyebrow {
  margin: 0 0 3px;
  color: #bfe8f7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.guide-page-hero h1 {
  margin: 0;
  font-size: 29px;
  line-height: 1.23;
  letter-spacing: -.045em;
}

.guide-page-hero p {
  max-width: 760px;
  margin: 4px 0 0;
  color: #d9eaf2;
  font-size: 11px;
  line-height: 1.55;
}

.guide-page-hero .button {
  min-height: 44px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(5, 35, 54, .15);
}

.guide-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 70px;
}

.guide-toc {
  position: sticky;
  top: 126px;
  overflow: hidden;
  padding: 11px;
  border: 1px solid #dbe7ed;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 107, .13), transparent 10rem),
    #fff;
  box-shadow: 0 13px 32px rgba(24, 59, 86, .08);
}

.guide-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px 12px;
  border-bottom: 1px solid #edf2f5;
}

.guide-toc-head > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: linear-gradient(145deg, #eaf6fd, #fff7e4);
  font-size: 20px;
}

.guide-toc-head b,
.guide-toc-head small {
  display: block;
}

.guide-toc-head b {
  font-size: 13px;
}

.guide-toc-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.guide-toc nav {
  display: grid;
  gap: 2px;
  padding: 8px 0;
}

.guide-toc nav a {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 10px;
  color: #455d6d;
  font-size: 10px;
  font-weight: 800;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.guide-toc nav a:hover {
  transform: translateX(2px);
  background: #edf7fc;
  color: #1e668f;
}

.guide-toc-note {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, #173f5b, #246783);
  color: #fff;
}

.guide-toc-note b {
  margin-bottom: 2px;
  font-size: 10px;
}

.guide-toc-note span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d9edf6;
  font-size: 9px;
}

.guide-toc-note span::before {
  content: "✓";
  color: #85e2c4;
  font-weight: 900;
}

.guide-content {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.guide-intro-card,
.guide-card,
.guide-final-cta {
  scroll-margin-top: 130px;
}

.guide-intro-card,
.guide-card {
  overflow: hidden;
  padding: 27px;
  border: 1px solid #dbe7ed;
  border-radius: 25px;
  background:
    radial-gradient(circle at 98% 0, rgba(255, 211, 107, .09), transparent 15rem),
    #fff;
  box-shadow: 0 13px 32px rgba(24, 59, 86, .065);
}

.guide-intro-card {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 107, .17), transparent 16rem),
    linear-gradient(145deg, #f4fbff, #fffdf8);
}

.guide-section-heading {
  display: grid;
  grid-template-columns: 53px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 21px;
}

.guide-section-icon {
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  border: 1px solid #d9e8f0;
  border-radius: 17px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e7);
  font-size: 25px;
  box-shadow: 0 8px 19px rgba(24, 59, 86, .08);
}

.guide-section-heading > div > span {
  display: block;
  margin-bottom: 2px;
  color: #2c7ba9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
}

.guide-section-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.04em;
}

.guide-section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.guide-summary-grid,
.guide-category-grid,
.guide-trade-grid,
.guide-feature-grid,
.guide-after-grid,
.guide-safety-checks,
.guide-point-rules {
  display: grid;
  gap: 12px;
}

.guide-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-summary-grid article {
  min-height: 175px;
  padding: 18px;
  border: 1px solid #dce8ee;
  border-radius: 19px;
  background: rgba(255, 255, 255, .82);
}

.guide-summary-grid article > span {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin-bottom: 11px;
  border-radius: 14px;
  background: #edf7fc;
  font-size: 22px;
}

.guide-summary-grid b {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.guide-summary-grid p,
.guide-category-grid p,
.guide-trade-grid p,
.guide-feature-grid p,
.guide-after-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.guide-process-line {
  display: grid;
  grid-template-columns: repeat(11, auto);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed #bed8e7;
  border-radius: 19px;
  background: rgba(238, 248, 253, .82);
}

.guide-process-line article {
  min-width: 91px;
  text-align: center;
}

.guide-process-line article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #1d6388;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.guide-process-line b,
.guide-process-line small {
  display: block;
}

.guide-process-line b {
  font-size: 11px;
}

.guide-process-line small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.guide-process-line > i {
  color: #8aa6b7;
  font-size: 22px;
  font-style: normal;
}

.guide-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-category-grid article {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 19px;
  border: 1px solid #dce7ed;
  border-radius: 20px;
  background: #fbfdfe;
}

.guide-category-grid article::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -48px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(47, 143, 208, .06);
}

.guide-category-emoji {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 15px;
  background: #edf7fc;
  font-size: 23px;
}

.guide-category-grid small {
  color: var(--muted);
  font-size: 9px;
}

.guide-category-grid h3 {
  margin: 2px 0 13px;
  font-size: 18px;
}

.guide-category-grid ul,
.guide-do-dont ul,
.guide-contact-rule ul,
.guide-danger-box ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-category-grid li,
.guide-do-dont li,
.guide-contact-rule li,
.guide-danger-box li {
  position: relative;
  padding-left: 15px;
  color: #526a7b;
  font-size: 9px;
  line-height: 1.55;
}

.guide-category-grid li::before,
.guide-do-dont li::before,
.guide-contact-rule li::before,
.guide-danger-box li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: #2d8abd;
  font-weight: 900;
}

.guide-trade-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 13px;
}

.guide-trade-grid article {
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  padding: 15px;
  border: 1px solid #e0e9ee;
  border-radius: 16px;
  background: #fff;
}

.guide-trade-grid article > span {
  grid-row: 1 / 3;
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #eef8fd, #fff7e8);
  font-size: 20px;
}

.guide-trade-grid b {
  font-size: 12px;
}

.guide-step-list,
.guide-register-flow {
  display: grid;
  gap: 10px;
}

.guide-step-list article,
.guide-register-flow article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 47px;
  align-items: center;
  gap: 13px;
  padding: 16px 17px;
  border: 1px solid #dfe9ee;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #f9fcfd);
}

.guide-step-list.compact article {
  padding: 14px 16px;
}

.guide-step-number,
.guide-register-flow article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #173f5b;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.guide-step-list h3,
.guide-register-flow h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

.guide-step-list p,
.guide-register-flow p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.guide-step-emoji,
.guide-register-flow article > i {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #edf7fc;
  font-size: 21px;
  font-style: normal;
}

.guide-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px 17px;
  border: 1px solid #bddfd4;
  border-radius: 17px;
  background: linear-gradient(145deg, #ebf9f4, #fafffd);
}

.guide-tip.warning {
  border-color: #efd49d;
  background: linear-gradient(145deg, #fff8e8, #fffdf8);
}

.guide-tip > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: #fff;
  font-size: 20px;
}

.guide-tip b {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.guide-tip p {
  margin: 0;
  color: #597064;
  font-size: 10px;
  line-height: 1.65;
}

.guide-tip.warning p {
  color: #79633a;
}

.guide-do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.guide-do-dont > div {
  padding: 17px;
  border: 1px solid;
  border-radius: 18px;
}

.guide-do-dont .do {
  border-color: #bfe0d4;
  background: #f0faf6;
}

.guide-do-dont .dont {
  border-color: #efcfcd;
  background: #fff6f5;
}

.guide-do-dont h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.guide-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-feature-grid article {
  min-height: 150px;
  padding: 17px;
  border: 1px solid #dce7ed;
  border-radius: 18px;
  background: #fbfdfe;
}

.guide-feature-grid article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 13px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e6);
  font-size: 20px;
}

.guide-feature-grid b {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}

.guide-checklist {
  margin-top: 16px;
  padding: 18px;
  border: 1px dashed #c8dce8;
  border-radius: 19px;
  background: #f7fbfd;
}

.guide-checklist h3 {
  margin: 0 0 12px;
  font-size: 13px;
}

.guide-checklist > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.guide-checklist label {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px;
  border: 1px solid #e1e9ee;
  border-radius: 13px;
  background: #fff;
}

.guide-checklist label > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #1d6388;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.guide-checklist label p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.guide-checklist label b {
  display: block;
  color: #294456;
  font-size: 10px;
}

.guide-quote-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 16px;
}

.guide-quote-types article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  padding: 19px;
  border: 1px solid #dce7ed;
  border-radius: 19px;
  background: linear-gradient(145deg, #f7fcff, #fffdf8);
}

.guide-quote-types article > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  font-size: 28px;
  box-shadow: 0 8px 19px rgba(24, 59, 86, .08);
}

.guide-quote-types small {
  color: var(--muted);
  font-size: 9px;
}

.guide-quote-types h3 {
  margin: 2px 0 5px;
  font-size: 16px;
}

.guide-quote-types p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.guide-quote-types b {
  display: block;
  margin-top: 8px;
  color: #246d98;
  font-size: 10px;
}

.guide-policy-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.guide-policy-box > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #e0e8ed;
  border-radius: 15px;
  background: #fbfdfe;
}

.guide-policy-box > div > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #173f5b;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.guide-policy-box p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.guide-policy-box b {
  display: block;
  margin-bottom: 3px;
  color: #294456;
  font-size: 10px;
}

.guide-bank-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.guide-bank-flow article {
  position: relative;
  min-height: 185px;
  padding: 17px;
  border: 1px solid #dce7ed;
  border-radius: 18px;
  background: #fbfdfe;
}

.guide-bank-flow article > span {
  position: absolute;
  top: 10px;
  right: 11px;
  color: #acc0cc;
  font-size: 11px;
  font-weight: 900;
}

.guide-bank-flow article > i {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e6);
  font-size: 21px;
  font-style: normal;
}

.guide-bank-flow b {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}

.guide-bank-flow p,
.guide-point-rules p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.guide-point-rules {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.guide-point-rules article {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  gap: 9px;
  padding: 13px;
  border: 1px solid #e0e9ee;
  border-radius: 14px;
  background: #fff;
}

.guide-point-rules article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #edf7fc;
  font-size: 18px;
}

.guide-point-rules b {
  font-size: 10px;
}

.guide-select-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.guide-select-flow article {
  min-height: 175px;
  padding: 16px;
  border: 1px solid #dce7ed;
  border-radius: 17px;
  background: #fbfdfe;
}

.guide-select-flow article > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e7);
  font-size: 20px;
}

.guide-select-flow b {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}

.guide-select-flow p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.guide-contact-rule,
.guide-danger-box,
.guide-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 15px;
  padding: 18px;
  border-radius: 18px;
}

.guide-contact-rule {
  border: 1px solid #bddfd4;
  background: #f0faf6;
}

.guide-danger-box {
  border: 1px solid #efc8c5;
  background: #fff5f4;
}

.guide-contact-rule > span,
.guide-danger-box > span,
.guide-disclaimer > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: #fff;
  font-size: 23px;
}

.guide-contact-rule h3,
.guide-danger-box h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.guide-after-grid,
.guide-safety-checks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-after-grid article {
  min-height: 180px;
  padding: 17px;
  border: 1px solid #dce7ed;
  border-radius: 18px;
  background: #fbfdfe;
}

.guide-after-grid article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e7);
  font-size: 21px;
}

.guide-after-grid h3 {
  margin: 0 0 5px;
  font-size: 12px;
}

.guide-mypage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.guide-mypage-grid a {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #dce7ed;
  border-radius: 17px;
  background: #fbfdfe;
  color: inherit;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.guide-mypage-grid a:hover {
  transform: translateY(-3px);
  border-color: #8ec0dc;
  box-shadow: 0 11px 24px rgba(24, 59, 86, .09);
}

.guide-mypage-grid a > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 13px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e7);
  font-size: 20px;
}

.guide-mypage-grid b {
  font-size: 11px;
}

.guide-mypage-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.guide-card.safety {
  border-color: #efd5a0;
  background:
    radial-gradient(circle at 98% 0, rgba(255, 211, 107, .18), transparent 16rem),
    #fffdf8;
}

.guide-safety-checks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-safety-checks article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 15px;
  border: 1px solid #eadfc6;
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
}

.guide-safety-checks article > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff7e5;
  font-size: 20px;
}

.guide-safety-checks b {
  font-size: 11px;
}

.guide-safety-checks p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.guide-disclaimer {
  border: 1px solid #d7e2e8;
  background: #f5f9fb;
}

.guide-disclaimer p {
  margin: 0;
  color: #526a7b;
  font-size: 10px;
  line-height: 1.7;
}

.guide-faq-list {
  display: grid;
  gap: 8px;
}

.guide-faq-list details {
  overflow: hidden;
  border: 1px solid #dce7ed;
  border-radius: 15px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.guide-faq-list details[open] {
  border-color: #91bdd6;
  box-shadow: 0 9px 21px rgba(24, 59, 86, .07);
}

.guide-faq-list summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.guide-faq-list summary::-webkit-details-marker {
  display: none;
}

.guide-faq-list summary > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf7fc;
  color: #2675a2;
  font-size: 9px;
  font-weight: 900;
}

.guide-faq-list summary b {
  font-size: 11px;
}

.guide-faq-list summary i {
  color: #6f8797;
  font-size: 20px;
  font-style: normal;
  text-align: center;
  transition: transform .16s ease;
}

.guide-faq-list details[open] summary i {
  transform: rotate(45deg);
}

.guide-faq-list details > div {
  padding: 0 17px 15px 58px;
}

.guide-faq-list details p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.guide-final-cta {
  display: grid;
  grid-template-columns: 63px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 25px;
  border: 1px solid #d2e2eb;
  border-radius: 23px;
  background:
    radial-gradient(circle at 95% 0, rgba(255, 211, 107, .25), transparent 13rem),
    linear-gradient(135deg, #173f5b, #276e8a);
  color: #fff;
  box-shadow: 0 14px 32px rgba(24, 59, 86, .15);
}

.guide-final-cta > span {
  width: 63px;
  height: 63px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, .13);
  font-size: 29px;
}

.guide-final-cta small {
  color: #bfe8f7;
  font-size: 9px;
  font-weight: 900;
}

.guide-final-cta h2 {
  margin: 2px 0 3px;
  font-size: 21px;
}

.guide-final-cta p {
  margin: 0;
  color: #d8eaf2;
  font-size: 10px;
}

.guide-final-cta > div:last-child {
  display: flex;
  gap: 8px;
}

.guide-final-cta .button {
  min-height: 44px;
  border-radius: 13px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .guide-summary-grid,
  .guide-category-grid,
  .guide-bank-flow,
  .guide-point-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-select-flow,
  .guide-mypage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-process-line {
    grid-template-columns: repeat(6, 1fr);
  }

  .guide-process-line > i {
    display: none;
  }
}

@media (max-width: 930px) {
  .guide-shell {
    grid-template-columns: 1fr;
  }

  .guide-toc {
    position: static;
  }

  .guide-toc nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-toc-note {
    grid-template-columns: auto repeat(3, 1fr);
    align-items: center;
  }

  .guide-toc-note b {
    margin: 0;
  }

  .guide-trade-grid,
  .guide-after-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-feature-grid,
  .guide-safety-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-policy-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .guide-page-hero .shell {
    min-height: 112px !important;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 14px !important;
  }

  .guide-hero-emoji {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 23px;
  }

  .guide-page-hero h1 {
    font-size: 21px;
  }

  .guide-page-hero p {
    font-size: 9px;
  }

  .guide-page-hero .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 39px;
  }

  .guide-shell {
    width: calc(100% - 18px);
    gap: 14px;
    padding-top: 17px;
    padding-bottom: 92px;
  }

  .guide-toc {
    padding: 9px;
    border-radius: 18px;
  }

  .guide-toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-toc nav a {
    min-height: 36px;
    padding: 5px 7px;
    font-size: 9px;
  }

  .guide-toc-note {
    grid-template-columns: 1fr;
  }

  .guide-intro-card,
  .guide-card {
    padding: 17px;
    border-radius: 20px;
  }

  .guide-section-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }

  .guide-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 21px;
  }

  .guide-section-heading h2 {
    font-size: 19px;
  }

  .guide-summary-grid,
  .guide-category-grid,
  .guide-trade-grid,
  .guide-feature-grid,
  .guide-after-grid,
  .guide-safety-checks,
  .guide-bank-flow,
  .guide-point-rules,
  .guide-select-flow,
  .guide-mypage-grid {
    grid-template-columns: 1fr;
  }

  .guide-summary-grid article,
  .guide-category-grid article,
  .guide-feature-grid article,
  .guide-after-grid article,
  .guide-select-flow article,
  .guide-mypage-grid a,
  .guide-bank-flow article {
    min-height: 0;
  }

  .guide-process-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 13px;
  }

  .guide-process-line article {
    min-width: 0;
  }

  .guide-process-line small {
    font-size: 7px;
  }

  .guide-step-list article,
  .guide-register-flow article {
    grid-template-columns: 39px minmax(0, 1fr);
    padding: 13px;
  }

  .guide-step-number,
  .guide-register-flow article > span {
    width: 37px;
    height: 37px;
    border-radius: 12px;
  }

  .guide-step-emoji,
  .guide-register-flow article > i {
    display: none;
  }

  .guide-do-dont,
  .guide-checklist > div,
  .guide-quote-types {
    grid-template-columns: 1fr;
  }

  .guide-quote-types article {
    grid-template-columns: 47px minmax(0, 1fr);
    padding: 15px;
  }

  .guide-quote-types article > span {
    width: 47px;
    height: 47px;
    border-radius: 15px;
    font-size: 23px;
  }

  .guide-contact-rule,
  .guide-danger-box,
  .guide-disclaimer {
    padding: 15px;
  }

  .guide-contact-rule > span,
  .guide-danger-box > span,
  .guide-disclaimer > span {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 20px;
  }

  .guide-faq-list summary {
    grid-template-columns: 31px minmax(0, 1fr) 22px;
    padding: 9px 11px;
  }

  .guide-faq-list details > div {
    padding: 0 13px 13px 51px;
  }

  .guide-final-cta {
    grid-template-columns: 49px minmax(0, 1fr);
    padding: 18px;
  }

  .guide-final-cta > span {
    width: 49px;
    height: 49px;
    border-radius: 15px;
    font-size: 23px;
  }

  .guide-final-cta h2 {
    font-size: 17px;
  }

  .guide-final-cta > div:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .guide-toc nav {
    grid-template-columns: 1fr;
  }

  .guide-process-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-page-hero h1 {
    font-size: 19px;
  }

  .guide-final-cta > div:last-child {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Phase 15: 고객센터 메뉴·공지사항·FAQ
   ========================================================================== */
.desktop-support-menu {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.support-menu-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

.support-menu-trigger .ui-icon {
  font-size: 14px;
  transition: transform .16s ease;
}

.desktop-support-menu:hover .support-menu-trigger .ui-icon,
.desktop-support-menu:focus-within .support-menu-trigger .ui-icon {
  transform: rotate(180deg);
}

.desktop-support-menu::after {
  content: "";
  position: absolute;
  top: calc(100% - 7px);
  left: -18px;
  width: 280px;
  height: 18px;
  pointer-events: none;
}

.desktop-support-menu:hover::after,
.desktop-support-menu:focus-within::after {
  pointer-events: auto;
}

.support-submenu {
  position: absolute;
  z-index: 190;
  top: calc(100% + 8px);
  right: -22px;
  width: 300px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #d7e4eb;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 107, .16), transparent 10rem),
    rgba(255, 255, 255, .98);
  box-shadow: 0 19px 43px rgba(24, 59, 86, .17);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  backdrop-filter: blur(12px);
}

.desktop-support-menu:hover .support-submenu,
.desktop-support-menu:focus-within .support-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.support-submenu > a {
  min-height: 68px;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 10px;
  padding: 10px !important;
  border-radius: 13px !important;
  color: #294456 !important;
  transition: background .15s ease, transform .15s ease;
}

.support-submenu > a:hover {
  transform: translateX(2px);
  background: #eef7fc !important;
}

.support-submenu > a > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #e9f6fd, #fff7e5);
  font-size: 20px;
}

.support-submenu b,
.support-submenu small {
  display: block;
}

.support-submenu b {
  font-size: 12px;
}

.support-submenu small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.support-submenu > a > .ui-icon {
  color: #9bb0bd;
  font-size: 14px;
}

/* 고객센터 공통 작은 hero */
.customer-page-hero.page-hero.compact {
  min-height: 0;
  padding: 0 !important;
  background:
    radial-gradient(circle at 91% 6%, rgba(255, 211, 107, .21), transparent 14rem),
    linear-gradient(135deg, #173f5b, #2a718e);
}

.customer-page-hero .shell {
  min-height: 122px !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}

.customer-hero-emoji {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  font-size: 26px;
  box-shadow: 0 10px 23px rgba(4, 31, 48, .15);
  backdrop-filter: blur(8px);
}

.customer-page-hero .eyebrow {
  margin: 0 0 2px;
  color: #bfe8f7;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.customer-page-hero h1 {
  margin: 0;
  overflow: hidden;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-page-hero p {
  margin: 4px 0 0;
  color: #d9eaf2;
  font-size: 10px;
  line-height: 1.55;
}

.customer-page-hero .button {
  min-height: 42px;
  border-radius: 13px;
}

.customer-center-layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  padding-top: 28px;
  padding-bottom: 65px;
}

.customer-center-tabs {
  position: sticky;
  top: 126px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dbe7ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 29px rgba(24, 59, 86, .075);
}

.customer-center-tabs a {
  min-height: 66px;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  padding: 9px 10px;
  border-radius: 13px;
  color: #42596a;
}

.customer-center-tabs a > span {
  grid-row: 1 / 3;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #edf7fc;
  font-size: 19px;
}

.customer-center-tabs b {
  align-self: end;
  font-size: 11px;
}

.customer-center-tabs small {
  align-self: start;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.customer-center-tabs a:hover {
  background: #f1f8fc;
}

.customer-center-tabs a.active {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 211, 107, .19), transparent 7rem),
    linear-gradient(145deg, #173f5b, #236481);
  color: #fff;
}

.customer-center-tabs a.active > span {
  background: rgba(255, 255, 255, .15);
}

.customer-center-tabs a.active small {
  color: #cfe6f0;
}

.customer-center-content {
  min-width: 0;
}

.customer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 4px 2px;
}

.customer-section-head span {
  color: #2b7ca9;
  font-size: 9px;
  font-weight: 900;
}

.customer-section-head h2 {
  margin: 2px 0 3px;
  font-size: 23px;
  letter-spacing: -.04em;
}

.customer-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.customer-section-head > strong {
  min-width: 56px;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 12px;
  background: #edf7fc;
  color: #2475a2;
  font-size: 11px;
}

/* 공지 목록 */
.notice-list-v2 {
  display: grid;
  gap: 9px;
}

.notice-list-v2 > a {
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 19px;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid #dce7ed;
  border-radius: 17px;
  background:
    radial-gradient(circle at 98% 0, rgba(255, 211, 107, .08), transparent 9rem),
    #fff;
  box-shadow: 0 8px 21px rgba(24, 59, 86, .045);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.notice-list-v2 > a:hover {
  transform: translateY(-2px);
  border-color: #90bed8;
  box-shadow: 0 13px 28px rgba(24, 59, 86, .085);
}

.notice-list-v2 > a.important {
  border-color: #efc8c4;
  background:
    radial-gradient(circle at 98% 0, rgba(255, 202, 91, .15), transparent 10rem),
    #fff9f8;
}

.notice-type-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e6);
  font-size: 23px;
}

.notice-list-badges {
  display: flex;
  gap: 5px;
  margin-bottom: 4px;
}

.notice-list-badges span,
.notice-list-badges em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef5f9;
  color: #607788;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.notice-list-badges em {
  background: #fff0ef;
  color: #bd4a44;
}

.notice-list-v2 h2 {
  margin: 0;
  overflow: hidden;
  color: #294456;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-list-v2 p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.notice-list-v2 > a > i {
  color: #9bb0bd;
}

/* 공지 상세 */
.customer-article-shell {
  max-width: 940px;
  padding-top: 27px;
  padding-bottom: 65px;
}

.notice-content-v2 {
  position: relative;
  min-height: 300px;
  padding: 30px;
  border: 1px solid #dce7ed;
  border-radius: 22px;
  background:
    radial-gradient(circle at 98% 0, rgba(255, 211, 107, .12), transparent 14rem),
    #fff;
  box-shadow: 0 13px 31px rgba(24, 59, 86, .065);
}

.notice-content-mark {
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e6);
  font-size: 23px;
}

.notice-content-v2 > div:last-child {
  color: #40596b;
  font-size: 12px;
  line-height: 1.95;
  white-space: normal;
}

.customer-article-actions {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  margin-top: 14px;
}

/* FAQ */
.faq-search-card {
  display: grid;
  gap: 15px;
  margin-bottom: 14px;
  padding: 19px;
  border: 1px solid #d5e5ed;
  border-radius: 20px;
  background:
    radial-gradient(circle at 97% 0, rgba(255, 211, 107, .17), transparent 12rem),
    linear-gradient(145deg, #f0f9fe, #fffdf8);
}

.faq-search-card > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.faq-search-card > div > span {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  font-size: 21px;
  box-shadow: 0 8px 19px rgba(24, 59, 86, .08);
}

.faq-search-card h2 {
  margin: 0;
  font-size: 17px;
}

.faq-search-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.faq-search-card form {
  display: flex;
  gap: 7px;
}

.faq-search-card form label {
  flex: 1;
}

.faq-search-card input {
  width: 100%;
  min-height: 46px;
  border-radius: 13px;
}

.faq-search-card .button {
  min-height: 46px;
  border-radius: 13px;
}

.faq-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 18px;
}

.faq-category-tabs a {
  min-height: 55px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid #dce7ed;
  border-radius: 13px;
  background: #fff;
  color: #526a7b;
}

.faq-category-tabs a:hover {
  border-color: #9fc5da;
  background: #f3f9fc;
}

.faq-category-tabs a.active {
  border-color: #2d84b5;
  background: linear-gradient(145deg, #e5f5fd, #fff9e9);
  color: #1f648c;
  box-shadow: 0 6px 17px rgba(24, 59, 86, .07);
}

.faq-category-tabs a > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf7fc;
  font-size: 15px;
}

.faq-category-tabs b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faq-category-tabs small {
  min-width: 24px;
  padding: 3px 5px;
  border-radius: 999px;
  background: #eef3f6;
  color: #738996;
  font-size: 8px;
  text-align: center;
}

.faq-result-head {
  margin-top: 4px;
}

.faq-list-v2 {
  display: grid;
  gap: 8px;
}

.faq-list-v2 details {
  overflow: hidden;
  border: 1px solid #dce7ed;
  border-radius: 16px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.faq-list-v2 details[open] {
  border-color: #8ebdd7;
  box-shadow: 0 10px 24px rgba(24, 59, 86, .07);
}

.faq-list-v2 summary {
  min-height: 67px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.faq-list-v2 summary::-webkit-details-marker {
  display: none;
}

.faq-category-mini {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #eaf7fd, #fff7e6);
  font-size: 20px;
}

.faq-list-v2 summary small {
  display: block;
  margin-bottom: 2px;
  color: #2c7ca9;
  font-size: 8px;
  font-weight: 900;
}

.faq-list-v2 summary b {
  display: block;
  color: #294456;
  font-size: 11px;
  line-height: 1.45;
}

.faq-list-v2 summary i {
  color: #668090;
  font-size: 21px;
  font-style: normal;
  text-align: center;
  transition: transform .16s ease;
}

.faq-list-v2 details[open] summary i {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 0 16px 16px 67px;
}

.faq-answer > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #173f5b;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.faq-answer p {
  margin: 4px 0 0;
  color: #526a7b;
  font-size: 10px;
  line-height: 1.75;
}

.faq-empty {
  padding: 50px 20px;
  border: 1px dashed #c9dce7;
  border-radius: 20px;
  background: #f8fbfd;
  text-align: center;
}

.faq-empty > span {
  display: block;
  margin-bottom: 9px;
  font-size: 36px;
}

.faq-empty h2 {
  margin: 0;
  font-size: 18px;
}

.faq-empty p {
  margin: 6px 0 15px;
  color: var(--muted);
  font-size: 10px;
}

.faq-empty > div {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.faq-help-card {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 17px;
  padding: 19px;
  border: 1px solid #d3e3eb;
  border-radius: 20px;
  background:
    radial-gradient(circle at 97% 0, rgba(255, 211, 107, .23), transparent 11rem),
    linear-gradient(145deg, #173f5b, #276e8a);
  color: #fff;
}

.faq-help-card > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255, 255, 255, .13);
  font-size: 26px;
}

.faq-help-card small {
  color: #bfe8f7;
  font-size: 8px;
  font-weight: 900;
}

.faq-help-card h2 {
  margin: 2px 0 3px;
  font-size: 16px;
}

.faq-help-card p {
  margin: 0;
  color: #d8eaf2;
  font-size: 9px;
}

.faq-help-card .button {
  min-height: 42px;
  border-radius: 13px;
}

@media (max-width: 900px) {
  .customer-center-layout {
    grid-template-columns: 1fr;
  }

  .customer-center-tabs {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .faq-category-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .customer-page-hero .shell {
    min-height: 108px !important;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 11px;
    padding: 14px !important;
  }

  .customer-hero-emoji {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    font-size: 21px;
  }

  .customer-page-hero h1 {
    font-size: 20px;
  }

  .customer-page-hero p {
    font-size: 9px;
  }

  .customer-page-hero .button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
  }

  .customer-center-layout {
    width: calc(100% - 18px);
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 90px;
  }

  .customer-center-tabs {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .customer-center-tabs a {
    min-height: 54px;
  }

  .faq-search-card {
    padding: 15px;
  }

  .faq-search-card form {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .faq-search-card form label {
    grid-column: 1 / -1;
  }

  .faq-category-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notice-list-v2 > a {
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    min-height: 82px;
    padding: 11px;
  }

  .notice-type-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 20px;
  }

  .notice-list-v2 h2 {
    font-size: 11px;
  }

  .notice-content-v2 {
    padding: 19px;
    border-radius: 18px;
  }

  .customer-article-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .faq-list-v2 summary {
    grid-template-columns: 38px minmax(0, 1fr) 23px;
    min-height: 61px;
    padding: 9px 11px;
  }

  .faq-category-mini {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
  }

  .faq-answer {
    grid-template-columns: 31px minmax(0, 1fr);
    padding: 0 12px 13px 59px;
  }

  .faq-help-card {
    grid-template-columns: 47px minmax(0, 1fr);
    padding: 16px;
  }

  .faq-help-card > span {
    width: 47px;
    height: 47px;
    border-radius: 15px;
    font-size: 23px;
  }

  .faq-help-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .faq-category-tabs {
    grid-template-columns: 1fr;
  }

  .faq-search-card form {
    grid-template-columns: 1fr;
  }

  .faq-search-card form label,
  .faq-search-card form .button {
    grid-column: 1;
    width: 100%;
  }

  .customer-article-actions {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   거래 상세: 공개 견적 목록 카드
   ========================================================================== */
.post-quote-board {
  padding: 0;
  overflow: hidden;
}

.post-quote-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 21px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(135deg, #fbfdff 0%, #f5fafc 58%, #fffaf0 100%);
}

.post-quote-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #6a8ca0;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .16em;
}

.post-quote-board-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 23px;
  letter-spacing: -.035em;
}

.post-quote-board-head h2 strong {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  vertical-align: 3px;
}

.post-quote-board-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.post-quote-security {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #d8e6ed;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #577180;
  font-size: 9px;
  font-weight: 850;
  box-shadow: 0 5px 13px rgba(31, 69, 92, .05);
}

.post-quote-list {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #f8fbfd;
}

.post-quote-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(280px, 1.3fr) minmax(126px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce7ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 63, 84, .055);
}

.post-quote-card.is-selected {
  padding-top: 31px;
  border: 2px solid #e4bd58;
  background: linear-gradient(145deg, #fffdf6 0%, #fffaf0 55%, #f7fbff 100%);
  box-shadow: 0 12px 28px rgba(157, 117, 22, .12);
}

.post-quote-selected-ribbon {
  position: absolute;
  top: -1px;
  left: 20px;
  padding: 6px 11px 7px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(135deg, #dcae35, #f2ca68);
  color: #3d2b05;
  font-size: 9px;
  font-weight: 950;
  box-shadow: 0 5px 12px rgba(128, 91, 8, .18);
}

.post-quote-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.post-quote-person .avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #d7e5ec;
  background: linear-gradient(145deg, #edf8fe, #fff);
  color: var(--navy);
  box-shadow: 0 5px 13px rgba(28, 68, 92, .08);
}

.post-quote-person-copy {
  min-width: 0;
}

.post-quote-person-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.post-quote-person-line b {
  max-width: 135px;
  overflow: hidden;
  color: #243c4e;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-quote-person-line em {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--mint-deep);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.post-quote-person-line em.mine {
  background: var(--blue-soft);
  color: var(--blue);
}

.post-quote-person-copy > small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.post-quote-person-copy > small i {
  color: #b7c4cb;
  font-style: normal;
}

.post-quote-detail {
  min-width: 0;
}

.post-quote-condition-grid {
  display: flex;
  align-items: stretch;
  gap: 7px;
  flex-wrap: wrap;
}

.post-quote-condition {
  min-width: 104px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  padding: 9px 10px;
  border: 1px solid #dce7ed;
  border-radius: 13px;
  background: #f8fbfd;
}

.post-quote-condition > i {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 17px;
  font-style: normal;
}

.post-quote-condition > small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.post-quote-condition > b {
  margin-top: 1px;
  color: #263f51;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.post-quote-condition.price {
  border-color: #ecd59f;
  background: #fff9eb;
}

.post-quote-condition.deposit {
  border-color: #d2dfeb;
  background: #f4f8fc;
}

.post-quote-condition.monthly {
  border-color: #bfe0d4;
  background: #edf9f4;
}

.post-quote-condition.months {
  border-color: #d8cfee;
  background: #f7f3ff;
}

.post-quote-condition.masked {
  border-style: dashed;
  background: #f6f8f9;
}

.post-quote-condition.masked > i {
  filter: grayscale(1);
  opacity: .55;
}

.post-quote-condition.masked > b {
  color: #8a9ba5;
  letter-spacing: .08em;
}

.post-quote-memo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #f7fafc;
}

.post-quote-memo > span {
  padding: 2px 6px;
  border-radius: 7px;
  background: #e7eff4;
  color: #5a7280;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.post-quote-memo > p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #425b6c;
  font-size: 10px;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-quote-memo.masked {
  border: 1px dashed #dbe4e9;
  background: #fafcfd;
}

.post-quote-memo.masked > span {
  background: #edf1f3;
  color: #84939c;
}

.post-quote-memo.masked > p {
  color: #8a99a2;
}

.post-quote-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.post-quote-actions .status-pill {
  padding: 5px 9px;
}

.post-quote-open-badge,
.post-quote-mask-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

.post-quote-open-badge {
  border: 1px solid #e5c670;
  background: #fff4cf;
  color: #76580e;
}

.post-quote-open-badge.private {
  border-color: #bcded1;
  background: var(--mint-soft);
  color: var(--mint-deep);
}

.post-quote-mask-badge {
  border: 1px solid #dce4e8;
  background: #f3f6f7;
  color: #7a8b95;
}

.post-quote-select-button {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 11px;
  box-shadow: 0 7px 15px rgba(25, 82, 116, .17);
}

.post-quote-empty {
  padding: 18px;
  background: #f8fbfd;
}

@media (max-width: 1020px) {
  .post-quote-card {
    grid-template-columns: minmax(180px, .8fr) minmax(270px, 1.2fr);
  }

  .post-quote-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  .post-quote-board-head {
    display: block;
    padding: 19px 17px 17px;
  }

  .post-quote-board-head h2 {
    font-size: 20px;
  }

  .post-quote-security {
    display: inline-flex;
    margin-top: 10px;
  }

  .post-quote-list {
    gap: 10px;
    padding: 10px;
  }

  .post-quote-card,
  .post-quote-card.is-selected {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .post-quote-card.is-selected {
    padding-top: 34px;
  }

  .post-quote-selected-ribbon {
    left: 14px;
  }

  .post-quote-person-line b {
    max-width: 170px;
  }

  .post-quote-condition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-quote-condition {
    min-width: 0;
  }

  .post-quote-memo {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .post-quote-memo > span {
    width: max-content;
  }

  .post-quote-memo > p {
    overflow: visible;
    white-space: normal;
  }

  .post-quote-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .post-quote-actions form,
  .post-quote-select-button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .post-quote-condition-grid {
    grid-template-columns: 1fr;
  }

  .post-quote-person-copy > small {
    gap: 4px;
    font-size: 8px;
  }
}


/* --------------------------------------------------------------------------
   Terms and policy pages — compact playful design
---------------------------------------------------------------------------- */
.terms-page-hero.page-hero.compact {
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 211, 107, .2), transparent 13rem),
    radial-gradient(circle at 6% 105%, rgba(153, 227, 203, .16), transparent 12rem),
    linear-gradient(135deg, #173f5b, #286f8d);
}

.terms-page-hero .shell {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.terms-page-hero .shell::after {
  content: "";
  position: absolute;
  right: 45px;
  bottom: -29px;
  width: 104px;
  height: 104px;
  border: 18px solid rgba(255, 255, 255, .04);
  border-radius: 50%;
  pointer-events: none;
}

.terms-hero-emoji {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: 17px;
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 10px 24px rgba(4, 31, 48, .17);
  font-size: 25px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.terms-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.terms-page-hero .eyebrow {
  display: block;
  margin: 0 0 2px;
  color: #c2ebf8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
}

.terms-page-hero h1 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 26px;
  line-height: 1.24;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terms-page-hero p {
  margin: 4px 0 0;
  color: #d8ebf3;
  font-size: 10px;
  line-height: 1.5;
}

.terms-hero-decor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 4px;
}

.terms-hero-decor span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  font-size: 16px;
  box-shadow: 0 7px 16px rgba(4, 31, 48, .11);
}

.terms-hero-decor span:nth-child(2) {
  transform: translateY(-5px);
}

.terms-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.terms-hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #e5f2f7;
  font-size: 9px;
  font-weight: 750;
}

.terms-hero-back.button {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 8px 12px;
  border-color: rgba(255, 255, 255, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 10px;
  backdrop-filter: blur(8px);
}

.terms-hero-back.button:hover {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.terms-list-shell,
.terms-detail-shell {
  padding-top: 24px;
  padding-bottom: 62px;
}

.terms-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 0 3px;
}

.terms-list-heading > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.terms-section-emoji {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dae8ef;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff9e9, #fff);
  font-size: 18px;
  box-shadow: 0 7px 17px rgba(24, 59, 86, .07);
}

.terms-list-heading strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.terms-list-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.terms-count-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #d7e5ec;
  border-radius: 999px;
  background: #fff;
  color: #5f7685;
  font-size: 9px;
  font-weight: 850;
  box-shadow: var(--shadow-xs);
}

.policy-list.terms-policy-list {
  display: grid;
  gap: 9px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.policy-list.terms-policy-list > .terms-policy-card {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  padding: 14px 14px 14px 16px;
  border: 1px solid #dce7ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 9px 23px rgba(24, 59, 86, .055);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.policy-list.terms-policy-list > .terms-policy-card:last-child {
  border: 1px solid #dce7ed;
}

.policy-list.terms-policy-list > .terms-policy-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #78b6d7;
}

.policy-list.terms-policy-list > .terms-policy-card:hover {
  transform: translateY(-2px);
  border-color: #bdd6e4;
  background: #fff;
  box-shadow: 0 14px 29px rgba(24, 59, 86, .09);
}

.terms-policy-card.terms-policy-service::before { background: #72acd2; }
.terms-policy-card.terms-policy-privacy::before { background: #6fc2a8; }
.terms-policy-card.terms-policy-contact::before { background: #a48bdc; }
.terms-policy-card.terms-policy-point::before { background: #e7b94d; }
.terms-policy-card.terms-policy-marketing::before { background: #e696a1; }

.terms-policy-emoji {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #dfebf0;
  border-radius: 16px;
  background: #f3f8fb;
  font-size: 23px;
  line-height: 1;
}

.terms-policy-service .terms-policy-emoji { background: #edf7fd; }
.terms-policy-privacy .terms-policy-emoji { background: #edf9f5; }
.terms-policy-contact .terms-policy-emoji { background: #f5f1fd; }
.terms-policy-point .terms-policy-emoji { background: #fff8e8; }
.terms-policy-marketing .terms-policy-emoji { background: #fff1f3; }

.terms-policy-copy {
  min-width: 0;
}

.terms-policy-topline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.policy-list.terms-policy-list .terms-policy-type {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #78909f;
  font-size: 9px;
  font-weight: 850;
}

.policy-list.terms-policy-list .terms-requirement {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}

.policy-list.terms-policy-list .terms-requirement.is-required {
  background: #eaf5fc;
  color: #2d739c;
}

.policy-list.terms-policy-list .terms-requirement.is-optional {
  background: #fff5dd;
  color: #9b6b16;
}

.policy-list.terms-policy-list h2 {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.38;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.policy-list.terms-policy-list p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 11px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.policy-list.terms-policy-list p span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}

.terms-policy-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #e0e9ee;
  border-radius: 12px;
  background: #f8fbfc;
  color: #8aa0ae;
  transition: .18s ease;
}

.terms-policy-arrow .ui-icon {
  width: 15px;
  height: 15px;
}

.terms-policy-card:hover .terms-policy-arrow {
  border-color: #c8dce7;
  background: #edf6fb;
  color: var(--blue);
  transform: translateX(2px);
}

.terms-list-tip,
.terms-reading-guide {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #e4dfc8;
  border-radius: 17px;
  background: linear-gradient(135deg, #fff9e9, #fffdf8);
  box-shadow: 0 8px 19px rgba(112, 87, 30, .045);
}

.terms-list-tip > span,
.terms-reading-guide > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .82);
  font-size: 18px;
}

.terms-list-tip p,
.terms-reading-guide p {
  margin: 0;
  color: #71818b;
  font-size: 10px;
  line-height: 1.6;
}

.terms-list-tip strong,
.terms-reading-guide strong {
  color: #4e626f;
}

.terms-reading-guide {
  margin: 0 0 12px;
  border-color: #d8e7dd;
  background: linear-gradient(135deg, #effaf6, #fff);
}

.terms-reading-guide strong {
  display: block;
  margin-bottom: 2px;
  color: #3c6256;
  font-size: 12px;
}

.policy-content.terms-policy-content {
  position: relative;
  margin-bottom: 15px;
  padding: 27px 28px 32px;
  border: 1px solid #dce7ed;
  border-radius: 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(145deg, #e1edf2, #f4ead2) border-box;
  color: #314958;
  font-size: 13px;
  line-height: 1.92;
  box-shadow: 0 13px 30px rgba(24, 59, 86, .065);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.policy-content.terms-policy-content::before {
  content: "📖";
  position: absolute;
  top: -13px;
  right: 20px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #dce7ed;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  box-shadow: 0 7px 17px rgba(24, 59, 86, .08);
}

.terms-detail-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.terms-detail-actions .button {
  min-height: 41px;
  border-radius: 13px;
}

@media (max-width: 700px) {
  .terms-page-hero .shell {
    min-height: 92px;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 14px;
  }

  .terms-page-hero .shell::after,
  .terms-hero-decor {
    display: none;
  }

  .terms-hero-emoji {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    font-size: 20px;
  }

  .terms-page-hero h1 {
    font-size: 19px;
  }

  .terms-page-hero p {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .terms-hero-meta {
    gap: 4px;
    margin-top: 4px;
  }

  .terms-hero-meta span {
    min-height: 20px;
    padding: 2px 6px;
    font-size: 8px;
  }

  .terms-hero-back.button {
    display: none;
  }

  .terms-list-shell,
  .terms-detail-shell {
    width: calc(100% - 18px);
    padding-top: 15px;
    padding-bottom: 86px;
  }

  .terms-list-heading {
    margin-bottom: 9px;
  }

  .terms-list-heading p {
    display: none;
  }

  .terms-section-emoji {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
    font-size: 16px;
  }

  .terms-list-heading strong {
    font-size: 14px;
  }

  .policy-list.terms-policy-list {
    gap: 7px;
  }

  .policy-list.terms-policy-list > .terms-policy-card {
    min-height: 82px;
    grid-template-columns: 43px minmax(0, 1fr) 29px;
    gap: 10px;
    padding: 11px 10px 11px 13px;
    border-radius: 17px;
  }

  .terms-policy-emoji {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    font-size: 20px;
  }

  .policy-list.terms-policy-list h2 {
    font-size: 14px;
  }

  .policy-list.terms-policy-list p {
    gap: 3px 8px;
    margin-top: 4px;
    font-size: 8px;
  }

  .terms-policy-arrow {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }

  .terms-list-tip,
  .terms-reading-guide {
    align-items: flex-start;
    padding: 11px 12px;
    border-radius: 15px;
  }

  .terms-list-tip > span,
  .terms-reading-guide > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 11px;
    font-size: 15px;
  }

  .policy-content.terms-policy-content {
    padding: 22px 17px 25px;
    border-radius: 18px;
    font-size: 11px;
    line-height: 1.86;
    word-break: normal;
  }

  .policy-content.terms-policy-content::before {
    top: -11px;
    right: 13px;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    font-size: 14px;
  }

  .terms-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .terms-detail-actions .button {
    min-width: 0;
    padding: 9px 8px;
    font-size: 9px;
  }
}