/* 포인트 상점: 공통 무광 색감 안에서 카드·교환권·진열장 세 가지 형태를 비교합니다. */
.point-shop { --ps-panel:#232a2d; --ps-edge:#3b484d; --ps-ink:#f1f4f0; --ps-muted:#b3c2c6; --ps-teal:#a0d2d5; --ps-gold:#f3c185; --ps-shadow:inset 1px 1px 1px #b3cbd126, inset -1px -1px 2px #0c141880, 5px 7px 12px #080d1180; color:var(--ps-ink); word-break:keep-all; }
.point-shop *, .point-shop *::before, .point-shop *::after { box-sizing:border-box; }
.point-shop a { text-decoration:none; }
.point-shop :is(h1,h2,h3,p) { margin:0; }
.point-shop button { font:inherit; cursor:pointer; }
.point-shop [hidden] { display:none !important; }
.point-shop :is(a,button):focus-visible { outline:2px solid var(--ps-gold); outline-offset:4px; }
.point-shop-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:5px 0 23px; padding-bottom:21px; border-bottom:1px solid var(--ps-edge); }
.point-shop-head h1 { font-size:27px; letter-spacing:-1px; font-weight:800; line-height:1.3; }
.point-shop-head p { margin-top:8px; font-size:13px; color:var(--ps-muted); line-height:1.65; }
.point-wallet { flex-shrink:0; min-width:195px; display:flex; flex-direction:column; gap:9px; padding:13px 19px; border:1px solid var(--ps-edge); border-radius:9px; background:#1e2629; box-shadow:inset 3px 3px 7px #0b11199c,inset -1px -1px 2px #b2d6db15; }
.point-wallet > span { font-size:12px; color:var(--ps-muted); }
.point-wallet > a { display:flex; align-items:center; justify-content:space-between; gap:17px; min-height:24px; font-size:14px; color:var(--ps-teal); }
.point-wallet > strong { color:var(--ps-gold); font-size:23px; font-variant-numeric:tabular-nums; }
.point-wallet small { font-size:13px; }
.point-design-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; padding:15px 18px; border:1px solid #45636a; border-radius:9px; background:#1d2c30; }
.point-design-bar > div > span { font-size:11px; color:#b5d2d5; display:block; margin-bottom:5px; }
.point-design-bar strong { font-size:15px; color:#d2e7e7; }
.point-design-bar p { font-size:12px; color:#b3c5c9; margin-top:5px; }
.point-design-bar nav { display:flex; gap:7px; flex-shrink:0; }
.point-design-bar nav a { display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:0 12px; border:1px solid #43575d; border-radius:6px; color:#d6e1e2; background:#202a2e; font-size:12px; white-space:nowrap; }
.point-design-bar nav a[aria-current] { color:#173238; background:#a0d2d5; border-color:#b3e0e0; box-shadow:inset 0 1px #e1f1e8,0 2px 0 #3c656b; }
.point-catalog-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.point-catalog-top h2 { font-size:18px; font-weight:700; }
.point-status { display:flex; align-items:center; gap:6px; color:var(--ps-gold); font-size:12px; }
.point-status i { width:5px; height:5px; border-radius:50%; background:var(--ps-gold); }
.point-filters { display:flex; gap:7px; margin-bottom:22px; overflow:auto; scrollbar-width:none; padding:1px 1px 5px; }
.point-filters button { flex-shrink:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid #3c494e; border-radius:7px; background:#222b2f; color:#c8d4d6; font-size:12px; box-shadow:inset 0 1px #a8c1c51a,0 2px 2px #080d1180; }
.point-filters button span { font-size:10px; opacity:.8; }
.point-filters button[aria-pressed="true"] { background:#8fc4cb; color:#183238; border-color:#b1dfe0; font-weight:700; box-shadow:inset 0 1px #e3f5f58a,0 3px 0 #294f58; }
.point-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.point-product { min-width:0; position:relative; padding:9px; border:1px solid var(--ps-edge); border-radius:12px; background:var(--ps-panel); box-shadow:var(--ps-shadow); }
.point-art { height:172px; position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; border:1px solid #3c4a50; border-radius:8px; background:radial-gradient(ellipse at 50% 20%,#3b555b 0%,#27363c 47%,#1d272c 100%); box-shadow:inset 0 1px 2px #b9d4dc18,inset 0 -12px 25px #09121655; }
.point-product-label { z-index:3; position:absolute; top:10px; left:10px; color:#c4d7d8; font-size:10px; line-height:1.4; }
.point-product-art { position:relative; z-index:2; width:185px; height:auto; max-width:94%; margin-top:18px; filter:drop-shadow(3px 9px 4px #080e1466); }
.point-pedestal { z-index:1; position:absolute; bottom:10px; left:18%; right:18%; height:12px; background:linear-gradient(#657b7f,#2e434a); border:1px solid #738d9155; border-radius:50%; box-shadow:0 5px 0 #15282f,0 12px 10px #0b151c88; }
.point-product-body { position:relative; padding:17px 10px 10px; }
.point-product-note { color:var(--ps-muted); font-size:11px; margin-bottom:7px !important; }
.point-product h3 { font-size:17px; line-height:1.4; letter-spacing:-.3px; }
.point-price { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:17px 0 16px; }
.point-price span { font-size:11px; color:var(--ps-muted); }
.point-price strong { font-size:13px; color:var(--ps-gold); font-weight:500; }
.point-shop .point-exchange { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:42px; border:1px solid #84afb7; border-radius:6px; color:#e3f2f1; background:linear-gradient(#3e7681,#2e5964); box-shadow:inset 0 1px 1px #c0e1e845,inset 0 -1px 1px #1e354c,0 3px 0 #142c34,0 5px 5px #09101355; font-size:12px; font-weight:700; }
.point-exchange > span { color:#d2e7e8; font-size:15px; }
.point-shop a.point-exchange:hover { filter:brightness(1.12); }
.point-shop button.point-exchange:disabled { opacity:1; cursor:default; color:#c8d0d2; background:#30393e; border-color:#56646a; box-shadow:inset 0 1px #a8c1c526,0 2px 0 #152025; }
.point-shop-note { font-size:12px; line-height:1.7; color:var(--ps-muted); padding:21px 0 6px; text-align:center; }
/* 2안: 절취선·금속 띠·가로 배치의 교환권 */
.point-shop--2 .point-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.point-shop--2 .point-product { display:grid; grid-template-columns:40% minmax(0,1fr); padding:0; border-color:#59605d; border-radius:10px; background:linear-gradient(110deg,#292e2e,#252b2d); box-shadow:inset 0 1px #b7c4be24,0 4px 0 #111b20,5px 10px 17px #070d1280; }
.point-shop--2 .point-art { height:auto; min-height:213px; border:0; border-right:1px dashed #8c9a9777; border-radius:9px 0 0 9px; background:radial-gradient(ellipse at 50% 40%,#566864,#313d3e 65%,#273133); box-shadow:inset 5px 0 #b9935866,inset -1px 0 #141d2099; overflow:visible; }
.point-shop--2 .point-art::before,.point-shop--2 .point-art::after { content:""; position:absolute; z-index:4; right:-9px; width:17px; height:17px; border:1px solid #4e595b; border-radius:50%; background:#171719; }
.point-shop--2 .point-art::before { top:-9px; }
.point-shop--2 .point-art::after { bottom:-9px; }
.point-shop--2 .point-product-label { top:17px; left:18px; color:#e8cc9e; }
.point-shop--2 .point-pedestal { display:none; }
.point-shop--2 .point-product-art { width:175px; max-width:110%; margin:20px 0 0; }
.point-shop--2 .point-product-body { display:flex; flex-direction:column; padding:24px 20px 19px; }
.point-shop--2 .point-product h3 { font-size:17px; }
.point-shop--2 .point-price { margin:18px 0; padding-top:14px; border-top:1px solid #5b655a66; }
.point-shop--2 .point-exchange { margin-top:auto; border-color:#bc9c6f; color:#261e16; background:linear-gradient(#f1cd97,#cda46c); box-shadow:inset 0 1px #ffedcbb3,0 3px 0 #604a30,0 5px 6px #0b11174d; }
.point-shop--2 .point-exchange > span { color:#34291c; }
.point-shop--2 .point-filters button[aria-pressed="true"] { background:#e3bf8b; border-color:#f1d4a6; color:#34271b; box-shadow:inset 0 1px #fff0d4,0 3px 0 #5e4b35; }
/* 3안: 안쪽으로 파인 진열 공간과 두꺼운 받침대 */
.point-shop--3 .point-catalog { padding:23px; border:1px solid #3b464b; border-radius:12px; background:#20272a; box-shadow:var(--ps-shadow); }
.point-shop--3 .point-products { gap:24px 20px; }
.point-shop--3 .point-product { padding:0; border-color:#465a60; border-radius:10px; background:#293439; box-shadow:inset 0 1px #c5dde329,0 6px 0 #111c22,0 10px 10px #0c121773; }
.point-shop--3 .point-art { margin:8px 8px 0; height:190px; border-color:#101b22; border-bottom-color:#6f858b77; border-radius:6px 6px 2px 2px; background:radial-gradient(ellipse at 50% 100%,#3c5e65 0%,#1d323a 40%,#15252c 70%,#121e25 100%); box-shadow:inset 5px 8px 12px #080f178c,inset -1px 0 #bad6db26; }
.point-shop--3 .point-art::before { content:""; position:absolute; top:0; left:15%; right:15%; height:2px; background:#e6cfa1; box-shadow:0 3px 14px 4px #c5ce9c30; }
.point-shop--3 .point-product-art { margin-top:5px; width:192px; filter:drop-shadow(3px 12px 5px #02070eaa); }
.point-shop--3 .point-product-label { color:#e5c798; top:12px; left:10px; }
.point-shop--3 .point-pedestal { left:8%; right:8%; bottom:17px; height:12px; border-radius:3px; background:linear-gradient(#71898d,#415d65); border:1px solid #a5b4ad66; transform:perspective(140px) rotateX(30deg); box-shadow:0 8px 0 #243b46,0 10px 0 #13232b,0 18px 13px #030a1599; }
.point-shop--3 .point-product-body { padding:17px 17px 18px; border-top:2px solid #425d64; }
.point-shop--3 .point-product-note { font-size:10px; letter-spacing:.5px; }
.point-shop--3 .point-product h3 { font-size:17px; }
.point-shop--3 .point-exchange { background:linear-gradient(#4a7078,#304e59); border-color:#759aa1; }
.point-shop--3 .point-shop-note { padding-bottom:0; }
@media (max-width:1250px) and (min-width:1025px) {
  .point-design-bar { align-items:flex-start; flex-direction:column; gap:12px; }
  .point-products { gap:12px; }
  .point-shop--2 .point-product-body { padding:20px 12px 16px; }
  .point-shop--2 .point-product h3 { font-size:15px; }
  .point-shop--3 .point-catalog { padding:17px; }
}
@media (max-width:700px) {
  .point-shop-head { gap:10px; margin-top:0; margin-bottom:17px; padding-bottom:16px; }
  .point-shop-head h1 { font-size:23px; }
  .point-shop-head p { font-size:11px; max-width:210px; margin-top:6px; }
  .point-wallet { min-width:123px; padding:11px; gap:7px; }
  .point-wallet > span { font-size:10px; }
  .point-wallet > a { font-size:11px; gap:8px; }
  .point-wallet > strong { font-size:18px; }
  .point-design-bar { flex-direction:column; align-items:stretch; gap:12px; padding:13px; margin-bottom:21px; }
  .point-design-bar nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .point-design-bar nav a { gap:3px; font-size:10px; padding:0 4px; }
  .point-design-bar p { font-size:11px; line-height:1.5; }
  .point-catalog-top h2 { font-size:17px; }
  .point-status { font-size:11px; }
  .point-filters { gap:5px; margin-bottom:16px; }
  .point-filters button { padding:0 11px; font-size:11px; gap:5px; }
  .point-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 11px; }
  .point-product { padding:6px; border-radius:9px; }
  .point-art { height:140px; border-radius:6px; }
  .point-product-label { font-size:9px; top:8px; left:8px; }
  .point-product-art { width:155px; max-width:106%; margin-top:18px; }
  .point-product-body { padding:13px 5px 8px; }
  .point-product h3 { font-size:14px; }
  .point-product-note { font-size:10px; margin-bottom:5px !important; }
  .point-price { margin:13px 0; }
  .point-price span { font-size:10px; }
  .point-price strong { font-size:12px; }
  .point-shop .point-exchange { gap:6px; font-size:11px; }
  .point-shop-note { font-size:11px; padding-top:17px; text-align:left; }
  .point-shop--2 .point-products { grid-template-columns:minmax(0,1fr); gap:18px; }
  .point-shop--2 .point-product { grid-template-columns:38% minmax(0,1fr); }
  .point-shop--2 .point-art { min-height:182px; }
  .point-shop--2 .point-product-body { padding:20px 17px 16px; }
  .point-shop--2 .point-price { margin:13px 0; padding-top:10px; }
  .point-shop--2 .point-product h3 { font-size:16px; }
  .point-shop--3 .point-catalog { padding:13px 10px 15px; }
  .point-shop--3 .point-products { gap:18px 10px; }
  .point-shop--3 .point-product { border-radius:7px; }
  .point-shop--3 .point-art { margin:5px 5px 0; height:147px; }
  .point-shop--3 .point-product-art { width:155px; max-width:120%; margin-top:10px; }
  .point-shop--3 .point-product-label { font-size:8px; left:6px; }
  .point-shop--3 .point-pedestal { bottom:14px; }
  .point-shop--3 .point-product-body { padding:12px 9px 13px; }
  .point-shop--3 .point-product h3 { font-size:13px; }
  .point-shop--3 .point-filters button { padding:0 9px; }
}