/* =========================================================
   원팡 2026 — 공통 컴포넌트
   레이아웃·게시판·회원·소셜 로그인 스킨이 모두 이 클래스를 쓴다.
   ========================================================= */

/* ---------- 기본 ---------- */
.op-site,
.op-layer {
  font-family: var(--op-font);
  font-size: var(--op-t-base);
  line-height: 1.5;
  color: var(--op-text);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 초기화는 :where 로 감싸 우선순위 0 — 컴포넌트 클래스가 항상 이긴다 */
:where(.op-site, .op-layer) *, :where(.op-site, .op-layer) *::before, :where(.op-site, .op-layer) *::after { box-sizing: border-box; }
:where(.op-site, .op-layer) :where(a) { color: inherit; text-decoration: none; }
/* :is() 로 라이믹스 기본 CSS(input·button 에 sans-serif 12px)만 이기고, 클래스로 준 크기·굵기는 그대로 따른다 */
:where(.op-site, .op-layer) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.op-site, .op-layer) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.op-site, .op-layer) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.op-site, .op-layer) :where(h1, h2, h3, h4, p) { margin: 0; }
:where(.op-site, .op-layer) :focus-visible { outline: none; box-shadow: var(--op-focus); border-radius: var(--op-r-xs); }
.op-num { font-variant-numeric: tabular-nums; }
.op-only-m { display: none !important; }
@container site (max-width: 760px) {
  .op-only-m { display: inline-flex !important; }
  .op-only-pc { display: none !important; }
}
[hidden] { display: none !important; }
.op-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 아이콘 ---------- */
.op-icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.op-icon--sm { width: 15px; height: 15px; }
.op-icon--lg { width: 22px; height: 22px; }
.op-icon--brand { color: var(--op-brand); }
.op-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 버튼 ---------- */
.op-btn {
  --btn-h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h); padding: 0 16px;
  border-radius: var(--op-r-pill);
  border: 1px solid transparent;
  background: var(--op-surface-2); color: var(--op-text);
  font-size: var(--op-t-md); font-weight: var(--op-w-semibold);
  white-space: nowrap;
  transition: background var(--op-dur) var(--op-ease), transform var(--op-dur) var(--op-ease), box-shadow var(--op-dur) var(--op-ease);
}
.op-btn:hover { background: var(--op-surface-3); }
.op-btn:active { transform: translateY(1px); }
.op-btn--primary { background: var(--op-brand); color: var(--op-text-inverse); box-shadow: var(--op-shadow-brand); }
.op-btn--primary:hover { background: var(--op-brand-hover); }
.op-btn--soft { background: var(--op-brand-soft); color: var(--op-brand-text); }
.op-btn--soft:hover { background: var(--op-brand-soft-2); }
.op-btn--ghost { background: transparent; border-color: var(--op-line-strong); }
.op-btn--ghost:hover { background: var(--op-surface-2); }
.op-btn--ink { background: var(--op-text); color: var(--op-bg); }
.op-btn--ink:hover { background: var(--op-text-2); }
.op-btn--danger { background: var(--op-brand-text); color: #fff; }
.op-btn--danger:hover { filter: brightness(.94); }
.op-btn--naver { background: var(--op-naver); color: #fff; }
.op-btn--naver:hover { filter: brightness(.95); background: var(--op-naver); }
.op-btn--sm { --btn-h: 32px; padding: 0 12px; font-size: var(--op-t-sm); }
.op-btn--lg { --btn-h: 50px; padding: 0 22px; font-size: var(--op-t-base); }
.op-btn--block { width: 100%; }
.op-btn--icon { width: var(--btn-h); padding: 0; }
.op-btn__count {
  position: absolute; transform: translate(11px, -11px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--op-r-pill); border: 2px solid var(--op-surface);
  background: var(--op-brand); color: #fff;
  font-size: 10px; font-weight: var(--op-w-bold); line-height: 13px; text-align: center;
}
.op-naver-mark { width: 16px; height: 16px; border-radius: 3px; background: #fff; color: var(--op-naver); display: grid; place-items: center; }
.op-naver-mark svg { width: 12px; height: 12px; fill: currentColor; }

/* ---------- 칩 · 세그먼트 ---------- */
.op-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 14px;
  border-radius: var(--op-r-pill);
  border: 1px solid var(--op-line);
  background: var(--op-surface);
  font-size: var(--op-t-sm); font-weight: var(--op-w-medium); color: var(--op-text-2);
  transition: all var(--op-dur) var(--op-ease);
}
.op-chip:hover { border-color: var(--op-line-strong); color: var(--op-text); }
label.op-chip { position: relative; cursor: pointer; }
.op-chip > input:is([type="radio"], [type="checkbox"]) { position: absolute; opacity: 0; pointer-events: none; }
.op-chip:has(> input:focus-visible) { box-shadow: var(--op-focus); }
.op-chip[aria-pressed="true"], .op-chip:has(> input:checked) { background: var(--op-text); border-color: var(--op-text); color: var(--op-bg); }
.op-chip--toggle[aria-pressed="true"] { background: var(--op-brand-soft); border-color: var(--op-brand-soft-2); color: var(--op-brand-text); }
.op-chip__count { font-size: var(--op-t-2xs); opacity: .7; }
.op-chip-row { display: flex; gap: var(--op-s-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.op-chip-row::-webkit-scrollbar { display: none; }
.op-chip-row--wrap { flex-wrap: wrap; overflow: visible; }
.op-chip__rank { font-weight: var(--op-w-black); color: var(--op-brand-text); font-variant-numeric: tabular-nums; }

.op-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--op-surface-3); border-radius: var(--op-r-pill);
}
.op-seg__btn {
  height: 30px; padding: 0 12px; border-radius: var(--op-r-pill);
  font-size: var(--op-t-sm); font-weight: var(--op-w-semibold); color: var(--op-text-3);
  display: inline-flex; align-items: center; gap: 4px;
}
/* 라디오 묶음도 같은 모양: <label class="op-seg__btn"><input type="radio">…</label> */
label.op-seg__btn { position: relative; cursor: pointer; }
.op-seg__btn > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.op-seg__btn:has(> input:focus-visible) { box-shadow: var(--op-focus); }
.op-seg__btn[aria-pressed="true"], .op-seg__btn:has(> input:checked) { background: var(--op-surface); color: var(--op-text); box-shadow: var(--op-shadow-1); }

/* ---------- 배지 · 쇼핑몰 ---------- */
.op-badge {
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 7px; border-radius: var(--op-r-xs);
  font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); white-space: nowrap;
  background: var(--op-surface-3); color: var(--op-text-2);
}
.op-badge--hot { background: var(--op-brand); color: #fff; }
.op-badge--low { background: var(--op-text); color: var(--op-lemon); }
.op-badge--free { background: var(--op-success-soft); color: var(--op-success); }
.op-badge--auto { background: var(--op-lilac-soft); color: #6B4FC8; }
.op-badge--new { background: var(--op-sky-soft); color: #1D6FB8; }
.op-badge--ended { background: var(--op-surface-3); color: var(--op-text-3); }
.op-badge--soon { background: var(--op-warning-soft); color: var(--op-warning); }
:root[data-theme="dark"] .op-badge--auto { color: #B9A6F5; }
:root[data-theme="dark"] .op-badge--low { background: var(--op-lemon); color: #1E1B24; }
:root[data-theme="dark"] .op-badge--new { color: #7CC0F5; }

.op-store {
  --store: var(--op-store-etc);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--op-t-xs); font-weight: var(--op-w-semibold); color: var(--op-text-2);
  white-space: nowrap;
}
.op-store::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--store); flex: none; }
[data-store="coupang"] { --store: var(--op-store-coupang); }
[data-store="ali"] { --store: var(--op-store-ali); }
[data-store="naver"] { --store: var(--op-store-naver); }
[data-store="gmarket"] { --store: var(--op-store-gmarket); }
[data-store="11st"] { --store: var(--op-store-11st); }
[data-store="auction"] { --store: var(--op-store-auction); }
[data-store="lotteon"] { --store: var(--op-store-lotteon); }
[data-store="homeplus"] { --store: var(--op-store-homeplus); }
[data-store="cj"] { --store: var(--op-store-cj); }

/* ---------- 카드 · 섹션 머리 ---------- */
.op-card {
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: var(--op-r-lg);
  box-shadow: var(--op-shadow-1);
}
.op-card--pad { padding: var(--op-s-5); }
.op-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--op-s-3); margin-bottom: var(--op-s-4); }
.op-card__title { font-size: var(--op-t-base); font-weight: var(--op-w-bold); letter-spacing: var(--op-tracking-tight); display: flex; align-items: center; gap: 8px; }

.op-sec { margin-top: var(--op-s-10); }
.op-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--op-s-4); margin-bottom: var(--op-s-4); flex-wrap: wrap; }
.op-sec__title { font-size: var(--op-t-xl); font-weight: var(--op-w-black); letter-spacing: var(--op-tracking-tight); display: flex; align-items: center; gap: 10px; }
.op-sec__sub { margin-top: 4px; font-size: var(--op-t-sm); color: var(--op-text-3); }
.op-sec__tools { display: flex; align-items: center; gap: var(--op-s-2); flex-wrap: wrap; }
.op-more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--op-t-sm); font-weight: var(--op-w-semibold); color: var(--op-text-3); }
.op-more:hover { color: var(--op-brand-text); }

