/* 자원 레인 아키타입 (모바일 재구성) — SC-M05 좌석·장비 …
 *
 * 캔버스는 "모바일에서 격자 뼈대를 숨기고 점유 카드를 시간순으로 세운다"고 적었지만
 * 그렇게 하면 SC-M03(디자이너 축)과 같은 화면이 된다 — 축을 돌린 의미가 사라진다.
 * 이 화면이 존재하는 이유는 하나다: **디자이너는 풀렸는데 좌석은 계속 잡혀 있다** (A-05 · A-07).
 * 그건 자원을 나란히 놓아야만 보인다. 그래서 격자를 접지 않고 자원 축으로 편다(M04).
 *
 * 막대는 밀도만 보여준다. 예약 하나하나는 SC-M03 에서 보므로 여기서 되풀이하지 않는다 —
 * 대신 이 축에서만 드러나는 것을 카드로 세운다.
 *
 * 클래스: .lane / .who / .rail / .occ / .free / .ruler / .rkey / .claim
 * (.res .legend 는 다른 아키타입이 이미 쓰고, .blk .grid .open .date 는 전역이다)
 */

.m--lane .head { background: #fff; }
.m--lane .hd-row { display: flex; align-items: center; justify-content: space-between;
                   padding: .55rem .9rem .45rem; }
.m--lane .ttl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.m--lane .mini { min-height: 30px; display: inline-flex; align-items: center; gap: .3rem;
                 padding: 0 .6rem; border: 1px solid var(--grid); font-size: .72rem;
                 color: var(--ink-2); text-decoration: none; }
.m--lane .stat { display: flex; flex-wrap: wrap; gap: .1rem .85rem; padding: 0 .9rem .55rem;
                 font-size: .72rem; color: var(--ink-3); }
.m--lane .stat b { font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.m--lane .stat .warn, .m--lane .stat .warn b { color: var(--wait-pay); }
.m--lane .stat .bad, .m--lane .stat .bad b { color: var(--alert); }

.m--lane .plan { background: var(--sheet); padding-bottom: .5rem; }

/* 이 화면의 결론 — 맨 위에 문장으로 둔다 */
.m--lane .claim { margin: .7rem .9rem 0; padding: .7rem .8rem; background: #fff;
                  border-left: 3px solid var(--alert); }
.m--lane .claim b.hd { display: block; font-size: .98rem; font-weight: 700; color: var(--alert);
                       letter-spacing: -.025em; line-height: 1.35; }
.m--lane .claim > span { display: block; font-size: .73rem; color: var(--ink-2); line-height: 1.6;
                       margin-top: .3rem; }
.m--lane .claim > span b { color: var(--ink); font-weight: 700; }
.m--lane .claim.soft { border-left-color: var(--wait-pay); }
.m--lane .claim.soft b.hd { color: var(--ink); font-size: .9rem; }

/* 자원 축 — 한 줄이 한 자원 */
.m--lane .board { margin: .9rem .9rem 0; padding: .7rem .75rem .6rem; background: #fff;
                  border: 1px solid var(--grid); }
.m--lane .board h2 { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .5rem;
                     font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.m--lane .board h2 i { font-style: normal; font-weight: 500; letter-spacing: 0; }

.m--lane .lane { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr);
                 align-items: center; gap: .5rem; margin-bottom: .3rem; }
.m--lane .who { font-size: .72rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.m--lane .who em { display: block; font-style: normal; font-size: .64rem; font-weight: 500;
                   color: var(--ink-3); }
.m--lane .who.dev { color: var(--ink-2); }

/* 30분 = 한 칸 · 10:00–15:00 = 10칸 */
.m--lane .rail { position: relative; display: grid; grid-template-columns: repeat(10, 1fr);
                 height: 26px; background:
                   repeating-linear-gradient(to right, var(--grid-2) 0 1px, transparent 1px 10%); }
.m--lane .occ { grid-column: var(--f) / span var(--s); align-self: stretch;
                background: var(--set); border-left: 2px solid #fff;
                display: flex; align-items: center; padding-left: .3rem; overflow: hidden;
                font-size: .62rem; font-weight: 700; color: #fff; white-space: nowrap; }
.m--lane .occ.live { background: var(--live); }
.m--lane .occ.dev  { background: #c8cdcb; color: var(--ink-2); }
.m--lane .occ.clash { background: repeating-linear-gradient(45deg,
                        var(--alert) 0 4px, #a8352a 4px 8px); }

/* 좌석은 잡혀 있는데 사람이 없는 구간 — 점유 막대 위에 덧그린다 */
.m--lane .free { position: absolute; top: 0; bottom: 0; z-index: 2;
                 left: calc((var(--f) - 1) * 10%); width: calc(var(--s) * 10%);
                 background: repeating-linear-gradient(45deg,
                   rgba(255,255,255,.85) 0 3px, transparent 3px 7px);
                 border-left: 1px dashed #fff; border-right: 1px dashed #fff; }

.m--lane .ruler { display: grid; grid-template-columns: repeat(10, 1fr);
                  margin-left: 4.6rem; margin-top: .2rem;
                  font-size: .58rem; color: var(--ink-3); }
.m--lane .ruler span { grid-column: span 2; }

.m--lane .rkey { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .55rem;
                 padding-top: .5rem; border-top: 1px solid var(--grid-2);
                 font-size: .63rem; color: var(--ink-3); }
.m--lane .rkey i { display: inline-block; width: 12px; height: 8px; margin-right: .25rem;
                   vertical-align: middle; background: var(--set); }
.m--lane .rkey i.live { background: var(--live); }
.m--lane .rkey i.hatch { background: repeating-linear-gradient(45deg,
                          var(--live) 0 2px, #fff 2px 5px); }
.m--lane .rkey i.clash { background: var(--alert); }

.m--lane .cutnote { margin: .9rem .9rem 0; padding: .55rem .7rem; background: #f4f2ee;
                    font-size: .7rem; line-height: 1.6; color: var(--ink-2); }
.m--lane .cutnote b { color: var(--ink); font-weight: 700; }
.m--lane .cutnote.soft { background: none; border: 1px dashed var(--grid); color: var(--ink-3); }
.m--lane .cutnote a { color: var(--live); font-weight: 700; }
.m--lane .pad { height: 2.5rem; }
.m--lane .kx { opacity: .72; }