@charset "utf-8";
/* =====================================================================
   오리파 손님 화면 · pages/oripa.css  (담당 WEB 2026-10-30 · tokens.css · app.css 다음에 읽는다)
   /oripa 목록 · /oripa/<id> 상세 · 홈 '오리파' 구역 카드 · 주문 상세 '나온 카드'
   디자인 정답 = 힉스필드 시안 A_oripa_list_m · A_oripa_detail_m(_grid) · A_oripa_detail_pc '로열 누아르'.
   색은 tokens.css 의미 토큰만(밝은 화면은 토큰이 저절로 맞춘다). 브레이크포인트 600 · 900 · 1200.
   뽑는 연출·애니메이션 없음(진행 막대도 움직이지 않는다).
   ===================================================================== */

/* ── 공용: 희귀도 칩 · 카드 그림 · 진행 막대 ── */
.or-r{display:inline-grid;place-items:center;flex:none;min-width:30px;height:20px;padding:0 7px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-family:var(--display);font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.04em;white-space:nowrap;color:var(--text-2);background:var(--bg)}
.or-r--top{color:var(--on-gold);border-color:var(--gold);background:var(--gold-grad)}
.or-r--mid{color:var(--gold-hi);border-color:var(--gold-line)}
.or-r--red{color:var(--live-hi);border-color:var(--live)}

.or-cimg{display:block;position:relative;width:100%;aspect-ratio:63/88;border-radius:5px;overflow:hidden;background:var(--surface-2)}
.or-cimg img{width:100%;height:100%;object-fit:cover}
/* 카드 그림이 없을 때 = CSS 카드 뒷면(금빛 빗금 + 왕관) */
.or-back{display:grid;place-items:center;width:100%;height:100%;border:1px solid var(--gold-line);border-radius:inherit;color:var(--gold);
  background:repeating-linear-gradient(135deg,var(--gold-wash) 0 5px,transparent 5px 10px),var(--surface)}
.or-back .ico{width:22%;height:auto;max-width:28px;aspect-ratio:1/1}

.or-meter{margin-top:10px}
.or-meter__bar{position:relative;height:6px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.or-meter__bar i{position:absolute;left:0;top:0;bottom:0;width:var(--pct,0%);border-radius:inherit;background:var(--gold-grad)}
.or-meter__n{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--text-2)}
.or-meter__pct{font-weight:700;color:var(--gold-hi)}
.or-meter__left b{font-weight:700;color:var(--text)}

/* ── 목록 /oripa ── */
.or-head{padding-top:var(--s2)}
.or-head__k{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:var(--track-caps);color:var(--gold-ink)}
.or-head__k .ico{color:var(--gold)}
.or-head__t{margin-top:2px;font-family:var(--serif);font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-.03em;color:var(--heading)}
.or-head__d{margin-top:4px;font-size:14px;line-height:1.5;color:var(--text)}
.or-chips{margin:var(--s3) 0}
.or-chips .chip{height:38px;padding:0 20px;font-size:14px}

.or-cards{display:grid;gap:12px}
.or-card{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);min-width:0;border:1px solid var(--gold-line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-frame);overflow:hidden}
.or-card__art{display:grid;place-items:center;padding:10px 6px;background:var(--well-grad)}
.or-card__art img{width:100%;max-width:200px;height:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 12px 14px var(--scrim))}
.or-card__body{display:flex;flex-direction:column;min-width:0;padding:14px 14px 14px 12px}
.or-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.or-card__t{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:var(--heading);overflow-wrap:anywhere}
.or-card__t a{color:inherit}
.or-card__t a:hover{text-decoration:underline;text-underline-offset:3px}
.or-card__chip{margin-top:2px}
.or-card__m{margin-top:3px;font-size:12.5px;color:var(--text-2)}
.or-card__p{margin-top:4px;font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.15;color:var(--price);font-variant-numeric:tabular-nums lining-nums}
.or-card__soon{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--text)}
.or-card__soon .ico{flex:none;margin-top:1px;color:var(--gold)}
.or-card__soon b{font-weight:700;color:var(--gold-hi)}
.or-card__foot{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:12px}
.or-card__cards{display:flex;gap:6px}
.or-card__cards li{display:grid;justify-items:center;gap:4px;width:40px}
.or-card__cards .or-r{min-width:0;height:18px;padding:0 5px;font-size:9.5px}
.or-cimg--mini{border-radius:3px;box-shadow:0 0 0 1px var(--line-2)}
.or-card__go{flex:none;gap:4px;border-radius:var(--r-pill)}
.or-card.is-closed{border-color:var(--line-2);box-shadow:none}
.or-card.is-closed .or-card__art img,.or-card.is-closed .or-card__cards{filter:grayscale(.85);opacity:.55}
.or-card.is-closed :is(.or-card__t,.or-card__p){color:var(--text-3)}
.or-card.is-closed .or-meter__bar i{background:var(--mute)}
.or-card.is-closed .or-card__go{color:var(--text-2);border-color:var(--line-2)}

