/* =========================================================
   ELLEUT 리뉴얼 — elleut3 시안 이식본 (elleut3.pages.css)
   원본: /home/elleut/public_html/elleut3/css/pages.css
   변경점: 서버 Tailwind 유틸리티와 충돌하는 클래스 4종에 el- 접두사를 붙였다.
     .container -> .el-container   .block -> .el-block
     .grid      -> .el-grid        .table -> .el-table
   그 외 규칙은 시안 원본 그대로다. 수정 시 원본과 함께 관리할 것.
   ========================================================= */
/* =========================================================
   ELLEUT 하위 페이지 스타일 (상세 · 목록 · 위시 · 장바구니 · 주문서 · 마이페이지 · 로그인 · 고객센터)
   ========================================================= */
[hidden] { display: none !important; }
.page { padding-top: 14px; }
.card__brand, .card__name { display: block; }
.card__name { display: -webkit-box; }
.card__brand:hover, .card__name:hover { text-decoration: underline; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--grey-4); margin: 2px 0 12px; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb span::before { content: "›"; margin-right: 6px; color: var(--line-2); }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.page-title small { font-size: 14px; font-weight: 500; color: var(--grey-4); margin-left: 8px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.muted { color: var(--grey-4); font-size: 13px; }
.empty { padding: 60px 20px; text-align: center; color: var(--grey-4); }
.empty svg { width: 48px; height: 48px; stroke: var(--grey-3); fill: none; stroke-width: 1.6; margin: 0 auto 12px; }
.empty p { font-size: 15px; color: var(--grey-5); font-weight: 600; }
.empty .btn { margin-top: 16px; }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 16px); z-index: 200; padding: 10px 18px; border-radius: 999px; background: rgba(17, 17, 17, .92); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: #FFD166; text-decoration: underline; margin-left: 6px; }

