/* ============================================================
 * skin/board/hive_care_user/style.css
 * 시술 게시판 스킨 — 공통 스타일 (list / view / write)
 * hive_event_user 의 hev-* 클래스를 base 로 + 시술 특화 보강 (.hpr-*)
 * Module: hive_care / Version: 1.0.0
 * ============================================================ */

/* hive_event_user 의 모든 hev-* 클래스를 그대로 사용 가능하게 link 한 상태에서
   시술 특화 .hpr-* 클래스를 보강. event 스킨 미로드 시에도 동작하도록 핵심만 inline. */

/* ===== 페이지 상단 히어로 ===== */
.hpr-hero {
    position:relative;
    padding:48px 16px 28px;
    text-align:center;
    border-bottom:1px solid rgba(0,0,0,.08);
    margin-bottom:18px;
}
/* 컴팩트 모드 — 텍스트 없이 카트 아이콘 + 검색바만 (사용자 페이지 기본) */
.hpr-hero.hpr-hero-compact {
    padding:20px 16px 16px;
    border-bottom:0;
    margin-bottom:14px;
}
.hpr-hero.hpr-hero-compact > h1 + form,
.hpr-hero.hpr-hero-compact > p.ko + form { margin-top:14px; }
.hpr-hero h1 {
    font-family:'Jost','Noto Sans KR',sans-serif;
    font-size:clamp(32px,5vw,52px); font-weight:300;
    letter-spacing:.02em; margin:0 0 8px; color:#222;
    word-break:keep-all; overflow-wrap:break-word;
}
.hpr-hero .ko { font-size:13.5px; color:#888; margin:0 0 22px; letter-spacing:.04em; word-break:keep-all; overflow-wrap:break-word; }
.hpr-hero .search-big {
    display:inline-flex; align-items:center;
    max-width:560px; width:100%;
    border:0; border-radius:999px;
    overflow:hidden; background:rgba(0,0,0,.045);
    transition:box-shadow .15s, background .15s;
}
.hpr-hero .search-big:focus-within {
    background:rgba(0,0,0,.06);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--hev-main, #9b8056) 14%, transparent);
}
.hpr-hero .search-big input {
    flex:1; height:46px; border:0; outline:none;
    padding:0 18px; font-size:14px; background:transparent;
    font-family:inherit; color:#222;
}
.hpr-hero .search-big input::placeholder { color:#999; }
.hpr-hero .search-big button {
    width:46px; height:46px; border:0; background:transparent;
    cursor:pointer; color:var(--hev-main, #9b8056);
    display:flex; align-items:center; justify-content:center;
}

/* 우상단 카트 아이콘 */
.hpr-cart-icon {
    position:absolute; top:16px; right:16px;
    width:44px; height:44px;
    border:0; background:rgba(0,0,0,.05); border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#444; text-decoration:none;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .15s, color .15s;
}
.hpr-cart-icon:hover {
    color:var(--hev-main, #9b8056);
    background:rgba(0,0,0,.09);
}
.hpr-cart-icon .badge {
    position:absolute; top:-4px; right:-4px;
    min-width:20px; height:20px; padding:0 5px;
    background:var(--hev-main, #9b8056); color:#fff;
    border-radius:999px; font-size:11px; font-weight:700;
    display:none; align-items:center; justify-content:center;
    border:2px solid #fff;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.hpr-cart-icon.has-items .badge { display:inline-flex; }
.hpr-cart-icon.bounce { animation:hprCartBounce .55s cubic-bezier(.34,1.56,.64,1); }
.hpr-cart-icon.bounce .badge { animation:hprBadgePop .55s ease; }
@keyframes hprCartBounce {
    0% { transform:scale(1); } 30% { transform:scale(1.22); }
    55% { transform:scale(.93); } 100% { transform:scale(1); }
}
@keyframes hprBadgePop {
    0% { transform:scale(1); background:var(--hev-main, #9b8056); }
    35% { transform:scale(1.6); background:var(--hev-main, #9b8056); filter:brightness(.7); }
    100% { transform:scale(1); background:var(--hev-main, #9b8056); }
}
@media (max-width:600px){
    .hpr-cart-icon { top:12px; right:12px; width:40px; height:40px; }
}

/* ===== 카테고리 — 한 줄 + 더보기 + 드래그 ===== */
.hpr-cats-wrap { position:relative; display:flex; width:100%; justify-content:flex-end; }
.hpr-cats-wrap .hev-cats {
    flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    padding-right:48px;
    cursor:grab; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    user-select:none; -webkit-user-select:none;
    width:100%; max-width:100%; justify-content:flex-end; box-sizing:border-box;
}
.hpr-cats-top-right .hev-cats { justify-content:flex-end; }
.hpr-cats-top-left,
.hpr-cats-top-left .hev-cats { justify-content:flex-start; }
.hpr-cats-wrap .hev-cats::-webkit-scrollbar { display:none; }
.hpr-cats-wrap .hev-cats.is-dragging { cursor:grabbing; scroll-behavior:auto; }
.hpr-cats-wrap .hev-cats.is-dragging a { pointer-events:none; }
.hpr-cat-arrow {
    position:absolute; top:0; bottom:0; z-index:6;
    display:flex; align-items:center; width:54px; padding:0 6px;
    border:0; color:inherit; cursor:pointer;
}
.hpr-cat-arrow svg { width:20px; height:20px; }
.hpr-cat-arrow.prev {
    left:0; justify-content:flex-start;
    background:linear-gradient(to right,var(--hev-bg,#fff) 45%,transparent);
}
.hpr-cat-arrow.next {
    right:0; justify-content:flex-end;
    background:linear-gradient(to left,var(--hev-bg,#fff) 45%,transparent);
}
.hpr-cat-arrow[hidden] { display:none; }
.hpr-cat-more {
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    width:42px; height:42px;
    background:rgba(0,0,0,.05); border:0; border-radius:10px;
    color:#666; cursor:pointer; font-size:18px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    z-index:1; transition:background .15s, color .15s;
}
.hpr-cat-more:hover { color:var(--hev-main, #9b8056); background:rgba(0,0,0,.09); }

/* 카테고리 더보기 모달 */
.hpr-cat-pop { position:fixed; inset:0; z-index:80; display:none; }
.hpr-cat-pop.open { display:block; }
.hpr-cat-pop-bg {
    position:absolute; inset:0; background:rgba(0,0,0,.45);
    animation:hevFadeIn .18s;
}
.hpr-cat-pop-frame {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:92%; max-width:520px;
    background:#fff; border-radius:14px; padding:24px;
    box-shadow:0 4px 16px rgba(0,0,0,.10);
    animation:hevScaleIn .2s;
}
.hpr-cat-pop-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.08);
}
.hpr-cat-pop-head h3 { font-size:15px; font-weight:700; margin:0; color:#222; }
.hpr-cat-pop-close { background:none; border:0; font-size:22px; line-height:1; color:#999; cursor:pointer; padding:0 4px; }
.hpr-cat-pop-list { display:flex; flex-wrap:wrap; gap:8px; }
.hpr-cat-pop-list a {
    padding:9px 16px; border:0; border-radius:999px;
    background:rgba(0,0,0,.05);
    color:#555; text-decoration:none; font-size:13.5px;
    transition:background .15s, color .15s; word-break:keep-all; overflow-wrap:break-word;
}
.hpr-cat-pop-list a:hover { background:rgba(0,0,0,.09); color:var(--hev-main, #9b8056); }
.hpr-cat-pop-list a.active {
    background:var(--hev-main, #9b8056); color:#fff; font-weight:600;
}
.hpr-cat-pop-list a .cnt { color:#aaa; font-size:11.5px; margin-left:4px; }
.hpr-cat-pop-list a.active .cnt { color:rgba(255,255,255,.7); }

/* 행 + 체크박스 */
.hev-row { position:relative; align-items:flex-start; }
.hev-row-check {
    flex-shrink:0; width:20px; height:20px;
    accent-color:var(--hev-main, #9b8056);
    cursor:pointer; margin-top:3px;
}
.hev-row.is-selected { background:rgba(0,0,0,.03); }
.hev-row.no-thumb .hev-row-thumb { display:none; }
.hev-row-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }

/* 목록/썸네일 보기 전환 */
.hpr-view-switch{display:inline-flex;border:1px solid rgba(0,0,0,.12);border-radius:9px;overflow:hidden;background:#fff}
.hev-toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.hpr-popular-keywords{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:12px;font-size:12.5px}.hpr-popular-keywords>span{color:#888;margin-right:2px}.hpr-popular-keywords a{display:inline-flex;align-items:center;min-height:30px;padding:4px 11px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#fff;color:#555;text-decoration:none}.hpr-popular-keywords a:hover,.hpr-popular-keywords a:focus-visible{border-color:var(--hev-main,#9b8056);color:var(--hev-main,#9b8056);outline:none}
.hpr-view-switch button{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px;border:0;border-right:1px solid rgba(0,0,0,.1);background:#fff;color:#777;font:inherit;font-size:12.5px;cursor:pointer}
.hpr-view-switch button:last-child{border-right:0}.hpr-view-switch button.active{background:var(--hev-main,#9b8056);color:#fff}.hpr-view-switch button:focus-visible{outline:2px solid #222;outline-offset:2px}
.hev-admin-btn.hpr-admin-secondary{background:#fff!important;color:#555!important;border:1px solid rgba(0,0,0,.14)!important}
.hpr-sort-chips{display:inline-flex;gap:7px}.hpr-sort-chips button{height:38px;padding:0 15px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;color:#666;font:inherit;font-size:12.5px;cursor:pointer}.hpr-sort-chips button.active{background:#222;color:#fff;border-color:#222;font-weight:700}.hpr-sort-chips button:focus-visible{outline:2px solid var(--hev-main,#9b8056);outline-offset:2px}
.hev-body.hpr-category-left{grid-template-columns:230px minmax(0,1fr) 320px;align-items:start}.hpr-category-side{min-width:0}.hpr-category-side h2{font-size:20px;margin:0;padding:0 0 14px;border-bottom:1px solid #222}.hpr-category-side nav{display:grid}.hpr-side-cat{display:flex;justify-content:space-between;gap:8px;padding:13px 6px;border-bottom:1px solid rgba(0,0,0,.08);color:#555;text-decoration:none;font-size:14px}.hpr-side-cat.active{font-weight:800;color:#222}.hpr-side-cat:hover{color:var(--hev-main,#9b8056)}.hpr-cats-left-source{display:none}
.hev-wrap.hpr-view-grid .hev-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hev-wrap.hpr-view-grid .hev-row{display:flex;flex-direction:column;padding:0!important;border:1px solid rgba(0,0,0,.1);border-radius:14px;overflow:hidden;background:#fff;gap:0!important}
.hev-wrap.hpr-view-grid .hev-row-check{position:absolute;top:12px;left:12px;z-index:3;margin:0;background:#fff;border-radius:4px}
.hev-wrap.hpr-view-grid .hev-row-thumb{display:block!important;width:100%!important;height:auto!important;aspect-ratio:4/3;border-radius:0!important;background-size:cover;background-position:center}
.hev-wrap.hpr-view-grid .hev-row.no-thumb .hev-row-thumb{display:none!important}
.hev-wrap.hpr-view-grid .hev-row-body{width:100%;box-sizing:border-box;padding:18px 18px 8px}
.hev-wrap.hpr-view-grid .hev-row-right{width:100%;box-sizing:border-box;padding:8px 18px 18px;align-items:flex-start;text-align:left}
.hev-wrap.hpr-view-grid .hev-row-actions{width:100%;display:flex}.hev-wrap.hpr-view-grid .hev-row-actions>*{flex:1;text-align:center}
.hev-wrap.hpr-view-grid .hev-row-arrow{display:none!important}

/* PC 행 우측 화살표는 모바일 전용 */
.hev-row-arrow {
    display:none; align-items:center; color:#bbb; font-size:20px;
    padding-left:8px; align-self:center;
}

/* 이펙트 */
.hpr-fly-dot {
    position:fixed; width:36px; height:36px;
    background:var(--hev-main, #9b8056); border-radius:50%;
    z-index:200; pointer-events:none;
    box-shadow:0 4px 16px rgba(0,0,0,.10);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px; font-weight:800;
    transform:translate(-50%, -50%);
    will-change:transform, opacity;
}
.hpr-fly-dot::before { content:'✓'; }

.hev-btn-add.added-flash { animation:hprBtnFlash .5s ease; }
@keyframes hprBtnFlash {
    0% { box-shadow:0 0 0 0 rgba(155,128,86,.55); }
    100% { box-shadow:0 0 0 14px rgba(155,128,86,0); }
}

.hev-row.just-added { animation:hprRowPulse .9s ease; }
@keyframes hprRowPulse {
    0% { background:rgba(155,128,86,.18); }
    100% { background:transparent; }
}

/* 사이드 카드 보조 CTA */
.hpr-cart-secondary {
    display:block; width:100%; box-sizing:border-box;
    padding:12px; margin-top:8px;
    border:0;
    background:rgba(0,0,0,.07); color:var(--hev-main, #9b8056);
    border-radius:12px;
    text-align:center; text-decoration:none;
    font-size:13.5px; font-weight:600;
    font-family:inherit; line-height:1.2;
    transition:background .15s;
    cursor:pointer;
}
.hpr-cart-secondary:hover { background:rgba(0,0,0,.12); }

/* ===== 모바일 하단 픽스드 바 (펼침/접힘) ===== */
.hpr-mfoot {
    position:fixed; left:0; right:0; bottom:0;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
    z-index:60;
    display:none;
}
.hpr-mfoot-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 16px; border-bottom:1px solid rgba(0,0,0,.06);
    background:#fff; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.hpr-mfoot-head .label { font-size:13px; color:#666; display:inline-flex; align-items:center; gap:8px; }
.hpr-mfoot-head .label b {
    color:var(--hev-main, #9b8056); font-weight:700; font-size:14px;
    background:color-mix(in srgb, var(--hev-main, #9b8056) 12%, transparent); border-radius:999px;
    padding:1px 9px; min-width:22px; text-align:center;
}
.hpr-mfoot-head .toggle {
    color:#888; font-size:13px; display:inline-flex; gap:4px; align-items:center;
}
.hpr-mfoot-head .toggle .arrow { transition:transform .25s; display:inline-block; }
.hpr-mfoot.open .hpr-mfoot-head .toggle .arrow { transform:rotate(180deg); }

.hpr-mfoot-list {
    max-height:0; overflow-y:auto; transition:max-height .28s ease;
    background:#fbfaf7;
}
.hpr-mfoot.open .hpr-mfoot-list { max-height:min(45vh, 320px); }
.hpr-mfoot-item {
    display:flex; align-items:center; gap:10px;
    padding:11px 16px; border-bottom:1px solid rgba(0,0,0,.05);
    font-size:13px;
}
.hpr-mfoot-item:last-child { border-bottom:0; }
.hpr-mfoot-item .nm { flex:1; min-width:0; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hpr-mfoot-item .pr { font-weight:600; color:#222; white-space:nowrap; }
.hpr-mfoot-item .rm {
    color:#bbb; font-size:18px; line-height:1; padding:0 4px; cursor:pointer; flex-shrink:0;
}
.hpr-mfoot-item .rm:hover { color:#dc2626; }
.hpr-mfoot-empty {
    padding:24px 16px; text-align:center; color:#aaa; font-size:13px;
}

.hpr-mfoot-foot {
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background:#fff; border-top:1px solid rgba(0,0,0,.06);
}
.hpr-mfoot-total {
    display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px;
}
.hpr-mfoot-total .lbl { font-size:13px; color:#666; }
.hpr-mfoot-total .lbl small { color:#aaa; font-size:11.5px; margin-left:3px; }
.hpr-mfoot-total .amt { font-size:20px; font-weight:800; color:#222; }
.hpr-mfoot-pay { font-size:11.5px; color:#999; margin:0 0 10px; }
.hpr-mfoot-btns { display:flex; gap:8px; }
.hpr-mfoot-btns .ghost,
.hpr-mfoot-btns .primary {
    flex:1; height:46px; border-radius:12px; border:0;
    font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
    transition:filter .15s, transform .15s, background .15s;
}
.hpr-mfoot-btns .ghost { background:rgba(0,0,0,.07); color:#555; }
.hpr-mfoot-btns .ghost:hover { background:rgba(0,0,0,.12); color:var(--hev-main, #9b8056); }
.hpr-mfoot-btns .primary { background:var(--hev-main, #9b8056); color:#fff; }
.hpr-mfoot-btns .primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.hpr-mfoot-btns .primary:disabled, .hpr-mfoot-btns .ghost:disabled {
    background:rgba(0,0,0,.08); color:#bbb; cursor:not-allowed; filter:none; transform:none;
}

/* 모바일 분기 */
@media (max-width:900px){
    .hpr-cats-wrap{justify-content:flex-start}.hpr-cats-wrap .hev-cats{justify-content:flex-start;width:100%}
    .hev-toolbar-left{width:100%;justify-content:space-between}.hpr-view-switch button span:last-child{display:none}.hpr-view-switch button{width:38px;padding:0;justify-content:center}.hpr-popular-keywords{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.hpr-popular-keywords>*{flex:0 0 auto}
    .hev-wrap.hpr-view-grid .hev-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .hev-wrap.hpr-view-grid .hev-row{align-items:stretch!important}
    .hev-wrap.hpr-view-grid .hev-row-body{padding:12px 12px 5px}.hev-wrap.hpr-view-grid .hev-row-right{padding:5px 12px 12px;align-items:flex-start!important}
    .hev-wrap.hpr-view-grid .hev-row-note{-webkit-line-clamp:2}.hev-wrap.hpr-view-grid .hev-row-actions{display:flex!important}
    .hev-body.hpr-category-left{grid-template-columns:1fr}.hpr-category-side{display:none}.hpr-cats-left-source{display:flex}.hpr-sort-chips{max-width:100%;overflow-x:auto}.hpr-sort-chips button{flex:0 0 auto;padding:0 12px}.hev-toolbar{align-items:flex-start!important}.hev-toolbar-right{flex-wrap:wrap!important}
    .hpr-mfoot { display:block; }
    body.has-hpr-mfoot { padding-bottom:160px; }
    .hev-cart-side { display:none; }
    .hev-body { grid-template-columns:1fr; }

    .hev-row {
        padding:14px !important; gap:10px !important;
        flex-wrap:nowrap !important; align-items:center !important;
    }
    .hev-row-thumb {
        width:64px !important; height:64px !important;
        border-radius:8px !important; flex-shrink:0 !important;
    }
    .hev-row-body {
        flex:1 1 auto !important; flex-basis:auto !important; min-width:0 !important;
    }
    .hev-row-title { font-size:14.5px; }
    .hev-row-note {
        font-size:12.5px; color:#777; margin:0;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .hev-row-right {
        flex:0 0 auto !important; width:auto !important; min-width:auto !important;
        display:flex !important; flex-direction:column !important;
        align-items:flex-end !important; justify-content:center !important;
        text-align:right !important;
        gap:2px !important;
        padding-top:0 !important; margin-top:0 !important; border-top:0 !important;
    }
    .hev-row-price { font-size:14px; font-weight:700; margin:0; line-height:1.2; }
    .hev-row-price-old { font-size:11.5px; }
    .hev-row-meta { display:none; }
    .hev-row-actions { display:none; }
    .hev-row-arrow { display:flex !important; }
    .hev-cat { padding:11px 13px; font-size:13px; }
    .hev-paging { margin-bottom:8px; }
}
@media (max-width:480px){.hev-wrap.hpr-view-grid .hev-list{grid-template-columns:1fr 1fr}.hev-wrap.hpr-view-grid .hev-row-actions{flex-direction:column}}