.op-live { width: 8px; height: 8px; border-radius: 50%; background: var(--op-brand); position: relative; flex: none; }
.op-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--op-brand); opacity: 0; animation: op-ping 1.8s var(--op-ease) infinite; }
@keyframes op-ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- 입력 ---------- */
.op-field {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  height: 46px; padding: 0 16px;
  border-radius: var(--op-r-pill);
  background: var(--op-surface-2);
  border: 1px solid var(--op-line);
  color: var(--op-text-3);
  transition: border-color var(--op-dur) var(--op-ease), box-shadow var(--op-dur) var(--op-ease), background var(--op-dur);
}
.op-field:focus-within { border-color: var(--op-brand); box-shadow: var(--op-focus); background: var(--op-surface); }
.op-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: var(--op-t-md); color: var(--op-text); }
.op-field input::placeholder { color: var(--op-text-3); }
.op-field input:focus-visible, .op-cmd__input input:focus-visible { box-shadow: none; }
.op-field--sm { height: 38px; padding: 0 12px; }
.op-kbd {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
  border-radius: var(--op-r-xs); border: 1px solid var(--op-line-strong); border-bottom-width: 2px;
  background: var(--op-surface); color: var(--op-text-3);
  font-size: var(--op-t-2xs); font-weight: var(--op-w-semibold); font-family: var(--op-font);
}

