/* SC-D01 · 하루 타임라인 — 시간 비례 그리드
 *
 * 카드 리스트가 아니다. 캔버스 노트 1번 — "리스트에서는 빈 시간이 저절로 드러나지 않는다" —
 * 의 답은 이것뿐이다. 3시간 공백은 3시간만큼 길게 그려진다.
 *
 * 방치 구간에서 블록의 폭이 줄고 그 옆에 다른 고객이 들어선다. 겹침 자체가 A-07 이다.
 * 왼쪽 두 줄은 나와 좌석 — 방치에서만 갈라진다.
 *
 * --hour 는 TimelineHelper 의 hour 와 같아야 한다. 한쪽만 바꾸면 눈금과 블록이 어긋난다.
 */

.m { --hour: 64px; --axis: 34px; --ribbon: 16px; }

.m .grid { position: relative; margin: .75rem .7rem 3rem .55rem;
           padding-left: calc(var(--axis) + var(--ribbon) + 6px); }

/* 정시 눈금 — 15분은 위계로 눌러 30분처럼 읽힌다 (코멘트 3번) */
.m .hr { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--grid-2); }
.m .hr.on { border-top-color: var(--grid); }
.m .hr b { position: absolute; left: 0; top: -.5rem; width: var(--axis); text-align: right;
           font-size: .68rem; font-weight: 600; color: var(--ink-3); letter-spacing: -.03em; }
.m .hr.half { border-top-style: dotted; }

/* 나 · 좌석 — 방치에서만 갈라진다 */
.m .ribbon { position: absolute; left: calc(var(--axis) + 4px); width: var(--ribbon); }
.m .ribbon i { position: absolute; top: 0; bottom: 0; width: 6px; }
.m .ribbon i.me { left: 0; }
.m .ribbon i.seat { left: 10px; }
.m .ribbon i.on { background: var(--live); }
.m .ribbon i.on2 { background: #a9cbc4; }
.m .ribbon i.gone { background: repeating-linear-gradient(-45deg, #7f9c96 0 1.5px, transparent 1.5px 5px),
                                linear-gradient(#fff, #fff);
                    box-shadow: inset 0 0 0 1px #d5dedc; }

/* 블록 — 카드가 아니다. 시간이 곧 크기다 */
.m .blk { position: absolute; left: calc(var(--axis) + var(--ribbon) + 8px); right: 0;
          background: var(--set-f); padding: .3rem .5rem; overflow: hidden;
          display: block; color: inherit; text-decoration: none; }
/* 누를 수 있다는 최소한의 표시 */
a.blk::after { content: "›"; position: absolute; right: .35rem; bottom: .1rem;
               font-size: .95rem; color: var(--ink-3); opacity: .5; }
a.blk.live::after { color: #9ed3c9; opacity: .8; }
a.blk:hover { filter: brightness(.985); }
a.blk.over:hover { box-shadow: 0 2px 10px rgba(6,40,35,.35); }
.m .blk > span { position: relative; z-index: 1; }
.m .blk .t { display: block; font-size: .62rem; color: var(--ink-2); letter-spacing: -.02em; }
.m .blk .n { display: block; font-size: .88rem; font-weight: 700; letter-spacing: -.03em;
             line-height: 1.25; margin-top: .05rem; }
.m .blk .s { display: block; font-size: .68rem; color: var(--ink-2); margin-top: .1rem; line-height: 1.35; }
.m .blk .src { font-size: .6rem; font-weight: 500; color: var(--ink-3); margin-left: .2rem; }
.m .blk.short { padding: .18rem .45rem; }
.m .blk.short .n { font-size: .78rem; display: inline; }
.m .blk.short .t { display: inline; margin-right: .3rem; }

/* 지금 — 하루에 채워지는 면은 이것 하나뿐 */
.m .blk.live { background: var(--live); color: #fff; }
.m .blk.live .t { color: #a5cfc7; }
.m .blk.live .s { color: #cfe6e1; }
.m .blk.live .src { color: #8dbdb4; }
/* 방치 구간 — 블록 안에서 시간이 흐르는 곳 */
.m .blk.live .rest { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.22);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 3px, transparent 3px 9px); }
.m .blk.live .rest b { position: absolute; left: .5rem; bottom: .25rem; font-size: .62rem;
                       font-weight: 600; color: #b9dcd5; letter-spacing: -.02em; }

.m .blk.pay { background: var(--wait-pay-f); box-shadow: inset 2px 0 0 var(--wait-pay); }
.m .blk.ask { background: transparent; border: 1px dashed var(--grid-2); }
.m .blk.ask .n { font-weight: 600; color: var(--ink-2); }

/* 방치 위에 들어선 다른 고객 — 겹침이 곧 A-07 이다 */
.m .blk.over { left: auto; width: 57%; right: 0; background: #fff;
               box-shadow: 0 1px 6px rgba(6,40,35,.28); }

.m .care { display: inline-block; font-size: .62rem; font-weight: 700; color: var(--alert);
           margin-left: .2rem; }

/* 빈 시간 — 아무것도 없다. 격자만 남는다 */
.m .open { position: absolute; left: calc(var(--axis) + var(--ribbon) + 6px); right: 0;
           display: flex; align-items: center; justify-content: space-between; gap: .4rem;
           padding: 0 .3rem 0 .5rem; }
.m .open .h { font-size: .7rem; color: var(--ink-3); }
.m .open .h b { color: var(--ink-2); font-weight: 700; }
.m .open button { height: 30px; padding: 0 .6rem; border: 1px solid var(--live); border-radius: 3px;
                  background: none; font: inherit; font-size: .72rem; font-weight: 600;
                  color: var(--live); cursor: pointer; }
.m .open button:hover { background: var(--live); color: #fff; }
.m .open.tall { flex-direction: column; align-items: flex-start; justify-content: center; gap: .4rem; }

/* 지금 */
.m .cursor { position: absolute; left: var(--axis); right: 0; height: 0;
             border-top: 1px solid var(--alert); opacity: .6; z-index: 3; }
.m .cursor b, .m .cursor::after { opacity: 1.6; }
.m .cursor b { position: absolute; left: calc(-1 * var(--axis)); top: -.52rem; width: var(--axis);
               text-align: right; font-size: .66rem; font-weight: 800; color: var(--alert);
               letter-spacing: -.03em; background: var(--sheet); }
.m .cursor::after { content: ""; position: absolute; left: 2px; top: -3.5px; width: 7px; height: 7px;
                    border-radius: 50%; background: var(--alert); }

@media (prefers-reduced-motion: no-preference) {
  .m .cursor::after { animation: mpulse 3s ease-out infinite; }
  @keyframes mpulse { 0% { box-shadow: 0 0 0 0 rgba(168,56,42,.45); }
                      70% { box-shadow: 0 0 0 6px rgba(168,56,42,0); }
                      100% { box-shadow: 0 0 0 0 rgba(168,56,42,0); } }
}