@charset "UTF-8";
/* ============================================================================
   체험 부스 예약 — 기존 체험 사이트(healthzone)의 변수·글씨체·여백·버튼 스타일을 그대로 가져왔다
   ============================================================================ */
:root{
	--brand-green:#17503a;
	--text-strong:#141414;
	--text-soft:#767676;
	--text-placeholder:#bbb;
	--border-light:#e6e6e6;
	--notice-bg:#f5f8f6;
	--icon-bg:#eff4f0;
	--btn-disabled:#c7cfcb;
	--page-bg:#ffffff;
	--danger:#e11d48;
}

/* ---------------------------------------------------------------- Reset (base.css) */
* {-webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(255,255,255,0); box-sizing:border-box;}
html {font-size:16px;}
html,body {-webkit-font-smoothing:antialiased; box-sizing:border-box; font-family:'Pretendard', "맑은고딕","Malgun Gothic","Apple SD Gothic Neo","돋움", dotum, Arial, sans-serif; color:#141414;
	font-size:16px; font-weight:400; line-height:1.3; word-break:keep-all; width:100%; height:100%; background:#fff; overflow:hidden; overscroll-behavior:none;}
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,pre {margin:0; padding:0; line-height:1.4;}
input,textarea,button,select {transition:0.2s;}
input::placeholder {color:#767676 !important; opacity:1;}
p {margin:0 0 10px;}
p:last-child {margin-bottom:0;}
body, input, textarea {font-family:'Pretendard',"맑은고딕","Malgun Gothic","Apple SD Gothic Neo","돋움", dotum, Arial, sans-serif; font-size:16px; font-weight:400; color:#2b2b2b;}
img,input,button,label,select {vertical-align:middle; outline:0; font-weight:400;}
input:focus, button:focus, select:focus, textarea:focus {outline:1px solid rgba(40,151,255,0.8) !important; outline-offset:2px !important;}
button {color:#2b2b2b; cursor:pointer; font-weight:400; border:none; background:none; font-family:inherit;}
a {text-decoration:none; color:#2b2b2b; cursor:pointer; font-weight:400;}
a:hover {text-decoration:none; color:#2b2b2b;}
[hidden] {display:none !important;}

/* ---------------------------------------------------------------- Layout */
#main {height:100%;}
html.app-h, html.app-h body, html.app-h #main {height:var(--app-h);}
.wrap {min-width:280px; width:100%; height:100%; padding:0; margin:0 auto; position:relative; background:#fff; display:flex; flex-direction:column;}
@media (min-width: 1024px) { .wrap {max-width:720px; margin:0 auto;} }
.k_section {position:relative; width:100%; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
.k_section:focus-visible {outline:0; box-shadow:inset 0 0 5px rgba(40,151,255,0.8);}

/* ---------------------------------------------------------------- 상단 고정 (eyebrow) */
.top-bar{position:relative; width:100%; background:#fff; flex:0 0 auto; z-index:10;}
.top-bar .eyebrow{display:flex; align-items:center; gap:8px; padding:52px 30px 14px;}
.top-bar .eyebrow .diamond{font-weight:700; font-size:11px; letter-spacing:1.75px; color:var(--brand-green);}
.top-bar .eyebrow .label{font-weight:700; font-size:12.5px; letter-spacing:1.75px; color:var(--brand-green);}

.step-row{display:flex; align-items:center; gap:6.5px; padding:14px 30px 0;}
.step-row .num{font-weight:700; font-size:16px; color:var(--brand-green);}
.step-row .label{font-weight:500; font-size:16px; color:var(--text-soft);}

/* ---------------------------------------------------------------- 헤딩 / 서브텍스트 */
.page-heading{padding:10px 30px 0; font-weight:800; font-size:30px; line-height:1.32; letter-spacing:-1.7px; color:var(--text-strong); word-break:keep-all;}
.page-subtext{padding:20px 30px 0; font-weight:400; font-size:15px; line-height:1.6; color:var(--text-soft);}
.page-subtext b{font-weight:700; color:var(--text-strong);}
.page-heading.center, .page-subtext.center{text-align:center;}

/* ---------------------------------------------------------------- 하단 CTA */
.bottom-bar{position:relative; width:100%; padding:15px 30px 22px; background:#fff; border-top:1px solid #f0f0f0; flex:0 0 auto; z-index:10; padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));}
.cta-btn{display:flex; align-items:center; justify-content:center; width:100%; padding:20px 0; border-radius:17px; border:none; background:var(--btn-disabled);
	font-family:'Pretendard', sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.19px; color:#fff; cursor:not-allowed; transition:background .15s ease;}
.cta-btn.is-enabled{background:var(--brand-green); cursor:pointer;}
.cta-btn.is-enabled:active{opacity:.85;}
.cta-btn.is-loading{opacity:.7; pointer-events:none;}

/* ---------------------------------------------------------------- 폼 */
.form-section{display:flex; flex-direction:column; gap:24px; padding:44px 30px 0;}
.form-section.tight{padding-top:24px;}
.form-section .field{display:flex; flex-direction:column; gap:8px; width:100%;}
.form-section .field-label{font-weight:700; font-size:15px; color:var(--text-strong);}
.form-section .field-input{width:100%; background:#fff; border:1px solid var(--border-light); border-radius:15px; padding:18px 17px 16px;
	font-family:'Pretendard', sans-serif; font-weight:500; font-size:18px; color:var(--text-strong); outline:none; height:auto; margin:0; box-shadow:none; -webkit-appearance:none; appearance:none;}
.form-section .field-input::placeholder{color:var(--text-placeholder) !important;}
.form-section .field-input:focus{border-color:var(--brand-green) !important; outline:none !important;}
.field-label-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.field-hint{font-weight:500; font-size:13px; color:var(--text-soft);}
.field-2col{display:flex; gap:11px;}
.field-2col .field{flex:1; min-width:0;}
.field-help{font-weight:400; font-size:13.5px; line-height:1.55; color:var(--text-soft);}

/* 시간 슬롯 (성별 버튼과 같은 모양) */
.slot-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:11px; width:100%;}
@media (min-width: 480px) { .slot-grid{grid-template-columns:repeat(4, 1fr);} }
.slot-btn{height:56px; background:#fff; border:1px solid var(--border-light); border-radius:15px; font-family:'Pretendard', sans-serif; font-weight:700; font-size:17px; color:var(--text-soft);
	cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;}
.slot-btn .sub{font-weight:500; font-size:11px; letter-spacing:0; color:var(--text-placeholder);}
.slot-btn.is-selected{background:var(--notice-bg); border-color:var(--brand-green); color:var(--brand-green);}
.slot-btn.is-selected .sub{color:var(--brand-green);}
.slot-btn:disabled{background:#f6f6f6; color:#c4c4c4; cursor:not-allowed; text-decoration:line-through;}
.slot-btn:disabled .sub{text-decoration:none;}
.slot-empty{padding:18px 17px; border:1px dashed var(--border-light); border-radius:15px; font-weight:500; font-size:14.5px; line-height:1.55; color:var(--text-soft); text-align:center; white-space:pre-line;}

/* ---------------------------------------------------------------- 안내 카드 / 동의 */
.notice-card{margin:44px 30px 0; background:var(--notice-bg); border-radius:17px; padding:22px 22px 20px;}
.notice-card .notice-title{font-weight:700; font-size:14px; color:var(--brand-green); margin-bottom:13px;}
.notice-list{display:flex; flex-direction:column; gap:12px;}
.notice-item{display:flex; align-items:flex-start; gap:11px;}
.notice-item .bullet{font-weight:600; font-size:13px; line-height:19px; color:var(--brand-green);}
.notice-item .texts{display:flex; flex-direction:column; gap:2px;}
.notice-item .item-title{font-weight:600; font-size:15px; line-height:22px; color:var(--text-strong);}
.notice-item .item-sub{font-weight:500; font-size:14px; line-height:20px; color:var(--text-soft);}
.notice-card.type-warn{margin:24px 30px 0; background:#f5f4f1; border-radius:16px; padding:17px 22px 18px;}
.notice-card.type-warn .notice-text{font-weight:700; font-size:14.5px; line-height:1.5; color:#5a5a52;}

.consent-row{display:flex; align-items:center; gap:13px; margin:36px 30px 20px; cursor:pointer; user-select:none;}
.consent-row .consent-box{flex-shrink:0; width:26px; height:26px; background:#fff; border:1px solid var(--border-light); border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease;}
.consent-row .consent-box svg{width:15px; height:15px; opacity:0; transform:scale(0.6); transition:opacity .15s ease, transform .15s ease;}
.consent-row.is-checked .consent-box{background:var(--brand-green); border-color:var(--brand-green);}
.consent-row.is-checked .consent-box svg{opacity:1; transform:scale(1);}
.consent-row .consent-label{font-weight:600; font-size:16px; color:var(--text-strong);}

.admin-link-row{padding:8px 30px 32px; text-align:center;}
.admin-link{font-weight:500; font-size:13px; color:var(--text-placeholder); text-decoration:underline; text-underline-offset:3px;}
.admin-link.danger{color:var(--danger);}

/* ---------------------------------------------------------------- 완료 화면 */
.result-icon{display:flex; align-items:center; justify-content:center; width:104px; height:104px; border-radius:52px; background:var(--icon-bg); margin:33px auto 0;}
.result-icon svg{width:38px; height:38px;}
.summary-card{margin:32px 30px 0; border:1px solid var(--border-light); border-radius:17px; padding:22px 22px 18px;}
.summary-time{font-weight:800; font-size:44px; letter-spacing:-2px; line-height:1.1; color:var(--brand-green); text-align:center; padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid #f0f0f0;}
.summary-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0;}
.summary-row .k{font-weight:500; font-size:14px; color:var(--text-soft);}
.summary-row .v{font-weight:700; font-size:16px; color:var(--text-strong);}

/* ---------------------------------------------------------------- 관리자 */
.admin-tabs{display:flex; gap:8px; padding:20px 30px 0;}
.admin-tab{flex:1; height:46px; border-radius:13px; border:1px solid var(--border-light); background:#fff; font-weight:700; font-size:15px; color:var(--text-soft);}
.admin-tab.is-active{background:var(--brand-green); border-color:var(--brand-green); color:#fff;}
.admin-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:26px 30px 0;}
.admin-title{font-weight:800; font-size:20px; letter-spacing:-0.5px; color:var(--text-strong);}
.admin-title .count{display:inline-block; min-width:26px; padding:2px 8px; margin-left:4px; border-radius:999px; background:var(--notice-bg); color:var(--brand-green); font-size:13px; font-weight:800; text-align:center; vertical-align:middle;}
.admin-sub{margin-top:4px; font-weight:500; font-size:12.5px; color:var(--text-soft);}
.mini-btn{flex-shrink:0; height:38px; padding:0 14px; border-radius:11px; border:1px solid var(--border-light); background:#fff; font-weight:700; font-size:13.5px; color:var(--brand-green);}
.mini-btn.danger{color:var(--danger);}
#paneList .slot-empty{margin:18px 30px 0;}
.res-list{display:flex; flex-direction:column; gap:10px; padding:18px 30px 0;}
.res-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border-light); border-radius:15px; background:#fff;}
.res-item.is-past{opacity:.55;}
.res-item .time{flex-shrink:0; width:62px; font-weight:800; font-size:19px; letter-spacing:-0.5px; color:var(--brand-green);}
.res-item .info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.res-item .name{font-weight:700; font-size:16px; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.res-item .phone{font-weight:500; font-size:14px; color:var(--text-soft);}
.res-item .phone a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.res-item .actions{flex-shrink:0; display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
.res-item .sms{display:inline-block; padding:2px 7px; border-radius:6px; font-size:11px; font-weight:700; background:#f1f4f8; color:#59667b;}
.res-item .sms.sent{background:#ECFDF5; color:#047857;}
.res-item .sms.failed{background:#FFF1F2; color:#E11D48;}
.res-item .resend{height:26px; padding:0 9px; border-radius:8px; border:1px solid var(--border-light); background:#fff; font-weight:700; font-size:11.5px; color:var(--brand-green);}
.sms-note{margin:16px 30px 0; text-align:center; font-weight:600; font-size:14px; color:var(--brand-green);}
.sms-note.failed{color:#b45309;}
.res-item .del{flex-shrink:0; height:34px; padding:0 12px; border-radius:10px; background:#fff1f2; color:var(--danger); font-weight:700; font-size:13px;}

/* ---------------------------------------------------------------- 모달 (healthzone 과 동일) */
.confirm-overlay{display:none; position:fixed; inset:0; background:rgba(20,20,20,0.5); z-index:1000; align-items:center; justify-content:center; padding:24px;}
.confirm-overlay.is-open{display:flex;}
.confirm-card{width:100%; max-width:320px; background:#fff; border-radius:20px; padding:28px 24px 22px; box-shadow:0 10px 30px rgba(0,0,0,0.18);}
.confirm-message{margin:0 0 22px; font-family:'Pretendard', sans-serif; font-weight:600; font-size:15px; line-height:1.55; color:var(--text-strong); white-space:pre-line;}
.confirm-actions{display:flex; gap:10px;}
.confirm-btn{flex:1; padding:14px 0; border-radius:13px; border:none; font-family:'Pretendard', sans-serif; font-weight:700; font-size:15px; cursor:pointer; transition:opacity .15s ease;}
.confirm-btn:active{opacity:0.75;}
.confirm-btn-secondary{background:var(--notice-bg); color:var(--text-soft);}
.confirm-btn-primary{background:var(--brand-green); color:#fff;}