/* ---------- 가격 · 메타 ---------- */
.op-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.op-price__now { font-size: var(--op-t-lg); font-weight: var(--op-w-black); color: var(--op-price); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.op-price__now small { font-size: .78em; font-weight: var(--op-w-bold); margin-left: 1px; }
.op-price__off { font-size: var(--op-t-md); font-weight: var(--op-w-black); color: var(--op-text); font-variant-numeric: tabular-nums; }
.op-price__was { font-size: var(--op-t-xs); color: var(--op-text-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.op-price__ship { font-size: var(--op-t-xs); font-weight: var(--op-w-semibold); color: var(--op-success); }
.op-price__note { font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-price--xl .op-price__now { font-size: var(--op-t-3xl); }
.op-price--xl .op-price__off { font-size: var(--op-t-2xl); color: var(--op-brand-text); }

.op-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: var(--op-t-xs); color: var(--op-text-3); font-variant-numeric: tabular-nums; }
.op-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.op-meta .op-icon { width: 14px; height: 14px; }
.op-meta__hot { color: var(--op-brand-text); font-weight: var(--op-w-semibold); }

/* ---------- 썸네일 ---------- */
.op-thumb {
  position: relative; overflow: hidden; flex: none;
  aspect-ratio: 4 / 3;
  border-radius: var(--op-r-md);
  background: var(--op-surface-2);
  isolation: isolate;
}
.op-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--op-ease); }
.op-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(30, 27, 36, .06); pointer-events: none; }
.op-thumb--empty { display: grid; place-items: center; color: var(--op-text-3); }
.op-thumb--empty .op-icon { width: 32px; height: 32px; }
.op-thumb__flags { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 1; }

/* ---------- 딜 카드 (목록·카드 두 모양) ---------- */
.op-deal {
  position: relative;
  display: flex; flex-direction: column; gap: var(--op-s-3);
  padding: var(--op-s-3);
  border-radius: var(--op-r-lg);
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  transition: transform var(--op-dur) var(--op-ease), box-shadow var(--op-dur) var(--op-ease), border-color var(--op-dur);
}
.op-deal:hover { transform: translateY(-2px); box-shadow: var(--op-shadow-2); border-color: transparent; }
.op-deal:hover .op-thumb img { transform: scale(1.04); }
.op-deal__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 2px 2px; flex: 1; }
.op-deal__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-deal__cat { font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-deal__title {
  font-size: var(--op-t-md); font-weight: var(--op-w-semibold); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em;
}
.op-deal__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* 카드 전체 클릭 */
.op-deal__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.op-deal__buy {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--op-brand-soft); color: var(--op-brand-text);
  transition: background var(--op-dur), color var(--op-dur);
}
.op-deal__buy:hover { background: var(--op-brand); color: #fff; }
.op-deal--ended .op-thumb img { filter: grayscale(1); opacity: .55; }
.op-deal--ended .op-deal__title, .op-deal--ended .op-price__now { color: var(--op-text-3); text-decoration: line-through; text-decoration-thickness: 1px; }

/* 목록형: 같은 카드가 가로 한 줄로 바뀐다 */
.op-deal--row { flex-direction: row; align-items: center; gap: var(--op-s-4); padding: var(--op-s-3); }
.op-deal--row .op-thumb { width: 120px; }
.op-deal--row .op-deal__title { min-height: 0; -webkit-line-clamp: 1; }
.op-deal--row .op-thumb--empty { display: grid; place-items: center; color: var(--op-text-3); }
.op-thumb--empty .op-icon { width: 32px; height: 32px; }
.op-thumb__flags { top: 6px; left: 6px; }

/* 작은 카드(가로 스크롤 줄) */
.op-deal--mini { width: 196px; flex: none; gap: 10px; padding: 10px; scroll-snap-align: start; }
.op-deal--mini .op-deal__title { font-size: var(--op-t-sm); }
.op-deal--mini .op-price__now { font-size: var(--op-t-base); }

.op-rail { display: flex; gap: var(--op-s-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px var(--op-s-2); scrollbar-width: thin; }

/* ---------- 순위 목록 ---------- */
.op-rank { display: flex; flex-direction: column; counter-reset: rank; }
.op-rank__item { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--op-line); counter-increment: rank; }
.op-rank__item:first-child { border-top: 0; }
.op-rank__item::before { content: counter(rank); font-size: var(--op-t-md); font-weight: var(--op-w-black); color: var(--op-text-3); text-align: center; font-variant-numeric: tabular-nums; }
.op-rank__item:nth-child(-n+3)::before { color: var(--op-brand); }
.op-rank__title { font-size: var(--op-t-sm); font-weight: var(--op-w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rank__sub { display: block; font-size: var(--op-t-xs); color: var(--op-price); font-weight: var(--op-w-bold); margin-top: 1px; }
.op-rank__move { font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); color: var(--op-text-3); }
.op-rank__move--up { color: var(--op-brand-text); }
.op-rank__move--new { color: #1D6FB8; }
.op-rank__move--down { color: #1D6FB8; }
.op-rank__link { display: block; min-width: 0; }
.op-rank__link .op-rank__title { display: block; }
.op-rank__link:hover .op-rank__title { color: var(--op-brand-text); }
.op-rank__store { color: var(--op-text-3); font-weight: var(--op-w-medium); }
.op-rank__move .op-icon { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- 글 목록(커뮤니티) ---------- */
.op-list { display: flex; flex-direction: column; }
.op-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--op-line); font-size: var(--op-t-sm); }
.op-list__item:first-child { border-top: 0; padding-top: 0; }
.op-list__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-list__item:hover .op-list__title { color: var(--op-brand-text); }
.op-list__count { font-size: var(--op-t-xs); font-weight: var(--op-w-bold); color: var(--op-brand-text); font-variant-numeric: tabular-nums; }

/* ---------- 아바타 ---------- */
.op-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--op-brand-soft); color: var(--op-brand-text); font-weight: var(--op-w-bold); }
.op-avatar { overflow: hidden; }
.op-avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* ---------- 광고 자리 ---------- */
.op-ad {
  position: relative; display: grid; place-items: center;
  border-radius: var(--op-r-lg);
  border: 1px dashed var(--op-line-strong);
  background: repeating-linear-gradient(135deg, var(--op-surface-2) 0 10px, var(--op-surface) 10px 20px);
  color: var(--op-text-3); font-size: var(--op-t-xs); text-align: center;
}
.op-ad::before { content: "광고"; position: absolute; top: 8px; left: 10px; font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); }
.op-ad--rect { aspect-ratio: 6 / 5; }
.op-ad--feed { min-height: 240px; }
.op-ad--preview small { display: block; margin-top: 2px; font-size: var(--op-t-2xs); }
.op-ad.is-live { display: block; padding-top: 24px; border: 0; background: none; aspect-ratio: auto; min-height: 0; }