.or-band{display:flex;align-items:center;gap:10px;margin-top:var(--s4);padding:12px 14px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:var(--surface);color:var(--text)}
.or-band__ic{flex:none;color:var(--gold-hi)}
.or-band__t{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.45;color:var(--gold-hi)}
.or-band__t i{margin:0 6px;font-style:normal;color:var(--gold)}
.or-band__go{flex:none;color:var(--gold)}
.or-band:hover{border-color:var(--gold);background:var(--gold-wash)}

@media (min-width:600px){
  .or-card{grid-template-columns:minmax(0,34%) minmax(0,1fr)}
  .or-card__cards li{width:48px}
}
@media (min-width:900px){
  .or-head{padding-top:var(--s3)}
  .or-head__t{font-size:40px}
  .or-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .or-card__body{padding:18px 18px 18px 14px}
  .or-card__t{font-size:21px}
  .or-card__p{font-size:27px}
}

/* ── 상세 /oripa/<id> ── */
.or-crumbs{display:none}
.or-stage{position:relative;display:grid;place-items:center;margin-inline:calc(var(--gut) * -1);padding:14px 0 18px;background:var(--well-grad);border-bottom:1px solid var(--gold-line-2)}
.or-stage img{width:min(64vw,300px);height:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 18px 18px var(--scrim))}
.or-stage.is-closed img{filter:grayscale(.85);opacity:.6}
.or-info{display:block;margin-top:12px;padding:14px 14px 16px;border:1px solid var(--gold-line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-frame)}
.or-label{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--gold);font-size:12px;font-weight:600;color:var(--gold-hi)}
.or-label span{font-family:var(--display);letter-spacing:.06em}
.or-label i{font-style:normal;color:var(--gold)}
.or-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:8px}
.or-title{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:var(--heading);overflow-wrap:anywhere}
.or-share{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-line);color:var(--gold-hi);background:transparent}
.or-share:hover{background:var(--gold-wash);border-color:var(--gold)}
.or-sub{margin-top:4px;font-size:13px;line-height:1.55;color:var(--text-2)}
.or-price{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-family:var(--serif);font-size:32px;font-weight:700;line-height:1.15;color:var(--price);font-variant-numeric:tabular-nums lining-nums}
.or-price .pill{font-family:var(--font)}
.or-meter--lg .or-meter__bar{height:8px}
.or-meter--lg .or-meter__n{font-size:13px}

.or-spec{display:grid;margin-top:14px;border-top:1px solid var(--gold-line-2)}
.or-spec>div{display:grid;grid-template-columns:minmax(104px,32%) minmax(0,1fr);align-items:center;gap:10px;min-height:40px;padding:8px 0;border-bottom:1px solid var(--gold-line-2)}
.or-spec dt{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text)}
.or-spec dt .ico{flex:none;color:var(--gold)}
.or-spec dd{min-width:0;font-size:13.5px;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.or-spec small{display:block;font-size:12px;color:var(--text-2)}
.or-live{display:inline-flex;align-items:center;height:18px;margin-left:4px;padding:0 6px;border-radius:var(--r-xs);font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--live-hi);border:1px solid var(--live)}

