/*
 * Pn.IT 디자인 시스템 v2 — 웜 그레이 바탕 + 차콜 + 번트 오렌지.
 * 색/모서리/글꼴은 아래 토큰에서만 바꾼다. 그라데이션·글로우·격자 배경 같은 장식은 쓰지 않는다.
 */
:root{
    --bg:#f4f3ef;--surface:#fff;--surface-2:#f8f7f4;--line:#e3e1da;--line-strong:#cfccc3;
    --text:#1d1f23;--muted:#686b70;--primary:#c8461b;--primary-hover:#a83a15;--primary-soft:#fbeee8;
    --accent:#f4a27d;--dark:#23262b;--dark-2:#2e3238;--dark-line:rgba(255,255,255,.08);--dark-muted:#a3a6ab;
    --ok:#2f7d4f;--ok-soft:#e8f4ec;--warn:#9a6700;--warn-soft:#fdf3d7;--danger:#b42318;--danger-soft:#fdeceb;
    --radius:8px;--radius-lg:10px;
    --mono:ui-monospace,SFMono-Regular,Consolas,"D2Coding",monospace;
    --shadow:0 1px 2px rgba(29,31,35,.05);
}
/*
 * 야간모드: 사이트 곳곳에 고정 색상(#fff 등)이 하드코딩돼 있어서 화면 전체를 반전(invert)+
 * 색상환 180도 회전시킨다. 사진/이미지/차트는 다시 반전해 원래 색으로 보이게 한다.
 * 원래 어두운 영역(.pn-dark, 관리자 사이드 메뉴)은 한 번 더 반전해 다크모드에서도 어둡게 유지한다.
 */
:root[data-theme="dark"]{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"] img,:root[data-theme="dark"] video,:root[data-theme="dark"] picture,:root[data-theme="dark"] iframe,:root[data-theme="dark"] embed,:root[data-theme="dark"] object,:root[data-theme="dark"] canvas{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"] .pn-dark,:root[data-theme="dark"] .side-nav--admin{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="dark"] .pn-dark img,:root[data-theme="dark"] .side-nav--admin img{filter:none}