/* ---------- 알림 문구 · 토스트 ---------- */
.op-disclose { display: flex; gap: 6px; align-items: flex-start; font-size: var(--op-t-xs); color: var(--op-text-3); line-height: 1.5; }

/* ---------- 명령 팔레트(검색 · 메뉴 · 단축키) ---------- */
.op-cmd { position: fixed; inset: 0; z-index: 80; display: none; }
.op-cmd.is-open { display: block; }
.op-cmd__dim { position: absolute; inset: 0; background: rgba(20, 16, 24, .42); backdrop-filter: blur(3px); animation: op-fade .2s var(--op-ease); }
.op-cmd__box {
  position: relative; margin: 10vh auto 0; width: min(640px, calc(100% - 32px));
  max-height: 72vh; display: flex; flex-direction: column;
  background: var(--op-surface); border-radius: var(--op-r-lg); box-shadow: var(--op-shadow-3);
  border: 1px solid var(--op-line);
  overflow: hidden; animation: op-pop .22s var(--op-ease);
}
.op-cmd__input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--op-line); color: var(--op-text-3); }
.op-cmd__input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--op-t-lg); color: var(--op-text); min-width: 0; }
.op-cmd__body { overflow: auto; padding: 8px; }
.op-cmd__group { padding: 10px 10px 4px; font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); color: var(--op-text-3); letter-spacing: .02em; }
.op-cmd__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: var(--op-r-sm); text-align: left; font-size: var(--op-t-md); }
.op-cmd__item[aria-selected="true"] { background: var(--op-brand-soft); color: var(--op-brand-text); }
.op-cmd__item small { margin-left: auto; color: var(--op-text-3); font-size: var(--op-t-xs); }
.op-cmd__ico { width: 32px; height: 32px; border-radius: var(--op-r-sm); display: grid; place-items: center; background: var(--op-surface-2); color: var(--op-text-2); flex: none; overflow: hidden; }
.op-cmd__ico img { width: 100%; height: 100%; object-fit: cover; }
.op-cmd__foot { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--op-line); font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-cmd__foot span { display: inline-flex; align-items: center; gap: 6px; }
@keyframes op-fade { from { opacity: 0; } }
@keyframes op-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* =========================================================
   게시판 · 회원 · 마이페이지 공통 부품
   ========================================================= */

/* ---------- 장식 원(배너·로그인·프로필 공통) ---------- */
.op-blobs { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.op-blobs i { position: absolute; border-radius: 50%; opacity: .75; }
.op-blobs i:nth-child(1) { width: 180px; height: 180px; right: -50px; top: -70px; background: var(--op-lilac); }
.op-blobs i:nth-child(2) { width: 96px; height: 96px; right: 110px; bottom: -56px; background: var(--op-mint); }
.op-blobs i:nth-child(3) { width: 44px; height: 44px; right: 150px; top: 18px; background: var(--op-pink); opacity: .35; }
.op-blobs ~ * { position: relative; }
:root[data-theme="dark"] .op-blobs i { opacity: .28; } /* 어두운 바탕에서는 장식이 글자를 덮지 않게 */

/* ---------- 숫자 타일 ---------- */
.op-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--op-s-2); }
.op-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-tile { padding: 12px 14px; border-radius: var(--op-r-md); background: var(--op-surface-2); min-width: 0; }
.op-tile b { display: block; font-size: var(--op-t-xl); font-weight: var(--op-w-black); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.op-tile span { font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-tile--glass { background: color-mix(in srgb, var(--op-surface) 78%, transparent); backdrop-filter: blur(6px); }
.op-tile--glass b { font-size: var(--op-t-lg); }
.op-tile--glass span { font-size: var(--op-t-2xs); }

/* ---------- 밑줄 탭 ---------- */
.op-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--op-line); overflow-x: auto; scrollbar-width: none; }
.op-tabs::-webkit-scrollbar { display: none; }
.op-tabs__item { position: relative; flex: none; padding: 12px 14px; font-size: var(--op-t-md); font-weight: var(--op-w-semibold); color: var(--op-text-3); white-space: nowrap; }
.op-tabs__item:hover { color: var(--op-text); }
.op-tabs__item small { margin-left: 4px; font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); color: var(--op-text-3); }
.op-tabs__item[aria-current="page"] { color: var(--op-text); }
.op-tabs__item[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--op-text); }

/* ---------- 경로 · 쪽 번호 ---------- */
.op-crumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 4px 6px 4px 4px; border-radius: var(--op-r-pill); background: var(--op-surface); border: 1px solid var(--op-line); box-shadow: var(--op-shadow-1); font-size: var(--op-t-sm); color: var(--op-text-3); }
.op-crumb__home { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--op-brand-soft); color: var(--op-brand-text); flex: none; }
.op-crumb__home .op-icon { width: 18px; height: 18px; }
.op-crumb__sep { width: 14px; height: 14px; color: var(--op-line-strong); flex: none; }
.op-crumb__item { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--op-r-pill); font-weight: var(--op-w-medium); white-space: nowrap; }
a.op-crumb__item:hover { background: var(--op-surface-2); color: var(--op-text); }
.op-crumb__item[aria-current="page"] { color: var(--op-text); font-weight: var(--op-w-bold); }
.op-crumb__item[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--op-brand); }
.op-crumb__jump { position: relative; }
.op-crumb__jump > summary { list-style: none; cursor: pointer; }
.op-crumb__jump > summary::-webkit-details-marker { display: none; }
.op-crumb__jump > summary .op-icon { width: 16px; height: 16px; transition: transform var(--op-dur); }
.op-crumb__jump[open] > summary { background: var(--op-surface-2); }
.op-crumb__jump[open] > summary .op-icon { transform: rotate(180deg); }
.op-crumb__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; max-height: 320px; overflow: auto; padding: 6px; border-radius: var(--op-r-md); background: var(--op-surface); border: 1px solid var(--op-line); box-shadow: var(--op-shadow-2); display: grid; gap: 1px; }
.op-crumb__menu a { padding: 8px 10px; border-radius: var(--op-r-sm); font-size: var(--op-t-sm); color: var(--op-text-2); white-space: nowrap; }
.op-crumb__menu a:hover, .op-crumb__menu a[aria-current="page"] { background: var(--op-brand-soft); color: var(--op-brand-text); }
.op-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; }
.op-pager a { min-width: 36px; height: 36px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--op-r-sm); font-size: var(--op-t-sm); font-weight: var(--op-w-semibold); color: var(--op-text-2); font-variant-numeric: tabular-nums; }
.op-pager a:hover { background: var(--op-surface-3); }
.op-pager a[aria-current="page"] { background: var(--op-text); color: var(--op-bg); }

