/* TimeShare 전용 — 디자인 시스템 토큰만 쓴다. 화면 하나에 기능 하나, 위아래 스크롤 없이 한 화면에 들어오게 */
[hidden] { display: none !important; }
.brand img { height: 28px; width: auto; }
.split-side .brand img { height: 32px; }
.product { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
/* 요일 글자색: 일요일 빨강, 토요일 파랑 (디자인 시스템에 파랑이 없어 여기서 정한다) */
:root { --sun: var(--danger-text); --sat: oklch(0.74 0.13 255); }
:root[data-theme="light"] { --sat: oklch(0.5 0.17 260); }
.is-sun { color: var(--sun); }
.is-sat { color: var(--sat); }

/* ---------- 만들기 ---------- */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.legend { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); padding: 0; margin-bottom: 7px; display: flex; gap: var(--space-2); align-items: baseline; }
/* 날짜: 테두리·틈 없는 직사각형. 고른 날끼리 맞붙어 한 덩어리로 보인다. 구분은 색으로만 */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); touch-action: none; user-select: none; -webkit-user-select: none; }
.cal-head { text-align: center; padding-bottom: var(--space-1); color: var(--text-muted); }
.cal-head.is-sun { color: var(--sun); } .cal-head.is-sat { color: var(--sat); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.cal-month { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.cal-prev .i { transform: rotate(90deg); } .cal-next .i { transform: rotate(-90deg); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.cal-day {
  min-height: 40px; margin: 0; font: inherit; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums;
  color: var(--text); background: transparent; border: 0; border-radius: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-day.is-sun { color: var(--sun); } .cal-day.is-sat { color: var(--sat); }
.cal-day:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--primary-text); }
.cal-day[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: var(--fw-semibold); }
.cal-day:disabled { color: var(--text-faint); opacity: .45; cursor: not-allowed; }
.cal-day:focus-visible { outline-offset: -2px; border-radius: 0; }
.time-range { flex-wrap: nowrap; }
select.input { appearance: auto; padding-right: 8px; }
select.input option { background: var(--surface-2); color: var(--text); }
@media (max-width: 800px) {
  .split-main { padding: var(--space-4) var(--gutter) var(--space-6); }
  .auth-form { gap: var(--space-4); }
  .auth-form .help:not(.help--error) { display: none; }
}

/* ---------- 일정 화면: 헤더 아래를 꽉 채우고, 넘치면 격자 안에서만 스크롤 ---------- */
body.app { height: 100dvh; overflow: hidden; }
.screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-4); }
.screen-head { display: flex; align-items: center; gap: var(--space-3); }
.brand-icon { flex: none; display: flex; }
.brand-icon img { width: 28px; height: 28px; }
.screen-head .grow { min-width: 0; }
.screen-head .btn { white-space: nowrap; }
@media (max-width: 600px) { .screen-head { flex-wrap: wrap; row-gap: var(--space-2); } .screen-head .grow { flex-basis: calc(100% - 40px); } .screen-head .btn { flex: 1; } } /* 좁은 화면: 제목 한 줄, 버튼 한 줄 */
.screen-head h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  margin: 0; font-size: var(--fs-title-2); line-height: var(--lh-title-2); }
.screen-head p { margin: 0; }
.view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow: auto; }
.view h2 { margin: 0; }
.action-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: auto; padding-bottom: env(safe-area-inset-bottom);
  position: sticky; bottom: 0; z-index: 4; background: inherit; box-shadow: 0 var(--panel-padding) 0 var(--surface); } /* 격자를 키워 화면이 스크롤돼도 저장 버튼은 늘 보이게 */
.action-bar .save-status { flex: 1 1 auto; margin: 0; }

/* 1. 결과: 넓은 화면은 왼쪽 요약 + 오른쪽 격자 */
.res-side { display: flex; flex-direction: column; gap: var(--space-2); flex: none; }
.res-side .card-head { margin: 0; }
.res-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.people { margin: 0; color: var(--text); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.people-help { margin: 0; }
.people:not(:has(button)) + .people-help { display: none; }
.best-h { margin: var(--space-2) 0 0; font-weight: var(--fw-semibold); }
.best { list-style: none; margin: 0; padding: 0; }
.best li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.best .name { font-variant-numeric: tabular-nums; }
.who { margin: 0; min-height: 3em; }
@media (min-width: 801px) {
  .view--results { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-8); }
  .res-side { grid-area: 1 / 1; overflow: auto; }
  .res-main { grid-area: 1 / 2 / 3 / 3; }
  .view--results .action-bar { grid-area: 2 / 1; }
  .view--results .action-bar .btn { flex: 1; }
}

