@font-face { font-family: 'Moa Fit'; font-style: normal; font-weight: 400; src: local('Malgun Gothic'), local('MalgunGothic'); size-adjust: 91%; ascent-override: 127.5%; descent-override: 31.9%; line-gap-override: 0%; }
@font-face { font-family: 'Moa Fit'; font-style: normal; font-weight: 700; src: local('Malgun Gothic Bold'), local('MalgunGothicBold'), local('Malgun Gothic'); size-adjust: 91%; ascent-override: 127.5%; descent-override: 31.9%; line-gap-override: 0%; }
:root {
  --brand: #4B3BF2; --brand-dark: #3A2AD8; --brand-soft: #F0EEFE;
  --brand-band: #8176F6;
  --price: #111111; --sale: #E3242B; --sale-soft: #FDEEEE; --promise: #08803A; --star: #FFA800;
  --t1: #111111; --t2: #333333; --t3: #767676; --t4: #A3A3A3;
  --t3-on2: #666666; --warn: #B3261E;
  --line1: #E5E5E5; --line2: #CCCCCC;
  --bg1: #FFFFFF; --bg2: #F5F6F8; --bg3: #F0F0F0; --dark: #222222;
  --sh-float: 0 2px 6px rgba(0, 0, 0, .2); --sh-pop: 0 4px 16px rgba(0, 0, 0, .16); --dim: rgba(0, 0, 0, .4); --dim-soft: rgba(0, 0, 0, .12);
  --font: 'Noto Sans KR', 'Moa Fit', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Malgun Gothic', sans-serif;
  --noimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CCCCCC' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4v8l-8 4-8-4zM4 8l8 4 8-4M12 12v8'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg1); color: var(--t2); font-family: var(--font); font-size: 14px; line-height: 20px; font-weight: 400; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { border: 0; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: 14px; color: inherit; }