/* ---------- 입력칸 ---------- */
.op-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-s-5); }
.op-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.op-form__row > :is(.op-seg, .op-check) { justify-self: start; }
.op-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-s-4); }
.op-label { display: flex; align-items: center; gap: 6px; font-size: var(--op-t-sm); font-weight: var(--op-w-bold); }
.op-label em { font-style: normal; font-size: var(--op-t-2xs); color: var(--op-brand-text); }
.op-help { font-size: var(--op-t-xs); color: var(--op-text-3); line-height: 1.55; }
.op-help--ok { color: var(--op-success); }
.op-help--warn { color: var(--op-brand-text); }
.op-help a { color: var(--op-brand-text); font-weight: var(--op-w-semibold); }
/* .op-rxfield: 라이믹스가 만들어 주는 입력칸(확장 변수·회원 항목)도 같은 모양 */
.op-input, .op-select, .op-textarea, .op-rxfield :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="image"]), select, textarea) {
  width: 100%; min-width: 0; height: 46px; padding: 0 14px;
  border-radius: var(--op-r-md); border: 1px solid var(--op-line-strong);
  background: var(--op-surface); color: var(--op-text); font-size: var(--op-t-md);
  transition: border-color var(--op-dur), box-shadow var(--op-dur);
}
.op-input:focus, .op-select:focus, .op-textarea:focus, .op-rxfield :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="image"]), select, textarea):focus { outline: none; border-color: var(--op-brand); box-shadow: var(--op-focus); }
.op-input::placeholder, .op-textarea::placeholder, .op-rxfield ::placeholder { color: var(--op-text-3); }
.op-input[readonly], .op-rxfield [readonly] { background: var(--op-surface-2); color: var(--op-text-2); }
.op-select, .op-rxfield select, .op-searchbar__target {
  appearance: none; padding-right: 38px; cursor: pointer;
  background: var(--op-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F8A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.op-textarea, .op-rxfield textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.op-input-group { display: flex; gap: 8px; }
.op-input-group > .op-input, .op-input-group > .op-unit { flex: 1; }
.op-unit { position: relative; display: block; }
.op-unit > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: var(--op-t-sm); color: var(--op-text-3); pointer-events: none; }
.op-unit > .op-input { padding-right: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 펼침 메뉴: <details class="op-menu"><summary>…</summary><div class="op-menu__panel">…</div></details> ---------- */
.op-menu { position: relative; }
.op-menu > summary { list-style: none; cursor: pointer; }
.op-menu > summary::-webkit-details-marker { display: none; }
.op-menu__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 150px; padding: 6px; display: grid; gap: 1px; border-radius: var(--op-r-md); background: var(--op-surface); border: 1px solid var(--op-line); box-shadow: var(--op-shadow-2); }
.op-menu__panel > :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--op-r-sm); font-size: var(--op-t-sm); color: var(--op-text-2); text-align: left; white-space: nowrap; }
.op-menu__panel > :is(a, button):hover { background: var(--op-surface-2); color: var(--op-text); }
.op-menu__panel > [aria-pressed="true"] { color: var(--op-brand-text); }

/* ---------- 스위치 · 체크 ---------- */
.op-switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: var(--op-r-pill); background: var(--op-line-strong); transition: background var(--op-dur); }
.op-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--op-shadow-1); transition: transform var(--op-dur) var(--op-ease); }
.op-switch[aria-checked="true"] { background: var(--op-brand); }
.op-switch[aria-checked="true"]::after { transform: translateX(18px); }
.op-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--op-t-sm); color: var(--op-text-2); cursor: pointer; line-height: 1.45; }
.op-check input {
  appearance: none; width: 20px; height: 20px; flex: none; margin: 0;
  border-radius: 6px; border: 1.5px solid var(--op-line-strong); background: var(--op-surface) center / 14px no-repeat;
  transition: background-color var(--op-dur), border-color var(--op-dur); cursor: pointer;
}
.op-check input:checked { background-color: var(--op-brand); border-color: var(--op-brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.op-check b { color: var(--op-text); font-weight: var(--op-w-semibold); }
.op-check a { margin-left: auto; font-size: var(--op-t-xs); color: var(--op-text-3); text-decoration: underline; text-underline-offset: 2px; flex: none; }
.op-check--all { padding: 14px; border-radius: var(--op-r-md); background: var(--op-surface-2); font-size: var(--op-t-md); }

/* ---------- 단계 · 나누기 · 진행 막대 ---------- */
.op-steps { display: flex; align-items: center; gap: 10px; }
.op-steps__item { display: flex; align-items: center; gap: 8px; flex: none; font-size: var(--op-t-sm); font-weight: var(--op-w-semibold); color: var(--op-text-3); }
.op-steps__item span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--op-t-xs); font-weight: var(--op-w-black); background: var(--op-surface-3); }
.op-steps__item--done span { background: var(--op-text); color: var(--op-bg); }
.op-steps__item[aria-current="step"] { color: var(--op-text); }
.op-steps__item[aria-current="step"] span { background: var(--op-brand); color: #fff; box-shadow: var(--op-shadow-brand); }
.op-steps__line { flex: 1; min-width: 16px; height: 1px; background: var(--op-line-strong); }
.op-or { display: flex; align-items: center; gap: 12px; font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-or::before, .op-or::after { content: ""; flex: 1; height: 1px; background: var(--op-line); }
.op-progress { height: 8px; border-radius: var(--op-r-pill); background: var(--op-surface-3); overflow: hidden; }
.op-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--op-pink), var(--op-lilac)); }
.op-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.op-strength i { height: 4px; border-radius: 2px; background: var(--op-surface-3); }
.op-strength[data-level="1"] i:first-child { background: var(--op-brand); }
.op-strength[data-level="2"] i:nth-child(-n+2) { background: var(--op-warning); }
.op-strength[data-level="3"] i:nth-child(-n+3), .op-strength[data-level="4"] i { background: var(--op-success); }