/* 2. 내 시간 입력: 이름·비밀번호 한 줄, 도구 한 줄, 나머지는 격자 */
#me-help:empty, .save-status:empty { display: none; } /* 할 말이 있을 때만 줄을 차지한다 */
.me-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.edit-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 800px) { .edit-tools { gap: var(--space-1); } .edit-tools .btn { padding-inline: var(--space-2); } } /* 휴대폰: 올리기·모두 가능·지우기를 한 줄에 */
/* 넓은 화면: 입력·도구·저장은 왼쪽 열, 격자는 오른쪽에서 세로를 전부 쓴다 */
@media (min-width: 801px) {
  .view--edit { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; align-content: start; gap: var(--space-3) var(--space-8); }
  .view--edit > :not(.grid-wrap, .action-bar) { grid-column: 1; }
  .view--edit .grid-wrap { grid-area: 1 / 2 / -1 / 3; min-height: 0; }
  .view--edit .action-bar { grid-area: 5 / 1; flex-wrap: wrap; }
  .view--edit .action-bar .btn { flex: 1; }
  .me-row { grid-template-columns: 1fr; }
  .edit-tools label.btn { flex-basis: 100%; }
}
.edit-tools #et-file { position: absolute; } /* 숨긴 파일 입력이 줄 자리를 먹지 않게 */
#all-on { margin-left: auto; }
.edit-tools label.btn:has(+ input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 입력 방식: 두 칸짜리 스위치. 고른 쪽이 채워져 있어 서로 바꾸는 선택지라는 게 보이게 */
.seg { display: flex; flex: 1 1 auto; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.seg .tab { flex: 1; padding: 0 var(--space-3); min-height: calc(var(--control-sm) - 8px); border-radius: calc(var(--radius-sm) - 2px); font-size: var(--fs-caption); }
.seg .tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
.hour-pick { width: auto; min-height: var(--control-sm); padding-block: 0; font-size: var(--fs-caption); }

/* 시간 격자: 행 15분, 열 날짜. 15분 칸이 손가락으로 집을 만한 크기를 먼저 지키고, 넘치면 틀 안에서 스크롤 */
.grid-wrap { flex: 1 1 auto; min-height: min(60dvh, 34rem); overflow: auto; overscroll-behavior: contain; display: grid; }
.grid {
  --row-min: 20px;
  display: grid; min-width: min-content;
  grid-template-columns: 44px repeat(var(--cols), minmax(56px, 1fr));
  grid-template-rows: auto repeat(var(--rows), minmax(var(--row-min), 1fr));
  user-select: none; -webkit-user-select: none;
}
.grid-corner, .grid-date { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.grid-corner { left: 0; z-index: 3; }
.grid-date { text-align: center; padding-bottom: 6px; white-space: pre; font-weight: var(--fw-semibold); line-height: 1.3; }
/* 시각 열: 가로로 넘겨도 붙어 있고, 터치로 끌면 격자가 움직이는 손잡이 */
.grid-time {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1; padding: 1px 6px 0 0; text-align: right;
  touch-action: pan-x pan-y;
}
.cell {
  display: block; padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer; background: transparent;
  border-left: 1px solid var(--border-soft); border-top: 1px dotted color-mix(in oklch, var(--border-soft) 60%, transparent);
}
.cell--hour { border-top: 1px solid var(--border-soft); }
.cell:focus-visible { outline-offset: -2px; border-radius: 0; }
#mine .cell { touch-action: none; }
#mine .cell.is-on { background-color: var(--primary); }
#mine .cell.is-some { background-color: color-mix(in oklch, var(--primary) 40%, transparent); }
.cell--week { border-left: 2px solid var(--border-strong); }
.grid-date.cell--week { border-left: 2px solid var(--border-strong); }
#mine .cell.is-class { background-image: repeating-linear-gradient(135deg, var(--text-faint) 0 1px, transparent 1px 6px); }
.grid--heat .cell { background: color-mix(in oklch, var(--primary) var(--a, 0%), transparent); }
@media (pointer: coarse) { .grid { --row-min: 24px; grid-template-columns: 44px repeat(var(--cols), minmax(64px, 1fr)); } }


/* 좁은 화면: 카드를 화면 끝까지 써서 격자 폭을 넓힌다 */
@media (max-width: 800px) {
  .screen { padding-block: var(--space-3) 0; gap: var(--space-2); }
  .view { margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding: var(--space-4) var(--gutter) var(--space-3); }
  .view--results .best li:nth-child(n+3) { display: none; } /* 결과 화면은 상위 2개만 */
  .action-bar .btn { flex: 1 1 auto; }
  .action-bar .save-status { flex-basis: 100%; }
  .view--edit .action-bar { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .header-row .product { display: none; }
}

/* ---------- 약관·처리방침 ---------- */
.legal-links { margin: 0; text-align: center; }
.res-side .legal-links { text-align: left; margin-top: auto; }
.legal-links a, .legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal { max-width: 760px; padding-block: var(--space-8) var(--space-12); }
.legal h1 { margin: var(--space-8) 0 var(--space-2); }
.legal h2 { font-size: var(--fs-body); margin: var(--space-8) 0 var(--space-2); }
.legal p, .legal li { line-height: 1.75; }
.legal p { margin: 0 0 var(--space-2); }
.legal ol, .legal ul { margin: 0; padding-left: 1.4em; }
.legal ol.sub { list-style: lower-alpha; margin-top: var(--space-1); }