.or-note{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;margin-top:14px;padding:12px 14px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:var(--gold-wash)}
.or-note>.ico{color:var(--gold-hi)}
.or-note ul{display:grid;gap:3px}
.or-note li{position:relative;padding-left:12px;font-size:13px;line-height:1.5;color:var(--text)}
.or-note li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* 사기 줄: 폰(~899) = 화면 아래 고정 바(수량 + [구매하기]) · PC = 정보 판 안 */
.or-buy{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:grid;grid-template-columns:minmax(118px,40%) minmax(0,1fr);align-items:center;gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--gold-line);box-shadow:var(--sh-float)}
.or-buy__qh,.or-buy__sum,.or-buy__cart{display:none}
.or-buy__qty .qty{display:grid;width:100%;min-width:0;height:50px;grid-template-columns:44px minmax(0,1fr) 44px;border-radius:var(--r-md)}
.or-buy .btn{--btn-h:50px;font-size:16px;font-weight:700;border-radius:var(--r-md)}
.or-buy__go,.or-buy__login{grid-column:2}
.or-buy__go>span{display:inline-flex;align-items:center;gap:8px}   /* PC [⚡ 바로 구매] 아이콘·글자 한 줄 (폰·PC 숨김은 app.css !important 가 이김) */
.or-buy__login{grid-column:1/-1}
.or-why{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:50px;padding:8px 14px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--mute-wash);
  font-size:13.5px;line-height:1.45;color:var(--text)}
.or-why .ico{flex:none;color:var(--gold)}
.or-why b{font-weight:700;color:var(--gold-hi)}

/* 탭 · 판 */
.or-tabs{margin-top:var(--s4)}
.or-tabs a{flex:1 0 auto;justify-content:center;gap:6px}
.or-tabs a b{font-size:12.5px;font-weight:700;color:var(--gold)}
.or-panel{padding-top:14px}
.or-h{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--heading)}
.or-h small{margin-left:6px;font-family:var(--font);font-size:12px;font-weight:500;color:var(--text-2)}
.or-left{font-size:14px;color:var(--text)}
.or-left b{font-weight:700;color:var(--gold-hi)}
.or-left__sub{margin-top:2px;font-size:12px;color:var(--text-2)}

.or-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.or-tile{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:30px 8px 10px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:var(--surface);text-align:center}
.or-tile>.or-r{position:absolute;left:7px;top:7px}
.or-tile__img{position:relative;display:block;width:78%}
.or-tile__img .or-cimg{box-shadow:0 0 0 1px var(--gold-line-2)}
.or-tile__n{margin-top:8px;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.or-tile__q{margin-top:6px;padding:2px 10px;border-radius:var(--r-pill);border:1px solid var(--gold-line);font-size:11.5px;color:var(--text);white-space:nowrap}
.or-tile__q b{color:var(--gold-hi)}
.or-tile.is-out{border-color:var(--line-2)}
.or-tile.is-out .or-cimg{filter:grayscale(1);opacity:.35}
.or-tile.is-out :is(.or-tile__n,.or-tile__q){color:var(--text-3)}
.or-tile.is-out .or-tile__q{border-color:var(--line-2)}
.or-tile.is-out .or-tile__q b{color:inherit}
.or-tile.is-out>.or-r{opacity:.6}
.or-tile__out{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:700;white-space:nowrap;color:var(--text);background:var(--surface);border:1px solid var(--line-2)}

.or-recent{margin-top:var(--s4)}
.or-recent__t{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-size:16px;font-weight:700;color:var(--heading)}
.or-recent__t .ico{color:var(--gold)}
.or-recent__more{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-top:2px;font-size:13px;color:var(--gold-hi)}

.or-pulls{display:grid;margin-top:10px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.or-pulls>li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--gold-line-2)}
.or-pulls>li:first-child{border-top:0}
.or-cimg--row{border-radius:3px}
.or-pulls__main{display:grid;gap:2px;min-width:0}
.or-pulls__card{font-size:13.5px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.or-pulls__meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--text-2)}
.or-pulls__who{color:var(--text)}
.or-pulls--mini>li{grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;font-size:12.5px}
.or-pulls--mini time{color:var(--text-2);font-variant-numeric:tabular-nums}
.or-pulls--mini .or-pulls__card{font-size:12.5px;font-weight:500}
.or-panel .pager{margin-top:var(--s3)}