/* ---------- 안내 상자 · 비어 있음 ---------- */
.op-note { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--op-r-md); background: var(--op-sky-soft); font-size: var(--op-t-sm); color: var(--op-text-2); line-height: 1.6; }
.op-note .op-icon { margin-top: 2px; color: #1D6FB8; }
.op-note--brand { background: var(--op-brand-soft); }
.op-note--brand .op-icon { color: var(--op-brand-text); }
.op-note--ok { background: var(--op-success-soft); }
.op-note--ok .op-icon { color: var(--op-success); }
.op-note b { color: var(--op-text); }
.op-empty { display: grid; justify-items: center; gap: 8px; padding: var(--op-s-10) var(--op-s-4); text-align: center; font-size: var(--op-t-sm); color: var(--op-text-3); }
.op-empty .op-icon { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--op-brand-soft); color: var(--op-brand-text); }

/* ---------- 작성자 · 등급 · 아바타 색 ---------- */
.op-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.op-author__name { display: flex; align-items: center; gap: 6px; font-size: var(--op-t-sm); font-weight: var(--op-w-bold); }
.op-author__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: var(--op-t-xs); color: var(--op-text-3); font-variant-numeric: tabular-nums; }
.op-level { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--op-lilac-soft); color: #6B4FC8; font-size: 10px; font-weight: var(--op-w-black); }
:root[data-theme="dark"] .op-level { color: #B9A6F5; }
.op-avatar--sm { width: 32px; height: 32px; font-size: var(--op-t-xs); }
.op-avatar--lg { width: 76px; height: 76px; font-size: var(--op-t-2xl); box-shadow: 0 0 0 4px var(--op-surface); }
.op-avatar[data-tone="lilac"] { background: var(--op-lilac-soft); color: #6B4FC8; }
.op-avatar[data-tone="mint"] { background: var(--op-mint-soft); color: #08805F; }
.op-avatar[data-tone="sky"] { background: var(--op-sky-soft); color: #1D6FB8; }
.op-avatar[data-tone="cream"] { background: var(--op-cream-soft); color: var(--op-warning); }
.op-avatar[data-tone="ink"] { background: var(--op-text); color: var(--op-bg); }

/* ---------- 글 본문 ---------- */
.op-article__head { display: grid; gap: var(--op-s-3); padding-bottom: var(--op-s-5); border-bottom: 1px solid var(--op-line); }
.op-article__bar, .op-article__by { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-article__by .op-author { min-width: 0; }
.op-article__title { font-size: var(--op-t-2xl); font-weight: var(--op-w-black); line-height: 1.35; letter-spacing: var(--op-tracking-tight); }
.op-article__tools { display: flex; gap: 4px; }
.op-prose { padding: var(--op-s-6) 0 var(--op-s-4); font-size: var(--op-t-base); line-height: 1.85; }
.op-prose p + p { margin-top: .9em; }
.op-prose img { display: block; max-width: 100%; margin: 1.2em 0; border-radius: var(--op-r-md); }
.op-prose a { color: var(--op-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 딜 정보 상자 ---------- */
.op-dealbox {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--op-s-6);
  margin-top: var(--op-s-5); padding: var(--op-s-5);
  border-radius: var(--op-r-lg); border: 1px solid var(--op-brand-soft-2);
  background: linear-gradient(135deg, var(--op-brand-soft), var(--op-cream-soft));
}
.op-dealbox .op-thumb { aspect-ratio: 1; border-radius: var(--op-r-md); background: var(--op-surface); }
.op-dealbox__body { display: flex; flex-direction: column; gap: var(--op-s-3); min-width: 0; }
/* 시안: [구매하기(넓게)] [알림 받기] [종료 신고] 한 줄 */
.op-dealbox__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.op-dealbox__cta > :first-child { flex: 1 1 220px; }
.op-specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: var(--op-t-sm); }
.op-specs dt { color: var(--op-text-3); }
.op-specs dd { margin: 0; font-weight: var(--op-w-semibold); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-specs .op-spark { width: 120px; height: 26px; }

/* ---------- 추천 ---------- */
.op-vote { display: flex; justify-content: center; gap: var(--op-s-3); padding: var(--op-s-6) 0; flex-wrap: wrap; }
.op-vote__btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 100px; padding: 12px 18px;
  border-radius: var(--op-r-lg); border: 1px solid var(--op-line-strong); background: var(--op-surface);
  font-size: var(--op-t-xs); font-weight: var(--op-w-semibold); color: var(--op-text-2); transition: all var(--op-dur) var(--op-ease);
}
.op-vote__btn b { display: flex; align-items: center; gap: 5px; font-size: var(--op-t-xl); font-weight: var(--op-w-black); color: var(--op-text); font-variant-numeric: tabular-nums; }
.op-vote__btn:hover { border-color: var(--op-text-3); }
.op-vote__btn--up { border-color: var(--op-brand-soft-2); background: var(--op-brand-soft); color: var(--op-brand-text); }
.op-vote__btn--up b { color: var(--op-brand-text); }
.op-vote__btn[aria-pressed="true"] { background: var(--op-brand); border-color: var(--op-brand); color: #fff; box-shadow: var(--op-shadow-brand); }
.op-vote__btn[aria-pressed="true"] b { color: #fff; }

/* ---------- 댓글 ---------- */
.op-comment { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: var(--op-s-4) 0; border-top: 1px solid var(--op-line); }
.op-comment .op-avatar { width: 36px; height: 36px; font-size: var(--op-t-sm); }
.op-comment--reply { margin-left: 48px; }
.op-comment--best { margin-top: var(--op-s-3); padding: var(--op-s-4); border: 1px solid var(--op-line); border-radius: var(--op-r-lg); background: var(--op-cream-soft); }
.op-comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-comment__head b { font-size: var(--op-t-sm); color: var(--op-text); }
.op-comment__text { margin-top: 4px; font-size: var(--op-t-md); line-height: 1.7; }
.op-comment__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-comment__act { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; line-height: 1; color: inherit; cursor: pointer; }
.op-comment__act:hover { color: var(--op-brand-text); }
.op-comment__act[aria-pressed="true"] { color: var(--op-brand-text); font-weight: var(--op-w-bold); }
.op-comment__vote--down[aria-pressed="true"] { color: var(--op-text); }
.op-comment__actions .op-icon { width: 14px; height: 14px; }
.op-composer { border: 1px solid var(--op-line-strong); border-radius: var(--op-r-lg); background: var(--op-surface); overflow: hidden; transition: border-color var(--op-dur), box-shadow var(--op-dur); }
.op-composer:focus-within { border-color: var(--op-brand); box-shadow: var(--op-focus); }
.op-composer textarea { display: block; width: 100%; min-height: 92px; padding: 14px 16px; border: 0; outline: 0; resize: vertical; background: transparent; font-size: var(--op-t-md); line-height: 1.6; color: var(--op-text); }
.op-composer textarea:focus-visible { box-shadow: none; }
.op-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--op-line); background: var(--op-surface-2); }
.op-composer__tools { display: flex; align-items: center; gap: 2px; color: var(--op-text-3); }
.op-composer__tools .op-btn { --btn-h: 32px; background: transparent; color: inherit; }

/* ---------- 커뮤니티 글 줄 ---------- */
.op-post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--op-s-4); padding: 14px var(--op-s-5); border-top: 1px solid var(--op-line); }
.op-post:first-child { border-top: 0; }
.op-post:hover { background: var(--op-surface-2); }
.op-post__title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--op-t-base); font-weight: var(--op-w-semibold); }
.op-post__title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-post__title a::after { content: ""; position: absolute; inset: 0; }
.op-post__title .op-icon { width: 15px; height: 15px; color: var(--op-text-3); flex: none; }
.op-post__cmt { flex: none; font-size: var(--op-t-xs); font-weight: var(--op-w-black); color: var(--op-brand-text); }
.op-post .op-meta { margin-top: 5px; }
.op-post .op-thumb { width: 64px; aspect-ratio: 1; border-radius: var(--op-r-sm); }
.op-post--notice { background: var(--op-cream-soft); }
.op-new { flex: none; width: 16px; height: 16px; border-radius: 5px; display: inline-grid; place-items: center; background: var(--op-brand); color: #fff; font-size: 9px; font-weight: var(--op-w-black); }

/* ---------- 옆 메뉴(마이페이지) ---------- */
.op-sidenav { display: grid; gap: var(--op-s-4); }
.op-sidenav__group { display: grid; gap: 1px; }
.op-sidenav__label { padding: 0 12px 6px; font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); color: var(--op-text-3); }
.op-sidenav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--op-r-sm); font-size: var(--op-t-sm); font-weight: var(--op-w-medium); color: var(--op-text-2); white-space: nowrap; }
.op-sidenav a:hover { background: var(--op-surface-2); color: var(--op-text); }
.op-sidenav a[aria-current="page"] { background: var(--op-brand-soft); color: var(--op-brand-text); font-weight: var(--op-w-bold); }
.op-sidenav a small { margin-left: auto; font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); color: var(--op-brand-text); }

