@charset "utf-8";:root { --primary:#bb9cf1; --primary-weak:#efe9ff; --text:#111827; --muted:#6b7280; --bg:#ffffff; --bg-soft:#f7f7fb; --border:#e5e7eb; --radius:18px; --shadow:0 12px 30px rgba(17,24,39,.08); --container:1080px; --header-h:60px;}
* { box-sizing:border-box;}
body.no-scroll { overflow:hidden;}
body { margin:0; font-family:"Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--bg);}
a { color:inherit; text-decoration:none;}
img { max-width:100%; height:auto; display:block;}
.container { max-width:var(--container); margin:0 auto; padding:0 16px;}
.p-5 { padding:5px !important;}
/* ===== Header ===== */
.header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav { height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand { display:flex; align-items:center; gap:10px; font-weight:800;}
.menu { display:none; gap:14px;}
.menu a { font-size:14px; color:var(--muted);}
.menu a:hover { color:var(--text);}
.nav-right { display:flex; gap:10px; align-items:center;}
.btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;}
.btn.primary { background:var(--primary); border-color:var(--primary); color:#fff;}
.rsvt-link { position:relative; padding-right:12px;}
.rsvt-badge { position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#e5e7eb; color:#6b7280; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; transition:transform .2s ease, background .2s ease, color .2s ease;}
.rsvt-badge.is-active { background:var(--primary); color:#fff; transform:scale(1.05);}
/* ===== Hero ===== */
.hero { padding:26px 0 18px; background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);}
.hero-grid { display:grid; grid-template-columns:1fr; gap:16px;}
/* ===== Hero Searchbar ===== */
.hero-searchbar { position:sticky; top:var(--header-h); z-index:70; padding:10px 0; background:rgba(255,255,255,.85); backdrop-filter:blur(14px);}
.hero-searchbar__inner { display:flex; gap:12px; align-items:center; justify-content:space-between; border:1px solid rgba(231,231,242,.9); border-radius:999px; padding:10px; box-shadow:0 18px 50px rgba(18,20,40,.12); background:rgba(255,255,255,.82);}
.hero-search { position:relative; flex:1; min-width:0;}
.hero-search__icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#8f7bf2; pointer-events:none;}
.hero-search__input { width:100%; height:42px; padding:0 14px 0 40px; font-size:14px; border-radius:999px; border:1px solid #e3e3f3; background:rgba(255,255,255,.95); color:#0f1222; outline:none; transition:all .25s ease;}
.hero-search__input:focus { border-color:#ba9bf0; box-shadow:0 0 0 3px rgba(186,155,240,.18);}
.hero-searchbar__right { flex-shrink:0; display:flex; gap:10px; align-items:center;}
/* ===== Chips table ===== */
.chips-grid { padding:18px 0;}
.chips-grid.is-hidden { display:none;}
.chip-table { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--border); background:#fff; border-radius:16px; overflow:hidden;}
.chip-cell { appearance:none; border:0; background:#fff; padding:16px 12px; text-align:center; font-weight:700; font-size:13px; color:var(--text); cursor:pointer; border-right:1px solid var(--border); border-bottom:1px solid var(--border);}
.chip-cell:nth-child(5n) { border-right:0;}
.chip-cell:nth-last-child(-n+5) { border-bottom:0;}
.chip-cell:hover { background:var(--bg-soft);}
.chip-cell.is-active { background:var(--primary-weak); color:#4b2ca3; box-shadow:inset 0 0 0 1px var(--primary);}
/* ===== Cards / Grids ===== */
.section { padding:18px 0 42px;}
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:14px;}
.h2 { margin:0; font-size:22px; letter-spacing:-.2px;}
.hint { margin:0; color:var(--muted); font-size:13px;}
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.card { border:1px solid var(--border); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:0 8px 20px rgba(17,24,39,.06); display:flex; flex-direction:column;}
.card-body { padding:14px;}
.meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.pill { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--primary-weak); color:#4b2ca3; font-weight:900; font-size:12px;}
.off { font-weight:900; color:#ef4444; font-size:13px;}
.name { margin:0 0 10px; font-weight:900; letter-spacing:-.2px;}
.price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.now { font-size:18px; font-weight:950;}
.was { color:var(--muted); text-decoration:line-through; font-weight:700; font-size:13px;}
.card-foot { margin-top:auto; padding:12px 14px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end;}
.thumb-nocolor { display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:800;}
.thumb-nocolor img { width:50px;}
.cart-text { display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; margin:6px 0 0; text-align:center;}
/* location */
.location { border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.kv { margin:0; color:var(--muted); font-size:13px;}
.val { margin:6px 0 0; font-weight:900;}
.box {
border-radius:14px; padding:14px; background:var(--bg-soft);}
/* floating CTA */
.float-cta { position:fixed; right:18px; bottom:18px; z-index:99; display:flex; flex-direction:column; gap:10px;}
.float-cta a { display:inline-flex; align-items:center; justify-content:center; height:52px; min-width:52px; padding:0 16px; border-radius:999px; box-shadow:var(--shadow); font-weight:950; border:1px solid var(--border); background:#fff;}
.float-cta a.primary { background:var(--primary); border-color:var(--primary); color:#fff;}
/* ===== Colors ===== */
.bg-color-001 { background:#E6D9FF;}
.bg-color-002 { background:#D6E6FF;}
/* ===== Responsive ===== */
@media (max-width:960px) { :root { --container:720px; --header-h:56px; }
.nav { height:var(--header-h); }
.grid { grid-template-columns:repeat(2,1fr); }
.location { grid-template-columns:1fr; }
.thumb-nocolor img { width:44px; }
.chip-table { grid-template-columns:repeat(2,1fr); }
.chip-cell:nth-child(2n) { border-right:0; }
.chip-cell:nth-last-child(-n+2) { border-bottom:0; }
}
@media (max-width:560px) { 
  :root { --radius:16px; }
.container { padding:0 12px; }
.grid { grid-template-columns:1fr; }
.section-head { flex-direction:column; align-items:flex-start; gap:6px; }
.hero-searchbar__inner { padding:8px; }
.hero-search__input { height:40px; }
.hero-searchbar__right .btn:not(.primary) { display:none; }
.card-foot .btn { flex:1; height:40px; padding:0 10px; font-size:13px; }
.float-cta { right:12px; bottom:12px; }
.float-cta a { height:46px; min-width:46px; padding:0 14px; font-size:13px; }
}
@supports (padding:max(0px)) { .float-cta { bottom:calc(12px + env(safe-area-inset-bottom)); right:calc(12px + env(safe-area-inset-right)); }
}
/* ===== Mobile: 카테고리 가로 스크롤 칩 ===== */
.chip-table__scroll { display: contents;
}
@media (max-width:560px) {
.chip-table { display:block; border: 0; background: transparent; padding: 0; }
.chip-table__scroll { display:flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 2px 2px 8px; }
.chip-table__scroll::-webkit-scrollbar { height: 6px; }
.chip-table__scroll::-webkit-scrollbar-thumb { background: rgba(17,24,39,.18); border-radius: 999px; }
.chip-table__scroll::-webkit-scrollbar-track { background: rgba(17,24,39,.06); border-radius: 999px; }
.chip-cell { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: 11px 14px; font-size: 13px; white-space: nowrap; background: #fff; color: var(--muted); scroll-snap-align: start;
border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.chip-cell.is-active { background: var(--primary-weak); color: #4b2ca3; box-shadow: inset 0 0 0 1px var(--primary); border-color: var(--primary); }
}
/* ===== Footer ===== */
.footer { border-top:1px solid var(--border); background:#fff; padding:26px 0;}
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px;}
.footer h4 { margin:0 0 10px; font-size:14px;}
.footer p { margin:0; color:var(--muted); font-size:13px; line-height:1.6;}
.footer a { color:var(--muted);}
.footer a:hover { color:var(--text);}
/* floating CTA */
.float-cta { position:fixed; right:18px; bottom:18px; z-index:99; display:flex; flex-direction:column; gap:10px;}
.float-cta a { display:inline-flex; align-items:center; justify-content:center; height:52px; min-width:52px; padding:0 16px; border-radius:999px; box-shadow:var(--shadow); font-weight:950; border:1px solid var(--border); background:#fff;}
.float-cta a.primary { background:var(--primary); border-color:var(--primary); color:#fff;}
@media (max-width:560px) { .footer-grid { grid-template-columns:1fr; }
}
.slogan .box { position: relative; flex: 0 0 100%; height: 300px; min-height: 300px; padding: 0px; background: var(--bg) center / cover no-repeat;}
.slogan_text { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); bottom: 0; position: absolute; width: 100%; border-radius: 0px 0px 14px 14px; padding: 20px;}
/* ===== Doctor Intro ===== */
#doctor { background:#fff;}
#doctor .section-head .hint { color:#7c5f4b;}
.doctor-intro { position:relative; display:flex; align-items:stretch; gap:32px; border:1px solid rgba(120,96,64,.14); border-radius:22px; padding:34px; box-shadow:0 30px 60px rgba(34,24,64,.10); overflow:hidden;}
.doctor-intro::before { content:""; position:absolute; inset:10px; border-radius:18px; background:linear-gradient(135deg, rgba(187,156,241,.12), rgba(187,156,241,0)); pointer-events:none;}
.doctor-intro__text { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.doctor-intro__role { margin:0 0 6px; font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#e39a6c;}
.doctor-intro__name { margin:0 0 18px; font-size:30px; font-weight:900; color:#1f2937; letter-spacing:-.01em;}
.doctor-intro__history { margin:0 0 18px; padding:0; list-style:none; color:#1f2937; line-height:1.75;}
.doctor-intro__history li { position:relative; margin:4px 0; padding-left:18px;}
.doctor-intro__history li::before { content:"•"; position:absolute; left:0; top:0; color:#bb9cf1; font-weight:900;}
.doctor-intro__note { margin:0; padding-top:12px; border-top:1px solid rgba(187,156,241,.28); color:#4b5563; font-size:14px; line-height:1.75;}
.doctor-intro__photo { flex:0 0 42%; max-width:420px; padding:10px; border-radius:20px; background:#fff; border:1px solid rgba(187,156,241,.28); box-shadow:0 18px 40px rgba(34,24,64,.14);}
.doctor-intro__photo img { width:100%; height:auto; display:block; border-radius:16px; aspect-ratio:4 / 5; object-fit:cover;}
@media (max-width:900px) { .doctor-intro { flex-direction:column-reverse; padding:24px; gap:22px; }
.doctor-intro__photo { width:100%; max-width:none; }
.doctor-intro__name { font-size:24px; }
}
/* ===== Chips Mirror (hero-searchbar 전용) ===== */
/* 기본 숨김 */
.hero-chips-mirror { display:none;}
/* 트리거 도달 시 보이기 */
.hero-searchbar.show-mirror .hero-chips-mirror { display:flex; margin-top:12px; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 6px;}
/* 미러 칩 */
.hero-searchbar .hero-chips-mirror .chip-cell { flex:0 0 auto; height:38px; padding:0 14px; border-radius:999px; border:1px solid #e3e3f3; background:#fff; color:#4b5563; font-weight:800; font-size:13px; white-space:nowrap; cursor:pointer;}
/* 활성 */
.hero-searchbar .hero-chips-mirror .chip-cell.is-active { background:linear-gradient(180deg, rgba(187,156,241,1), rgba(140,120,245,1)); border-color:transparent; color:#fff;}
/* 스크롤바(선택) */
.hero-searchbar .hero-chips-mirror::-webkit-scrollbar { height:6px;}
.hero-searchbar .hero-chips-mirror::-webkit-scrollbar-thumb { background: rgba(17,24,39,.14); border-radius:999px;}
.hero-searchbar .hero-chips-mirror::-webkit-scrollbar-track { background: rgba(17,24,39,.06); border-radius:999px;}
/* 스크롤바 숨김 (모든 브라우저) */
.hero-searchbar .hero-chips-mirror { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width: none;
-ms-overflow-style: none;
}
.hero-searchbar .hero-chips-mirror::-webkit-scrollbar { display:none;
}
/* 드래그 UX */
.hero-searchbar .hero-chips-mirror.is-draggable { cursor: grab; user-select: none;
}
.hero-searchbar .hero-chips-mirror.is-dragging { cursor: grabbing;}
/* ===== Main Popup ===== */
.main-popup { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:18px;}
.main-popup__dim { position:absolute; inset:0; background:rgba(10,14,24,.55); backdrop-filter:blur(6px);}
.main-popup__card { position:relative; width:calc(var(--popup-w) + 170px); height:var(--popup-h); max-width:92vw; max-height:92vh; background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(5,10,20,.35); overflow:hidden; display:flex; flex-direction:column;}
.main-popup__layout { display:flex; flex:1; min-height:0;}
.main-popup__viewport { position:relative; flex:1; overflow:hidden; background:#111827;}
.main-popup__slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease;}
.main-popup__slide.is-active { opacity:1; pointer-events:auto;}
.main-popup__content { width:100%; height:100%;}
.main-popup__content img { width:100%; height:100%; object-fit:cover; display:block;}
.main-popup__desc { position:absolute; left:16px; bottom:64px; margin:0; padding:8px 12px; color:#fff; font-size:13px; background:rgba(0,0,0,.4); border-radius:999px;}
.main-popup__cta { position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border-radius:999px; background:#fff; color:#111827; font-weight:800; font-size:13px;}
.main-popup__tabs { width:170px; display:flex; flex-direction:column; gap:10px; padding:16px; background:linear-gradient(180deg, rgba(12,14,20,.92), rgba(12,14,20,.82)); border-left:1px solid rgba(255,255,255,.08);}
.main-popup__tab { appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); font-weight:800; font-size:12px; text-align:right; cursor:pointer; padding:10px 12px; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); transition:all .2s ease;}
.main-popup__tab:hover { background:rgba(255,255,255,.12);}
.main-popup__tab.is-active { color:#0b1220; background:#fff; border-color:#fff;}
.main-popup__footer { padding:12px 16px; border-top:1px solid #eef0f4; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fafbff;}
.main-popup__footer button { appearance:none; border:0; background:transparent; font-weight:700; color:#4b5563; cursor:pointer;}
.main-popup__later strong { color:#111827;}
@media (max-width:560px) { .main-popup__card { width:92vw; max-height:92vh; }
.main-popup__layout { flex-direction:column; }
.main-popup__viewport { min-height:52vh; }
.main-popup__tabs { width:100%; flex-direction:row; overflow-x:auto; border-left:0; border-top:1px solid rgba(255,255,255,.08); padding:5px; }
.main-popup__tab { text-align:center; white-space:nowrap; }
.main-popup__tab { font-size:10px; padding:7px 8px; }
.main-popup__desc { left:12px; bottom:60px; }
.main-popup__cta { left:12px; bottom:12px; }
.main-popup__footer { flex-direction:row; align-items:center; justify-content:space-between; }
.main-popup__footer button { height:36px; font-size:12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; flex:1; }
.main-popup__footer button + button { margin-left:10px; }
}