.or-rules{display:grid;gap:8px;margin-top:10px;padding:14px 16px 14px 34px;border:1px solid var(--gold-line);border-radius:var(--r-md);background:var(--surface);list-style:decimal}
.or-rules li{padding-left:2px;font-size:14px;line-height:1.6;color:var(--text)}
.or-rules li::marker{font-weight:700;color:var(--gold)}
.or-guide__more{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13px}
.or-guide__more a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}

@media (max-width:599px){
  .or-pulls--mini>li{grid-template-columns:auto minmax(0,1fr) auto}
  .or-pulls--mini time{grid-column:1/-1;font-size:11.5px}
}
@media (min-width:600px){
  .or-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
}
@media (min-width:900px){
  .or-crumbs{display:flex;align-items:center;gap:6px;margin:4px 0 12px;font-size:12.5px;color:var(--text-2)}
  .or-crumbs a{color:var(--text-2)}
  .or-crumbs a:last-child{color:var(--text)}
  .or-crumbs a:hover{color:var(--gold-hi)}
  .or-crumbs .ico{color:var(--text-3)}
  .or-dt__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
  .or-stage{margin:0;padding:24px;border:1px solid var(--gold-line);border-radius:var(--r-lg);box-shadow:var(--sh-frame)}
  .or-stage img{width:min(82%,440px)}
  .or-info{margin-top:0;padding:20px 22px 22px}
  .or-title{font-size:30px}
  .or-price{font-size:38px}
  .or-spec>div{grid-template-columns:150px minmax(0,1fr);min-height:38px;padding:6px 0}
  .or-buy{position:static;z-index:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px;padding:16px 0 0;background:none;border-top:1px solid var(--gold-line-2);box-shadow:none}
  .or-buy__qty{display:flex;align-items:center;gap:14px}
  .or-buy__qh{display:inline;font-size:13.5px;color:var(--text)}
  .or-buy__qty .qty{width:160px;height:44px;border-radius:var(--r-pill)}
  .or-buy__sum{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;min-width:0}
  .or-buy__sum span{font-size:13px;color:var(--text-2)}
  .or-buy__sum b{font-family:var(--serif);font-size:24px;font-weight:700;white-space:nowrap;color:var(--price)}
  .or-buy__cart{display:inline-flex;grid-column:1}
  .or-buy__go{grid-column:2}
  .or-buy .btn{--btn-h:52px}
  .or-tabs{margin-top:var(--s5)}
  .or-tabs a{flex:0 1 220px}
  .or-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .or-tile{padding:32px 10px 12px}
  .or-pulls>li{grid-template-columns:44px minmax(0,1fr) auto;padding:10px 16px}
  .or-pulls--mini>li{grid-template-columns:150px 110px minmax(0,1fr) auto}
  .or-guide{max-width:880px}
}
@media (min-width:1200px){
  .or-dt__top{gap:24px}
  .or-stage img{width:min(76%,460px)}
}

/* ── 주문 상세 '나온 카드' (account/order_detail.html) ── */
.od-oripa{display:grid;margin-top:8px;padding:10px 12px;border:1px solid var(--gold-line-2);border-radius:var(--r-md);background:var(--surface-2)}
.od-oripa__h{font-size:12.5px;font-weight:700;color:var(--gold-hi)}
.od-oripa__list{display:grid;gap:6px;margin-top:6px}
.od-oripa__c{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.od-oripa__c b{font-weight:600;overflow-wrap:anywhere}
.od-oripa__wait{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.od-oripa__wait:first-child{margin-top:0}
.od-oripa__wait .ico{flex:none;margin-top:1px;color:var(--gold)}