/* ---------- 편집기 · 파일 놓기 ---------- */
.op-editor { border: 1px solid var(--op-line-strong); border-radius: var(--op-r-md); background: var(--op-surface); overflow: hidden; }
.op-editor:focus-within { border-color: var(--op-brand); box-shadow: var(--op-focus); }
.op-editor__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--op-line); background: var(--op-surface-2); }
.op-editor__bar button { width: 32px; height: 32px; border-radius: var(--op-r-xs); display: grid; place-items: center; font-size: var(--op-t-sm); font-weight: var(--op-w-bold); color: var(--op-text-2); }
.op-editor__bar button:hover { background: var(--op-surface-3); }
.op-editor__area { min-height: 200px; padding: 16px; font-size: var(--op-t-base); line-height: 1.8; outline: none; }
.op-editor__area:empty::before { content: attr(data-placeholder); color: var(--op-text-3); }
.op-drop { display: grid; justify-items: center; gap: 6px; padding: var(--op-s-6); border-radius: var(--op-r-md); border: 1.5px dashed var(--op-line-strong); background: var(--op-surface-2); text-align: center; font-size: var(--op-t-sm); color: var(--op-text-3); }
.op-drop .op-icon { width: 26px; height: 26px; color: var(--op-text-2); }

/* ---------- 불러온 상품 ---------- */
.op-fetched { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--op-s-4); align-items: center; padding: var(--op-s-3); border-radius: var(--op-r-md); border: 1px solid var(--op-line); background: var(--op-surface-2); }
.op-fetched .op-thumb { border-radius: var(--op-r-sm); }
.op-fetched__title { margin: 4px 0 2px; font-size: var(--op-t-md); font-weight: var(--op-w-semibold); }

