/* Rates & Rules (guide) page only. Shared components (rt, spec, list) are in assets/css/site.css;
   .guide-cmp extends .rt as a modifier (the shared table is never restyled globally). */

/* head: the h1 and the checked-date line, then the comparison table (the next section shares the padding) */
.guide-top{ padding-top:var(--s-8) }
.guide-head p{ margin-top:var(--s-2) }
.guide-rates{ margin-top:var(--s-8) }

/* comparison table: every row is the 12-column page grid, so room names share the column of the section
   headings below and the uses start where the section bodies start. Room blocks are ruled full width;
   rows inside a block are ruled from the use column. */
.rt.guide-cmp tr{ position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); align-items:baseline; padding-block:var(--s-4); border-top:1px solid var(--line) }
.rt.guide-cmp th,.rt.guide-cmp td,.rt.guide-cmp>tbody:last-child>tr:last-child>*{ width:auto; padding:0; border:0 }
.rt.guide-cmp>tbody:last-child>tr:last-child{ border-bottom:1px solid var(--line) }
.rt.guide-cmp thead tr{ padding-block:0 var(--s-2); border-top:0 }
.rt.guide-cmp .guide-cmp__room{ grid-column:1/5 }
.rt.guide-cmp .guide-cmp__use{ grid-column:5/10 }
.rt.guide-cmp .c-min{ grid-column:10/11 }
.rt.guide-cmp .c-amt{ grid-column:11/13 }
.rt.guide-cmp .is-cont{ border-top:0 }
.rt.guide-cmp .is-cont::before{ content:""; position:absolute; top:0; right:0; left:calc((100% - 11 * var(--g)) / 3 + 4 * var(--g)); border-top:1px solid var(--line) }
.rt.guide-cmp tbody .guide-cmp__room{ font-size:var(--t-l); font-weight:var(--w-head); line-height:1.35; letter-spacing:-.005em }
.guide-cmp__room a{ display:inline-flex; align-items:baseline; gap:10px; padding-block:9px; margin-block:-9px; transition:color .2s }
.guide-cmp__room .i-arr{ align-self:center; color:var(--fg-2); transition:transform .35s var(--ease),color .2s }
.guide-cmp__room a:hover{ color:var(--acc) }
.guide-cmp__room a:hover .i-arr{ color:var(--acc); transform:translateX(3px) }
@media (min-width:1024px) and (max-width:1279px){
  .rt.guide-cmp .guide-cmp__use{ grid-column:5/9 }
  .rt.guide-cmp .c-min{ grid-column:9/11 }
}

/* below 1024 the table stacks like the shared rate table: room name over its rows, rate and minimum on the right */
@media (max-width:1023px){
  .rt.guide-cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .rt.guide-cmp tr{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-4); padding-block:14px; border-top:1px solid var(--line) }
  .rt.guide-cmp .guide-cmp__use{ grid-column:1 }
  .rt.guide-cmp .c-amt,.rt.guide-cmp .c-min{ grid-column:2; text-align:right }
  .rt.guide-cmp .ml{ display:inline }
  .rt.guide-cmp .is-first{ padding-top:var(--s-6); border-top:0 }
  .rt.guide-cmp>tbody:first-of-type .is-first{ padding-top:0 }
  .rt.guide-cmp .is-first .guide-cmp__room{ grid-column:1/-1; grid-row:1; margin-bottom:14px; padding-bottom:var(--s-3); border-bottom:1px solid var(--line) }
  .rt.guide-cmp .is-first .guide-cmp__use{ grid-row:2/4 }
  .rt.guide-cmp .is-first .c-amt{ grid-row:2 }
  .rt.guide-cmp .is-first .c-min{ grid-row:3 }
  .rt.guide-cmp .is-cont{ border-top:1px solid var(--line) }
  .rt.guide-cmp .is-cont::before{ content:none }
  .rt.guide-cmp .is-cont .guide-cmp__use{ grid-row:1/3 }
  .rt.guide-cmp .is-cont .c-amt{ grid-row:1 }
  .rt.guide-cmp .is-cont .c-min{ grid-row:2 }
}

/* booking and cancellation: two spec lists on one label column wide enough for the room names
   (그랜드피아노 홀 / 합주실 · 업라이트 합주실); the second under its own label */
.guide-spec{ --k:12em }
html[lang=en] .guide-spec{ --k:19em }
.guide-bk__h{ margin:var(--s-7) 0 var(--s-2) }
@media (max-width:767px){
  .guide-spec>div{ grid-template-columns:minmax(0,1fr); row-gap:var(--s-1) }
}

/* house rules: one group per scope, each a two-column list of sentences (site.css .list--plain) */
.guide-rules{ display:grid; row-gap:var(--s-7) }
.guide-rules h3{ margin-bottom:var(--s-2) }
@media (max-width:767px){ .guide-rules{ row-gap:var(--s-6) } }