*{box-sizing:border-box}
body{margin:0;font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
h1,h2,h3{letter-spacing:-.02em}
::selection{background:#f8d5c5;color:var(--text)}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
svg[hidden]{display:none}

/* ---------- 로고 ---------- */
.pn-logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--text);line-height:1}
.pn-logo-mark{width:30px;height:30px;display:block;flex:none}
.pn-logo-word i{font-style:normal;color:var(--primary)}
.pn-dark .pn-logo{color:#fff}
.pn-dark .pn-logo-word i{color:var(--accent)}

/* ---------- 상단 헤더 ---------- */
.topbar{height:64px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:40px;height:100%}
.brand{display:inline-flex;align-items:center}
.nav nav{display:flex;gap:28px;font-weight:600;font-size:15px;height:100%}
.nav nav a{display:flex;align-items:center;height:100%;color:#4a4d52;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.nav nav a:hover{color:var(--text)}
.nav nav a.active{color:var(--text);border-bottom-color:var(--primary)}
.nav-actions{margin-left:auto;display:flex;gap:6px;align-items:center}

/* ---------- 버튼 ---------- */
.btn{height:40px;padding:0 16px;border-radius:var(--radius);border:1px solid transparent;font:inherit;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-hover)}
.btn.ghost{border-color:var(--line-strong);background:var(--surface)}
.btn.ghost:hover{background:var(--surface-2);border-color:#b9b5aa}
.btn.dark{background:var(--dark);color:#fff}
.btn.dark:hover{background:#000}
.btn.large{height:48px;padding:0 22px;font-size:15px}
.btn.wide{width:100%}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.flash{margin-top:14px;padding:12px 16px;border-radius:var(--radius);font-weight:600;border:1px solid transparent}
.flash.success{background:var(--ok-soft);color:var(--ok);border-color:#c7e3d1}
.flash.error{background:var(--danger-soft);color:var(--danger);border-color:#f6cdc9}

/* ---------- 배지 ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:13px;font-weight:700}
.tag{display:inline-flex;padding:3px 8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);color:#4a4d52;font-family:var(--mono);font-size:12px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px}

/* ---------- 레거시 히어로(약관 등 다른 화면이 쓰는 경우 대비) ---------- */
.hero{padding:80px 0 64px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:50px;line-height:1.15;letter-spacing:-.035em}.hero h1 em{font-style:normal;color:var(--primary)}
.hero p{font-size:18px;color:var(--muted);line-height:1.75}.hero-actions{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.mini-grid div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.mini-grid small{display:block;color:var(--muted)}.mini-grid strong{display:block;font-size:26px;margin-top:6px}

/* ---------- 카드류 ---------- */
.hero-card,.feature,.price-card,.auth-card,.panel,.sidebar,.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.hero-card{padding:24px}

/* ---------- 페이지 상단 (공지사항 등) ---------- */
.section{padding:64px 0}
.page-hero{padding:48px 0 40px;background:var(--surface);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:36px;line-height:1.2;margin:8px 0 8px}
.page-hero p{font-size:16px;color:var(--muted);line-height:1.7;margin:0}
.page-hero .pill{color:var(--primary)}

.section-title{margin-bottom:32px}
.section-title h2{font-size:30px;margin:0;line-height:1.3}
.section-title p{color:var(--muted);margin:8px 0 0;font-size:16px}

.feature-grid,.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature,.price-card{padding:24px}
.feature p,.price-card p{color:var(--muted);line-height:1.7}
.price{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font-size:15px;color:var(--muted);font-weight:600}
.price-card ul{list-style:none;padding:0}.price-card li{padding:10px 0;border-bottom:1px dashed var(--line)}

/* ---------- 로그인/회원가입 ---------- */
.center-page{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:56px 20px}
.auth-card{width:min(460px,100%);padding:36px 34px}
.auth-card h1{font-size:24px;margin:0 0 6px}
.auth-card label,.panel label{display:block;font-weight:700;font-size:14px;margin:16px 0}
.auth-card input,.auth-card select,.panel input,.panel select,.panel textarea{display:block;width:100%;margin-top:8px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius);font:inherit;font-weight:500;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
.auth-card input:focus,.auth-card select:focus,.panel input:focus,.panel select:focus,.panel textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(200,70,27,.14)}
.auth-card .btn.wide{margin-top:8px;height:46px}
.auth-brand{display:flex;justify-content:center;margin-bottom:24px}
.auth-brand .pn-logo{font-size:22px}.auth-brand .pn-logo-mark{width:34px;height:34px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 12px;color:var(--muted);font-size:13px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.alert{margin:14px 0;padding:12px 14px;border-radius:var(--radius);line-height:1.6;font-size:14px}
.alert.error{background:var(--danger-soft);color:var(--danger)}
.alert.info{background:var(--surface-2);border:1px solid var(--line);color:#4a4d52}

/* ---------- 콘솔/관리자 공통 요소 ---------- */
.dashboard{padding:32px 0 20px}
.dash-layout{display:grid;grid-template-columns:232px 1fr;gap:24px}
.sidebar{padding:10px;height:max-content}
.side-title{font-size:12px;color:var(--muted);font-weight:700;padding:10px 12px}
.sidebar a{display:block;padding:9px 12px;border-radius:6px;font-weight:600;font-size:14px;color:#3d4045}
.sidebar a:hover{background:var(--surface-2)}
.page-head span{font-size:13px;font-weight:700;color:var(--primary)}
.page-head h1{font-size:24px;margin:4px 0 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.stats .stat{border:0;border-radius:0;border-right:1px solid var(--line)}
.stats .stat:last-child{border-right:0}
.stat{padding:20px 22px}
.stat small{display:block;color:var(--muted);font-weight:600;font-size:13px}
.stat strong{display:block;font-size:30px;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1}
.panel{margin-top:16px;padding:22px 24px}
.panel > h2:first-child,.panel > h3:first-child{margin-top:0}
.panel h2{font-size:18px}.panel h3{font-size:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.inline-form{display:flex;gap:8px;align-items:center}.inline-form select{margin:0;padding:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-size:12px;font-weight:700;background:var(--surface-2);border-bottom-color:var(--line-strong)}
tbody tr:hover td{background:#fbfaf8}
.empty{text-align:center;color:var(--muted);padding:30px}

/*
 * 마이페이지/관리자 화면은 상단 헤더 아래를 앱 화면처럼 쓴다 — 왼쪽 메뉴가 화면 높이 전체를
 * 차지하고 오른쪽 본문이 넓게 펼쳐진다. body.app-shell은 header.php가 console/*, admin/*
 * 화면에만 붙인다. 각 화면의 마크업(.dashboard > .dash-layout > aside + .content)은 그대로 둔다.
 */
body.app-shell{background:#f6f5f2}
body.app-shell .topbar .wrap{width:100%;padding:0 24px}
body.app-shell .dashboard{padding:0}
body.app-shell .dash-layout{width:100%;max-width:none;margin:0;grid-template-columns:248px minmax(0,1fr);gap:0;min-height:calc(100vh - 64px)}
body.app-shell .dash-layout > .content{padding:28px 36px 56px;max-width:1360px;width:100%}
body.app-shell .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
body.app-shell .page-head h1{font-size:24px}
body.app-shell .page-head p{margin:6px 0 0}
body.app-shell .footer{margin-top:0;padding:14px 0;border-top:1px solid var(--line)}
body.app-shell .footer .footer-grid{display:none}
body.app-shell .footer .wrap{width:100%;padding:0 24px}
body.app-shell .footer-bottom{margin-top:0;padding-top:0;border-top:0}
body.app-shell .flash{margin:16px 24px 0;width:auto}

/* 사이드 메뉴 (layouts/sidebar_nav.php) */
.side-nav{padding:10px}
body.app-shell .side-nav{position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;border:0;border-right:1px solid var(--line);border-radius:0;padding:18px 12px 24px;background:var(--surface)}
.side-nav .side-title{padding:4px 12px 12px;font-size:12px;letter-spacing:.02em}
.side-nav .side-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;font-weight:600;font-size:14px;color:#3d4045;transition:background .12s,color .12s}
.side-nav .side-link:hover{background:var(--surface-2);color:var(--text)}
.side-nav .side-link.active{background:var(--primary-soft);color:var(--primary-hover);font-weight:700}
.side-nav svg{width:17px;height:17px;flex:none;opacity:.7}
.side-nav .side-link > span:first-of-type,.side-group summary > span:first-of-type{flex:1;min-width:0}
.side-group{margin-top:2px}
.side-group summary{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;font-weight:700;font-size:14px;color:var(--text);cursor:pointer;list-style:none;user-select:none}
.side-group summary::-webkit-details-marker{display:none}
.side-group summary:hover{background:var(--surface-2)}
.side-group .side-caret{width:14px;height:14px;opacity:.45;transition:transform .2s}
.side-group[open] > summary .side-caret{transform:rotate(180deg)}
.side-group-items{margin:2px 0 6px 21px;padding-left:9px;border-left:1px solid var(--line)}
.side-group-items .side-link{padding:7px 10px;font-size:13.5px;font-weight:500;color:var(--muted)}
.side-group-items .side-link.active{font-weight:700}
.side-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;line-height:1}
.side-group[open] > summary .side-badge{display:none}

/* 관리자 메뉴는 어두운 차콜로 — 마이페이지와 한눈에 구분되게 */
.side-nav--admin{background:var(--dark) !important;border-right-color:var(--dark) !important;color:#e6e4df}
.side-nav--admin .side-title{color:#8d9096}
.side-nav--admin .side-link,.side-nav--admin .side-group summary{color:#d9d7d1}
.side-nav--admin .side-group-items{border-left-color:rgba(255,255,255,.1)}
.side-nav--admin .side-group-items .side-link{color:#a3a6ab}
.side-nav--admin .side-link:hover,.side-nav--admin .side-group summary:hover{background:rgba(255,255,255,.06);color:#fff}
.side-nav--admin .side-link.active{background:rgba(244,162,125,.14);color:var(--accent)}

/* ---------- 푸터 ---------- */
.footer{margin-top:72px;padding:48px 0 24px;background:var(--dark);color:#d4d2cc}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer-brand p{color:var(--dark-muted);line-height:1.7;margin:14px 0 0;max-width:320px;font-size:14px}
.footer strong{display:block;color:#fff;font-size:14px;font-weight:700}
.footer a{display:block;color:var(--dark-muted);margin-top:11px;font-size:14px}
.footer a:hover{color:#fff}
.footer-brand a{margin-top:0}
.footer-bottom{margin-top:40px;padding-top:18px;border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dark-muted)}
.footer-biz{display:flex;flex-wrap:wrap;gap:4px 16px;line-height:1.7}
body.app-shell .footer{background:var(--surface);color:var(--muted)}
body.app-shell .footer-bottom{color:var(--muted)}

@media(max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
    .page-hero h1{font-size:30px}
    body.app-shell .dash-layout{grid-template-columns:1fr;min-height:0}
    body.app-shell .side-nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
    body.app-shell .dash-layout > .content{padding:22px 18px 40px}
    .stats{grid-template-columns:1fr 1fr}
    .stats .stat:nth-child(2n){border-right:0}
    .stats .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.alert.success {margin: 20px 0;padding: 16px;border-radius: 8px;background: #eaf9f0;color: #177245;line-height: 1.7;}
.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.order-status.warning {
    background: #fff6d8;
    color: #b77900;
}

.order-status.success {
    background: #e8f8ee;
    color: #198754;
}

.order-status.info {
    background: #eaf1f7;
    color: #2f5f8a;
}

.order-status.active {
    background: #e7f8f2;
    color: #087f5b;
}

.order-status.danger {
    background: #ffe9e9;
    color: #d92d20;
}

.order-status.purple {
    background: #f3e8ff;
    color: #7b2cbf;
}

.order-status.gray {
    background: #efede8;
    color: #686b70;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-form select {
    width: auto;
    min-width: 122px;
    margin: 0;
    padding: 11px 36px 11px 13px;
    flex-shrink: 0;
}

.inline-form .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/*
 * 좁은 화면(특히 주문관리처럼 뱃지+select+버튼이 한 줄에 몰리는 카드)에서 select/button이
 * flex 기본 축소 동작으로 눌려서 텍스트가 안 보이는 흰 네모로 찌그러지는 문제가 있었다.
 * 일정 너비 아래에서는 select/button을 각각 한 줄 전체로 펼쳐서 확실히 보이게 한다.
 */
@media (max-width: 480px) {
    .inline-form {
        width: 100%;
    }

    .inline-form select,
    .inline-form .btn {
        flex: 1 1 auto;
        width: auto;
    }
}
.ticket-content {
    min-width: 260px;
    max-width: 420px;
    white-space: normal;
    line-height: 1.65;
    color: #3d4045;
    word-break: break-word;
}
.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.recent-orders-table {
    width: 100%;
    table-layout: fixed;
}

.recent-orders-table th:nth-child(1),
.recent-orders-table td:nth-child(1) {
    width: 85px;
}

.recent-orders-table th:nth-child(2),
.recent-orders-table td:nth-child(2) {
    width: 70px;
}

.recent-orders-table th:nth-child(3),
.recent-orders-table td:nth-child(3) {
    width: auto;
}

.recent-orders-table th:nth-child(4),
.recent-orders-table td:nth-child(4) {
    width: 90px;
}

.recent-orders-table th:nth-child(5),
.recent-orders-table td:nth-child(5) {
    width: 150px;
}

.recent-orders-table td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-orders-table .order-status {
    min-width: 0;
    white-space: normal;
    line-height: 1.4;
    text-align: center;
}

.ticket-content {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.65;
    color: #3d4045;
    max-width: 0;
}
.chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.chart-head h2 {
    font-size: 18px;
    margin: 0;
}
.chart-sub {
    color: var(--muted);
    font-size: 13px;
}
.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.chart-wrap {
    position: relative;
    margin-top: 14px;
}
.chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--dark);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transform: translate(-50%, -115%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    z-index: 5;
}
.revenue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.revenue-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.revenue-tabs .btn {
    font-size: 14px;
    height: 40px;
    padding: 0 14px;
}
.scope-picker-label {
    display: block;
    font-weight: 800;
    margin: 14px 0 0;
}
.scope-picker {
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px 14px;
    background: #fff;
}
.scope-group {
    padding: 8px 0;
}
.scope-group:not(:last-child) {
    border-bottom: 1px dashed var(--line);
}
.scope-group strong {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-weight: 800;
    margin: 4px 0 2px;
}
.scope-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
}
.scope-item:hover {
    background: var(--primary-soft);
}
.scope-picker input[type="checkbox"] {
    all: revert;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.ticket-admin-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ticket-admin-item {
    overflow: hidden;
    border: 1px solid #e3e1da;
    border-radius: 10px;
    background: #ffffff;
}

.ticket-admin-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px;
    cursor: pointer;
    list-style: none;
}

.ticket-admin-summary::-webkit-details-marker {
    display: none;
}

.ticket-admin-summary:hover {
    background: #faf8f5;
}

.ticket-summary-main {
    min-width: 0;
    flex: 1;
}

.ticket-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticket-title-row strong {
    font-size: 17px;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 9px;
    color: #686b70;
    font-size: 13px;
}

.ticket-preview {
    max-width: 850px;
    margin: 10px 0 0;
    overflow: hidden;
    color: #4f5257;
    text-overflow: ellipsis;
    white-space: normal;
}

.ticket-open-text {
    flex-shrink: 0;
    color: #c8461b;
    font-size: 13px;
    font-weight: 800;
}

.ticket-admin-item[open] .ticket-open-text {
    font-size: 0;
}

.ticket-admin-item[open] .ticket-open-text::after {
    content: "접기";
    font-size: 13px;
}

.ticket-admin-detail {
    padding: 22px;
    border-top: 1px solid #e3e1da;
    background: #fbfaf8;
}

.ticket-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.ticket-info-grid > div {
    padding: 16px;
    border: 1px solid #e3e1da;
    border-radius: 8px;
    background: #ffffff;
}

.ticket-label {
    display: block;
    margin-bottom: 7px;
    color: #686b70;
    font-size: 12px;
    font-weight: 700;
}

.ticket-message-block {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #e3e1da;
    border-radius: 10px;
    background: #ffffff;
}

.ticket-message-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 17px;
    border-bottom: 1px solid #e3e1da;
    background: #f8f7f4;
}

.ticket-message-head span {
    color: #686b70;
    font-size: 13px;
}

.ticket-message-content {
    padding: 20px;
    color: #3d4045;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-message {
    border-color: #f3cdbd;
}

.admin-message .ticket-message-head {
    color: #2f5f8a;
    background: #fcf2ec;
}

.ticket-reply-form {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #e0ddd5;
    border-radius: 10px;
    background: #ffffff;
}

.ticket-reply-form textarea {
    resize: vertical;
}

.ticket-action-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-top: 14px;
}

.ticket-action-row label {
    width: 230px;
    margin: 0;
}

.ticket-action-row select {
    margin-top: 8px;
}

@media (max-width: 850px) {
    .ticket-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ticket-admin-summary {
        align-items: flex-start;
    }

    .ticket-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ticket-action-row label {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .ticket-info-grid {
        grid-template-columns: 1fr;
    }

    .ticket-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .ticket-preview {
        white-space: normal;
    }
}
.ticket-admin-item,
.ticket-admin-detail,
.ticket-message-block,
.ticket-message-content,
.ticket-preview,
.ticket-summary-main {
    min-width: 0;
    max-width: 100%;
}

.ticket-message-content,
.ticket-preview {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    max-width: 100%;
}

.ticket-admin-detail {
    overflow: hidden;
}

.ticket-admin-summary {
    min-width: 0;
}

.ticket-summary-main {
    overflow: hidden;
}

.ticket-preview {
    display: block;
    overflow: hidden;
    line-height: 1.6;
}

.ticket-reply-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ticket-message-content{
    width:100%;
    display:block;
    box-sizing:border-box;

    white-space:pre-wrap;
    word-break:break-all;
    overflow-wrap:anywhere;

    overflow:hidden;
}
.product-description {
    display: block;
    margin-top: 5px;
    color: #686b70;
}

.product-action-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.btn.danger-outline {
    border-color: #f2b8b5;
    color: #d92d20;
    background: #fff;
}

.btn.danger-outline:hover {
    background: #fff1f0;
}

.product-modal[hidden] {
    display: none;
}

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.product-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(29, 31, 35, .55);
}

.product-modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(29, 31, 35, .25);
}

.product-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.product-modal-head h2 {
    margin: 0;
}

.product-modal-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #efede8;
    font-size: 24px;
    cursor: pointer;
}

.product-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.product-admin-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.product-admin-table th,
.product-admin-table td {
    padding: 18px 14px;
    vertical-align: middle;
    overflow: hidden;
}

.product-admin-table th:nth-child(1),
.product-admin-table td:nth-child(1) {
    width: 28%;
}

.product-admin-table th:nth-child(2),
.product-admin-table td:nth-child(2) {
    width: 9%;
}

/*
 * 스크롤 등장 애니메이션(메인/요금제 페이지). 요소가 뷰포트에 들어오면 JS(footer.php의
 * IntersectionObserver)가 .is-visible을 붙여준다. 처음부터 opacity:0으로 숨기지 않고
 * <html>에 .js-reveal이 붙어있을 때만(=JS가 정상 동작 중일 때만) 숨기게 해서, 자바스크립트가
 * 꺼져있거나 실패해도 콘텐츠가 그냥 평소처럼 보이게 만든다(애니메이션만 없어질 뿐 안 보이는
 * 콘텐츠가 생기지 않음). .js-reveal 클래스는 header.php의 초기 스크립트에서 즉시 붙인다.
 */
/*
 * home.css의 .feature/.lineup-card 등 컴포넌트별 transition 선언과 클래스
 * 개수(specificity)가 같은데 나중에 로드되는 파일이라 그쪽이 이겨서 opacity
 * 트랜지션이 통째로 사라지는 문제가 있었다. !important로 항상 이기게 고정.
 *
 * OS/브라우저의 "애니메이션 줄이기(prefers-reduced-motion)" 설정과 무관하게
 * 항상 애니메이션을 보여주기로 결정함(요청에 따라 접근성 감쇠 규칙을 넣지 않음).
 */
.reveal {
    transition: opacity .7s ease, transform .7s ease !important;
    will-change: opacity, transform;
}
.js-reveal .reveal { opacity: 0; }
.js-reveal .reveal-left { transform: translateX(-60px); }
.js-reveal .reveal-right { transform: translateX(60px); }
.js-reveal .reveal-up { transform: translateY(28px); }
.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

.product-admin-table th:nth-child(3),
.product-admin-table td:nth-child(3) {
    width: 13%;
}

.product-admin-table th:nth-child(4),
.product-admin-table td:nth-child(4) {
    width: 23%;
}

.product-admin-table th:nth-child(5),
.product-admin-table td:nth-child(5) {
    width: 11%;
}

.product-admin-table th:nth-child(6),
.product-admin-table td:nth-child(6) {
    width: 16%;
}

.product-name-cell {
    min-width: 0;
}

.product-name {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.product-description {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #686b70;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.product-code-cell,
.product-price-cell,
.product-status-cell {
    white-space: nowrap;
}

.product-spec-cell {
    white-space: normal;
    line-height: 1.6;
}

.product-action-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}

.product-action-buttons .btn,
.product-inline-form {
    width: 100%;
    margin: 0;
}

.product-inline-form .btn {
    width: 100%;
}
@media(max-width:900px){.hero-grid,.dash-layout{grid-template-columns:1fr}.feature-grid,.pricing-grid,.stats{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.feature-grid,.pricing-grid,.stats,.mini-grid,.footer-grid,.form-grid{grid-template-columns:1fr}.hero h1,.page-hero h1{font-size:38px}}
.nav-actions .btn{white-space:nowrap}
.dash-layout>.content{min-width:0}
.ip-pool-table{table-layout:fixed;width:100%;min-width:760px;font-size:13px}
.ip-pool-table td,.ip-pool-table th{white-space:normal;overflow-wrap:break-word;word-break:normal;padding:10px 12px;vertical-align:middle;line-height:1.5}
.ip-pool-table td:nth-child(1),.ip-pool-table th:nth-child(1),.ip-pool-table td:nth-child(2),.ip-pool-table th:nth-child(2){white-space:nowrap}
.ip-pool-status-form{display:flex;flex-direction:column;gap:6px}
.ip-pool-status-form select,.ip-pool-status-form input,.ip-pool-status-form button{width:100%;box-sizing:border-box}
.pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:20px}
.pagination .btn{height:38px;padding:0 14px;min-width:38px}
.pagination-ellipsis{padding:0 4px;color:var(--muted)}
#pwa-install-button[hidden],.pwa-ios-tip[hidden]{display:none!important}
.pwa-ios-tip{position:fixed;top:80px;right:16px;left:16px;max-width:320px;margin-left:auto;z-index:50;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 16px 40px rgba(29, 31, 35,.16)}
.pwa-ios-tip p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--text)}
.pwa-ios-tip button{height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
@media(max-width:620px){
    .brand img{height:28px!important;margin-right:8px!important}
}

/*
 * 모바일 헤더 — 예전엔 nav 링크(공지사항/요금안내/만족도)는 아예 안 보이게 숨기고
 * nav-actions는 가로 스크롤 박스에 욱여넣었었다(둘 다 실제로 스크롤해야 보이거나
 * 아예 안 보이는 문제로 이어짐). 햄버거 버튼 하나로 nav+nav-actions 전체를 세로
 * 드롭다운 패널에 펼쳐서 스크롤 없이 전부 보이게 한다. 데스크톱에서는
 * .mobile-menu{display:contents}라 이 wrapper가 레이아웃에 전혀 영향을 주지 않고
 * 기존과 완전히 동일하게 보인다.
 */
.mobile-menu-toggle{display:none;height:40px;width:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.mobile-menu{display:contents}
@media(max-width:900px){
    .nav{position:relative}
    .mobile-menu-toggle{display:inline-flex}
    .mobile-menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 16px 30px rgba(29, 31, 35,.14);
        padding:16px 20px 20px;
        max-height:calc(100vh - 74px);
        overflow-y:auto;
        z-index:30;
    }
    .mobile-menu.open{display:flex}
    .mobile-menu nav{display:flex;flex-direction:column;gap:2px}
    .mobile-menu nav a{padding:12px 4px;border-bottom:1px solid var(--line);font-weight:700}
    .nav-actions{margin-left:0;flex-direction:column;align-items:stretch;gap:8px}
    .nav-actions .btn{width:100%;justify-content:center}
}


/* ---------- 좁은 화면 보정 (위 레거시 미디어쿼리보다 뒤에 와야 함) ---------- */
@media(max-width:620px){
    .stats{grid-template-columns:1fr}
    .stats .stat{border-right:0;border-bottom:1px solid var(--line)}
    .stats .stat:last-child{border-bottom:0}
}