button { cursor: pointer; }
b, strong { font-weight: 700; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg1); padding: 10px 12px; border: 2px solid var(--brand); }
.skip:focus { left: 8px; top: 8px; }
.gray { color: var(--t3); }
.ico { display: block; flex: 0 0 auto; }
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.link { color: var(--brand); }
a.link:hover { text-decoration: underline; }
.wrap { max-width: 1060px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.ph { display: block; position: relative; background: var(--bg2); overflow: hidden; }
.ph.ld { background: var(--bg1); }
.ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ph.ph-x, .ph.img-x { background: var(--bg2) var(--noimg) center / 32px 32px no-repeat; }
.has-noimg .ph.ph-x, .has-noimg .ph.img-x { background: var(--bg2) url(/static/img/empty/noimage.webp) center / 60% no-repeat; }
.ph.img-x img { visibility: hidden; }
.badge, .soon { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 2px; font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.b-ship { background: var(--brand-soft); color: var(--brand-dark); }
.b-gray, .soon { background: var(--bg2); color: var(--t2); }
.b-dark { background: var(--dark); color: var(--bg1); }
.soon { margin-left: 8px; letter-spacing: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.btn .ico { width: 16px; height: 16px; }
.btn-l { height: 48px; font-size: 16px; line-height: 24px; }
.btn-s { height: 32px; padding: 0 12px; font-size: 12px; line-height: 18px; }
.btn-main { background: var(--brand); border-color: var(--brand); color: var(--bg1); }
.btn-main:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-sub { background: var(--bg1); border-color: var(--brand); color: var(--brand); }
.btn-sub:hover, .btn-sub[aria-pressed="true"] { background: var(--brand-soft); }
.btn-gray { background: var(--bg2); color: var(--t2); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--brand); font-size: 12px; line-height: 18px; text-decoration: underline; }
.util { background: var(--bg3); height: 27px; font-size: 12px; line-height: 18px; color: var(--t2); }
.util-in { display: flex; justify-content: space-between; align-items: stretch; height: 27px; }
.util-l, .util-r { display: flex; }
.util a { display: inline-flex; align-items: center; padding: 0 4px; }
.util-l a:first-child { padding-left: 0; }
.util-r a:last-child { padding-right: 0; }
.util-l a + a, .util-r a + a { margin-left: 8px; }
.util a:hover { color: var(--brand); }
.hd { background: var(--bg1); border-bottom: 1px solid var(--line1); position: relative; z-index: 55; }
.hd-in { display: grid; grid-template-columns: 48px auto minmax(0, 1fr) auto; grid-template-areas: "menu logo . icons" "sb sb sb sb"; align-items: center; column-gap: 16px; row-gap: 8px; padding-top: 0; padding-bottom: 12px; padding-left: 0; }
.wrap.hd-in { padding-left: 0; }
.hd-in > .sbox { margin-left: 16px; }
.logo { grid-area: logo; display: flex; align-items: center; height: 48px; min-width: 44px; }
.logo-txt { display: inline-flex; align-items: center; gap: 4px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--brand); letter-spacing: -0.5px; white-space: nowrap; }
.logo-mark { width: 24px; height: 24px; }
.logo-gray { font-size: 20px; line-height: 28px; color: var(--t3); letter-spacing: 0; }
.hd-icons { grid-area: icons; display: flex; align-items: center; gap: 4px; margin-right: -9px; }
.hd-ico { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--t2); }
.hd-ico .ico { width: 26px; height: 26px; }
.hd-ico:hover { color: var(--brand); }
.hd-ico-lbl { display: none; margin-top: 4px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.hd-cnt { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: var(--bg1); font-size: 12px; line-height: 18px; font-weight: 700; text-align: center; }
.hd-cnt[hidden] { display: none; }
.sbox { grid-area: sb; position: relative; display: flex; align-items: stretch; height: 40px; border: 2px solid var(--brand); border-radius: 0; background: var(--bg1); }
.sbox > .sbox-cat, .sbox > .sbox-q, .sbox > .sbox-go { margin-top: -2px; margin-bottom: -2px; }
.kbd .sbox:focus-within::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--brand); pointer-events: none; }
.sbox-cat { position: relative; flex: 0 0 120px; display: flex; align-items: center; }
.sbox-cat::after { content: ''; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line1); }
.sbox-cat select { appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; background: transparent; height: 100%; width: 100%; padding: 0 32px 0 12px; font-size: 14px; color: var(--t2); cursor: pointer; outline-offset: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbox-cat .ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--t4); }
.sbox-q { flex: 1; min-width: 0; display: flex; }
.sbox-q input { width: 100%; border: 0; outline: 0; padding: 0 12px; font-size: 14px; color: var(--t1); background: transparent; text-overflow: ellipsis; }
.sbox-q input::placeholder { color: var(--t3); }
.sbox-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sbox-go { flex: 0 0 48px; border: 0; background: transparent; color: var(--brand); display: flex; align-items: center; justify-content: center; padding: 0; }
.sbox-go .ico { width: 24px; height: 24px; }
.sug { position: absolute; top: calc(100% + 2px); left: -2px; right: -2px; z-index: 80; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 0; border: 1px solid var(--line2); background: var(--bg1); box-shadow: var(--sh-pop); text-align: left; }
.sug[hidden] { display: none; }
.sug-h { margin: 4px 12px 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line1); font-size: 12px; line-height: 18px; font-weight: 700; color: var(--t1); }
.sug-o { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 12px; font-size: 13px; line-height: 18px; color: var(--t2); cursor: pointer; }
.sug-o[aria-selected="true"] { background: var(--bg2); }
.sug-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-hl { color: var(--brand); font-weight: 700; }
.sug-tag { flex: 0 0 auto; padding-right: 8px; font-size: 12px; line-height: 18px; color: var(--t3); }
.sug-x { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--t3); display: flex; align-items: center; justify-content: center; }
.sug-x:hover { color: var(--t1); }
.sug-x .ico { width: 12px; height: 12px; }
.sug-foot { display: flex; justify-content: flex-start; margin-top: 4px; padding: 0 4px; border-top: 1px solid var(--line1); background: var(--bg2); }
.sug-clear { min-height: 32px; padding: 0 8px; border: 0; background: transparent; font-size: 12px; line-height: 18px; color: var(--t3); }
.sug-clear:hover { color: var(--t1); text-decoration: underline; }
.cat-menu { grid-area: menu; position: relative; height: 48px; }
.menu-btn { width: 48px; height: 48px; border: 0; border-radius: 0; background: var(--brand); color: var(--bg1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.menu-btn:hover, .cat-menu.open .menu-btn { background: var(--brand-dark); }
.menu-btn .ico { width: 24px; height: 24px; }
.menu-lbl { display: none; font-size: 12px; line-height: 18px; font-weight: 700; }
.cat-panel { display: none; position: absolute; left: 0; top: 100%; width: 220px; background: var(--bg1); border-right: 1px solid var(--line1); border-bottom: 1px solid var(--line1); z-index: 60; }
.cat-menu:hover .cat-panel, .cat-menu.open .cat-panel { display: block; }
.js .cat-menu:hover:not(.open) .cat-panel { display: none; }
html:not(.js) .cat-menu:focus-within .cat-panel { display: block; }
html:not(.js) .cm-row:focus-within > .cm-sub { display: block; }
.cm-top, .cm-dim, .cm-sub-more { display: none; }
.cm-list { padding: 4px 0; }
.cm-link { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 12px; font-size: 13px; line-height: 18px; color: var(--t2); }
.cm-ico { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--t2); }
.cm-ico .ico, .cm-ico img { width: 20px; height: 20px; }
.cm-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-link > .ico-tri { flex: 0 0 6px; width: 6px; height: 8px; color: var(--t2); }
.cm-row:hover > .cm-link, .cm-row.on > .cm-link { color: var(--brand); }
.cm-row:hover > .cm-link .cm-ico, .cm-row.on > .cm-link .cm-ico, .cm-row:hover > .cm-link > .ico, .cm-row.on > .cm-link > .ico { color: var(--brand); }
.cm-first { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line1); }
.cm-sub { display: none; position: absolute; left: 100%; top: 0; width: max-content; min-width: 200px; max-width: calc(100vw - 260px); max-height: 100%; overflow-y: auto; background: var(--bg1); border: 1px solid var(--line1); border-left: 0; padding: 12px 24px; }
.cm-row:hover > .cm-sub { display: block; }
.js .cm-row:hover:not(.on) > .cm-sub { display: none; }
.js .cm-row.on > .cm-sub { display: block; }
.cm-sub-h { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line1); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t1); white-space: nowrap; }
.cm-sub-h .ico { width: 12px; height: 12px; color: var(--t3); }
.cm-sub-h:hover { color: var(--brand); }
.cm-sub-list { display: grid; grid-template-columns: repeat(1, minmax(96px, max-content)); column-gap: 32px; }
.c2 .cm-sub-list { grid-template-columns: repeat(2, minmax(96px, max-content)); }
.c3 .cm-sub-list { grid-template-columns: repeat(3, minmax(96px, max-content)); }
.cm-sub-list a { display: block; padding: 6px 0; font-size: 13px; line-height: 18px; color: var(--t2); word-break: keep-all; }
.cm-sub-list a:hover { color: var(--brand); text-decoration: underline; }
.cm-sub-empty { padding: 8px 0; font-size: 13px; line-height: 18px; color: var(--t3); white-space: nowrap; }
.quick { display: none; }
.banner { position: relative; background: var(--bg1); }
.bn-in { position: relative; aspect-ratio: 704 / 220; overflow: hidden; background: var(--brand-soft); }
.bn-slides { position: absolute; inset: 0; }
.bn-slide { position: absolute; inset: 0; display: none; color: var(--t1); }
.bn-slide.on { display: block; }
.bn-art, .bn-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bn-art img { object-fit: cover; }
.bn-txt { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); width: calc(50% - 32px); display: flex; flex-direction: column; }
.bn-kicker { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--brand); }
.bn-title { margin-top: 4px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--t1); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-desc { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-dots { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 0; z-index: 2; }
.bn-dot { position: relative; width: 24px; height: 24px; border: 0; border-radius: 0; padding: 0; background: transparent; }
.bn-dot::before { content: ''; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--line2); }
.bn-dot.on::before { background: var(--t2); }
.bn-tabs { display: none; }
.home-cols { display: flex; gap: 24px; align-items: flex-start; padding-top: 24px; }
.home-main { flex: 1; min-width: 0; }
.rail { display: none; }
.asof { margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--t3); }
.empty-box { padding: 48px 0; text-align: center; }
.empty-note { font-size: 14px; line-height: 20px; color: var(--t3); }
.empty-pic { display: block; width: 160px; height: 160px; margin: 0 auto 16px; object-fit: contain; }
.strip { display: flex; align-items: center; gap: 12px; height: 80px; margin: 0 0 40px; padding: 0 16px; border-radius: 0; background: var(--brand-soft); color: var(--t1); overflow: hidden; }
.strip-txt { flex: 1; min-width: 0; display: flex; align-items: center; }
.strip-t { min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-pic { flex: 0 0 auto; display: flex; align-items: center; height: 100%; margin-left: -8px; }
.strip-pic img { display: block; height: 72px; width: auto; }
.strip-t .soon { margin-left: 4px; }
.strip-go { flex: 0 0 auto; color: var(--t2); }
.strip-go .ico { width: 20px; height: 20px; }
.strip:hover .strip-t { color: var(--brand); }
.band { position: relative; display: flex; align-items: center; gap: 12px; height: 80px; margin: 0 0 40px; padding: 0 16px; border-radius: 0; background: var(--brand-soft); overflow: hidden; }
.band-go::after { content: ''; position: absolute; inset: 0; }
.band:hover .band-t { color: var(--brand); }
.band .strip-pic { margin-left: -8px; }
.band-txt { flex: 1; min-width: 0; }
.band-t { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcband .band-t { font-size: 16px; }
.ab-ex { position: relative; z-index: 1; display: flex; flex-wrap: wrap; column-gap: 12px; height: 18px; margin-top: 4px; overflow: hidden; }
.ab-ex li { flex: 0 0 auto; white-space: nowrap; }
.ab-ex a { font-size: 12px; line-height: 18px; color: var(--t2); }
.ab-ex a:hover { color: var(--brand); text-decoration: underline; }
.cpband { margin: 0 0 40px; padding: 16px; background: var(--bg2); scroll-margin-top: 80px; }
.cp-notice { margin: 0 0 12px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--brand); word-break: keep-all; }
.cpband .sh-head { margin-bottom: 8px; }
.cp-search { display: block; width: 100%; height: 75px; border: 0; background: var(--bg1); }
.cp-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cp-k { margin-right: 4px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t2); }
.cp-picks a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg1); font-size: 13px; line-height: 18px; color: var(--t2); white-space: nowrap; }
.cp-picks a:hover { border-color: var(--brand); color: var(--brand); }
.cp-best-h { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; margin: 4px 0 8px; }
.cp-bt { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--t1); }
.cp-asof { font-size: 12px; line-height: 18px; color: var(--t3-on2); }
.cp-best { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.cp-best a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg1); color: var(--t1); }
.cp-best a:hover { border-color: var(--brand); }
.cpb-k { font-size: 12px; line-height: 18px; font-weight: 700; color: var(--brand); }
.cpb-n { font-size: 14px; line-height: 20px; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.cpb-r { font-size: 12px; line-height: 18px; color: var(--t3); }
.cpb-go { margin-top: auto; padding-top: 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--brand); }
.sb-nums { display: flex; gap: 12px; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 18px; color: var(--t2); }
.sb-nums b { color: var(--t1); }
.band .strip-pic img { -webkit-mask-image: radial-gradient(closest-side, var(--t1) 70%, transparent); mask-image: radial-gradient(closest-side, var(--t1) 70%, transparent); }
.band-go { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.band-go .ico { width: 16px; height: 16px; }
.caticons { container-type: inline-size; margin: 0 0 40px; }
.caticons ul { --ci-n: 4; display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.caticons ul::-webkit-scrollbar { display: none; }
.caticons li { flex: 0 0 calc(100% / var(--ci-n)); min-width: 0; scroll-snap-align: start; }
@container (min-width: 380px) { .caticons ul { --ci-n: 5; } }
@container (min-width: 456px) { .caticons ul { --ci-n: 6; } }
@container (min-width: 532px) { .caticons ul { --ci-n: 7; } }
@container (min-width: 608px) { .caticons ul { --ci-n: 8; } }
@container (min-width: 684px) { .caticons ul { --ci-n: 9; } }
@container (min-width: 760px) { .caticons ul { --ci-n: 10; } }
@container (min-width: 836px) { .caticons ul { --ci-n: 11; } }
@container (min-width: 912px) { .caticons ul { --ci-n: 12; } }
@container (min-width: 988px) { .caticons ul { --ci-n: 13; } }
.caticons a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 2px; text-align: center; }
.ci-circle { width: 56px; height: 56px; border-radius: 999px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--t2); overflow: hidden; }
.ci-circle img { width: 40px; height: 40px; object-fit: contain; }
.ci-circle .ico { width: 24px; height: 24px; }
.caticons a:hover .ci-circle { background: var(--brand-soft); color: var(--brand); }
.ci-name { max-width: 100%; font-size: 12px; line-height: 16px; color: var(--t2); letter-spacing: -0.2px; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-empty .ci-circle, .ci-empty .ci-name { color: var(--t4); }
.ci-body { --nav: 40px; position: relative; }
.ci-nav { margin-top: 8px; }
.ci-next { right: -12px; }
.ci-prev { left: -12px; }
@media (max-width: 999px) { .caticons li { flex-basis: calc(100% / (var(--ci-n) + .5)); } }
@media screen and (max-width: 599px) { .ci-nav { margin-top: 4px; } }
@media screen and (min-width: 1000px) { .ci-nav { display: none !important; } }
.shelf { margin: 0 0 40px; }
.shelf[hidden] { display: none; }
.sh-head { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 12px; }
.sh-title { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--t1); white-space: nowrap; }
.sh-sub { min-width: 0; font-size: 14px; line-height: 20px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sub::before { content: ''; display: inline-block; width: 1px; height: 12px; margin-right: 8px; background: var(--line1); vertical-align: -1px; }
@media (max-width: 599px) { .sh-sub { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; } }
.sh-right { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-left: 8px; flex: 0 0 auto; }
.sh-pg { font-size: 12px; line-height: 18px; color: var(--t3); }
.sh-pg b { color: var(--t1); }
.sh-pg[hidden] { display: none; }
.sh-more { display: inline-flex; align-items: center; font-size: 12px; line-height: 18px; color: var(--t3); white-space: nowrap; }
.sh-more .ico { width: 12px; height: 12px; }
.sh-more:hover { color: var(--brand); }
.sh-body { --cols: 3; --gap: 16px; --nav: 40px; position: relative; }
.sh-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sh-track::-webkit-scrollbar { display: none; }
.sh-track > .pcard { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); scroll-snap-align: start; min-width: 0; }
.sh-nav { position: absolute; top: 0; width: var(--nav); height: var(--nav); margin-top: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) / 2 - var(--nav) / 2); border: 1px solid var(--line1); border-radius: 999px; background: var(--bg1); color: var(--brand); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5; }
.sh-nav .ico { width: 20px; height: 20px; }
.sh-nav:hover { border-color: var(--brand); }
.sh-next { right: -12px; }
.sh-prev { left: -12px; }
.sh-nav[hidden] { display: none; }
@media (max-width: 999px) { .sh-nav { box-shadow: var(--sh-float); } }
.home-main .sh-track .pc-img { padding: 8%; }
.home-main .sh-track .pc-title { height: 36px; font-size: 13px; line-height: 18px; }
.home-main .sh-track .pc-price strong { font-size: 16px; line-height: 24px; }
.pcard { min-width: 0; }
.pc-a { display: flex; flex-direction: column; color: var(--t2); }
.pc-img { aspect-ratio: 1 / 1; width: 100%; }
.pc-title { margin-top: 8px; height: 40px; font-size: 14px; line-height: 20px; color: var(--t2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; overflow-wrap: anywhere; }
.pc-a:hover .pc-title { text-decoration: underline; }
.pc-was { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--t4); text-decoration: line-through; }
.pc-price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; white-space: nowrap; }
.pc-was + .pc-price { margin-top: 0; }
.pc-price strong { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--price); }
.pc-rate { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--sale); }
.pc-seen { font-size: 12px; line-height: 18px; color: var(--t3); }
.pc-unit { font-size: 12px; line-height: 18px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-ship { margin-top: 8px; height: 20px; font-size: 12px; line-height: 20px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-promise { font-size: 12px; line-height: 18px; color: var(--promise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-rv { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--t3); }
.stars { display: inline-flex; }
.stars svg { width: 12px; height: 12px; fill: var(--star); }
.stars svg.off { fill: var(--line1); }
.td-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.td-tile > a { position: relative; display: flex; flex-direction: column; height: 172px; padding: 12px; border: 1px solid var(--line1); background: var(--bg1); overflow: hidden; }
.td-tile > a:hover { border-color: var(--line2); }
.td-w { grid-column: span 2; }
.td-w > a { flex-direction: row; gap: 8px; }
.td-txt { display: flex; flex-direction: column; min-width: 0; }
.td-w .td-txt { flex: 1; justify-content: center; padding-bottom: 32px; }
.td-name { font-size: 14px; line-height: 20px; color: var(--t2); }
.td-w .td-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.td-n .td-name { text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.td-tile > a:hover .td-name { text-decoration: underline; }
.td-img { flex: 0 0 auto; aspect-ratio: 1 / 1; }
.td-w .td-img { width: 144px; height: 144px; align-self: center; }
.td-n .td-img { width: 108px; height: 108px; margin: auto auto 0; }
.td-go { position: absolute; left: 12px; bottom: 12px; z-index: 1; width: 40px; height: 40px; background: var(--line2); color: var(--bg1); display: flex; align-items: center; justify-content: center; }
.td-go .ico { width: 16px; height: 16px; }
.td-n .td-txt { padding-right: 30px; }
.td-n .td-go { left: auto; bottom: auto; top: 8px; right: 10px; width: 24px; height: 24px; }
.td-n .td-go .ico { width: 12px; height: 12px; }
.td-tile > a:hover .td-go { background: var(--t4); }
.cbs { margin: 0 0 40px; }
.cbs-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--t1); }
.cbs-k { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--t1); }
.cbs-t { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--t1); }
.cbs-t em { font-style: normal; color: var(--brand); }
.cblock { display: grid; grid-template-columns: 37% minmax(0, 1fr); grid-template-areas: "side grid" "feat grid"; grid-template-rows: auto 1fr; column-gap: 16px; margin: 0 0 32px; scroll-margin-top: 80px; }
.cb-side { grid-area: side; min-width: 0; padding: 16px 16px 8px; background: var(--bg2); }
.cb-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cb-name { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--brand); word-break: keep-all; }
.cb-all { display: inline-flex; align-items: center; font-size: 12px; line-height: 18px; color: var(--t3); white-space: nowrap; }
.cb-all .ico { width: 12px; height: 12px; }
.cb-head:hover .cb-all { text-decoration: underline; }
.cb-subs-h { margin-top: 12px; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--t1); }
.cb-subs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cb-subs a { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 0; background: var(--bg1); font-size: 12px; line-height: 18px; color: var(--brand); white-space: nowrap; }
.cb-subs a:hover { border-color: var(--brand); }
.cb-feat { grid-area: feat; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 16px 16px; background: var(--bg2); color: var(--t2); }
.cb-feat-img { width: 100%; max-width: 200px; aspect-ratio: 1 / 1; margin: 0 auto; }
.cb-feat-img, .ph.cb-feat-img.ld { background: transparent; }
.cb-feat-img img { mix-blend-mode: multiply; }
.cb-feat-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-feat { position: relative; }
.cb-feat-txt strong { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--price); }
.cb-feat:hover .cb-title { text-decoration: underline; }
.cb-grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; align-content: start; min-width: 0; }
.cb-card { min-width: 0; }
.cb-card > a { display: flex; flex-direction: column; color: var(--t2); }
.cb-img { width: 140px; height: 140px; margin: 0 auto; }
.cb-title { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-price { display: flex; align-items: center; gap: 4px; margin-top: 4px; white-space: nowrap; }
.cb-price strong { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--price); }
.cb-card > a:hover .cb-title { text-decoration: underline; }
.chip, .r-near a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line1); border-radius: 999px; background: var(--bg1); font-size: 14px; line-height: 20px; color: var(--t2); white-space: nowrap; }
.chip:hover, .r-near a:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.rail-in { display: flex; flex-direction: column; gap: 8px; }
.rail-box { display: block; padding: 8px; border: 1px solid var(--line1); background: var(--bg1); font-size: 12px; line-height: 18px; color: var(--t2); text-align: center; }
.rail-box[hidden] { display: none; }
.rail-ai { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-ai-ico { width: 48px; height: 48px; border-radius: 999px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--t2); overflow: hidden; }
.rail-ai-ico img { width: 32px; height: 32px; }
.rail-ai b { color: var(--t1); }
.rail-ai:hover b { color: var(--brand); }
.rail-h { margin-bottom: 8px; }
.rail-h b, .rail-wish b { color: var(--brand); }
.rail-list { display: flex; flex-direction: column; gap: 8px; }
.rail-list a { display: block; }
.rail-list .ph { width: 80px; height: 80px; margin: 0 auto; border: 1px solid var(--line1); }
.rail-pg { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--t3); }
.rail-pg[hidden] { display: none; }
.rail-pg b { color: var(--t1); }
.rail-pg-btns { display: flex; }
.rail-pg button { width: 20px; height: 20px; border: 1px solid var(--line2); background: var(--bg1); padding: 0; display: flex; align-items: center; justify-content: center; color: var(--t2); }
.rail-pg button + button { border-left: 0; }
.rail-pg .ico { width: 12px; height: 12px; }
.rail-wish { display: flex; justify-content: space-between; align-items: center; }
.rail-top { align-self: center; width: 40px; height: 40px; border: 1px solid var(--line1); border-radius: 999px; background: var(--bg1); box-shadow: var(--sh-float); display: flex; align-items: center; justify-content: center; color: var(--t2); }
.rail-top:hover { color: var(--brand); }
.totop { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border: 1px solid var(--line1); border-radius: 999px; background: var(--bg1); box-shadow: var(--sh-float); display: flex; align-items: center; justify-content: center; color: var(--t2); z-index: 40; }
.js .totop { opacity: 0; pointer-events: none; transition: opacity .2s; }
.js .totop.on { opacity: 1; pointer-events: auto; }
.sidecats { display: none; }
.ft { margin-top: 48px; padding: 0 0 32px; border-top: 1px solid var(--line1); background: var(--bg1); }
.ft-linkbox { overflow: hidden; padding: 12px 0; border-bottom: 1px solid var(--line1); }
.ft-links { display: flex; flex-wrap: wrap; row-gap: 8px; margin-left: -25px; }
.ft-links li { display: flex; align-items: center; font-size: 12px; line-height: 18px; color: var(--t2); }
.ft-links li::before { content: ''; flex: 0 0 1px; width: 1px; height: 10px; margin: 0 12px; background: var(--line2); }
.ft-links a { display: inline-flex; align-items: center; min-height: 24px; }
.ft-links a:hover { text-decoration: underline; }
.ft-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.ft-col { min-width: 0; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; overflow-wrap: anywhere; }
.ft-biz div { display: flex; flex-wrap: wrap; column-gap: 8px; }
.ft-biz dt, .ft-k { color: var(--t2); }
.ft-biz dd { word-break: keep-all; overflow-wrap: anywhere; }
.ft-ftc { display: inline-flex; align-items: center; min-height: 24px; margin: -3px 0 -3px 4px; color: var(--t2); text-decoration: underline; vertical-align: middle; }
.ft-ftc .ico { width: 12px; height: 12px; }
.ft-ftc:hover { color: var(--brand); }
.ft-cs-h, .ft-deal-h { font-weight: 700; color: var(--t2); }
.ft-tel { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--t2); }
.ft-deal p + p { margin-top: 4px; }
.ft-mail { display: flex; flex-wrap: wrap; column-gap: 8px; margin-top: 4px; }
.ft-copy { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line1); font-size: 12px; line-height: 18px; color: var(--t3); }
.crumbbar { background: var(--bg2); font-size: 12px; line-height: 18px; color: var(--t2); }
.crumbbar .wrap { display: flex; align-items: center; min-height: 36px; }
.crumbbar ol, .pcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.crumbbar li, .pcrumb li { display: flex; align-items: center; }
.crumbbar a, .pcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
.crumbbar b, .pcrumb b { color: var(--t1); }
.cb-sep { margin: 0 4px; color: var(--t4); }
.cb-sep .ico { width: 12px; height: 12px; }
.crumbbar a:hover, .pcrumb a:hover { text-decoration: underline; }
.srp { display: block; padding-top: 16px; }
.results { flex: 1; min-width: 0; }
.r-title { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--t1); word-break: keep-all; overflow-wrap: anywhere; }
.r-title b { font-weight: 700; }
.r-cat { font-size: 24px; line-height: 32px; }
.r-in { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--t3); }
.r-cnt { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--t2); white-space: nowrap; }
.r-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 13px; line-height: 18px; }
.r-rel-h { color: var(--t2); }
.r-rel > a { display: inline-flex; align-items: center; min-height: 24px; color: var(--brand); white-space: nowrap; }
.r-rel > a:hover { text-decoration: underline; }
.csubs { margin: 16px 0 0; }
.cs-body { --nav: 40px; position: relative; }
.csubs .ci-circle { width: 48px; height: 48px; }
.caticons.csubs li { flex-basis: calc(100% / (var(--ci-n) + .5)); }
.ci-photo { background: var(--bg1); border: 1px solid var(--line1); }
.ci-photo picture { display: block; width: 100%; height: 100%; }
.ci-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-nav { margin-top: 4px; }
.cs-next { right: -12px; }
.cs-prev { left: -12px; }
.csubs .ci-circle .ico { width: 20px; height: 20px; color: var(--t4); }
.csubs a:hover .ci-photo { border-color: var(--brand); }
.csubs a:hover .ci-name { color: var(--brand); }
.r-tools { display: flex; flex-direction: column; margin-top: 16px; padding: 0 4px; border-top: 1px solid var(--line1); border-bottom: 1px solid var(--line1); background: var(--bg1); }
.srp-cat .r-tools .r-sort { order: -1; border-bottom: 1px solid var(--line1); }
.r-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.r-bar .r-size { margin-left: auto; }
.ftoggle { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg1); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t2); white-space: nowrap; }
.ftoggle::after { content: ''; position: absolute; left: -4px; right: -4px; top: -6px; bottom: -6px; }
.ftoggle:hover, .ftoggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.f-on { width: 6px; height: 6px; margin-left: 2px; border-radius: 999px; background: var(--brand); }
.tgl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; line-height: 18px; color: var(--t2); white-space: nowrap; }
.tgl-k { position: relative; flex: 0 0 36px; width: 36px; height: 20px; border-radius: 999px; background: var(--line2); }
.tgl-k::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--bg1); box-shadow: var(--sh-float); }
.tgl.on .tgl-k { background: var(--brand); }
.tgl.on .tgl-k::after { left: 18px; }
.r-size { position: relative; }
.r-size summary { display: flex; align-items: center; gap: 4px; min-height: 44px; list-style: none; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t2); white-space: nowrap; cursor: pointer; }
.r-size summary::-webkit-details-marker { display: none; }
.r-size[open] summary .ico { transform: rotate(180deg); }
.r-size ul { position: absolute; right: 0; top: 100%; min-width: 120px; background: var(--bg1); border: 1px solid var(--line1); box-shadow: var(--sh-pop); z-index: 20; }
.r-size li a { display: block; padding: 8px 12px; font-size: 13px; line-height: 18px; }
.r-size li a.on { color: var(--brand); font-weight: 700; }
.r-size li a:hover { background: var(--bg2); }
.r-sort { display: flex; flex-wrap: wrap; align-items: center; min-height: 40px; padding-bottom: 4px; }
.r-sort li { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--t2); }
.r-sort li + li::before { content: ''; flex: 0 0 1px; width: 1px; height: 12px; margin: 0 10px; background: var(--line2); }
.r-sort li a, .r-sort li > span { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.r-sort li a:hover { color: var(--t1); text-decoration: underline; }
.r-sort li.on > a:first-child { color: var(--brand); font-weight: 700; }
.r-sort .ico { width: 12px; height: 12px; }
.r-info { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 -16px 0 -8px; color: var(--t3); }
.r-info:hover { color: var(--brand); }
.r-dead .r-bar { opacity: .4; }
.r-dead .r-sort li > span { color: var(--t3); }
.r-dead .r-sort li.on > span { color: var(--brand); font-weight: 700; }
.f-off .fg { opacity: .4; }
.f-off .f-body, .f-off label, .f-off input, .f-off button { pointer-events: none; }
.r-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 8px; }
.r-chips ul { display: flex; flex-wrap: wrap; gap: 0 8px; }
.fchip { display: inline-flex; align-items: center; min-height: 40px; }
.fchip-in { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--brand); border-radius: 999px; background: var(--bg1); font-size: 13px; line-height: 18px; color: var(--brand); white-space: nowrap; }
.fchip-in .ico { width: 12px; height: 12px; }
.fchip:hover .fchip-in { background: var(--brand-soft); }
.r-reset { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; line-height: 18px; color: var(--t3); text-decoration: underline; }
.r-reset:hover { color: var(--t1); }
.r-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); row-gap: 16px; margin: 16px -8px 0; overflow: clip; }
.r-grid > .pcard { padding: 0 8px 16px; border-bottom: 1px solid var(--line1); }
.r-grid > .pcard:last-child { position: relative; }
.r-grid > .pcard:last-child::after { content: ''; position: absolute; left: 100%; bottom: -1px; width: 100vw; height: 1px; background: var(--line1); }
.r-grid .pc-img img { padding: 6%; }
.pc-a { position: relative; }
.pc-rank { position: absolute; left: 6px; top: 0; z-index: 1; width: 20px; height: 24px; padding-top: 2px; background: var(--sale); color: var(--bg1); font-size: 12px; line-height: 18px; font-weight: 700; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.r-empty { padding: 40px 0 32px; text-align: center; font-size: 14px; line-height: 20px; color: var(--t2); }
.r-empty .empty-pic { width: 64px; height: 64px; margin: 0 auto 12px; }
.r-empty-h { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--t1); word-break: keep-all; overflow-wrap: anywhere; }
.r-empty-h b { color: var(--brand); }
.r-empty-sub { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; }
.r-empty-tips { display: inline-block; max-width: 320px; margin-top: 8px; padding-left: 16px; list-style: disc; text-align: left; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; }
.r-empty-tips li + li { margin-top: 2px; }
.r-empty-go { margin-top: 16px; }
.r-empty .r-near { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.r-empty .r-near a { color: var(--t2); }
.r-note { margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; }
.landing { padding-top: 24px; }
.landing .caticons { margin-top: 24px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 32px 0 16px; }
.pg-arr, .pg-n { min-width: 32px; height: 32px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; font-size: 14px; line-height: 20px; color: var(--t2); }
.pg-arr { border-color: var(--line2); background: var(--bg1); }
.pg-arr .ico { width: 16px; height: 16px; }
.pg-arr.off { color: var(--t4); border-color: var(--line1); }
.pg-n.on { border-color: var(--brand); color: var(--brand); font-weight: 700; }
a.pg-n:hover, a.pg-arr:hover { border-color: var(--t2); color: var(--t1); }
.filters { display: none; }
.f-dim { display: none; }
@media (max-width: 599px) {
  .filters.open, html:not(.js) .filters:target { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; width: 320px; max-width: 88vw; background: var(--bg1); box-shadow: var(--sh-pop); }
  .filters.open + .f-dim { display: block; position: fixed; inset: 0; z-index: 75; background: var(--dim-soft); }
  html.filter-open, html.filter-open body { overflow: hidden; }
}
.f-top { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; height: 44px; padding-left: 16px; border-bottom: 1px solid var(--line1); }
.f-h { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--t1); }
.fclose { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--t2); }
.fclose:hover { color: var(--brand); }
.f-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.fg { padding: 12px 0; border-bottom: 1px solid var(--line1); }
.fg:last-child { border-bottom: 0; }
.fg-h { margin-bottom: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--t1); }
.fg li { font-size: 13px; line-height: 18px; color: var(--t2); }
.fchk { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.fchk .box { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--line2); background: var(--bg1); display: inline-flex; align-items: center; justify-content: center; }
.fchk .box .ico { width: 10px; height: 10px; }
.fchk.on { color: var(--brand); font-weight: 700; }
.fchk.on .box { background: var(--brand); border-color: var(--brand); color: var(--bg1); }
a.fchk:hover { color: var(--brand); }
.fcat a, .fcat span { display: flex; align-items: center; min-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcat a:hover { color: var(--brand); }
.fcat a.on { color: var(--brand); font-weight: 700; }
.fmore summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; list-style: none; font-size: 13px; line-height: 18px; color: var(--brand); cursor: pointer; }
.fmore summary::-webkit-details-marker { display: none; }
.fmore summary .ico { width: 12px; height: 12px; }
.fmore[open] summary { display: none; }
.fprice { margin-top: 8px; }
.fprice-in { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fprice label { flex: 1; min-width: 0; }
.fprice input { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 0; font-size: 13px; -moz-appearance: textfield; }
.fprice input:hover { border-color: var(--t3); }
.fprice input:focus { border-color: var(--brand); outline: 1px solid var(--brand); outline-offset: -2px; }
.fprice input::-webkit-outer-spin-button, .fprice input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fprice button { flex: 0 0 auto; height: 32px; padding: 0 12px; border: 1px solid var(--brand); border-radius: 2px; background: var(--brand); color: var(--bg1); font-size: 13px; font-weight: 700; }
.fprice button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.fprice :disabled { cursor: default; }
.f-note { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--t2); }
.stickyhd { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--bg1); border-bottom: 1px solid var(--line1); box-shadow: var(--sh-float); }
.stuck .stickyhd { display: block; }
.sth-menu { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 0; padding: 0; background: var(--brand); color: var(--bg1); display: flex; align-items: center; justify-content: center; }
.sth-menu:hover, .sth-menu[aria-expanded="true"] { background: var(--brand-dark); }
.cat-menu.from-sticky .cat-panel { position: fixed; }
.sth-in { display: flex; align-items: flex-start; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.sth-logo { flex: 0 0 auto; height: 40px; display: flex; align-items: center; }
.sth-right .sbox { max-width: 552px; }
.sth-right { flex: 1; min-width: 0; }
.sth-icons { flex: 0 0 auto; display: flex; gap: 4px; margin: -2px -9px -2px 0; }
.sth-rel { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; line-height: 18px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.sth-rel::-webkit-scrollbar { display: none; }
.sth-rel-h { color: var(--t2); }
.sth-rel a { color: var(--brand); }
.pcrumb { padding: 4px 0 8px; font-size: 12px; line-height: 18px; color: var(--t3); }
.pdp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.pdp-gallery { display: flex; gap: 8px; align-items: flex-start; }
.pdp-thumbs { display: flex; flex-direction: column; flex: 0 0 48px; gap: 8px; }
.pdp-thumbs button { display: block; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line1); background: var(--bg1); }
.pdp-thumbs button:hover { border-color: var(--t3); }
.pdp-thumbs li.on button { border: 2px solid var(--brand); }
.pdp-th { width: 100%; height: 100%; }
.pdp-thumbs.one { display: none; }
.pdp-main { flex: 1; min-width: 0; }
.pdp-mainimg { aspect-ratio: 1 / 1; width: 100%; }
.pdp-cat { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -10px 0; font-size: 12px; line-height: 18px; color: var(--brand); }
.pdp-cat:hover { text-decoration: underline; }
.pdp-titlerow { display: flex; gap: 4px; align-items: flex-start; }
.pdp-title { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--t1); word-break: keep-all; overflow-wrap: anywhere; }
.pdp-acts { display: flex; gap: 0; flex: 0 0 auto; margin: -10px -10px 0 0; }
.circ { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--t2); }
.circ .ico { width: 22px; height: 22px; }
.circ:hover { color: var(--brand); }
.circ[aria-pressed="true"] { color: var(--brand); }
.circ[aria-pressed="true"] .ico-heart { fill: var(--brand); }
.pdp-share-msg { font-size: 12px; line-height: 18px; color: var(--brand); }
.pdp-sub { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sub .pdp-cat { color: var(--t3); font-size: 13px; line-height: 20px; }
.pdp-free { font-weight: 700; color: var(--t1); }
.pdp-share-msg:empty { display: none; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line1); }
.pdp-price strong { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--price); }
.pdp-unit { font-size: 12px; line-height: 18px; color: var(--t3); }
.pdp-shipfee { margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--t2); }
.pdp-checked { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--t3); }
.pdp-checked .linkbtn { min-height: 44px; margin: -13px 0; padding: 0 4px; }
.pdp-live-msg { color: var(--t2); }
.pdp-rows { margin-top: 12px; border-top: 1px solid var(--line1); }
.pdp-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line1); font-size: 13px; line-height: 20px; }
.pdp-row dt { flex: 0 0 44px; color: var(--t3); }
.pdp-row dd { flex: 1; min-width: 0; margin: 0; color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; }
.pdp-eta { color: var(--promise); }
.pdp-eta-none { color: var(--t3); }
.pdp-ship-x { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--t3); }
.pdp-opt { margin-top: 16px; border: 1px solid var(--line1); background: var(--bg2); }
.pdp-opt summary { position: relative; display: flex; flex-direction: column; padding: 8px 40px 8px 12px; list-style: none; cursor: pointer; }
.pdp-opt summary::-webkit-details-marker { display: none; }
.pdp-opt summary .ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.pdp-opt[open] summary .ico { transform: translateY(-50%) rotate(180deg); }
.opt-k { font-size: 12px; line-height: 18px; color: var(--t2); }
.opt-v { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--t1); }
.opt-g { padding: 8px 12px; border-top: 1px solid var(--line1); background: var(--bg1); }
.opt-gh { font-size: 12px; line-height: 18px; font-weight: 700; }
.opt-g li { font-size: 13px; line-height: 20px; padding: 4px 0; }
.opt-g li.soldout { color: var(--t4); text-decoration: line-through; }
.opt-note { padding: 8px 12px; font-size: 12px; line-height: 18px; background: var(--bg1); }
.pdp-buy { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.qty { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "in up" "in dn"; flex: 0 0 72px; width: 72px; height: 44px; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; background: var(--bg1); }
.qty:hover { border-color: var(--t3); }
.qty:focus-within { border-color: var(--brand); outline: 1px solid var(--brand); outline-offset: -2px; }
.qty input { grid-area: in; width: 100%; min-width: 0; padding: 0; border: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--t1); background: transparent; -moz-appearance: textfield; }
.qty input:focus { outline: 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty button { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-left: 1px solid var(--line2); background: var(--bg1); color: var(--t2); }
.qty button:hover { background: var(--bg2); color: var(--t1); }
.qty button:focus-visible { outline-offset: -2px; }
.qty .qty-up { grid-area: up; }
.qty .qty-dn { grid-area: dn; border-top: 1px solid var(--line2); }
.qty .ico-minus, .qty .ico-plus { display: none; }
.pdp-sum { font-size: 13px; line-height: 20px; color: var(--t3); }
.pdp-sum b { color: var(--t1); }
.pdp-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 12px; }
.pdp-btns .btn { width: 100%; height: 44px; padding: 0 8px; font-size: 16px; line-height: 24px; }
.pdp-nopay { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--t3); }
.pdp-attrs { margin-top: 12px; padding-left: 16px; list-style: disc; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; overflow-wrap: anywhere; }
.pdp-dock { display: none; }
.pdp .shelf { margin-top: 40px; }
.pdp .sh-body { --cols: 4; }
.pdp .sh-track .pc-img img { padding: 8%; }
.pdp .sh-track .pc-price strong { font-size: 16px; line-height: 24px; }
.ptabs { position: sticky; top: 0; z-index: 30; margin-top: 40px; background: var(--bg1); }
.ptabs ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line1); }
.ptabs a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; border-top: 2px solid var(--line1); border-right: 1px solid var(--line1); border-bottom: 1px solid var(--line1); background: var(--bg2); font-size: 14px; line-height: 20px; color: var(--t2); text-align: center; word-break: keep-all; }
.ptabs a:hover { color: var(--t1); }
.ptabs a:focus-visible { outline-offset: -3px; }
.ptabs li.on a { background: var(--bg1); border-top-color: var(--t1); border-bottom-color: var(--bg1); color: var(--t1); font-weight: 700; }
.ptab-n { margin-left: 4px; font-weight: 400; color: var(--t3); }
.psec { padding: 24px 0 8px; scroll-margin-top: 56px; }
.psec-h { margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--t1); }
.psec-h .gray { font-weight: 400; }
.psec-h3 { margin: 16px 0 8px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t1); }
.psec-note { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--t3); }
.psec-p { max-width: 640px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--t2); word-break: keep-all; }
.psec-p:empty { display: none; }
.pwarn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 24px; padding: 12px 16px; border-radius: 4px; background: var(--sale-soft); color: var(--t1); font-size: 14px; line-height: 20px; font-weight: 700; word-break: keep-all; }
.pwarn .ico { flex: 0 0 20px; color: var(--sale); }
.pwarn p { max-width: 640px; }
.pdp-info .pdp-direct { margin: 12px 0 0; }
.pduty { margin-bottom: 16px; scroll-margin-top: 56px; }
.js .duty-fold:not(.open) .duty4 tr:nth-child(n+4), .js .duty-fold:not(.open) .duty-trade, .js .duty-fold:not(.open) .psec-h3 { display: none; }
.duty-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--line1); background: var(--bg1); font-size: 13px; line-height: 18px; color: var(--brand); }
.duty-more[hidden] { display: none; }
.duty-more .ico { width: 12px; height: 12px; }
.duty-more[aria-expanded="true"] .ico { transform: rotate(180deg); }
.pd-imgs { position: relative; }
.pd-imgw { display: block; max-width: 760px; margin: 0 auto; }
.pd-img { width: 100%; height: auto; }
.pd-img img { height: auto; }
.pd-cap { margin-top: 8px; text-align: center; font-size: 12px; line-height: 18px; color: var(--t3); }
.pd-imgs.pre-fold { min-height: 964px; }
.js .pd-imgs.pre-fold { height: 900px; min-height: 0; margin-bottom: 64px; overflow: hidden; }
.js .pd-imgs.folded { max-height: 900px; overflow: hidden; }
.pd-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 48px; margin-top: 16px; border: 1px solid var(--brand); border-radius: 4px; background: var(--bg1); color: var(--brand); font-size: 16px; line-height: 24px; font-weight: 700; }
.pd-more:hover { background: var(--brand-soft); }
.pd-more[hidden] { display: none; }
.pd-imgw.img-gone { display: none; }
.duty { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--line1); font-size: 13px; line-height: 18px; }
.duty th { width: 18%; padding: 10px 12px; border-bottom: 1px solid var(--line1); background: var(--bg2); color: var(--t2); font-weight: 400; text-align: left; vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; }
.duty td { width: 32%; padding: 10px 12px; border-bottom: 1px solid var(--line1); color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; vertical-align: top; }
.duty .emp { background: var(--bg1); }
.duty2 th { width: 32%; }
.duty2 td { width: auto; }
.duty-see td { color: var(--t3); }
.pd-notice { margin-bottom: 16px; border: 1px solid var(--line1); background: var(--bg2); }
.pd-notice summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; list-style: none; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--t1); cursor: pointer; }
.pd-notice summary::-webkit-details-marker { display: none; }
.pd-notice[open] summary .ico { transform: rotate(180deg); }
.pd-notice-t { padding: 0 16px 12px; font-size: 13px; line-height: 20px; color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; }
.pd-notice .pd-imgw { padding: 0 16px 12px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.rv-head .psec-h { margin: 0; font-size: 16px; line-height: 24px; }
.rv-note { font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; }
.rv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 16px 0; border-top: 1px solid var(--line1); border-bottom: 1px solid var(--line1); }
.rv-big { display: flex; align-items: center; gap: 8px; }
.rv-stars svg { width: 24px; height: 24px; fill: var(--line2); }
.rv-avg { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--t1); }
.rv-n { font-size: 13px; line-height: 18px; color: var(--t3); }
.rv-bars { flex: 1 1 240px; max-width: 360px; }
.rv-bars li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--t3); }
.rv-bl { flex: 0 0 28px; }
.rv-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg2); }
.rv-bp { flex: 0 0 32px; text-align: right; font-variant-numeric: tabular-nums; }
.rv-empty { padding: 32px 0 16px; text-align: center; font-size: 14px; line-height: 20px; }
.rv-empty .empty-pic { width: 64px; height: 64px; margin: 0 auto 12px; }
.rv-empty-h { font-weight: 700; color: var(--t1); }
.rv-empty-sub { max-width: 640px; margin-left: auto; margin-right: auto; margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 4px; background: var(--dark); color: var(--bg1); font-size: 14px; line-height: 20px; box-shadow: var(--sh-pop); transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .15s; }
.toast.on { opacity: 1; pointer-events: auto; }
.toast-t { white-space: nowrap; }
.toast-a { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--bg1); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: underline; white-space: nowrap; cursor: pointer; }
.doc { max-width: 1060px; padding-bottom: 48px; }
.doc-h1 { margin: 8px 0 12px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--t1); }
.doc-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 2px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; line-height: 18px; font-weight: 700; vertical-align: middle; }
.tag-wait { background: var(--bg2); color: var(--t2); }
.doc-lead { max-width: 640px; font-size: 14px; line-height: 22px; color: var(--t2); }
.doc-sec { margin-top: 40px; scroll-margin-top: 72px; }
.doc-sec h2 { margin-bottom: 12px; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--t1); }
.doc-sec > p, .doc-p { max-width: 640px; font-size: 14px; line-height: 22px; color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; }
.doc-hi { padding: 16px; border: 1px solid var(--brand); background: var(--brand-soft); }
.doc-ul { max-width: 640px; margin-top: 8px; padding-left: 20px; list-style: disc; font-size: 14px; line-height: 22px; color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; }
.doc-ul li + li { margin-top: 4px; }
.doc-note { max-width: 640px; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--t3); word-break: keep-all; overflow-wrap: anywhere; }
.doc a:not(.btn):not(.chip):not(.btn-copy), .ab a, .pol-box a { color: var(--brand); }
.doc-t td code, .doc-ul code, .doc-note code, .dl-v code { padding: 0 4px; background: var(--bg2); font-family: Consolas, 'Courier New', monospace; font-size: 12px; word-break: break-all; }
.doc-t th { width: 140px; }
.doc-t td { width: auto; }
.doc-notice { display: flex; align-items: flex-start; gap: 8px; max-width: 640px; margin: 0 0 12px; font-size: 13px; line-height: 20px; color: var(--t2); }
.doc-notice .ico, .sl-note .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--brand); }
.pre-note { padding: 12px 0 0; font-size: 12px; line-height: 18px; color: var(--t3); }
.docband { background: var(--brand-band); }
.docband-in { display: flex; align-items: center; gap: 16px 48px; min-height: 96px; padding-top: 12px; padding-bottom: 12px; }
.docband-h { flex: 0 0 auto; font-size: 28px; line-height: 36px; font-weight: 700; color: var(--bg1); }
.faq-find { display: flex; flex: 0 1 360px; min-width: 0; height: 44px; background: var(--bg1); }
.faq-find-q { flex: 1 1 auto; min-width: 0; }
.faq-find-q input { width: 100%; height: 100%; padding: 0 0 0 16px; border: 0; border-radius: 0; background: transparent; font-size: 16px; line-height: 24px; color: var(--t1); -webkit-appearance: none; appearance: none; }
.faq-find-q input::placeholder { color: var(--t3); }
.faq-find-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-find-q input:focus { outline: none; }
.faq-find:focus-within { outline: 2px solid var(--brand-dark); outline-offset: 0; }
.faq-find-go { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--t3); }
.faq-find-go .ico { width: 20px; height: 20px; }
.faq-find-go:hover { color: var(--brand); }
.faq-found { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--t2); }
.faq-none { padding: 24px 0; border-bottom: 1px solid var(--line1); font-size: 14px; line-height: 20px; color: var(--t3); text-align: center; }
.doctabs { border-bottom: 1px solid var(--line1); background: var(--bg1); }
.doctabs ul { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.doctabs ul::-webkit-scrollbar { display: none; }
.doctabs a { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 56px; border-bottom: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--t2); white-space: nowrap; }
.doctabs a:hover { color: var(--brand); }
.doctabs a.on { border-bottom-color: var(--brand); color: var(--brand); font-weight: 700; }
.doc-list { max-width: 820px; margin-top: 8px; border-top: 1px solid var(--line1); }
.doc-list li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line1); font-size: 14px; line-height: 22px; color: var(--t2); }
.dl-k { color: var(--t1); font-weight: 700; word-break: keep-all; }
.dl-v { min-width: 0; max-width: 640px; word-break: keep-all; overflow-wrap: anywhere; }
.row-later .dl-v, .row-later td { color: var(--t3); }
.row-later .doc-tag { margin-right: 4px; }
.addr-wait { max-width: 640px; margin-top: 8px; padding: 12px; border: 1px dashed var(--line2); font-size: 14px; line-height: 20px; color: var(--t3); }
.addr-wait-s { color: var(--t3); }
.doc-link, .ab-link, .faq-a a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.doc-more { max-width: 820px; margin-top: 8px; }
.doc-more summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; line-height: 18px; color: var(--t3); }
.doc-more summary::-webkit-details-marker { display: none; }
.doc-more summary .ico { width: 14px; height: 14px; }
.doc-more-s { font-size: 12px; line-height: 18px; color: var(--t3); }
.doc-more[open] summary .ico { transform: rotate(180deg); }
.doc-codes { padding: 4px 0 8px; font-size: 13px; line-height: 22px; color: var(--t2); }
.doc-codes code { margin-left: 4px; padding: 0 4px; background: var(--bg2); font-family: Consolas, 'Courier New', monospace; font-size: 12px; }
.score-t { width: 100%; max-width: 640px; margin-top: 12px; border-collapse: collapse; border-top: 1px solid var(--line1); font-size: 13px; line-height: 20px; }
.score-t th, .score-t td { padding: 10px 12px; border-bottom: 1px solid var(--line1); text-align: left; color: var(--t2); word-break: keep-all; }
.score-t thead th { background: var(--bg2); font-weight: 400; }
.score-t .num { width: 72px; text-align: right; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-faq { margin-top: 24px; }
.faq-box { position: relative; max-width: 1020px; }
.faq-r { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.faq-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line1); border-left: 1px solid var(--line1); }
.faq-cat { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 4px; border-right: 1px solid var(--line1); border-bottom: 1px solid var(--line1); font-size: 13px; line-height: 18px; color: var(--t2); text-align: center; word-break: keep-all; cursor: pointer; }
.faq-cat:hover { color: var(--brand); }
#faq-all:checked ~ .faq-cats [for="faq-all"], #faq-conn:checked ~ .faq-cats [for="faq-conn"], #faq-price:checked ~ .faq-cats [for="faq-price"],
#faq-rank:checked ~ .faq-cats [for="faq-rank"], #faq-order:checked ~ .faq-cats [for="faq-order"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
#faq-all:focus-visible ~ .faq-cats [for="faq-all"], #faq-conn:focus-visible ~ .faq-cats [for="faq-conn"], #faq-price:focus-visible ~ .faq-cats [for="faq-price"],
#faq-rank:focus-visible ~ .faq-cats [for="faq-rank"], #faq-order:focus-visible ~ .faq-cats [for="faq-order"] { outline: 2px solid var(--brand); outline-offset: -2px; }
#faq-conn:checked ~ .faq li:not([data-faq-c="conn"]), #faq-price:checked ~ .faq li:not([data-faq-c="price"]),
#faq-rank:checked ~ .faq li:not([data-faq-c="rank"]), #faq-order:checked ~ .faq li:not([data-faq-c="order"]) { display: none; }
.faq { max-width: 1020px; margin-top: 24px; border-top: 1px solid var(--line1); }
.faq-i { border-bottom: 1px solid var(--line1); }
.faq-i summary { display: flex; align-items: center; gap: 32px; min-height: 68px; padding: 8px 4px 8px 24px; list-style: none; cursor: pointer; font-size: 14px; line-height: 20px; color: var(--t2); word-break: keep-all; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover .faq-t { color: var(--t1); text-decoration: underline; }
.faq-i summary .ico { flex: 0 0 auto; width: 12px; height: 12px; margin-left: auto; color: var(--t4); }
.faq-i[open] summary .ico { transform: rotate(180deg); }
.faq-q { flex: 0 0 auto; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--brand); }
.faq-a { padding: 0 4px 20px 64px; font-size: 14px; line-height: 22px; color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; }
.faq-a p { max-width: 640px; }
.ai-item { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 14px; line-height: 20px; }
.ai-item a { font-weight: 700; }
.copybox { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; max-width: 820px; margin-top: 8px; }
.copy-src { display: block; flex: 1 1 260px; min-width: 0; padding: 12px; border: 1px solid var(--line2); background: var(--bg2); font-family: Consolas, 'Courier New', monospace; font-size: 12px; line-height: 18px; color: var(--t1); word-break: break-all; white-space: pre-wrap; }
textarea.copy-src { width: 100%; flex-basis: 100%; resize: vertical; }
#itemText.copy-src { font-family: inherit; font-size: 14px; line-height: 22px; word-break: keep-all; overflow-wrap: anywhere; field-sizing: content; }
.btn-copy { height: 40px; padding: 0 16px; border: 1px solid var(--brand); border-radius: 4px; background: var(--bg1); color: var(--brand); font-size: 14px; font-weight: 700; }
.btn-copy:hover { background: var(--brand-soft); }
.copy-msg { align-self: center; min-height: 18px; font-size: 12px; line-height: 18px; color: var(--brand); }
.guide-pic { margin: 16px 0; }
.guide-pic img { display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.sl-note { border-bottom: 1px solid var(--line1); background: var(--brand-soft); }
.sl-note p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; min-height: 40px; padding: 0; font-size: 13px; line-height: 20px; color: var(--t1); text-align: center; word-break: keep-all; }
.sl-note a { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; color: var(--brand-dark); font-weight: 700; white-space: nowrap; }
.sl-note a .ico { width: 14px; height: 14px; }
.sl-note a:hover { text-decoration: underline; }
.sl-hero { background: var(--bg1); }
.sl-hero-in { display: flex; align-items: center; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
.sl-hero-txt { flex: 1 1 0; min-width: 0; }
.sl-h { font-size: 32px; line-height: 42px; font-weight: 700; color: var(--t1); word-break: keep-all; }
.sl-h em { font-style: normal; color: var(--brand); }
.sl-sub { margin-top: 16px; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--t1); word-break: keep-all; }
.sl-more { margin-top: 40px; font-size: 14px; line-height: 20px; color: var(--t1); word-break: keep-all; }
.sl-more a { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -12px 0; color: var(--brand); font-weight: 700; vertical-align: middle; }
.sl-more a .ico { width: 14px; height: 14px; }
.sl-more a:hover { text-decoration: underline; }
.sl-pic-wide { display: none; }
.sl-side { flex: 0 0 290px; min-width: 0; }
.sl-cap { margin-bottom: 16px; font-size: 16px; line-height: 24px; color: var(--t1); text-align: center; }
.sl-card { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px; border: 1px solid var(--line1); border-radius: 12px; background: var(--bg1); }
.sl-pic { margin: 0; }
.sl-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.sl-card-p { font-size: 14px; line-height: 20px; color: var(--t2); text-align: center; word-break: keep-all; }
.sl-go { width: 100%; height: 44px; }
.sl-why { padding: 48px 0 48px; }
.sl-why-h { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--t2); text-align: center; }
.sl-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; text-align: center; }
.sl-nums b { display: block; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; word-break: keep-all; }
.sl-nums em { font-style: normal; color: var(--brand); }
.sl-nums span { display: block; margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--t2); word-break: keep-all; }
.doc-seller .doc-sec:first-child { margin-top: 8px; }
.infotabs { border-bottom: 1px solid var(--line1); }
@media (min-width: 1000px) { .infotabs { border-bottom: 0; } }
.infotabs ul { display: flex; justify-content: center; gap: 40px; overflow-x: auto; scrollbar-width: none; }
.infotabs ul::-webkit-scrollbar { display: none; }
.infotabs a { display: flex; align-items: center; height: 44px; font-size: 13px; line-height: 18px; color: var(--t3); white-space: nowrap; }
.infotabs a:hover { color: var(--t1); }
.infotabs a.on { color: var(--t1); font-weight: 700; }
.ab { max-width: 720px; text-align: center; }
.ab .pre-note { margin-top: 40px; padding: 0 0 48px; }
.ab-h { margin-top: 96px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--t1); }
.ab-sub { margin-top: 8px; font-size: 18px; line-height: 26px; color: var(--t1); word-break: keep-all; }
.ab-p { max-width: 420px; margin: 24px auto 0; font-size: 14px; line-height: 24px; color: var(--t3-on2); word-break: keep-all; }
.ab-sec .ab-p { margin-top: 12px; }
.ab-pic-wrap { margin-top: 48px; padding: 0 16px; }
.ab-pic { margin: 0; }
.ab-pic img { display: block; width: 100%; height: 215px; object-fit: cover; object-position: 50% 40%; }
.ab-sec { margin-top: 48px; }
.ab-h2 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--t1); }
.ab .doc-ul { display: inline-block; margin: 12px auto 0; text-align: left; }
.pol { padding-bottom: 48px; }
.pol-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-top: 24px; }
.pol-h { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--t1); }
.pol-path { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--t3); }
.pol-path a:hover { text-decoration: underline; }
.pol-path .ico { width: 12px; height: 12px; }
.pol-strip { display: none; }
.pol-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.pol-pick li { min-width: 0; }
.pol-pick a { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 4px; border: 1px solid var(--line2); font-size: 12px; line-height: 16px; color: var(--t2); text-align: center; word-break: keep-all; }
.pol-pick a::after { content: ''; position: absolute; left: -1px; right: -1px; top: -5px; bottom: -5px; }
.pol-pick a:hover { border-color: var(--t1); }
.pol-pick a.on { border-color: var(--t1); background: var(--t1); color: var(--bg1); font-weight: 700; }
.pol-box { margin-top: 24px; padding: 32px; border: 1px solid var(--line1); }
.pol-box-h { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--t1); text-align: center; }
.pol-ch { margin-top: 40px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t1); }
.pol-art { margin-top: 40px; scroll-margin-top: 72px; }
.pol-ch + .pol-art { margin-top: 16px; }
.pol-art h3 { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t1); }
.pol-art p, .pol-art .doc-ul { max-width: 640px; margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--t2); word-break: keep-all; overflow-wrap: anywhere; }
.pol-box .pre-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line1); }
.pol-priv { margin-top: 40px; padding: 0; border: 0; }
.pol-priv .pol-box-h { font-size: 24px; line-height: 32px; color: var(--t2); }
.pol-priv .pol-art { margin-top: 32px; }
.pol-priv .pol-art h3 { font-size: 16px; line-height: 24px; font-weight: 700; }
.pol-priv .pol-art p, .pol-priv .pol-art .doc-ul { font-size: 14px; line-height: 26px; color: var(--t3-on2); }
.pol-lead { max-width: 640px; margin: 24px 0 0; font-size: 14px; line-height: 26px; color: var(--t3-on2); word-break: keep-all; }
.pol-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin-top: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
.pol-toc a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--t2); }
.pol-toc a:hover { color: var(--brand); }
.toc-n { color: var(--brand); }
.nf { padding-top: 20px; padding-bottom: 0; }
.nf-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: 40px 16px; border: 0; background: var(--bg2); text-align: center; }
.nf-box .empty-pic { width: 80px; height: 80px; margin: 0 0 8px; mix-blend-mode: multiply; }
.nf-h { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--t1); }
.nf-p { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--t3-on2); word-break: keep-all; }
.nf-go { display: flex; justify-content: center; margin-top: 16px; }
.nf-home { position: relative; height: 32px; gap: 2px; padding: 0 8px 0 12px; font-size: 12px; line-height: 18px; }
.nf-home::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.nf-home .ico { width: 14px; height: 14px; }
.nf-back a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 18px; color: var(--t3-on2); text-decoration: underline; }
.nf-back a:hover { color: var(--t1); }
.wishpg { min-height: calc(100vh - 420px); padding-bottom: 24px; }
.wish-body { min-height: 460px; }
.wish-grid .skel:nth-child(n+4) { display: none; }
.wish-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line1); }
.wish-empty .empty-pic { width: 40px; height: 40px; }
.wish-h { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--t1); }
.wish-h .r-cnt { margin-left: 4px; font-size: 14px; color: var(--t3); }
.wish-sort { margin-left: auto; min-height: 36px; padding: 0; }
.wish-sort[hidden] { display: none; }
.wish-sort button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0; border: 0; background: none; font-size: 13px; line-height: 18px; color: var(--t2); }
.wish-sort button:hover { color: var(--t1); text-decoration: underline; }
.wish-sort li.on button { color: var(--brand); font-weight: 700; }
.wish-empty[hidden] { display: none; }
.wish-body:has(> .wish-empty:not([hidden])) { display: flex; flex-direction: column; justify-content: center; }
.wish-grid .pcard { position: relative; }
.wish-del { position: absolute; top: 6px; right: 14px; z-index: 2; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line1); border-radius: 999px; background: var(--bg1); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.wish-del::before { content: ''; position: absolute; inset: -6px; }
.wish-del .ico-heart { width: 18px; height: 18px; fill: var(--brand); }
.wish-del:hover { border-color: var(--brand); }
.wish-retry { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--t2); }
.wish-retry[hidden] { display: none; }
.wish-retry .linkbtn { min-height: 32px; font-size: 13px; }
.skel { pointer-events: none; }
.skel-img { display: block; aspect-ratio: 1 / 1; background: var(--bg2); }
.skel-line { display: block; height: 14px; margin-top: 8px; background: var(--bg2); }
.skel-line.short { width: 50%; }
@media (min-width: 1000px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .cp-best { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hd-in { grid-template-columns: 110px auto minmax(0, 1fr) auto; grid-template-areas: "menu logo sb icons"; grid-template-rows: 88px; column-gap: 24px; row-gap: 0; padding-top: 0; padding-bottom: 0; }
  .wrap.hd-in { padding-left: 20px; }
  .hd-in.has-quick { grid-template-rows: 88px 30px; grid-template-areas: "menu logo sb icons" "menu quick quick quick"; }
  .hd-in > .sbox { margin-left: 0; max-width: 552px; }
  .cat-menu { height: auto; align-self: stretch; }
  .menu-btn { width: 110px; height: 100%; }
  .menu-lbl { display: block; }
  .logo { height: 88px; }
  .hd-icons { gap: 16px; margin-right: 0; }
  .hd-ico { min-width: 48px; }
  .hd-ico-lbl { display: block; }
  .quick { display: block; grid-area: quick; align-self: stretch; min-width: 0; }
  .quick ul { display: flex; align-items: center; gap: 24px; height: 30px; overflow: hidden; }
  .quick a { display: flex; align-items: center; gap: 4px; height: 30px; font-size: 13px; line-height: 18px; color: var(--t2); white-space: nowrap; }
  .quick a:hover { color: var(--brand); }
  .q-ico { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--t2); }
  .q-ico img, .q-ico .ico { width: 20px; height: 20px; }
  .cat-panel { width: 167px; border: 1px solid var(--line1); box-shadow: var(--sh-float); }
  .cm-link { height: 29px; gap: 8px; padding: 0 8px 0 12px; font-size: 12px; line-height: 18px; }
  .cm-ico, .cm-ico .ico, .cm-ico img { flex-basis: 18px; width: 18px; height: 18px; }
  .cm-link > .ico-tri { color: var(--t4); }
  .cm-sub { box-shadow: var(--sh-float); }
  .cm-sub-h, .cm-sub-list a, .cm-sub-empty { font-size: 12px; }
  .cm-sub-list a { padding: 4px 0; }
  .banner { padding: 0; }
  .bn-in { max-width: none; height: 450px; aspect-ratio: auto; }
  .bn-title { font-size: 48px; line-height: 60px; }
  .bn-desc { font-size: 18px; line-height: 26px; }
  .bn-txt { left: max(32px, calc(50% - 470px)); width: min(440px, calc(50% - 32px)); }
  .bn-dots { display: none; }
  .bn-tabs { display: flex; flex-direction: column; position: absolute; right: max(24px, calc(50% - 510px)); top: 45px; bottom: 45px; z-index: 3; width: 180px; border: 1px solid var(--line1); background: var(--bg1); }
  .bn-tabs li { flex: 1; display: flex; min-height: 0; }
  .bn-tab { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 8px 0 12px; border: 0; border-bottom: 1px solid var(--line1); background: var(--bg1); font-size: 13px; line-height: 18px; color: var(--t2); text-align: left; }
  .bn-tabs li:last-child .bn-tab { border-bottom: 0; }
  .bn-tab.on { color: var(--brand); font-weight: 700; outline: 1px solid var(--brand); outline-offset: -1px; }
  .bn-tab-t { min-width: 0; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bn-tab-pic { flex: 0 0 40px; width: 40px; height: 40px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--t2); overflow: hidden; }
  .bn-tab-pic img { width: 40px; height: 40px; object-fit: cover; }
  .bn-tab-pic .ico { width: 24px; height: 24px; }
  .sh-body { --cols: 4; --gap: 20px; --nav: 36px; }
  .sh-nav { border-radius: 0; border-color: var(--line2); color: var(--t2); box-shadow: var(--sh-float); }
  .sh-nav:hover { border-color: var(--t2); }
  .sh-nav .ico { width: 16px; height: 16px; }
  .sh-next { right: -18px; }
  .sh-prev { left: -18px; }
  .sh-title { font-size: 20px; line-height: 28px; }
  .r-grid { --cols: 4; }
  .td-tile > a { height: 310px; padding: 16px; }
  .td-name { font-size: 18px; line-height: 24px; color: var(--t1); }
  .td-w .td-txt { padding-left: 8px; }
  .td-w .td-img { width: 278px; height: 278px; }
  .td-n .td-img { width: 220px; height: 220px; }
  .td-go { left: 16px; bottom: 16px; }
  .td-n .td-txt { padding-right: 36px; }
  .td-n .td-go { top: 16px; right: 16px; width: 28px; height: 28px; }
  .cblock { grid-template-columns: 180px 260px minmax(0, 1fr); grid-template-areas: "side feat grid"; grid-template-rows: auto; column-gap: 24px; }
  .cb-side { padding: 8px 0; background: var(--bg1); }
  .cb-subs { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cb-feat { justify-content: center; padding: 0; }
  .cb-feat-img { max-width: none; }
  .cb-feat-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cb-img { width: 160px; height: 160px; }
  .srp { padding-top: 24px; }
  .r-grid > .pcard { padding-left: 10px; padding-right: 10px; }
  .r-grid { margin-left: -10px; margin-right: -10px; }
  .csubs ul { flex-wrap: wrap; row-gap: 12px; overflow-x: visible; scroll-snap-type: none; }
  .caticons.csubs li { flex-basis: calc(100% / 9); }
  .cs-nav { display: none !important; }
  .pdp-top { grid-template-columns: 480px minmax(0, 1fr); gap: 48px; }
  .pdp-gallery { gap: 12px; }
  .pdp-thumbs { flex: 0 0 64px; }
  .pdp-thumbs button { width: 64px; height: 64px; }
  .pdp-title { font-size: 18px; line-height: 24px; }
  .pdp-price strong { font-size: 24px; line-height: 32px; }
  .pdp-btns { gap: 8px; }
  .pdp-btns .btn { height: 48px; font-size: 16px; line-height: 24px; }
  .qty { height: 48px; }
  .pdp .sh-body { --cols: 5; --nav: 36px; }
  .pdp .sh-nav { border-radius: 0; border-color: var(--line2); color: var(--t2); }
  .pdp .sh-nav:hover { border-color: var(--t2); }
  .ptabs a { font-size: 16px; line-height: 24px; min-height: 56px; }
  .psec-h { font-size: 16px; line-height: 24px; }
  .rv-head .psec-h { font-size: 20px; line-height: 28px; }
  .wish-h { font-size: 24px; line-height: 32px; }
  .ft-cols { grid-template-columns: 120px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .ft-logo .logo-gray { font-size: 24px; line-height: 32px; }
  .strip, .band { height: 90px; }
  .strip-pic img { height: 82px; }
  .aiband .band-t { font-size: 20px; line-height: 28px; }
  .caticons ul { flex-wrap: wrap; row-gap: 16px; overflow-x: visible; scroll-snap-type: none; }
  .caticons li { flex-basis: calc(100% / 8); }
}
@media (min-width: 600px) {
  .srp { display: flex; gap: 24px; align-items: flex-start; }
  .filters { display: block; flex: 0 0 200px; width: 200px; }
  .ftoggle { display: none; }
  .f-top { height: auto; padding: 0 0 12px; border-bottom: 1px solid var(--line1); }
  .f-h { font-size: 18px; line-height: 24px; }
  .fclose { display: none; }
  .f-body { overflow: visible; padding: 0; }
  .fg-h { font-size: 16px; line-height: 24px; }
  .ptabs a { min-height: 56px; font-size: 16px; line-height: 24px; }
  .psec, .pduty { scroll-margin-top: 64px; }
  .psec-h { font-size: 16px; line-height: 24px; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .srp .r-grid { --cols: 2; }
}
@media (min-width: 1276px) {
  .home-cols { position: relative; }
  .rail { display: block; position: absolute; top: 24px; bottom: 0; left: 100%; width: 100px; }
  .rail-in { position: sticky; top: 80px; }
  .pg-home .totop { display: none; }
}
@media (min-width: 1200px) {
  .sidecats { display: block; position: fixed; top: 50%; left: calc(50% - 510px - 56px); transform: translateY(-50%); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidecats.on { opacity: 1; pointer-events: auto; }
  .sidecats ul { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--line1); border-radius: 0; background: var(--bg1); }
  .sidecats li + li a { border-top: 1px solid var(--line1); }
  .sidecats a { position: relative; width: 36px; height: 36px; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--t2); overflow: hidden; }
  .sidecats a img { width: 24px; height: 24px; }
  .sidecats a:hover, .sidecats a.on { background: var(--brand-soft); color: var(--brand); }
}
@media (max-width: 599px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .util { display: none; }
  .hd-in { column-gap: 12px; row-gap: 4px; padding-bottom: 8px; }
  .sbox { height: 44px; }
  .sbox-cat { flex-basis: 72px; }
  .sbox-cat select { padding-left: 8px; padding-right: 24px; }
  .sbox-cat .ico { right: 8px; }
  .sbox-go { flex-basis: 44px; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .cat-panel { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; max-width: 85vw; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-right: 1px solid var(--line1); border-bottom: 0; z-index: 70; }
  .cat-panel::-webkit-scrollbar { display: none; }
  .cat-menu.open .cm-dim { display: block; position: fixed; inset: 0; z-index: 65; background: var(--dim-soft); }
  .cm-top { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; height: 44px; padding-left: 16px; border-bottom: 1px solid var(--line1); background: var(--bg1); }
  .cm-top b { font-size: 16px; line-height: 24px; color: var(--t1); }
  .cm-close { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--t2); display: flex; align-items: center; justify-content: center; }
  .cm-link { height: 44px; gap: 12px; padding: 0 16px; font-size: 14px; line-height: 20px; }
  .cm-row.on > .cm-link { font-weight: 700; }
  .cm-row.on > .cm-link > .ico-tri { transform: rotate(90deg); }
  .cm-sub { position: static; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible; border: 0; border-top: 1px solid var(--line1); border-bottom: 1px solid var(--line1); padding: 4px 16px 8px 48px; background: var(--bg2); }
  .cm-sub-h { padding: 8px 0; margin: 0; border-bottom: 0; font-size: 13px; line-height: 18px; }
  .cm-sub-list a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .cm-sub-empty { white-space: normal; }
  .cm-sub-list, .c2 .cm-sub-list, .c3 .cm-sub-list { grid-template-columns: minmax(0, 1fr); }
  .cm-sub.has-more:not(.all) .cm-sub-list li:nth-child(n+9) { display: none; }
  .cm-sub-more { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--brand); }
  .cm-sub-more[hidden] { display: none; }
  .bn-in { aspect-ratio: 390 / 200; }
  .pg-home .banner { margin-top: 10px; }
  .bn-txt { left: 16px; width: calc(50% - 16px); }
  .bn-title { font-size: 20px; line-height: 28px; }
  .bn-desc { display: none; }
  .home-cols { padding-top: 16px; }
  .shelf, .cbs { margin-bottom: 32px; }
  .strip, .band { height: 56px; margin-bottom: 32px; }
  .strip-pic { margin-left: -12px; }
  .strip-pic img { width: 84px; height: 56px; object-fit: cover; }
  .band-t, .aiband .band-t { font-size: 16px; line-height: 24px; }
  .ab-ex { display: none; }
  .band-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .band-go { justify-content: center; min-width: 44px; margin-right: -12px; }
  .band-go .ico { width: 20px; height: 20px; }
  .srcband { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .srcband .band-t { font-size: 14px; line-height: 20px; white-space: normal; word-break: keep-all; }
  .ci-circle { width: 48px; height: 48px; }
  .ci-circle img { width: 32px; height: 32px; }
  .sh-body { --cols: 2.3; --gap: 12px; }
  .home-main .sh-track .pc-title { height: 36px; font-size: 13px; line-height: 18px; }
  .sh-nav { display: none !important; }
  .sh-pg { display: none !important; }
  .r-grid { --cols: 2; margin-left: -6px; margin-right: -6px; }
  .r-grid > .pcard { padding-left: 6px; padding-right: 6px; }
  .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .td-w { grid-column: span 1; }
  .td-tile > a, .td-w > a { flex-direction: column; gap: 0; height: 176px; padding: 10px; }
  .td-w .td-txt { flex: 0 0 auto; justify-content: flex-start; padding-bottom: 0; }
  .td-name, .td-n .td-name { display: block; font-size: 13px; line-height: 18px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .td-w .td-img, .td-n .td-img { width: 128px; height: 128px; margin: auto auto 0; align-self: auto; }
  .td-tile .td-txt { padding-right: 30px; }
  .td-tile .td-go { left: auto; bottom: auto; top: 7px; right: 10px; width: 24px; height: 24px; }
  .td-tile .td-go .ico { width: 12px; height: 12px; }
  .td-grid > .td-tile:nth-child(9) { display: none; }
  .cblock { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "feat" "grid"; grid-template-rows: auto; row-gap: 12px; }
  .cb-side { padding: 0; background: var(--bg1); }
  .cb-head { flex-direction: row; align-items: center; justify-content: space-between; min-height: 44px; }
  .cb-name { font-size: 16px; line-height: 24px; color: var(--t1); }
  .cb-subs-h, .cb-subs { display: none; }
  .cb-feat { height: 200px; padding: 8px; }
  .cb-feat-img { width: auto; height: 100%; max-width: 100%; }
  .cb-feat-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cb-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .cb-img img { padding: 8%; }
  .cb-price strong { font-size: 16px; line-height: 24px; }
  .r-cat { font-size: 20px; line-height: 28px; }
  .crumbbar .wrap, .crumbbar a, .pcrumb a { min-height: 44px; }
  .r-rel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .r-rel::-webkit-scrollbar { display: none; }
  .r-rel > a { min-height: 32px; }
  .r-tools { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .r-bar { gap: 8px; }
  .r-sort { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .r-sort::-webkit-scrollbar { display: none; }
  .r-sort li { flex: 0 0 auto; }
  .r-sort li + li::before { margin: 0 8px; }
  .r-bar .r-cnt { display: none; }
  .r-sort li a, .r-sort li > span { min-height: 44px; }
  .fchk, .fcat a, .fcat span, .fmore summary { min-height: 40px; }
  .cm-sub-h { min-height: 44px; }
  .ft-ftc { padding: 13px 0; margin-top: -13px; margin-bottom: -13px; }
  .sth-in { gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .sth-logo .logo-txt { font-size: 20px; line-height: 28px; }
  .sth-rel { display: none; }
  .sth-icons { display: none; }
  .pdp-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pdp-gallery { flex-direction: column-reverse; margin: 0 -16px; }
  .pdp-thumbs { flex-direction: row; flex: 0 0 auto; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-main { width: 100%; }
  .pdp-btns { display: none; }
  .pdp-dock { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 16px; background: var(--bg1); border-top: 1px solid var(--line1); }
  .dock-wish { position: relative; flex: 0 0 44px; height: 44px; padding: 0; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg1); color: var(--t2); display: flex; align-items: center; justify-content: center; }
  .dock-wish[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
  .dock-wish[aria-pressed="true"] .ico-heart { fill: var(--brand); }
  .dock-ai { flex: 1; height: 44px; font-size: 16px; line-height: 24px; }
  .pg-product .ft { padding-bottom: 92px; }
  .pg-product .totop { bottom: 76px; }
  .pg-product .toast { bottom: 76px; }
  .pdp .sh-body { --cols: 2.3; }
  .ptabs { margin-left: -16px; margin-right: -16px; }
  .ptabs ul { border-left: 0; }
  .ptabs li:last-child a { border-right: 0; }
  .ptabs a { min-height: 48px; padding: 0 4px; font-size: 13px; line-height: 18px; }
  .duty, .duty tbody { display: block; }
  .duty4 tr + tr { border-top: 0; }
  .duty tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .duty th, .duty td { width: auto; padding: 8px 12px; }
  .duty .emp { display: none; }
  .duty-trade tr { grid-template-columns: minmax(0, 1fr); }
  .duty-trade th { padding-bottom: 4px; border-bottom: 0; }
  .doc-t th { width: auto; }
  .empty-pic { width: 120px; height: 120px; }
  .nf-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nf-top .empty-pic { flex-basis: auto; }
  .ft-cols { grid-template-columns: minmax(0, 1fr); }
  .ft-links { row-gap: 0; margin-left: -9px; }
  .ft-links li { font-size: 11px; }
  .ft-links li::before { margin: 0 2px; }
  .ft-links a { min-height: 44px; padding: 0 4px; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .wrap.hd-in { padding-right: 10px; }
  .hd-in > .sbox { margin-left: 10px; }
  .hd-icons { margin-right: -3px; }
  .pg-home .banner { margin-top: 10px; }
  .bn-in { aspect-ratio: 704 / 210; }
  .td-tile > a { padding: 10px; }
  .td-w .td-img { width: 150px; height: 150px; }
  .td-go { left: 10px; bottom: 10px; }
  .srcband .band-t { line-height: 22px; max-height: 44px; white-space: normal; word-break: keep-all; }
  .pol-pick { grid-template-columns: repeat(3, minmax(0, 215px)); }
}
@media (max-width: 599px) { .sth-menu { display: none; } }
@media (min-width: 1000px) {
  .docband-in { min-height: 100px; }
  .faq-find { flex-basis: 410px; height: 48px; }
  .faq-find-go { flex-basis: 48px; }
  .faq-i summary { min-height: 76px; }
  .sl-note p { min-height: 48px; font-size: 14px; }
  .sl-note a { min-height: 48px; }
  .sl-hero { background: var(--brand-soft); }
  .sl-hero .wrap { max-width: 1172px; }
  .sl-hero-in { min-height: 540px; gap: 40px; padding-top: 48px; padding-bottom: 48px; }
  .sl-hero-txt { flex: 0 0 440px; }
  .sl-h { font-size: 44px; line-height: 58px; }
  .sl-pic-wide { display: block; flex: 1 1 0; min-width: 0; margin: 0; }
  .sl-pic-wide img { width: 100%; max-width: 380px; aspect-ratio: 1 / 1; margin: 0 auto; object-fit: cover; object-position: 48% 50%; }
  .sl-pic-card { display: none; }
  .sl-side { flex-basis: 320px; }
  .sl-go { height: 48px; }
  .pol-strip { display: block; height: 20px; background: var(--bg2); }
  .pol-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pol-pick a { height: 38px; }
  .sl-why { padding-top: 64px; padding-bottom: 64px; }
  .sl-nums b { font-size: 44px; line-height: 52px; }
  .ab-h { font-size: 28px; line-height: 36px; }
  .ab-sub { font-size: 24px; line-height: 32px; }
  .ab-p { max-width: 600px; font-size: 16px; line-height: 24px; }
  .ab-pic-wrap { padding: 0 8px; }
  .ab-pic img { height: 400px; }
  .pol-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pol-box { padding: 32px 40px; }
  .pol-priv { padding: 0; }
  .pol-ch, .pol-art h3 { font-size: 15px; line-height: 24px; }
  .pol-art p, .pol-art .doc-ul { font-size: 15px; line-height: 24px; }
  .pol-priv .pol-art p, .pol-priv .pol-art .doc-ul { font-size: 14px; line-height: 26px; }
  .pol-priv .pol-box-h { font-size: 28px; line-height: 36px; }
}
@media (max-width: 599px) {
  .docband-in { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding-top: 16px; padding-bottom: 16px; }
  .docband-h { font-size: 24px; line-height: 32px; }
  .faq-find { flex: 0 0 44px; }
  .doctabs ul { gap: 20px; }
  .doc-sec { margin-top: 32px; }
  .doc-faq { margin-top: 16px; }
  .doc-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .faq-i summary { gap: 16px; min-height: 64px; padding-left: 8px; }
  .faq-a { padding-left: 34px; }
  .sl-hero-in { flex-direction: column; align-items: stretch; gap: 32px; padding-top: 40px; padding-bottom: 40px; text-align: center; }
  .sl-h { font-size: 30px; line-height: 40px; }
  .sl-more { margin-top: 24px; }
  .sl-note p, .sl-note a { min-height: 44px; }
  .sl-side { flex: 0 0 auto; }
  .sl-card { padding: 20px; }
  .sl-why { padding: 48px 0 32px; }
  .sl-nums { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .sl-nums b { font-size: 30px; line-height: 36px; }
  .infotabs ul { justify-content: flex-start; gap: 24px; }
  .ab-h { margin-top: 72px; }
  .ab-pic-wrap { margin-top: 32px; }
  .ab-pic img { height: 120px; }
  .ab-sec { margin-top: 32px; }
  .pol-top { padding-top: 16px; }
  .pol-box { padding: 24px 16px; }
  .pol-priv { padding: 0; margin-top: 32px; }
  .pol-art { margin-top: 32px; }
  .nf { padding-top: 16px; }
}
@media (max-width: 599px) {
  .pg-arr, .pg-n { min-width: 44px; height: 44px; }
  .csubs ul { gap: 0 8px; scroll-snap-type: none; }
  .caticons.csubs li { flex: 0 0 auto; }
  .csubs a { flex-direction: row; gap: 0; height: 44px; padding: 0 14px; border: 6px solid transparent; border-width: 6px 0; border-radius: 999px; background: var(--brand-soft); background-clip: padding-box; }
  .csubs .ci-circle { display: none; }
  .csubs .ci-name { display: block; max-width: none; font-size: 13px; line-height: 18px; color: var(--brand-dark); white-space: nowrap; -webkit-line-clamp: none; }
  .csubs a:hover .ci-name { color: var(--brand-dark); text-decoration: underline; }
  .r-grid > .pcard:nth-child(odd) { border-right: 1px solid var(--line1); }
  .pg-product .pcrumb { display: none; }
  .pg-product .pdp-top { padding-top: 0; }
  .pdp-title { font-weight: 400; }
  .qty { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "dn in up"; flex-basis: 132px; width: 132px; }
  .qty .qty-dn { border-top: 0; border-left: 0; border-right: 1px solid var(--line2); }
  .qty .ico-minus, .qty .ico-plus { display: block; }
  .qty .ico-chev { display: none; }
  .pdp-buy { flex-wrap: wrap; }
  .pdp-dock .dock-wish { position: static; flex: 0 0 auto; width: auto; height: 44px; padding: 0 16px; border: 1px solid var(--brand); border-radius: 4px; background: var(--bg1); color: var(--brand); font-size: 16px; line-height: 24px; }
  .pdp-dock .dock-wish .ico { width: 18px; height: 18px; }
  .pg-product #ship { padding-bottom: 56px; }
  .rv-bars { flex-basis: 100%; max-width: none; }
  .wish-grid .skel:nth-child(n+3) { display: none; }
  .pol-path a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; }
}
.pg-home .cblocks > .cblock { content-visibility: auto; contain-intrinsic-size: auto 396px; }
@media (max-width: 599px) { .pg-home .cblocks > .cblock { contain-intrinsic-size: auto 738px; } }
@media (min-width: 1000px) { .pg-home .cblocks > .cblock { contain-intrinsic-size: auto 436px; } }
.cblock-ph { height: 396px; margin: 0 0 32px; }
@media (max-width: 599px) { .cblock-ph { height: 738px; } }
@media (min-width: 1000px) { .cblock-ph { height: 436px; } }
.docband-p, .doc-sec > p, .doc-note, .faq-a p, .ab-p, .pol-art p, .pol-lead, .psec-p { text-wrap: pretty; }
@media (max-width: 999.98px) {
  .hd-in { row-gap: 4px; padding-bottom: 10px; }
  .pg-home .banner { margin-top: 0; }
}
@media (min-width: 600px) {
  .today .td-grid { padding: 16px; border: 1px solid var(--line1); }
}
@media (max-width: 599px) {
  .wrap.hd-in { padding-right: 10px; }
  .hd-in > .sbox { margin-left: 10px; }
  .sbox { height: 40px; }
  .sbox > .sbox-cat, .sbox > .sbox-q, .sbox > .sbox-go { margin-top: -4px; margin-bottom: -4px; }
  .bn-dots { bottom: 0; }
  .bn-dot { width: 44px; height: 44px; }
  .bn-dot::before { left: 18px; top: 18px; }
  .bn-in { touch-action: pan-y; }
  .home-main .sh-body { --cols: 2.5; }
  .sug-o { min-height: 44px; }
  .sug-x { flex-basis: 44px; width: 44px; height: 44px; }
  .sug-clear { min-height: 44px; }
  .strip-t { white-space: normal; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 20px; }
  .cm-link { height: 40px; }
  .cm-sub { padding: 0 16px 4px 48px; background: var(--bg1); }
  .cm-sub-list a { min-height: 40px; font-size: 14px; line-height: 20px; }
  .cm-sub-h, .cm-sub-more { min-height: 40px; }
}
@media (min-width: 1000px) {
  .hd-in > .sbox { justify-self: end; width: 100%; margin-right: 8px; }
  .quick ul { justify-content: flex-start; gap: 20px; padding-right: 8px; }
  .bn-tabs { top: 50%; bottom: auto; transform: translateY(-50%); box-shadow: var(--sh-float); }
  .bn-tabs li { flex: 0 0 60px; }
  .bn-txt { width: min(500px, calc(50% - 32px)); }
  .bn-desc { font-size: 20px; line-height: 28px; white-space: normal; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sh-title { font-size: 22px; line-height: 30px; }
  .sh-sub { font-size: 16px; line-height: 24px; }
  .home-main .sh-track .pc-price strong { font-size: 18px; line-height: 24px; }
  .td-name { font-size: 20px; line-height: 28px; }
  .td-w .td-img { width: 260px; height: 260px; }
  .td-n .td-img { width: 200px; height: 200px; }
  .cblock { grid-template-columns: 145px 415px minmax(0, 1fr); }
  .cbs-k { font-size: 20px; line-height: 28px; }
  .cbs-t { font-size: 24px; line-height: 32px; }
  .cb-name { font-size: 24px; line-height: 32px; overflow-wrap: anywhere; }
  .aiband .band-t { font-size: 24px; line-height: 32px; }
  .ft-tel { font-size: 24px; line-height: 32px; }
  .cm-link > .ico-tri { display: none; }
  .cm-ico, .cm-ico .ico, .cm-ico img { flex-basis: 20px; width: 20px; height: 20px; }
  .cm-plain .cm-link { height: 40px; }
  .cm-plain + .cm-plain { border-top: 1px solid var(--line1); }
}
.ptab-n, .cb-all { color: var(--t3-on2); }
.r-note, .psec-p, .ft-deal p, .doc-p, .doc-sec > p, .rv-note { max-width: min(640px, 40em); }
.fprice input, .fprice button { height: 44px; }
.fcat a:hover, a.fchk:hover { color: inherit; }
@media (hover: hover) { .fcat a:hover, a.fchk:hover { color: var(--brand); } }
.fcat a.on, .fchk.on { color: var(--brand); font-weight: 700; }
@media (min-width: 600px) {
  .srp-cat .r-tools { padding: 0 12px; border: 0; background: var(--bg2); }
  .srp-cat .r-tools .r-sort { border-bottom-color: var(--line1); }
}
.cat-banner { margin-top: 16px; }
.cat-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 666; object-fit: cover; }
.r-empty { padding: 24px 0; }
.r-picks { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line1); }
.r-picks .r-grid { margin-top: 12px; }
@media (min-width: 600px) and (max-width: 999.98px) {
  .r-grid .pc-price strong { font-size: 16px; line-height: 24px; }
  .r-grid .pc-img img { padding: 12%; }
  .pdp .sh-body { --cols: 3; }
}
@media (max-width: 599px) {
  .r-grid .pc-price strong { font-size: 16px; line-height: 24px; }
}
.pd-more[aria-expanded="true"] .ico { transform: rotate(180deg); }
.pdp-report { margin-top: 8px; font-size: 12px; line-height: 18px; }
.pdp-report a { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; color: var(--t3); }
.pdp-report a .ico { width: 12px; height: 12px; }
.pdp-report a:hover { color: var(--t1); text-decoration: underline; }
.ptabs ul { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--t2); }
.ptabs a { border-top: 0; }
.ptabs li.on a { border-top: 0; }
@media (min-width: 600px) { .ptabs a { min-height: 64px; } .psec, .pduty { scroll-margin-top: 72px; } }
.duty th { font-weight: 700; color: var(--t1); }
@media (min-width: 1000px) { .duty th, .duty td { padding-top: 14px; padding-bottom: 14px; } }
.pwarn { color: var(--warn); font-weight: 400; font-size: 14px; line-height: 20px; }
.pwarn .ico { color: var(--warn); }
@media (min-width: 600px) { .pwarn { font-size: 16px; line-height: 24px; } }
.rv-sum { flex-direction: column; align-items: stretch; gap: 16px; }
.rv-stars svg { width: 28px; height: 28px; }
.rv-avg { font-size: 28px; line-height: 36px; }
.rv-bars { flex: 0 0 auto; max-width: none; display: grid; gap: 6px; }
.rv-bars li { font-size: 13px; line-height: 18px; }
.rv-bl { flex: 0 0 36px; }
.rv-bar { height: 8px; }
@media (min-width: 1000px) { .rv-bar { height: 10px; } .rv-head .psec-h { font-size: 20px; } }
.psec-lead { margin-top: 0; }
.qna-cs { display: grid; gap: 4px; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--t2); }
.qna-cs li { display: flex; gap: 12px; }
.qna-k { flex: 0 0 64px; color: var(--t3); }
.wishpg { padding-top: 16px; }
@media (max-width: 599px) {
  .ftoggle { height: 44px; padding: 0 8px 0 0; border: 0; background: transparent; }
  .ftoggle::after { display: none; }
  .r-size summary, .tgl { min-height: 44px; }
  .crumbbar a, .pcrumb a { min-width: 44px; padding: 0 10px; }
  .crumbbar li:first-child a, .pcrumb li:first-child a { margin-left: -10px; }
  .cb-sep { margin: 0; }
  .fchip, .r-reset { min-height: 44px; }
  .fchk, .fcat a, .fcat span, .fmore summary { min-height: 44px; }
  .qty { height: 46px; }
  .wish-empty .btn { height: 44px; }
  .pdp-dock .dock-wish { flex: 0 0 44px; width: 44px; padding: 0; }
  .pdp-dock .dock-wish .ico { width: 22px; height: 22px; }
  .pdp-report a { min-height: 44px; }
  .duty tr { grid-template-columns: 120px minmax(0, 1fr); }
  .duty-trade tr { grid-template-columns: minmax(0, 1fr); }
  .ptabs a { padding: 0 8px; }
}
.fmore summary { font-size: 12px; line-height: 18px; }
.cmp { padding-top: 16px; padding-bottom: 48px; }
.cmp-sub { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--t3); }
.cmp .doc-lead { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.cmp-nums { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 16px; padding: 16px; background: var(--bg2); }
.cmp-nums dt { font-size: 12px; line-height: 18px; color: var(--t3); }
.cmp-nums dd { margin-top: 2px; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--t1); white-space: nowrap; }
.cmp-t { width: 100%; margin-top: 24px; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--t1); font-size: 14px; line-height: 20px; color: var(--t2); }
.cmp-t th { padding: 10px 8px; border-bottom: 1px solid var(--line1); background: var(--bg2); font-size: 13px; line-height: 18px; font-weight: 400; color: var(--t2); text-align: left; white-space: nowrap; }
.cmp-t td { padding: 12px 8px; border-bottom: 1px solid var(--line1); vertical-align: middle; word-break: keep-all; overflow-wrap: anywhere; }
.cmp-t .cmp-n { width: 48px; text-align: center; color: var(--t3); }
.cmp-t th.cmp-v, .cmp-t td.cmp-v { width: 104px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-t th.cmp-s { width: 124px; }
.cmp-t td.cmp-s { font-size: 13px; line-height: 18px; color: var(--t3); }
.cmp-t th.cmp-s, .cmp-t td.cmp-s { padding-left: 16px; }
.cmp-sum b { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--price); }
.cmp-a { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--t1); }
.cmp-img { flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid var(--line1); background: var(--bg1); }
.cmp-tx { min-width: 0; }
.cmp-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cmp-unit { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--t3); }
.cmp-a:hover .cmp-name { text-decoration: underline; }
.cmp-old { color: var(--warn); white-space: nowrap; }
.cmp-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; font-size: 14px; line-height: 20px; }
.cmp-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--brand); }
.cmp-links a:hover { text-decoration: underline; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-grp { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line1); }
.cmp-g { font-size: 16px; line-height: 32px; font-weight: 700; color: var(--t1); }
@media (max-width: 999.98px) {
  .cmp-t, .cmp-t tbody { display: block; }
  .cmp-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-t tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--line1); }
  .cmp-t td { display: block; width: auto; padding: 0; border: 0; }
  .cmp-t td.cmp-n { position: absolute; left: 0; top: 12px; width: 28px; line-height: 56px; }
  .cmp-t td.cmp-p { flex: 0 0 100%; margin-bottom: 4px; }
  .cmp-t td.cmp-v { width: auto; text-align: left; }
  .cmp-t td[data-th]::before { content: attr(data-th); margin-right: 6px; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--t3); }
  .cmp-t td.cmp-s { padding-left: 0; }
  .cmp-t td.cmp-none { display: none; }
}
@media (max-width: 599px) {
  .cmp-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .cmp-nums dd { font-size: 16px; white-space: normal; }
  .cmp-t td.cmp-sum { flex: 0 0 100%; }
  .cmp-links a { min-height: 44px; }
  .cmp-chips .chip { height: 44px; padding: 0 16px; }
  .cmp-grp { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (min-width: 1000px) {
  .logo { min-width: 156px; }
  .pg-search .wrap { max-width: 1340px; }
  .pg-product .wrap { max-width: 1500px; }
  .pg-search .hd-in > .sbox, .pg-product .hd-in > .sbox { max-width: none; }
  .pg-home .home-main > .caticons { display: none; }
  .filters { padding: 0 20px; border-right: 1px solid var(--line1); align-self: stretch; }
  .f-h { font-size: 16px; line-height: 24px; }
  .r-tools, .srp-cat .r-tools { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 40px; padding: 0 16px; border: 0; background: var(--bg2); }
  .r-bar { display: contents; }
  .r-tools .tgl { order: 1; min-height: 40px; }
  .r-tools .r-sort, .srp-cat .r-tools .r-sort { order: 2; min-height: 40px; padding-bottom: 0; border-bottom: 0; }
  .r-tools .r-bar + .r-sort::before { content: ''; flex: 0 0 1px; width: 1px; height: 12px; margin: 0 12px; background: var(--line2); }
  .r-tools .r-cnt { order: 3; margin-left: auto; }
  .r-tools .r-size { order: 4; margin-left: 12px; }
  .r-dead .r-bar > * { opacity: .4; }
  .pdp-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .pdp-gallery { gap: 12px; }
  .pdp-thumbs, .pdp-thumbs.one { display: flex; flex: 0 0 68px; }
  .pdp-thumbs button { width: 68px; height: 68px; }
  .pdp-title { font-size: 16px; line-height: 24px; }
  .pdp-sub, .pdp-sub .pdp-cat { font-size: 14px; line-height: 22px; }
  .pdp-titlerow .pdp-acts { margin-bottom: -14px; }
  .pdp-titlerow + .pdp-sub { padding-right: 92px; }
  .pdp-acts { gap: 6px; margin: 0; }
  .pdp-acts .circ { width: 38px; height: 38px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg1); }
  .pdp-acts .circ .ico { width: 18px; height: 18px; }
  .pdp-acts .circ:hover { border-color: var(--t3); }
  .pdp-price { margin-top: 16px; padding-top: 16px; }
  .pdp-price strong { font-size: 20px; line-height: 28px; }
  .pdp-unit { font-size: 13px; line-height: 20px; }
  .pdp-shipfee { margin-top: 8px; font-size: 13px; line-height: 20px; }
  .pdp-order { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "qty wish ai" "sum sum sum"; gap: 8px; margin-top: 20px; }
  .pdp-order .pdp-buy, .pdp-order .pdp-btns { display: contents; }
  .pdp-order .qty { grid-area: qty; width: 84px; height: 42px; }
  .pdp-order .pdp-sum { grid-area: sum; }
  .pdp-order .btn-sub { grid-area: wish; }
  .pdp-order .btn-main { grid-area: ai; }
  .pdp-order .btn { height: 42px; font-size: 16px; line-height: 24px; }
  .pdp .shelf { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line1); }
  .pdp .sh-body { --cols: 6; }
}
@media (min-width: 1300px) { .pdp .sh-body { --cols: 8; } }
@media (min-width: 1500px) { .pdp .sh-body { --cols: 9; } }
.cb-grid > .cb-card:nth-child(n+5) { display: none; }
@media (min-width: 1500px) {
  .wrap { max-width: 1280px; }
  .home-main .sh-body { --cols: 5; }
  .r-grid { --cols: 5; }
  .bn-txt { left: max(32px, calc(50% - 580px)); }
  .bn-tabs { right: max(24px, calc(50% - 620px)); }
  .sidecats { left: calc(50% - 620px - 56px); }
  .hd-in > .sbox { justify-self: center; }
  .cblock { grid-template-columns: 180px 280px minmax(0, 1fr); }
  .cb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-grid > .cb-card:nth-child(n+5) { display: block; }
  .cb-grid > .cb-card:nth-child(n+7) { display: none; }
  .cb-img { width: 200px; height: 200px; }
  .pg-home .cblocks > .cblock { contain-intrinsic-size: auto 516px; }
  .cblock-ph { height: 516px; }
  .td-tile > a { height: 360px; }
  .td-w .td-img { width: 320px; height: 320px; }
  .td-n .td-img { width: 250px; height: 250px; }
}
@media (min-width: 1800px) {
  .wrap, .pg-search .wrap, .pg-product .wrap { max-width: 1580px; }
  .home-main .sh-body { --cols: 6; }
  .r-grid { --cols: 6; }
  .bn-txt { left: max(32px, calc(50% - 730px)); }
  .bn-tabs { right: max(24px, calc(50% - 770px)); }
  .sidecats { left: calc(50% - 770px - 56px); }
  .hd-in > .sbox { max-width: 640px; }
  .cblock { grid-template-columns: 180px 300px minmax(0, 1fr); }
  .cb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cb-grid > .cb-card:nth-child(n+7) { display: block; }
  .cb-grid > .cb-card:nth-child(n+9) { display: none; }
  .td-tile > a { height: 400px; }
  .td-w .td-img { width: 360px; height: 360px; }
  .td-n .td-img { width: 280px; height: 280px; }
}
@media (min-width: 2100px) {
  .wrap, .pg-search .wrap, .pg-product .wrap { max-width: 1880px; }
  .home-main .sh-body { --cols: 7; }
  .r-grid { --cols: 7; }
  .bn-txt { left: max(32px, calc(50% - 880px)); }
  .bn-tabs { right: max(24px, calc(50% - 920px)); }
  .sidecats { left: calc(50% - 920px - 56px); }
  .cblock { grid-template-columns: 180px 320px minmax(0, 1fr); }
  .cb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cb-grid > .cb-card:nth-child(n+9) { display: block; }
  .td-tile > a { height: 440px; }
  .td-w .td-img { width: 400px; height: 400px; }
  .td-n .td-img { width: 300px; height: 300px; }
}
@media (min-width: 2400px) {
  .wrap, .pg-search .wrap, .pg-product .wrap { max-width: 2180px; }
  .home-main .sh-body { --cols: 8; }
  .r-grid { --cols: 8; }
  .bn-txt { left: max(32px, calc(50% - 1030px)); }
  .bn-tabs { right: max(24px, calc(50% - 1070px)); }
  .sidecats { left: calc(50% - 1070px - 56px); }
  .cblock { grid-template-columns: 180px 340px minmax(0, 1fr); }
  .cb-img { width: 240px; height: 240px; }
  .pg-home .cblocks > .cblock { contain-intrinsic-size: auto 596px; }
  .cblock-ph { height: 596px; }
  .td-tile > a { height: 460px; }
  .td-w .td-img { width: 420px; height: 420px; }
  .td-n .td-img { width: 320px; height: 320px; }
}
.pdp-btns.has-buy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.pdp-btns.has-buy .btn { padding: 0 4px; font-size: 14px; }
.dock-buy { flex: 1.3; height: 44px; font-size: 16px; line-height: 24px; }
@media (min-width: 1000px) {
  .pdp-order.has-buy { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "qty wish ai buy" "sum sum sum sum"; }
  .pdp-order .pdp-ai { grid-area: ai; }
  .pdp-order .pdp-buy-link { grid-area: buy; }
}
.ord { padding-bottom: 48px; }
.ord-back { margin: 12px 0 0; font-size: 13px; line-height: 20px; }
.ord-back a { display: inline-flex; align-items: center; gap: 2px; color: var(--t2); }
.ord-back .ico { width: 16px; height: 16px; }
.ord-test { display: inline-flex; align-items: center; height: 28px; margin: 0 0 16px; padding: 0 10px; border-radius: 4px; background: var(--sale-soft); color: var(--sale); font-size: 13px; font-weight: 700; }
.ord-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ord-left { display: grid; gap: 16px; align-content: start; }
.ord-box { padding: 16px; border: 1px solid var(--line1); border-radius: 4px; background: var(--bg1); }
.ord-box h2 { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--t1); }
.ord-prod { display: flex; gap: 12px; align-items: flex-start; }
.ord-prod .ph { flex: 0 0 72px; width: 72px; height: 72px; border: 1px solid var(--line1); border-radius: 4px; overflow: hidden; }
.ord-prod .ph img { width: 100%; height: 100%; object-fit: cover; }
.ord-prod .t { font-size: 14px; line-height: 20px; color: var(--t1); word-break: keep-all; overflow-wrap: anywhere; }
.ord-prod .s { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--t3); }
.ord-f { display: block; margin-top: 12px; }
.ord-f > span { display: block; margin-bottom: 4px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t2); }
.ord-f input, .ord-f select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg1); color: var(--t1); font-size: 16px; line-height: 24px; }
.ord-f input:focus, .ord-f select:focus { border-color: var(--brand); outline: 1px solid var(--brand); outline-offset: -2px; }
.ord-zip input { max-width: 180px; }
.ord-qty { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ord-qty .lab { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--t2); }
.ord-qty .qty { flex-basis: 132px; width: 132px; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "dn in up"; }
.ord-qty .qty .qty-dn { border-top: 0; border-left: 0; border-right: 1px solid var(--line2); }
.ord-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--t2); }
.ord-dl dd { text-align: right; color: var(--t1); word-break: keep-all; overflow-wrap: anywhere; }
.ord-dl .tot { padding-top: 8px; border-top: 1px solid var(--line1); font-size: 16px; line-height: 24px; font-weight: 700; color: var(--t1); }
.ord-done .ord-dl dd { text-align: left; }
.ord .pwarn { margin: 16px 0 0; }
.ord-agree { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 13px; line-height: 20px; color: var(--t2); cursor: pointer; }
.ord-agree input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); }
.ord-msg { min-height: 20px; margin: 0 0 8px; font-size: 13px; line-height: 20px; color: var(--warn); }
.ord-msg.is-info { color: var(--t2); }
.ord-pay-btn { width: 100%; }
.ord-pay-btn[disabled] { opacity: .45; cursor: default; }
#payment-method, #agreement { min-height: 48px; }
.ord-done { max-width: 720px; }
.ord-done .ord-box { margin-top: 16px; }
.ord-no { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; font-size: 16px; line-height: 24px; color: var(--t2); }
.ord-no b { font-size: 18px; color: var(--t1); letter-spacing: .02em; }
.ord-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (min-width: 1000px) {
  .ord-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .ord-sum { position: sticky; top: 16px; }
}