/* RHEMA SPACE: 크림 바탕 위 레마 레드. 단계별 카드(날짜→연습실→시간)와 하단 내비게이션. */
:root{
  --ink:#232127;--muted:#6F6A70;--faint:#9B9399;--red:#9B001B;--red-dark:#770016;--red-light:#FFF0F1;--red-line:#E5C4CA;
  --cream:#FAF7F5;--paper:#FFFFFF;--line:#EBE6E4;--soft:#F7F5F4;--hatch:#D9D1D2;
  --ok:#2E8061;--ok-bg:#E9F7F0;--warn:#7B5E27;--warn-bg:#FAF1E6;
  --shadow:0 5px 24px rgba(48,26,24,.055);
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.5}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
h1,h2,h3,p{margin-top:0}
em{font-style:normal}
b{font-weight:750}

.topbar{position:sticky;top:0;z-index:11;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:env(safe-area-inset-top,0px);padding-left:max(18px,env(safe-area-inset-left,0px),calc((100% - 760px)/2));padding-right:max(18px,env(safe-area-inset-right,0px),calc((100% - 760px)/2));min-height:calc(66px + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{display:block;width:44px;height:auto;flex:none}
.brand strong{display:block;font-size:16.5px;letter-spacing:.01em;line-height:1.15}
.brand strong em{color:var(--red)}
.brand small{display:block;color:var(--muted);font-size:10.5px;margin-top:3px}
.profile-chip{border:1px solid var(--line);border-radius:99px;background:var(--paper);padding:8px 12px;font-size:12px;font-weight:700;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.profile-chip::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;background:var(--ok);border-radius:50%;vertical-align:1px}
.notice-bar{background:var(--warn-bg);color:var(--warn);text-align:center;font-size:12px;padding:9px max(16px,env(safe-area-inset-right,0px)) 9px max(16px,env(safe-area-inset-left,0px))}

.main{padding-top:22px;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.content-width{width:100%;max-width:760px;margin:0 auto}
.page-heading{margin:4px 0 20px}
.eyebrow{display:block;color:var(--red);font-size:10px;letter-spacing:.17em;font-weight:800;margin-bottom:7px}
.page-heading h1{margin:0 0 7px;font-size:25px;line-height:1.3;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.page-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}

.member-banner{display:flex;align-items:center;background:var(--red);color:#fff;border-radius:18px;padding:19px 17px;margin-bottom:16px;gap:12px}
.member-banner>div:first-child{margin-right:auto;min-width:0}
.member-label{display:block;font-size:11px;color:#F0BFCA;margin-bottom:2px}
.member-banner strong{font-size:21px;line-height:1.2}
.member-limit{text-align:center;border-left:1px solid #CA7180;padding-left:12px;min-width:62px}
.member-limit strong{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.member-limit small{font-size:10px;color:#F0BFCA}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 15px;margin-bottom:15px;box-shadow:var(--shadow);min-width:0}
.section-heading{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.step-num{background:#FAE6E9;color:var(--red);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;width:33px;height:33px;flex:none}
.section-heading h2{margin:0 0 2px;font-size:16px;letter-spacing:-.03em}
.section-heading p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.5}

.date-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.date-pill{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border-radius:12px;height:60px;color:var(--muted);padding:0}
.date-pill span{font-size:10.5px}
.date-pill strong{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.date-pill.sun span{color:var(--red)}
.date-pill.selected{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 5px 12px #9B001B25}
.date-pill.selected strong,.date-pill.selected span{color:#fff}
.date-detail{margin-top:12px;font-size:11.5px;color:var(--muted)}
.date-detail strong{font-size:12.5px;margin-left:4px;color:var(--ink)}

.room-scroller{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.room-tile{min-height:104px;border:1px solid var(--line);background:var(--paper);border-radius:14px;text-align:left;padding:12px 11px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.room-tile.selected{border:1.5px solid var(--red);background:#FFFAFA;box-shadow:0 3px 12px #9B001B12}
.room-no{font:700 24px Georgia,"Times New Roman",serif;color:var(--red);line-height:1;margin-bottom:6px}
.room-tile strong{font-size:13px}
.room-tile small{font-size:10.5px;color:var(--muted)}
.room-tile.selected small{color:var(--red);font-weight:700}
.room-tile.full small{color:var(--faint)}

.slots-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 3px;height:58px;border-radius:12px;background:var(--paper);border:1px solid var(--line);color:#393239;min-width:0}
.time-slot strong{font-size:13.5px;font-variant-numeric:tabular-nums}
.time-slot small{font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.time-slot.selected{border-color:var(--red);background:var(--red-light);color:var(--red)}
.time-slot.selected small{color:var(--red);font-weight:700}
.time-slot:disabled{background:var(--soft);color:#BDB5B8;opacity:1}
.time-slot.is-block:disabled{background:repeating-linear-gradient(135deg,#EFEAEA 0 2px,transparent 2px 7px),var(--soft)}

.inline-warning{padding:12px 14px;background:var(--warn-bg);border-radius:10px;color:var(--warn);font-size:12px;line-height:1.6;margin:0 0 15px}
.panel .inline-warning{margin:14px 0 0}
.inline-warning.ok{background:var(--ok-bg);color:var(--ok)}

.booking-summary{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:12px;color:var(--muted)}
.summary-row strong{font-size:13.5px;color:var(--ink);text-align:right}
.primary-btn{background:var(--red);color:#fff;border:0;border-radius:12px;padding:14px 18px;font-size:14px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px}
.booking-summary .primary-btn{margin-top:14px}
@media (hover:hover){.primary-btn:hover:not(:disabled){background:var(--red-dark)}}
.primary-btn span{font-size:17px}
.booking-summary>p{margin:11px 0 0;color:var(--muted);text-align:center;font-size:11px;line-height:1.6}
.secondary-btn{border:1px solid #D9D2D1;background:var(--paper);color:var(--red);font-weight:750;font-size:13px;border-radius:11px;padding:12px 13px}
.secondary-btn.full{width:100%}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:12;display:flex;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -7px 25px #3020200A;
  padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px),calc((100% - 560px)/2));padding-right:max(16px,env(safe-area-inset-right,0px),calc((100% - 560px)/2))}
.nav-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;min-height:52px;color:#AEA8AC}
.nav-item span{font-size:20px;line-height:1}
.nav-item small{font-size:10.5px;font-weight:750}
.nav-item[aria-current="page"]{color:var(--red)}

.toast{position:fixed;bottom:calc(86px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#2B2428;color:#fff;padding:12px 17px;border-radius:12px;font-size:13px;line-height:1.5;box-shadow:0 8px 26px #0003;z-index:50}

.reservation-card{display:flex;gap:12px;border-top:1px solid var(--line);padding:16px 0}
.reservation-card:first-child{border-top:0;padding-top:2px}
.reservation-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--red-light);border-radius:12px;color:var(--red);font-size:21px;flex:none}
.reservation-info{flex:1;min-width:0}
.reservation-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.reservation-top>strong{font-size:14px}
.status-tag{border-radius:100px;background:var(--ok-bg);color:var(--ok);white-space:nowrap;padding:4px 8px;font-size:10.5px;font-weight:700}
.status-tag.live{background:var(--red);color:#fff}
.status-tag.neutral{background:#F0EFF0;color:#716C70}
.reservation-room{color:var(--muted);font-size:12px;margin:5px 0}
.reservation-time{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dur{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:5px}
.reservation-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.mini-btn{border:1px solid var(--line);background:var(--paper);padding:9px 12px;border-radius:9px;font-size:12px;font-weight:700;color:#6F676D}
.mini-btn.strong{border-color:var(--red-line);background:var(--red-light);color:var(--red)}
.mini-btn.danger{border-color:var(--red);color:var(--red)}
.tiny-help{font-size:11.5px;color:#8A8086;line-height:1.7;margin:10px 0 0}
.tiny-help.center{text-align:center}
.empty-state{text-align:center;padding:24px 10px 14px}
.empty-state span{display:block;font-size:34px;color:#CBBDC0;margin-bottom:10px}
.empty-state strong{display:block;font-size:14px}
.empty-state p{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 14px}

.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}
.rule-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:19px 14px;text-align:center}
.rule-emoji{font-size:28px;color:var(--red)}
.rule-card h3{font-size:16px;margin:6px 0 8px}
.rule-card p{font-size:12px;color:var(--muted);margin:0}
.rule-card strong{color:var(--red);font-size:31px;display:block;margin:2px 0 9px}
.rule-card div{border-top:1px solid var(--line);padding-top:11px;font-size:12px;line-height:1.8}
.rules-list{padding-left:20px;margin:0;color:#514B50;font-size:13px;line-height:1.85}
.rules-list li{padding-left:4px;margin-bottom:7px}
.install-steps>div+div{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.install-os{color:var(--red);font-weight:800;letter-spacing:.06em;font-size:11px}
.install-steps h3{font-size:15px;margin:7px 0}
.install-steps p{color:#686067;line-height:1.75;font-size:12.5px;margin:0}
.install .primary-btn{margin-top:16px}

.profile-panel{text-align:center;padding:26px 16px}
.profile-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:19px;background:var(--red);color:#fff;font-size:24px;font-weight:800;margin:0 auto 13px}
.profile-panel h2{font-size:20px;margin-bottom:4px}
.profile-panel p{color:var(--red);font-size:12.5px;margin-bottom:3px}
.profile-panel small{color:var(--muted);font-size:11.5px}

.stacked-form{display:flex;flex-direction:column;gap:12px}
.stacked-form label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:700;color:#645C60;min-width:0}
.stacked-form input,.stacked-form select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:9px 11px;color:var(--ink);font-size:16px}
.form-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.form-error{margin:12px 0 0;color:var(--red);font-size:13px;font-weight:600}

.auth-wrap{max-width:440px;margin:0 auto}
.auth-hero{padding:14px 3px 22px;text-align:center}
.auth-logo{display:block;width:min(240px,70%);height:auto;margin:0 auto 18px}
.auth-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--red);margin-bottom:9px}
.auth-hero h1{font-size:28px;line-height:1.4;margin-bottom:9px;letter-spacing:-.05em}
.auth-hero h1 span{color:var(--red)}
.auth-hero>p:last-child{color:var(--muted);font-size:12.5px;margin:0}
.auth-card{border:1px solid var(--line);padding:22px 18px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.auth-top h2{font-size:18px;margin-bottom:4px}
.auth-top p{font-size:12px;color:var(--muted);margin-bottom:16px}
.auth-card .primary-btn{margin-top:4px}
.auth-footer{text-align:center;color:#ACA3A4;font-size:10px;letter-spacing:.12em;margin-top:22px}

.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:16px}
.stat-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:13px 12px;min-width:0}
.stat-card small{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
.stat-card strong{font-size:24px;color:var(--red);font-variant-numeric:tabular-nums}
.stat-card em{font-size:11px;margin-left:3px;color:var(--muted)}
.admin-tabs{display:flex;gap:7px;margin-bottom:15px;overflow-x:auto}
.admin-tabs button{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-size:12.5px;font-weight:700;white-space:nowrap}
.admin-tabs button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.grid-wrap{margin-top:14px;overflow-x:auto}
.grid{display:grid;grid-template-columns:38px repeat(6,minmax(0,1fr));gap:3px;min-width:300px}
.ch{text-align:center;line-height:1.1;padding:2px 0 6px;min-width:0}
.ch b{display:block;font:700 20px Georgia,"Times New Roman",serif;color:var(--red)}
.ch small{font-size:10px;color:var(--muted);white-space:nowrap}
.t{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;padding-top:2px}
.c{height:38px;min-width:0;border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:0 2px;font-size:11px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.c.res{background:var(--red-light);border-color:var(--red-line);color:var(--red)}
.c.res.cont{border-top-color:transparent}
.c.block{background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,transparent 2px 7px),var(--soft);color:#5E565A;font-weight:500}
.c.past{opacity:.4}
.c.insp{outline:2px solid var(--red);outline-offset:1px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:13px;height:13px;border-radius:3px;border:1px solid var(--line);background:var(--paper);display:inline-block}
.legend .l-res{background:var(--red-light);border-color:var(--red-line)}
.legend .l-block{background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,transparent 2px 5px)}
#inspect:not(:empty){margin-top:14px;background:var(--soft);border-radius:12px;padding:12px 14px}
#inspect .reservation-card{padding:0}

.list{display:grid;margin-top:12px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.row>div:first-child{min-width:0;overflow-wrap:anywhere}
.row .meta{color:var(--muted);font-size:12px}
.row .acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:none;max-width:64%}
.student-avatar{height:36px;width:36px;border-radius:11px;background:#F3EAEB;color:var(--red);display:grid;place-items:center;flex:none;font-weight:800}
.student-row{display:flex;gap:11px;padding:14px 0;border-top:1px solid var(--line)}
.student-row:first-child{border-top:0;padding-top:0}
.student-content{min-width:0;flex:1}
.student-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.student-title strong{font-size:14px}
.student-content>small{display:block;font-size:11.5px;color:var(--muted);margin:3px 0 0}
.type-tag{border-radius:99px;padding:2px 8px;font-size:10.5px;font-weight:700;background:#F0EFF0;color:#716C70}
.type-tag.exam{background:var(--red-light);color:var(--red)}
.issued{display:grid;gap:6px;background:var(--red-light);border-radius:12px;padding:14px;margin-top:14px}
.issued .tiny-help{margin:0}
.issued pre{margin:4px 0 0;background:var(--paper);border-radius:9px;padding:11px;font-family:var(--font);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.issued .reservation-actions{margin-top:4px}

.sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(35,20,24,.42);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(100%,480px);background:var(--paper);border-radius:22px 22px 0 0;text-align:center;
  padding:22px max(20px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));box-shadow:0 -10px 40px #0002}
.sheet-icon{display:block;width:64px;height:64px;border-radius:16px;margin:0 auto 12px;box-shadow:0 4px 14px #9B001B22;border:1px solid var(--line)}
.sheet h2{font-size:18px;margin:0 0 4px;letter-spacing:-.03em}
.sheet-sub{font-size:13px;color:var(--muted);margin:0 0 16px}
.sheet .primary-btn{margin-top:4px}
.steps{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5}
.steps .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.steps svg{flex:none;width:22px;height:22px;color:#0A84FF;vertical-align:-5px;margin:0 2px}
.steps b{font-weight:750}
.sheet-note{font-size:11.5px;color:var(--muted);margin:12px 0 0;line-height:1.6}
.text-btn{background:none;border:0;color:var(--muted);font-size:13px;margin-top:12px;padding:8px;text-decoration:underline;text-underline-offset:3px}
.install-cta{display:flex;align-items:center;gap:12px;background:var(--red-light);border:1px solid var(--red-line);border-radius:14px;padding:12px 13px;margin-bottom:15px;text-align:left;width:100%}
.install-cta img{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);flex:none}
.install-cta span{flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--ink)}
.install-cta strong{display:block;color:var(--red);font-size:13.5px}
.install-cta em{color:var(--red);font-weight:800;font-size:18px}
@media (min-width:601px){
  .main{padding-top:30px}
  .page-heading h1{font-size:28px}
  .panel{padding:21px}
  .date-pill{height:64px}
  .slots-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:600px){
  .room-scroller{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  .brand small{display:none}
  .member-banner{gap:6px;padding:16px 13px}
  .member-limit{min-width:52px;padding-left:8px}
  .slots-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){.time-slot,.room-tile,.date-pill{transition:background-color .12s,border-color .12s}}