/* ============================================================
 * 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; }
.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;
}
.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-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; }

/* 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-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; }
}