/* ---------- 상품 상세 ---------- */
.pd { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pd__gallery { display: grid; gap: 10px; }
.pd__main { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.pd__main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pd__main .card__rank { font-size: 12px; width: auto; padding: 0 10px; border-radius: var(--radius) 0 6px 0; }
.pd__thumbs { display: flex; gap: 8px; }
.pd__thumbs button { width: 64px; height: 64px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; overflow: hidden; }
.pd__thumbs button.is-active { border: 2px solid var(--ink); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pd__info { display: flex; flex-direction: column; gap: 14px; }
.pd__brand { font-size: 14px; font-weight: 800; }
.pd__brand a:hover { text-decoration: underline; }
.pd__name { font-size: 20px; font-weight: 700; line-height: 1.35; margin-top: 4px; }
.pd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--grey-5); margin-top: 6px; }
.pd__meta b { color: #F59E0B; }
.pd__meta a { text-decoration: underline; text-underline-offset: 3px; }
.pd__price { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pd__price s { display: block; font-size: 13px; color: var(--grey-4); }
.pd__price .row { display: flex; align-items: baseline; gap: 10px; }
.pd__price .off { color: var(--primary); font-weight: 900; font-size: 24px; }
.pd__price strong { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.pd__price .coupon-price { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-5); }
.pd__price .coupon-price b { color: var(--primary); font-size: 15px; }
.spec { display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; font-size: 13px; }
.spec dt { color: var(--grey-4); }
.spec dd { margin: 0; color: var(--ink-2); }
.spec .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.spec .bd { font-size: 11px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.qty button { width: 36px; height: 36px; font-size: 18px; background: #fff; }
.qty button:hover { background: var(--bg); }
.qty input { width: 44px; height: 36px; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); text-align: center; font: inherit; font-weight: 700; }
.pd__total { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.pd__total strong { font-size: 22px; font-weight: 900; color: var(--primary); }
.pd__actions { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 8px; }
.pd__actions .btn { min-height: 50px; font-size: 15px; }
.pd__actions .wish-lg { border: 1px solid var(--line-2); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.pd__actions .wish-lg svg { width: 22px; height: 22px; fill: none; stroke: var(--grey-5); stroke-width: 2; }
.pd__actions .wish-lg.is-on svg { fill: var(--primary); stroke: var(--primary); }

.pd-tabs { position: sticky; top: 48px; z-index: 20; background: #fff; border-bottom: 1px solid var(--line-2); margin-top: 24px; display: flex; overflow-x: auto; scrollbar-width: none; }
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tabs a { flex: 1 0 auto; text-align: center; padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--grey-4); border-bottom: 2px solid transparent; white-space: nowrap; }
.pd-tabs a.is-active, .pd-tabs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.panel { padding: 26px 0 8px; scroll-margin-top: 110px; }
.panel h2 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.panel h2 small { font-size: 13px; color: var(--grey-4); font-weight: 500; margin-left: 6px; }
.detail-gallery { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.detail-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.detail-gallery img { width: 100%; height: auto; }
.detail-gallery figcaption { padding: 10px 14px; font-size: 13px; color: var(--grey-5); border-top: 1px solid var(--line); }
.detail-copy { max-width: 760px; margin: 18px auto 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.info-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 18px; }
.info-table th, .info-table td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.info-table th { width: 140px; background: var(--bg); font-weight: 700; color: var(--grey-5); }
.reviews { display: grid; gap: 10px; }
.review { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.review__head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--grey-4); }
.review__head b { color: #F59E0B; font-size: 13px; }
.review p { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.qna { border-top: 1px solid var(--line); }
.qna details { border-bottom: 1px solid var(--line); }
.qna summary { list-style: none; cursor: pointer; padding: 14px 4px; font-size: 14px; font-weight: 700; display: flex; gap: 10px; }
.qna summary::-webkit-details-marker { display: none; }
.qna summary .q { color: var(--primary); font-weight: 900; }
.qna .a { padding: 0 4px 14px 30px; font-size: 13px; color: var(--grey-5); line-height: 1.7; }
.pd-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid var(--line-2); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 48px 1fr 1fr; gap: 8px; }
.pd-sticky .btn { min-height: 46px; }
.pd-sticky .wish-lg { border: 1px solid var(--line-2); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.pd-sticky .wish-lg svg { width: 22px; height: 22px; fill: none; stroke: var(--grey-5); stroke-width: 2; }
.pd-sticky .wish-lg.is-on svg { fill: var(--primary); stroke: var(--primary); }
body.has-sticky .mobile-bar { display: none; }

/* ---------- 상품 목록 ---------- */
.list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.filters { display: none; }
.filter { padding: 14px 16px; }
.filter + .filter { border-top: 1px solid var(--line); }
.filter h3 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.filter a, .filter label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--grey-5); cursor: pointer; }
.filter a:hover, .filter label:hover { color: var(--ink); }
.filter a.is-active { color: var(--primary); font-weight: 700; }
.filter input { accent-color: var(--primary); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.toolbar__count { font-size: 13px; color: var(--grey-5); }
.toolbar__count b { color: var(--ink); }
.sort { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sort a { flex: none; padding: 6px 10px; border-radius: 999px; font-size: 13px; color: var(--grey-4); }
.sort a.is-active { background: var(--ink); color: #fff; font-weight: 700; }
.chips-active { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.chips-active a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--primary-bg); color: var(--primary); font-size: 12px; font-weight: 700; }
.chips-active a::after { content: "×"; font-size: 14px; }
.pager { display: flex; justify-content: center; gap: 4px; padding: 18px 0 6px; }
.pager a, .pager span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 6px; font-size: 13px; }
.pager .is-active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }

/* ---------- 위시리스트 / 장바구니 ---------- */
.rows { display: grid; gap: 10px; }
.row { display: grid; grid-template-columns: 22px 72px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.row__img { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.row__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.row__brand { font-size: 12px; font-weight: 800; }
.row__name { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.row__sub { font-size: 12px; color: var(--grey-4); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
.row__price { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.row__price .off, .row__price strong, .row__price s { white-space: nowrap; }
.row__price .off { color: var(--primary); font-weight: 900; }
.row__price strong { font-size: 15px; font-weight: 800; }
.row__price s { font-size: 12px; color: var(--grey-4); }
.row__ctrl { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.row__ctrl .btns { display: flex; gap: 6px; }
.row__sum { font-size: 15px; font-weight: 900; }
.row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; font-size: 13px; }
.bulk label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.bulk input { width: 18px; height: 18px; accent-color: var(--primary); }
.bulk .btns { display: flex; gap: 6px; }
.summary { padding: 18px; position: sticky; top: 60px; }
.summary h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 13px; margin: 0; }
.summary dt { color: var(--grey-5); }
.summary dd { margin: 0; text-align: right; font-weight: 700; }
.summary dd.minus { color: var(--primary); }
.summary .total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line-2); font-size: 14px; font-weight: 800; }
.summary .total strong { font-size: 22px; font-weight: 900; color: var(--primary); }
.summary select { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; margin: 6px 0 10px; }
.summary .btn { margin-top: 12px; }
.summary .note { font-size: 12px; color: var(--grey-4); margin-top: 10px; }

/* ---------- 주문서 ---------- */
.form { display: grid; gap: 12px; }
.form .field { display: grid; gap: 6px; }
.form label { font-size: 13px; font-weight: 700; }
.form label .req { color: var(--primary); margin-left: 2px; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="password"], .form select, .form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; font-size: 14px; background: #fff; }
.form textarea { min-height: 90px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .08); }
.form .inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.form .cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form input, .form select, .form textarea { min-width: 0; }
@media (min-width: 640px) { .form .cols { grid-template-columns: 1fr 1fr; } }
.form .help { display: block; font-size: 12px; color: var(--grey-4); line-height: 1.6; }
.form .error { font-size: 12px; color: var(--primary); display: none; }
.form .error.is-visible { display: block; }
.radio-list { display: grid; gap: 8px; }
.radio-list label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 14px; cursor: pointer; }
.radio-list label:has(input:checked) { border-color: var(--ink); background: var(--bg); }
.radio-list input { accent-color: var(--primary); width: 18px; height: 18px; }
.agree { display: grid; gap: 8px; font-size: 13px; }
.agree label { display: flex; align-items: center; gap: 8px; }
.agree label.all { font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.agree input { accent-color: var(--primary); width: 18px; height: 18px; }
.agree a { color: var(--grey-4); text-decoration: underline; margin-left: auto; font-size: 12px; }
.mini-rows { display: grid; gap: 8px; }
.mini-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.mini-row img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: #fff; }
.mini-row b { display: block; font-weight: 800; }
.mini-row .m { color: var(--grey-4); font-size: 12px; }
.mini-row strong { font-weight: 800; white-space: nowrap; }
.done { text-align: center; padding: 40px 20px; }
.done .ok { width: 64px; height: 64px; border-radius: 50%; background: #EDFAF4; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.done .ok svg { width: 30px; height: 30px; stroke: var(--green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.done h2 { font-size: 20px; font-weight: 800; }
.done p { color: var(--grey-5); margin-top: 6px; font-size: 14px; }
.done .btns { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

/* ---------- 마이페이지 ---------- */
.my { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.my > div > * { min-width: 0; }
.my-nav { display: none; }
.my-nav h3 { font-size: 13px; font-weight: 800; color: var(--grey-4); padding: 14px 16px 6px; }
.my-nav a { display: block; padding: 8px 16px; font-size: 14px; color: var(--ink-2); }
.my-nav a:hover, .my-nav a.is-active { color: var(--primary); font-weight: 700; }
.my-nav__chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.my-nav__chips a { flex: none; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; background: #fff; }
.my-hero { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 18px; }
.my-hero__user { display: flex; align-items: center; gap: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; flex: none; }
.my-hero__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 20px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.my-hero__name { font-size: 17px; font-weight: 800; }
.my-hero__tier { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #FFF4D6; color: #9A6B00; font-size: 11px; font-weight: 800; vertical-align: middle; }
.my-hero__meta { font-size: 12px; color: var(--grey-4); margin-top: 2px; }
.my-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.my-stats a { display: block; padding: 12px; border-radius: var(--radius); background: var(--bg); text-align: center; }
.my-stats a b { display: block; font-size: 18px; font-weight: 900; }
.my-stats a span { font-size: 12px; color: var(--grey-5); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 14px 16px 18px; }
.steps div { text-align: center; font-size: 12px; color: var(--grey-4); position: relative; }
.steps div b { display: block; font-size: 20px; font-weight: 900; color: var(--ink); }
.steps div.is-on b { color: var(--primary); }
.order { padding: 14px 16px; border-top: 1px solid var(--line); }
.order__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13px; }
.order__head b { font-weight: 800; }
.order__head .st { color: var(--primary); font-weight: 800; }
.order__head a { color: var(--grey-4); text-decoration: underline; }
.order__body { margin-top: 10px; display: grid; gap: 8px; }
.order__btns { display: flex; gap: 6px; margin-top: 10px; }
.track { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--grey-4); }
.track span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 4px; background: var(--bg); }
.track span.is-done { background: #EDFAF4; color: var(--green); font-weight: 700; }
.track span.is-now { background: var(--primary); color: #fff; font-weight: 800; }
.el-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.el-table th, .el-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.el-table th { background: var(--bg); font-weight: 700; color: var(--grey-5); font-size: 12px; }
.el-table td.r { text-align: right; font-weight: 700; }
.coupon-list { display: grid; gap: 8px; padding: 14px 16px; }
.coupon-list .coupon__amt { width: 96px; font-size: 18px; }

/* ---------- 로그인 ---------- */
.auth { max-width: 440px; margin: 20px auto 40px; padding: 26px 22px 28px; }
.auth__tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.auth__tabs a { flex: 1; text-align: center; padding: 12px 0; font-weight: 800; font-size: 15px; color: var(--grey-4); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth__tabs a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.auth .links { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--grey-5); margin-top: 12px; }
.auth .links a:hover { text-decoration: underline; }
.social { display: grid; gap: 8px; margin-top: 18px; }
.social .btn { justify-content: center; font-weight: 700; }
.btn--kakao { background: #FEE500; color: #191919; }
.btn--naver { background: #03C75A; color: #fff; }
.btn--apple { background: #000; color: #fff; }
.divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--grey-4); margin: 18px 0 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- 고객센터 ---------- */
.support { display: grid; grid-template-columns: 1fr; gap: 16px; }
.support-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.support-tabs a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 700; background: #fff; }
.support-tabs a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.notice-list li a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.notice-list li:first-child a { border-top: 0; }
.notice-list .tag { padding: 3px 8px; border-radius: 4px; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--grey-5); }
.notice-list time { font-size: 12px; color: var(--grey-4); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font-weight: 700; display: flex; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { color: var(--primary); font-weight: 900; }
.faq .a { padding: 0 16px 14px 42px; font-size: 13px; color: var(--grey-5); line-height: 1.7; }
.cs-box { padding: 18px; }
.cs-box .help__cs { font-size: 28px; font-weight: 900; color: var(--primary); }
.cs-box p { font-size: 13px; color: var(--grey-5); margin-top: 6px; }
.cs-box .btns { display: grid; gap: 6px; margin-top: 12px; }
.article { padding: 18px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.article h3 { font-size: 15px; font-weight: 800; margin: 14px 0 4px; }
.article h3:first-child { margin-top: 0; }

/* =========================================================
   반응형
   ========================================================= */
@media (min-width: 640px) {
  .row { grid-template-columns: 24px 96px 1fr auto; gap: 12px; padding: 14px; }
  .row__img { width: 96px; height: 96px; }
  .my-stats { grid-template-columns: repeat(4, 1fr); }
  .row__ctrl { grid-column: auto; flex-direction: column; align-items: flex-end; }
  .my-hero { grid-template-columns: 1fr 1fr; align-items: center; }
  .pd__actions { grid-template-columns: 52px 1fr 1fr; }
}
@media (min-width: 1024px) {
  .pd { grid-template-columns: 1.05fr 1fr; gap: 36px; }
  .pd__name { font-size: 24px; }
  .pd-sticky { display: none; }
  .list { grid-template-columns: 220px 1fr; }
  .filters { display: block; align-self: start; position: sticky; top: 60px; }
  .cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
  .checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
  .my { grid-template-columns: 220px minmax(0, 1fr); }
  .my-nav { display: block; align-self: start; position: sticky; top: 60px; padding-bottom: 10px; }
  .my-nav__chips { display: none; }
  .my-stats { grid-template-columns: repeat(4, 1fr); }
  .support { grid-template-columns: 1fr 300px; align-items: start; }
  .steps div b { font-size: 24px; }
}

/* =========================================================
   셀렉트샵
   ========================================================= */
.sel-hero { display: grid; gap: 18px; padding: 26px 20px; background: linear-gradient(135deg, #FFF3EE 0%, #FFFFFF 55%); }
.sel-hero__label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--primary); }
.sel-hero__title { font-size: 26px; font-weight: 900; line-height: 1.25; letter-spacing: -0.02em; margin-top: 8px; }
.sel-hero__desc { margin-top: 10px; font-size: 14px; color: var(--grey-5); line-height: 1.7; max-width: 520px; }
.sel-hero__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sel-hero__points { display: grid; gap: 8px; }
.sel-hero__points li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.sel-hero__points b { display: block; font-size: 14px; font-weight: 800; }
.sel-hero__points span { display: block; font-size: 12px; color: var(--grey-4); margin-top: 2px; line-height: 1.5; }
.sel-nav { position: sticky; top: 48px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; margin-top: 4px; background: var(--bg); scrollbar-width: none; }
.sel-nav::-webkit-scrollbar { display: none; }
.sel-nav a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 700; }
.sel-nav a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.criteria { display: grid; grid-template-columns: 1fr; gap: 10px; list-style: none; }
.criteria li { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.criteria__no { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 900; align-items: center; justify-content: center; margin-bottom: 8px; }
.criteria li b { display: block; font-size: 15px; font-weight: 800; }
.criteria li span:not(.criteria__no) { display: block; font-size: 13px; color: var(--grey-5); line-height: 1.6; margin-top: 4px; }
.notice-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 18px; }
.notice-chips span { padding: 6px 10px; border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 700; color: var(--grey-5); }
@media (min-width: 640px) {
  .sel-hero { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 34px 28px; }
  .criteria { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .sel-hero__title { font-size: 34px; }
}

/* =========================================================
   셀렉트샵 (입점 스토어) 공통 카드
   ========================================================= */
.shops { display: grid; grid-template-columns: 1fr; gap: 10px; }
.shop-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.shop-card__head { display: flex; align-items: center; gap: 12px; padding: 14px; }
.shop-card__mark { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; letter-spacing: .04em; }
.shop-card__title b { display: block; font-size: 16px; font-weight: 900; }
.shop-card__title small { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.shop-card__body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.shop-card__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--grey-4); }
.shop-card__meta b { color: var(--ink); font-weight: 800; }
.shop-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-card__tags span { padding: 3px 8px; border-radius: 4px; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--grey-5); }
.shop-card__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shop-card__items a { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; display: block; }
.shop-card__items img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.shop-card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.join-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 18px 18px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(90deg, #FFF3EE, #FFF); border: 1px dashed #F6B7A8; }
.join-strip b { display: block; font-size: 14px; font-weight: 800; }
.join-strip span { font-size: 12px; color: var(--grey-5); }
.join-strip .btns { display: flex; gap: 6px; }

/* ---------- 셀렉트샵 메인 ---------- */
.sel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sel-stats li { padding: 12px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-align: center; }
.sel-stats b { display: block; font-size: 20px; font-weight: 900; color: var(--primary); }
.sel-stats span { font-size: 12px; color: var(--grey-4); }
.rank-list { display: grid; gap: 0; }
.rank-item { display: grid; grid-template-columns: 32px 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.rank-item:first-child { border-top: 0; }
.rank-item__no { font-size: 18px; font-weight: 900; color: var(--grey-4); }
.rank-item:nth-child(-n+3) .rank-item__no { color: var(--primary); }
.rank-item__mark { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.rank-item__name { font-size: 14px; font-weight: 800; }
.rank-item__sub { font-size: 12px; color: var(--grey-4); }
.rank-item__stat { text-align: right; font-size: 12px; color: var(--grey-4); }
.rank-item__stat b { display: block; font-size: 14px; color: var(--ink); font-weight: 800; }
.flow { display: grid; grid-template-columns: 1fr; gap: 8px; counter-reset: flow; }
.flow li { position: relative; padding: 16px 16px 16px 52px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.flow li::before { counter-increment: flow; content: counter(flow); position: absolute; left: 14px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.flow li.is-primary::before { background: var(--primary); }
.flow b { display: block; font-size: 14px; font-weight: 800; }
.flow span { display: block; font-size: 12px; color: var(--grey-5); margin-top: 3px; line-height: 1.6; }
.fee-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fee-cards li { padding: 14px; border-radius: var(--radius); background: var(--bg); }
.fee-cards b { display: block; font-size: 18px; font-weight: 900; }
.fee-cards b small { font-size: 12px; font-weight: 600; color: var(--grey-4); margin-left: 4px; }
.fee-cards span { font-size: 12px; color: var(--grey-5); }
.settle-flow { display: grid; grid-template-columns: 1fr; gap: 6px; }
.settle-flow li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: 13px; }
.settle-flow li em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--primary); }
.settle-flow li b { display: block; font-weight: 800; }
.settle-flow li span { font-size: 12px; color: var(--grey-5); }

/* ---------- 셀렉트샵 상세 (shop.html) ---------- */
.shop-hd { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.shop-hd__cover { height: 110px; }
.shop-hd__body { display: grid; gap: 12px; padding: 0 18px 18px; }
.shop-hd__top { display: flex; align-items: flex-end; gap: 14px; margin-top: -30px; }
.shop-hd__mark { flex: none; width: 76px; height: 76px; border-radius: 18px; border: 4px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.shop-hd__name { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.shop-hd__name small { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: var(--bg); font-size: 11px; font-weight: 800; color: var(--grey-5); vertical-align: middle; }
.shop-hd__tag { font-size: 13px; color: var(--grey-5); margin-top: 2px; }
.shop-hd__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--grey-4); }
.shop-hd__meta b { color: var(--ink); font-weight: 800; }
.shop-hd__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-hd__notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; background: #FFF8E6; font-size: 12px; color: #6B4E00; }
.shop-hd__notice b { flex: none; }
.shop-nav { position: sticky; top: 48px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; background: var(--bg); scrollbar-width: none; }
.shop-nav::-webkit-scrollbar { display: none; }
.shop-nav a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 700; }
.shop-nav a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.biz-table th { width: 120px; white-space: nowrap; }
.shop-review { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.shop-review__head { display: flex; justify-content: space-between; color: var(--grey-4); font-size: 12px; margin-bottom: 4px; }
.shop-review__head b { color: var(--gold); }

/* ---------- 판매자 센터 (seller.html) ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.my > * { min-width: 0; }
.kpi { padding: 14px; border-radius: var(--radius); background: var(--bg); min-width: 0; }
.kpi span { display: block; font-size: 12px; color: var(--grey-5); }
.kpi b { display: block; font-size: 17px; font-weight: 900; margin-top: 4px; overflow-wrap: anywhere; }
.kpi small { display: block; font-size: 11px; color: var(--green); font-weight: 700; margin-top: 2px; }
.kpi--primary { background: var(--primary-bg); }
.kpi--primary b { color: var(--primary); }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; padding: 8px 0 0; }
.bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; font-size: 10px; color: var(--grey-4); min-width: 0; overflow: hidden; white-space: nowrap; }
.bars li i { display: block; width: 100%; max-width: 40px; border-radius: 6px 6px 2px 2px; background: #FFC9BC; }
.bars li.is-today i { background: var(--primary); }
.bars li b { font-size: 10px; color: var(--ink); font-weight: 700; }
@media (min-width: 640px) { .bars { gap: 8px; } .bars li, .bars li b { font-size: 11px; } }
.pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--bg); color: var(--grey-5); white-space: nowrap; }
.pill--on { background: #EDFAF4; color: var(--green); }
.pill--wait { background: #FFF4D6; color: #9A6B00; }
.pill--off { background: var(--primary-bg); color: var(--primary); }
.pill--blue { background: #E5EEFC; color: #12305E; }
.el-table td .btn { min-height: 30px; padding: 0 10px; font-size: 12px; }
.el-table .thumb { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; vertical-align: middle; margin-right: 8px; }
.seller-hero { display: grid; gap: 14px; padding: 22px 20px; background: linear-gradient(135deg, #FFF3EE 0%, #FFFFFF 60%); }
.seller-hero__title { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.3; }
.seller-hero__desc { font-size: 13px; color: var(--grey-5); line-height: 1.7; }
.seller-hero__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.settle-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.settle-sum li { padding: 12px; border-radius: var(--radius); background: var(--bg); text-align: center; }
.settle-sum b { display: block; font-size: 14px; font-weight: 900; overflow-wrap: anywhere; }
.settle-sum span { font-size: 11px; color: var(--grey-5); }
.settle-sum li.is-primary { background: var(--primary-bg); }
.settle-sum li.is-primary b { color: var(--primary); }
.inline-form { padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--bg); }

@media (min-width: 640px) {
  .shops { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .fee-cards { grid-template-columns: repeat(4, 1fr); }
  .settle-flow { grid-template-columns: repeat(5, 1fr); }
  .settle-flow li { grid-template-columns: 1fr; align-content: start; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi b { font-size: 20px; }
  .settle-sum b { font-size: 17px; }
  .seller-hero { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 30px 28px; }
  .shop-hd__cover { height: 150px; }
}
@media (min-width: 1024px) {
  .shops { grid-template-columns: repeat(3, 1fr); }
  .shops--index { grid-template-columns: repeat(4, 1fr); }
  .flow { grid-template-columns: repeat(4, 1fr); }
  .seller-hero__title { font-size: 28px; }
}

/* ---------- 상품 상세: 판매 셀렉트샵 박스 ---------- */
.pd__shop { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.pd__shop:hover { border-color: var(--ink); }
.pd__shop-mark { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.pd__shop-text b { display: block; font-size: 14px; font-weight: 800; }
.pd__shop-text small { display: block; font-size: 12px; color: var(--grey-4); margin-top: 2px; }
.pd__shop-go { font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* ---------- 회원가입: 회원 유형 선택 ---------- */
.join-type { display: grid; gap: 8px; }
.join-type__title { font-size: 14px; font-weight: 800; }
.join-type__title .req { color: var(--primary); margin-left: 2px; }
.join-type__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.join-type__opt:hover { border-color: var(--ink); }
.join-type__opt.is-on { border-color: var(--ink); background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); }
.join-type__opt input { flex: none; width: 18px; height: 18px; accent-color: var(--primary); }
.join-type__opt b { display: block; font-size: 14px; font-weight: 800; }
.join-type__opt .d { display: block; font-size: 12px; color: var(--grey-4); margin-top: 2px; }
.join-type__opt .tag { flex: none; margin-left: auto; padding: 3px 8px; border-radius: 4px; background: var(--primary-bg); color: var(--primary); font-size: 11px; font-weight: 800; font-style: normal; white-space: nowrap; }
.join-biz { display: grid; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.join-biz h3 { font-size: 14px; font-weight: 800; }
.join-biz input { background: #fff; }

/* =========================================================
   AI 코디
   ========================================================= */
.ai-hero { display: grid; gap: 16px; padding: 26px 20px; background: linear-gradient(135deg, #F1EAFC 0%, #FFFFFF 60%); }
.ai-hero__label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #6D3BD1; }
.ai-hero__title { font-size: 26px; font-weight: 900; line-height: 1.28; letter-spacing: -0.02em; margin-top: 8px; }
.ai-hero__desc { margin-top: 10px; font-size: 14px; color: var(--grey-5); line-height: 1.7; max-width: 540px; }
.ai-hero__steps { display: grid; gap: 8px; }
.ai-hero__steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 13px; font-weight: 700; }
.ai-hero__steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #6D3BD1; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.ai-form { display: grid; gap: 18px; }
.ai-group h3 { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.ai-group h3 .req { color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 700; color: var(--ink-2); min-height: 38px; }
.chip small { display: block; font-size: 11px; font-weight: 500; color: var(--grey-4); margin-top: 1px; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.is-on small { color: rgba(255, 255, 255, .7); }
.ai-actions { display: grid; gap: 8px; justify-items: center; padding-top: 4px; }
.ai-actions .btn { max-width: 320px; }
.coord { display: grid; grid-template-columns: 1fr; gap: 10px; }
.coord-item { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.coord-item__slot { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 3px 8px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; }
.coord-item__img { width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; align-self: start; }
.coord-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.coord-item__brand { font-size: 12px; font-weight: 800; }
.coord-item__name { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.coord-item__name:hover { text-decoration: underline; }
.coord-item__price { margin-top: 4px; font-size: 15px; font-weight: 900; }
.coord-item__why { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: #F6F2FE; font-size: 12px; color: #4A3570; line-height: 1.6; }
.coord-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 18px 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg); }
.coord-sum strong { font-size: 20px; font-weight: 900; margin: 0 8px; }
.coord-sum .btns { display: flex; gap: 6px; }
.preset-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.preset { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preset__imgs { grid-column: 1 / -1; display: flex; gap: 6px; }
.preset__imgs a { flex: 1; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.preset__imgs img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.preset__body b { display: block; font-size: 14px; font-weight: 800; }
.preset__body span { display: block; font-size: 12px; color: var(--grey-4); margin-top: 2px; }
.preset__body strong { display: block; font-size: 15px; font-weight: 900; margin-top: 4px; }

/* =========================================================
   오늘의 컬러운세
   ========================================================= */
.fo-hero { display: grid; gap: 16px; padding: 26px 20px; background: linear-gradient(135deg, #FDE9F0 0%, #FFFFFF 60%); }
.fo-hero__label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #C2185B; }
.fo-hero__title { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; margin-top: 8px; }
.fo-hero__date { font-size: 13px; font-weight: 700; color: var(--grey-5); margin-top: 4px; }
.fo-hero__desc { margin-top: 10px; font-size: 14px; color: var(--grey-5); line-height: 1.7; max-width: 540px; }
.fo-form { align-self: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.fo-birth { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.fo-birth input { letter-spacing: .06em; }
.fo-card { display: grid; grid-template-columns: 1fr; gap: 0; }
.fo-card__swatch { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 30px 20px; border-radius: var(--radius) var(--radius) 0 0; text-align: center; }
.fo-card__swatch span { font-size: 11px; font-weight: 800; letter-spacing: .16em; opacity: .8; }
.fo-card__swatch strong { font-size: 32px; font-weight: 900; letter-spacing: -0.02em; }
.fo-card__swatch small { font-size: 13px; opacity: .85; }
.fo-card__body { padding: 18px; }
.fo-card__score { display: flex; align-items: baseline; gap: 4px; }
.fo-card__score b { font-size: 30px; font-weight: 900; }
.fo-card__score span { font-size: 12px; color: var(--grey-4); }
.fo-gauge { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 8px 0 12px; }
.fo-gauge i { display: block; height: 100%; border-radius: 4px; }
.fo-card__text { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.fo-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--grey-4); }
.fo-card__meta b { color: var(--ink); font-weight: 800; }
.fo-luck { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fo-luck__row { display: grid; grid-template-columns: 74px 84px 1fr; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.fo-luck__name { font-weight: 800; }
.fo-luck__star { color: var(--gold); letter-spacing: -1px; white-space: nowrap; }
.fo-luck__star i { color: var(--line-2); font-style: normal; }
.fo-luck__text { color: var(--grey-5); }
.fo-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 18px; }
.fo-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; list-style: none; }
.fo-week li { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: var(--radius); font-size: 11px; color: var(--grey-4); }
.fo-week li.is-today { background: var(--bg); font-weight: 800; color: var(--ink); }
.fo-week__day { font-weight: 700; }
.fo-week__name { font-size: 11px; }
.fo-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); flex: none; }
.fo-dot--lg { width: 26px; height: 26px; }
.fo-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fo-guide__item { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); font-size: 12px; }
.fo-guide__item b { font-weight: 800; }
.fo-guide__item span:last-child { grid-column: 2; color: var(--grey-4); }

@media (min-width: 640px) {
  .ai-hero { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 34px 28px; }
  .coord { grid-template-columns: repeat(2, 1fr); }
  .preset-list { grid-template-columns: repeat(3, 1fr); }
  .preset { grid-template-columns: 1fr; }
  .fo-hero { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 34px 28px; }
  .fo-card { grid-template-columns: 260px 1fr; }
  .fo-card__swatch { border-radius: var(--radius) 0 0 0; }
  .fo-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ai-hero__title, .fo-hero__title { font-size: 32px; }
  .coord { grid-template-columns: repeat(4, 1fr); }
  .coord-item { grid-template-columns: 1fr; }
  .coord-item__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .fo-guide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =========================================================
   쿠폰존
   ========================================================= */
.cz-hero { display: grid; gap: 16px; padding: 26px 20px; background: linear-gradient(135deg, #FFF1EE 0%, #FFFFFF 60%); }
.cz-hero__label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--primary); }
.cz-hero__title { font-size: 26px; font-weight: 900; line-height: 1.28; letter-spacing: -0.02em; margin-top: 8px; }
.cz-hero__desc { margin-top: 10px; font-size: 14px; color: var(--grey-5); line-height: 1.7; max-width: 520px; }
.cz-hero__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cz-stats li { padding: 12px 8px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-align: center; }
.cz-stats b { display: block; font-size: 15px; font-weight: 900; color: var(--primary); overflow-wrap: anywhere; }
.cz-stats span { font-size: 12px; color: var(--grey-4); }
.ev-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ev-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.ev-card__tag { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--primary-bg); color: var(--primary); font-size: 11px; font-weight: 800; }
.ev-card__head h3 { font-size: 16px; font-weight: 800; margin-top: 6px; }
.ev-card__head p { font-size: 12px; color: var(--grey-4); margin-top: 4px; line-height: 1.6; }
.ev-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.ev-card__note { font-size: 12px; color: var(--grey-5); flex: 1; min-width: 140px; }
.ev-card__note b { color: var(--ink); font-weight: 800; }
.stamps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; list-style: none; }
.stamps li { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: 6px; background: var(--bg); font-size: 11px; color: var(--grey-4); }
.stamps li.is-gift { background: #FFF4D6; color: #9A6B00; }
.stamps li.is-on { background: var(--primary); color: #fff; }
.stamps__mark { font-size: 13px; font-weight: 900; min-height: 16px; }
.draw { display: grid; place-items: center; padding: 6px 0; }
.draw__box { width: 100%; min-height: 92px; border-radius: var(--radius); border: 2px dashed var(--line-2); background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; padding: 10px; }
.draw__q { font-size: 30px; font-weight: 900; color: var(--line-2); }
.draw__amt { font-size: 24px; font-weight: 900; color: var(--primary); }
.draw__label { font-size: 12px; color: var(--grey-5); }
.draw__box.is-rolling .draw__q { animation: drawSpin .7s linear; }
@keyframes drawSpin { from { transform: rotate(0); opacity: .4; } to { transform: rotate(360deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .draw__box.is-rolling .draw__q { animation: none; } }
.invite__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.coupon__state { flex: none; align-self: center; margin-right: 12px; padding: 5px 10px; border-radius: 4px; background: #EDFAF4; color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap; }
.coupon--mine { border-color: var(--line); }
@media (min-width: 640px) {
  .cz-hero { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 34px 28px; }
  .cz-stats b { font-size: 18px; }
  .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coupons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cz-hero__title { font-size: 32px; }
  .coupons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 쿠폰존 배너 ---------- */
.cz-banner { position: relative; overflow: hidden; border-radius: var(--radius); background: #F7F2EF; border: 1px solid var(--line); margin-bottom: 14px; }
.cz-banner__track { display: flex; transition: transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .cz-banner__track { transition: none; } }
.cz-slide { flex: 0 0 100%; display: block; color: var(--ink); background: #fff; }
.cz-slide img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 74% center; }
.cz-slide__text { padding: 14px 16px 18px; }
.cz-slide__label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--primary); }
.cz-slide__title { margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.25; letter-spacing: -0.02em; }
.cz-slide__desc { margin-top: 6px; font-size: 13px; color: var(--grey-5); }
.cz-slide__cta { display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.cz-slide:hover .cz-slide__cta { background: var(--primary); }
.cz-banner__nav { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 6px; z-index: 2; }
@media (min-width: 640px) {
  .cz-slide { position: relative; }
  .cz-slide img { height: 260px; object-position: center; }
  .cz-slide__text { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); max-width: 46%; padding: 0; }
  .cz-slide__title { font-size: 28px; }
  .cz-banner__nav { top: auto; bottom: 14px; }
}
@media (min-width: 1024px) {
  .cz-slide img { height: 300px; }
  .cz-slide__title { font-size: 32px; }
  .cz-slide__text { left: 56px; }
}

/* =========================================================
   약관 (이용약관 · 개인정보처리방침)
   ========================================================= */
.legal-box { height: 400px; overflow-y: scroll; overscroll-behavior: contain; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.legal-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.legal-box h4 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 18px 0 6px; }
.legal-box h4:first-child { margin-top: 0; }
.legal-box p { margin: 0 0 6px; word-break: keep-all; }
.legal-box::-webkit-scrollbar { width: 10px; }
.legal-box::-webkit-scrollbar-track { background: var(--bg); border-radius: 6px; }
.legal-box::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid var(--bg); }
.legal-box::-webkit-scrollbar-thumb:hover { background: var(--grey-4); }
.legal-note { font-size: 12px; color: var(--grey-4); margin-top: 8px; }

/* 약관 레이어 */
.legal-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.legal-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .5); }
.legal-modal__panel { position: relative; width: 100%; max-width: 640px; background: #fff; border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); overflow: hidden; }
.legal-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.legal-modal__head h2 { font-size: 16px; font-weight: 800; }
.legal-modal__panel .legal-box { border: 0; border-radius: 0; height: 400px; max-height: calc(100vh - 200px); }
.legal-modal__foot { padding: 12px 18px; border-top: 1px solid var(--line); text-align: right; }