/* ---------- 목록 한 줄(알림·키워드·관심 상품) ---------- */
.op-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--op-line); }
.op-item:first-child { border-top: 0; padding-top: 0; }
.op-item__main { flex: 1; min-width: 0; }
.op-item__title { font-size: var(--op-t-md); font-weight: var(--op-w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-item .op-thumb { width: 56px; aspect-ratio: 1; border-radius: var(--op-r-sm); }
.op-item__ico { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--op-surface-2); color: var(--op-text-2); }
.op-item__ico--brand { background: var(--op-brand-soft); color: var(--op-brand-text); }
.op-item__ico--mint { background: var(--op-mint-soft); color: var(--op-success); }
.op-item__ico--lilac { background: var(--op-lilac-soft); color: #6B4FC8; }
.op-keyword { display: inline-flex; align-items: center; gap: 2px; font-size: var(--op-t-base); font-weight: var(--op-w-bold); }
.op-keyword::before { content: "#"; color: var(--op-brand); font-weight: var(--op-w-black); }

/* ---------- 모바일 구매 막대(넓은 화면에서는 숨김) ---------- */
.op-buybar { display: none; }

/* ---------- 창 ---------- */
.op-dialog { width: min(420px, calc(100vw - 32px)); max-height: min(72vh, 560px); padding: 0; border: 1px solid var(--op-line); border-radius: var(--op-r-lg); background: var(--op-surface); color: var(--op-text); box-shadow: var(--op-shadow-3); overflow: hidden; }
.op-dialog[open] { display: flex; flex-direction: column; }
.op-dialog::backdrop { background: rgba(20, 16, 28, .45); }
.op-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--op-line); font-size: var(--op-t-md); font-weight: var(--op-w-bold); }
.op-dialog__body { padding: 16px 18px 18px; overflow: auto; }
.op-alertbox { gap: 8px; }
.op-alertbox + .op-alertbox { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--op-line); }

/* ---------- 사진 보기 ---------- */
.op-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 11, 20, .97); color: #fff; }
.op-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.op-viewer::backdrop { background: transparent; }
.op-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 18px; font-size: var(--op-t-sm); font-variant-numeric: tabular-nums; }
.op-viewer__bar > div { display: flex; align-items: center; gap: 4px; }
.op-viewer .op-btn--icon { color: #fff; background: rgba(255, 255, 255, .08); }
.op-viewer .op-btn--icon:hover { background: rgba(255, 255, 255, .18); }
.op-viewer__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px; overflow: hidden; touch-action: pan-y; }
.op-viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--op-r-sm); user-select: none; cursor: zoom-in; transition: transform var(--op-dur) var(--op-ease); }
.op-viewer.is-zoom .op-viewer__stage { overflow: auto; place-items: start center; }
.op-viewer.is-zoom .op-viewer__stage img { max-width: none; max-height: none; cursor: zoom-out; }
.op-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.op-viewer__nav--prev { left: 12px; }
.op-viewer__nav--next { right: 12px; }
.op-viewer__thumbs { display: flex; justify-content: center; gap: 6px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); overflow-x: auto; }
.op-viewer__thumbs button { flex: none; width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: var(--op-r-sm); overflow: hidden; opacity: .55; }
.op-viewer__thumbs button[aria-current="true"] { border-color: var(--op-brand); opacity: 1; }
.op-viewer__thumbs img { width: 100%; height: 100%; object-fit: cover; }
[data-viewer] img { cursor: zoom-in; }
@media (max-width: 640px) {
  .op-viewer__stage { padding: 0 8px; }
  .op-viewer__nav { display: none; }
}

/* ---------- 고르기 칸: select 를 원팡 모양 목록으로(op-layout.js) ---------- */
.op-picker { position: relative; min-width: 0; }
.op-picker__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.op-picker__btn { display: flex; align-items: center; text-align: left; }
.op-picker__btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-picker__btn:disabled { color: var(--op-text-3); cursor: default; background-color: var(--op-surface-2); }
.op-picker.is-open > .op-picker__btn { border-color: var(--op-brand); box-shadow: var(--op-focus); }
.op-picker__list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 280px; padding: 6px; overflow-y: auto; border: 1px solid var(--op-line); border-radius: var(--op-r-md); background: var(--op-surface); box-shadow: var(--op-shadow-3); }
.op-picker.is-up > .op-picker__list { top: auto; bottom: calc(100% + 6px); }
.op-picker__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 38px; padding: 0 10px 0 12px; border-radius: var(--op-r-sm); font-size: var(--op-t-sm); color: var(--op-text); text-align: left; white-space: nowrap; }
.op-picker__opt:hover, .op-picker__opt:focus-visible { background: var(--op-surface-2); outline: none; }
.op-picker__opt[aria-selected="true"] { color: var(--op-brand-text); font-weight: var(--op-w-semibold); }
.op-picker__opt .op-icon { visibility: hidden; color: var(--op-brand-text); }
.op-picker__opt[aria-selected="true"] .op-icon { visibility: visible; }
.op-picker__opt[disabled] { color: var(--op-text-3); cursor: default; }
.op-picker__group { padding: 8px 12px 4px; font-size: var(--op-t-2xs); font-weight: var(--op-w-bold); color: var(--op-text-3); }