@font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations"), url("/static/fonts/PretendardVariable.woff2") format("woff2"); }
:root { --bg: #0f0d0d; --panel: #1a1616; --line: #3a2b2b; --text: #e8e2dc; --muted: #9a8f86; --red: #8b1515; --red2: #b32020; --gold: #d8b25a; --blue: #4aa3ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; letter-spacing: -0.01em; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 10px 16px; background: #000; border-bottom: 3px solid var(--red); }
.logo { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 2px; }
nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav { padding: 6px 12px; color: var(--text); border-radius: 4px; }
.nav.on, .nav:hover { background: var(--red); color: #fff; text-decoration: none; }
.me { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.me form { margin: 0; }
.pt { color: var(--blue); }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 6px 0 16px; }
h2 { font-size: 18px; margin: 28px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
button { font: inherit; cursor: pointer; }
.primary { background: var(--red); color: #fff; border: 0; padding: 8px 16px; border-radius: 4px; }
.primary:hover { background: var(--red2); }
.primary:disabled { opacity: .5; cursor: default; }
a.primary { display: inline-block; color: #fff; text-decoration: none; }
a.primary.big { font-size: 18px; padding: 12px 28px; }
.notice ol { margin: 8px 0 0; padding-left: 20px; }
.notice li { margin: 6px 0; }
.link { background: none; border: 0; color: var(--muted); padding: 0; text-decoration: underline; }
input, select { font: inherit; background: #0b0a0a; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; max-width: 100%; }
.login { max-width: 360px; margin: 60px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.login label { display: block; margin: 12px 0; }
.login input { display: block; width: 100%; margin-top: 4px; }
.login button { width: 100%; margin-top: 8px; }
.err { color: #ff7b7b; }
.guide-list { columns: 2 280px; padding-left: 20px; }
.guide-list li { margin: 4px 0; break-inside: avoid; }
.guide { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; overflow-wrap: anywhere; }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.cat { background: #262020; color: var(--text); padding: 6px 12px; border-radius: 4px; }
.cat.on, .cat:hover { background: var(--red); color: #fff; text-decoration: none; }
.notice { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; font-size: 16px; }
.card .desc { white-space: pre-wrap; font-size: 13px; color: var(--muted); }
.card .base { color: var(--blue); font-weight: 700; }
.card select, .card input { width: 100%; }
.card .total { color: #ff6b6b; font-weight: 700; font-size: 16px; }
.card .row { display: flex; gap: 8px; align-items: center; }
.card .row input { width: 80px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 400; }
.st-pending { color: var(--gold); } .st-delivered { color: #6fd36f; } .st-canceled { color: var(--muted); }
.plus { color: #6fd36f; } .minus { color: #ff7b7b; }
.chat-log { height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.chat-log .m { margin: 3px 0; overflow-wrap: anywhere; }
.chat-log .t { color: var(--muted); font-size: 12px; margin-right: 6px; }
.chat-log .a { color: var(--gold); font-weight: 700; margin-right: 6px; }
.chat-log .me .a { color: var(--blue); }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-wrap { display: grid; grid-template-columns: 1fr 200px; gap: 12px; }
.chat-main { min-width: 0; }
.chat-side { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; height: 60vh; overflow-y: auto; }
.chat-side-title { color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.chat-side ul { list-style: none; margin: 0; padding: 0; }
.chat-side li { padding: 3px 0; color: var(--gold); overflow-wrap: anywhere; }
.chat-side li.me { color: var(--blue); }
.chat-side li::before { content: "● "; color: #6fd36f; font-size: 10px; }
.chat-form input { flex: 1; }
@media (max-width: 600px) { .me { margin-left: 0; } .guide-list { columns: 1; } .chat-wrap { grid-template-columns: 1fr; } .chat-side { height: auto; max-height: 30vh; } }

/* ================================================================ NOW 모양 (가이드 / 포인트 상점)
   NOW 홈페이지처럼 흰 바탕 영역. 윗부분 머리말은 그대로 두고 본문만 바꾼다. */
.now-sheet { background: #fff; color: #333; border-radius: 4px; padding: 20px; font: 13px/1.8 "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
.now-sheet a:not([class]) { color: #333; }
.now-sheet .muted { color: #999; }
.now-sheet input, .now-sheet select { background: #fff; color: #495057; border: 1px solid #ced4da; border-radius: 0; font-size: 13px; padding: 3px 6px; }
.gbtn { background: #e62e2e; color: #fff; border: 0; border-radius: 3px; padding: 5px 16px; font-size: 13px; }
.gbtn:hover { background: #c81f1f; }

/* 가이드 분류표: 검은 띠(구역) + 회색 머리칸 + 옅은 회색 목록칸 */
.gmenu { border: 1px solid #aaa; margin: 0 auto 20px; max-width: 1100px; display: grid; grid-template-columns: repeat(5, auto); }
.gm-sec, .gm-grid { display: contents; }   /* 두 구역이 한 표처럼 같은 칸 폭을 쓴다 */
.gm-bar { grid-column: 1 / -1; }
.gm-bar { background: #000; text-align: center; min-height: 27px; padding: 1px 0; line-height: 0; }
.gm-bar span { color: #fff; font-weight: 700; line-height: 25px; font-size: 13px; }
.gm-col { background: #f2f2f2; border-right: 1px solid #aaa; border-top: 1px solid #aaa; }
.gm-col:last-child { border-right: 0; }
.gm-cat { background: #8e8e8e; height: 32px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #aaa; }
.gm-cat span { color: #fff; font-weight: 700; }
.gm-cat img, .gm-bar img { max-width: 100%; height: auto; }
.gm-col ul { margin: 0; padding: 4px 6px 8px 20px; list-style: disc; }
.gm-col li { font-weight: 700; line-height: 1.9; overflow-wrap: anywhere; }
.gm-col a { font-weight: 700; }
.gm-col a:not([class]) { color: #3a32c3; }
.gm-star { color: #f00; font-weight: 700; }
.gsearch { background: #f5f5f5; border: 1px solid #ddd; padding: 12px; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.gsearch-t { width: 100%; text-align: center; font-weight: 700; font-size: 13px; }
.gsearch input { width: 260px; max-width: 100%; }
.gsearch-res { border: 1px solid #ddd; padding: 10px 16px; margin: 0 auto 10px; max-width: 1100px; font-size: 13px; }
.gsearch-res ul { margin: 6px 0 0; padding-left: 20px; }
.gsearch-res a, .gsearch-res a:not([class]) { color: #3a32c3; font-weight: 700; }

/* 가이드 글 화면 */
.gv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px 12px; border-bottom: 1px solid #ddd; margin: 4px 0 15px; }
.gv-title { font-size: 18px; margin: 0; }
.gv-title span { display: inline-block; padding: 0 2px 6px; border-bottom: 2px solid #e62e2e; margin-bottom: -1px; }
.gv-crumb { order: 2; color: #999; font-size: 12px; padding-bottom: 6px; }
.gv-crumb a { color: #999; }
.gv { font-size: 12px; line-height: 21.6px; color: #333; overflow-wrap: anywhere; }
.gv .gl { white-space: pre-wrap; min-height: 21.6px; }
.gv a:not([class]) { color: #3a32c3; } .gv a { text-decoration: underline; }
.a-l { text-align: left; } .a-c { text-align: center; } .a-r { text-align: right; } .va-t { vertical-align: top; }
.b { font-weight: 700; } .u { text-decoration: underline; } .s { text-decoration: line-through; } .i { font-style: italic; }
.gimg { max-width: 100%; height: auto; vertical-align: middle; }
.gt-wrap { max-width: 100%; overflow-x: auto; }
.gt { border-collapse: collapse; border-spacing: 0; }
.gt.gt-c { margin: 0 auto; }
.gt td, .gt th { padding: 5px; vertical-align: middle; font-weight: inherit; text-align: inherit; }
.gt th { font-weight: 700; }
.gt.gt-b td, .gt.gt-b th { border: 1px solid #ccc; }
.gv a.gvid { display: inline-block; margin: 4px 0; padding: 8px 16px; background: #c4302b; color: #fff; border-radius: 4px; font-weight: 700; text-decoration: none; }

/* 포인트 상점 */
.shop-sheet { max-width: 780px; margin: 0 auto; }
.shop-sheet .shop-head h1 { font-size: 16px; margin: 0 0 10px; }
.shop-sheet .pt { color: #007bff; }
.shop-sheet .cats { gap: 4px; }
.shop-sheet .cat { background: #333; color: #fff; border-radius: 4px; padding: 6px 12px; font-size: 14px; }
.shop-sheet .cat.on { background: #1d2124; }
.shop-sheet .cat:hover { background: #23272b; text-decoration: none; }
.shop-sheet .notice { background: #f2f2f2; border: 1px solid #ddd; border-radius: 0; color: #333; font-size: 12px; }
.shop-sheet .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shop-sheet .card { background: #fff; border: 1px solid rgba(0, 0, 0, .125); border-radius: 3px; padding: 0 0 12px; gap: 6px; color: #212529; }
.shop-sheet .card > * { margin-left: 12px; margin-right: 12px; }
.shop-sheet .card > .card-img { margin: 0 0 6px; }
.shop-sheet .card > select, .shop-sheet .card > input { width: auto; }   /* 좌우 여백 안에서 꽉 차게 */
.card-img { background: #f8f9fa; height: 200px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.card-img img { max-width: 100%; max-height: 200px; }
.shop-sheet .card h3 { font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.shop-sheet .card .base { color: #007bff; font-size: 12.5px; font-weight: 500; }
.shop-sheet .card .desc { color: #666; font-size: 12px; }
.shop-sheet .card .total { color: #dc3545; font-size: 16px; }
.shop-sheet .card .muted { color: #999; }
.shop-sheet .primary { background: #007bff; border-radius: 4px; padding: 5px 12px; font-size: 13px; }
.shop-sheet .primary:hover { background: #0069d9; }
.pager { text-align: center; margin: 18px 0 8px; }
.pager .pg { display: inline-block; min-width: 30px; padding: 4px 8px; margin: 2px; border: 1px solid #ddd; color: #333; text-align: center; }
.pager .pg.on { background: #333; border-color: #333; color: #fff; }
.pager .pg:hover { text-decoration: none; background: #eee; }
.pager .pg.on:hover { background: #333; }
.shop-search { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.shop-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.shop-modal-box { background: #fff; color: #333; border-radius: 6px; padding: 18px; width: 360px; max-width: 100%; }
.shop-modal-box h3 { margin: 0 0 10px; font-size: 16px; }
.shop-modal-box .desc { white-space: pre-wrap; font-size: 13px; margin-bottom: 14px; }
.shop-modal-box .primary { background: #007bff; }

@media (max-width: 900px) { .gmenu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gv-back { display: none; }
@media (max-width: 600px) {
  .now-sheet { padding: 12px; }
  .gv-page .gmenu { display: none; }        /* 휴대폰: 글 화면에서는 분류표 대신 목록 링크 */
  .now-sheet a.gv-back { display: inline-block; margin-bottom: 8px; color: #3a32c3; font-weight: 700; }
  .gmenu { grid-template-columns: 1fr; }
  .gm-col { border-right: 0; }
  .shop-sheet .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-img { height: 150px; } .card-img img { max-height: 150px; }
  .shop-sheet .card .row { flex-wrap: wrap; }
}
@media (max-width: 380px) { .shop-sheet .grid { grid-template-columns: 1fr; } }

/* ---- 가이드 색·크기 클래스 (now_guide_20260925 에 쓰인 것만, work/gen_css.ps1 로 자동 생성) ---- */
.c-000000 { color: #000000; } .c-0075c8 { color: #0075c8; } .c-008000 { color: #008000; } .c-009900 { color: #009900; } .c-009e25 { color: #009e25; } .c-00ccff { color: #00ccff; } .c-0275d8 { color: #0275d8; } .c-06ff26 { color: #06ff26; } .c-14ff00 { color: #14ff00; } .c-156000 { color: #156000; } .c-1d0505 { color: #1d0505; } .c-252525 { color: #252525; } .c-35353a { color: #35353a; } .c-373a3c { color: #373a3c; } .c-3a32c3 { color: #3a32c3; } .c-3d76ab { color: #3d76ab; } .c-4850b8 { color: #4850b8; } .c-555555 { color: #555555; } .c-666666 { color: #666666; } .c-6e391a { color: #6e391a; } .c-721947 { color: #721947; } .c-7820b9 { color: #7820b9; } .c-8e7745 { color: #8e7745; } .c-951015 { color: #951015; } .c-999999 { color: #999999; } .c-9a9a9a { color: #9a9a9a; } .c-a6cf00 { color: #a6cf00; } .c-b8860b { color: #b8860b; } .c-c6bfff { color: #c6bfff; } .c-cc9966 { color: #cc9966; } .c-cccccc { color: #cccccc; } .c-d1b274 { color: #d1b274; } .c-d6b534 { color: #d6b534; } .c-e19b73 { color: #e19b73; } .c-e573ae { color: #e573ae; } .c-e97d81 { color: #e97d81; } .c-ef007c { color: #ef007c; } .c-ff0000 { color: #ff0000; } .c-ff1bde { color: #ff1bde; } .c-ff6c00 { color: #ff6c00; } .c-ffda00 { color: #ffda00; } .c-ffef00 { color: #ffef00; } .c-ffff00 { color: #ffff00; } .c-ffffff { color: #ffffff; }
.bg-000000 { background-color: #000000; } .bg-252525 { background-color: #252525; } .bg-333333 { background-color: #333333; } .bg-636363 { background-color: #636363; } .bg-a6bcd1 { background-color: #a6bcd1; } .bg-c2c2c2 { background-color: #c2c2c2; } .bg-c7c7c7 { background-color: #c7c7c7; } .bg-e1e1e1 { background-color: #e1e1e1; } .bg-ebebeb { background-color: #ebebeb; } .bg-eeeeee { background-color: #eeeeee; } .bg-f2f2f2 { background-color: #f2f2f2; } .bg-f5f5f5 { background-color: #f5f5f5; } .bg-f5f7f9 { background-color: #f5f7f9; } .bg-f5f8fa { background-color: #f5f8fa; } .bg-f6f6f6 { background-color: #f6f6f6; } .bg-f6f8fa { background-color: #f6f8fa; } .bg-f7feff { background-color: #f7feff; } .bg-f8f8f8 { background-color: #f8f8f8; } .bg-f8fcff { background-color: #f8fcff; } .bg-f9f9f9 { background-color: #f9f9f9; } .bg-f9fcff { background-color: #f9fcff; } .bg-fcfffc { background-color: #fcfffc; } .bg-fdfffe { background-color: #fdfffe; } .bg-fefffd { background-color: #fefffd; } .bg-fffbfb { background-color: #fffbfb; } .bg-fffcfc { background-color: #fffcfc; } .bg-fffdfe { background-color: #fffdfe; } .bg-fffefc { background-color: #fffefc; } .bg-fffefd { background-color: #fffefd; } .bg-ffffff { background-color: #ffffff; }
.gt .bd-aaaaaa { border: 1px solid #aaaaaa; } .gt .bd-cccccc { border: 1px solid #cccccc; } .gt .bd-dcdcdc { border: 1px solid #dcdcdc; } .gt .bd-dddddd { border: 1px solid #dddddd; } .gt .bd-e1e8ed { border: 1px solid #e1e8ed; } .gt .bd-e1eef7 { border: 1px solid #e1eef7; } .gt .bd-e5e5e5 { border: 1px solid #e5e5e5; } .gt .bd-e6e6e6 { border: 1px solid #e6e6e6; }
.gt .bdr-e1eef7 { border-right: 1px solid #e1eef7; }
.gt.bdo-8e7745 { border: 1px solid #8e7745; } .gt.bdo-a6bcd1 { border: 1px solid #a6bcd1; } .gt.bdo-aaaaaa { border: 1px solid #aaaaaa; }
.bx-999999 { border: 1px solid #999999; padding: 7px; }
.bxb-888888 { border-bottom: 1px solid #888888; padding-bottom: 10px; margin-bottom: 10px; }
.gt .bw-2 { border-width: 2px; } .gt .bw-5 { border-width: 5px; }
.fs-11 { font-size: 11px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; } .fs-16 { font-size: 16px; } .fs-19 { font-size: 19px; } .fs-24 { font-size: 24px; } .fs-32 { font-size: 32px; } .fs-48 { font-size: 48px; }
.notice-list { margin: 8px 0 4px 18px; padding: 0; line-height: 1.7; }

/* 상점 어픽스: 다른 칸에서 이미 고른 옵션 */
select option.attr-taken, select option:disabled { color: #9a9a9a; background: #3a1f1f; text-decoration: line-through; }

/* 따로 뜨는 채팅 창 (/chat/popup) */
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.popup { margin: 0; padding: 8px; }
body.popup .chat-wrap { grid-template-columns: 1fr 200px; gap: 8px; height: calc(100vh - 16px); }
@media (max-width: 600px) { body.popup .chat-wrap { grid-template-columns: 1fr 120px; } }
body.popup .chat-main { display: flex; flex-direction: column; min-height: 0; }
body.popup .chat-log { height: auto; flex: 1; min-height: 0; }
body.popup .chat-side { height: auto; max-height: none; }
@media (max-width: 380px) { body.popup .chat-wrap { grid-template-columns: 1fr; } body.popup .chat-side { display: none; } }

/* 내 정보 (닉네임) */
.ok { color: #7bd88f; }
.me-tbl th { text-align: left; width: 140px; }
.me-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.me-form label { display: flex; flex-direction: column; gap: 4px; }