/* ═══════════════════════════════════════════════════════════
   운동 타이머
   구간 색이 화면 전체의 온도를 바꾸고, 남은 시간은 숫자 안에서 빠집니다.
   ═══════════════════════════════════════════════════════════ */

@property --fill {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
}

:root {
    --accent: #8c8c8c;
    --fill: 100%;

    --ink: #07080b;
    --ink-2: #0d1015;
    --chalk: #eef1f5;
    --dim: rgba(238, 241, 245, 0.46);
    --dimmer: rgba(238, 241, 245, 0.26);
    --line: rgba(255, 255, 255, 0.08);

    --work: #33cc8c;
    --rest: #4c9eff;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    min-height: 100%;
    background: var(--ink);
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;
    color: var(--chalk);
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.screen {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, var(--ink-2), var(--ink) 62%);
}
.screen[hidden] { display: none; }

/* 아주 넓게 벌린 작은 라벨. 화면에서 유일하게 자간이 벌어진 글자입니다. */
.eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: rgba(238, 241, 245, 0.38);
    transition: color .4s ease;
}

/* ══════════ 화면 1 · 프로그램 선택 ══════════ */

.screen-select {
    justify-content: flex-start;
    gap: 26px;
    padding: max(46px, calc(env(safe-area-inset-top) + 28px)) 18px max(36px, env(safe-area-inset-bottom));
}

.select-header { text-align: center; }
.select-title {
    margin-top: 9px;
    font-size: clamp(30px, 8vw, 38px);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.program-list {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.program-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "tile name  len"
        "tile tag   len"
        "shape shape shape";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    width: 100%;
    padding: 12px 14px 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .13s ease, border-color .22s ease, background .22s ease;
    animation: card-in .42s cubic-bezier(.22,1,.36,1) backwards;
}
.program-card:active { transform: scale(0.978); background: rgba(255,255,255,0.075); }
.program-card.is-last { border-color: rgba(255,255,255,0.2); }

@keyframes card-in {
    from { opacity: 0; transform: translateY(9px); }
}

.program-tile {
    grid-area: tile;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    font-size: 23px;
    line-height: 1;
}
.program-name {
    grid-area: name;
    align-self: end;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.program-tagline {
    grid-area: tag;
    align-self: start;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.program-length {
    grid-area: len;
    align-self: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgba(238,241,245,0.62);
}
.program-recent {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--dim);
    vertical-align: 1.5px;
}

/* 카드 미리보기 — 프로그램의 실제 구조 */
.shape {
    grid-area: shape;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
    margin-top: 9px;
}
.shape i {
    flex: 0 1 0;            /* 폭 비율은 flex-grow 로 인라인 지정됩니다 */
    min-width: 2px;
    height: calc(var(--h) * 100%);
    border-radius: 2px;
    background: rgba(51,204,140,0.5);
}
.shape i.rest { background: rgba(76,158,255,0.34); }

/* ══════════ 화면 2 · 타이머 ══════════ */

.screen-timer {
    justify-content: center;
    gap: clamp(16px, 3.2vh, 30px);
    padding: max(58px, calc(env(safe-area-inset-top) + 42px)) 20px max(26px, env(safe-area-inset-bottom));
    overflow: hidden;
}
/* 구간 색이 무대 조명처럼 뒤에서 번집니다. */
.screen-timer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 40% at 50% 34%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
    transition: background .55s ease;
    pointer-events: none;
}
.screen-timer > * { position: relative; }

.back {
    position: absolute;
    top: max(16px, calc(env(safe-area-inset-top) + 6px));
    left: 14px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: var(--dim);
    cursor: pointer;
    transition: transform .13s ease, color .2s ease;
}
.back:active { transform: scale(0.9); }

.stage { text-align: center; }

/* 시계 — 남은 시간만큼만 색이 차 있고, 시간이 갈수록 아래로 빠집니다.
   카운트업 모드에서는 이 숫자가 라운드 수를 맡고, 채움이 남은 시간을 나타냅니다. */
.clock-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
}
.clock {
    font-size: clamp(92px, 28vw, 160px);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.clock-unit {
    font-size: clamp(19px, 5.2vw, 27px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dim);
}
.clock-unit:empty { display: none; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .clock {
        background-image: linear-gradient(to top,
            var(--accent) 0%, var(--accent) var(--fill),
            rgba(238,241,245,0.15) var(--fill), rgba(238,241,245,0.15) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        transition: --fill .95s linear;
    }
}
.clock-sub {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--dimmer);
    min-height: 15px;
}

.now {
    margin-top: 14px;
    font-size: clamp(21px, 6vw, 28px);
    font-weight: 700;
    letter-spacing: -0.03em;
    transition: color .4s ease;
}
.now.accent { color: var(--accent); }
.meta {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dim);
}

/* 시간 모드 · 프로그램 전체 타임라인 */
.track {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    max-width: 460px;
    height: 12px;
}
.track[hidden] { display: none; }

.track .seg {
    position: relative;
    flex: 0 1 0;            /* 폭 비율은 flex-grow 로 인라인 지정됩니다 */
    min-width: 2px;
    height: calc(var(--h) * 100%);
    border-radius: 3px;
    background: rgba(255,255,255,0.17);
    overflow: hidden;
    transition: background .3s ease, box-shadow .3s ease;
}
.track .seg::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--f, 0%);
    background: var(--c);
    transition: width .95s linear;
}
.track .seg.set-start { margin-left: 8px; }
.track .seg.done::after { width: 100%; opacity: 0.62; }
.track .seg.current {
    background: rgba(255,255,255,0.3);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 카운트업 모드 · 이번 라운드 목표 */
.moves {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    width: 100%;
    max-width: 460px;
}
.moves[hidden] { display: none; }

.move-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 13px;
    background: rgba(255,255,255,0.05);
    font-size: 13px;
    font-weight: 600;
    color: rgba(238,241,245,0.7);
}
.move-goal {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* 카운트업 모드 · 라운드 완료 탭 */
.round-tap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    padding: 15px 20px;
    /* color-mix 를 모르는 구형 사파리를 위해 평범한 값을 먼저 둡니다. */
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.05);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--chalk);
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    cursor: pointer;
    transition: transform .1s ease, opacity .25s ease, border-color .4s ease, background .4s ease;
}
.round-tap[hidden] { display: none; }
.round-tap:active { transform: scale(0.975); }
.round-tap:disabled { opacity: 0.28; pointer-events: none; }
.round-tap-count {
    min-width: 38px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #06070a;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* 컨트롤 */
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--chalk);
    transition: transform .13s ease, background .2s ease;
}
.btn:active { transform: scale(0.92); }
.btn-secondary {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: var(--dim);
}
.btn-primary {
    width: 82px; height: 82px;
    border-radius: 50%;
    background: var(--accent);
    color: #06070a;
    box-shadow: 0 8px 30px -6px var(--accent);
    transition: transform .13s ease, background .4s ease, box-shadow .4s ease;
}
.spacer { width: 56px; height: 56px; }   /* 좌우 대칭용 */

/* 직접 설정 (운동 / 휴식 / 라운드) */
.footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .3s ease;
}
.footer[hidden] { display: none; }
.footer.running { opacity: 0.3; pointer-events: none; }
.setting-row { display: flex; align-items: center; gap: 12px; }
.footer-label {
    width: 44px;
    font-size: 13px; font-weight: 500;
    color: var(--dim);
}
.step {
    width: 33px; height: 33px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--dim);
    font-size: 17px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .13s ease;
}
.step:active { transform: scale(0.9); }
.value {
    min-width: 54px; text-align: center;
    font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.value.work { color: var(--work); }
.value.rest { color: var(--rest); }

/* 낮은 화면에서는 여백부터 줄입니다. */
@media (max-height: 700px) {
    .screen-timer { gap: 13px; padding-top: max(50px, calc(env(safe-area-inset-top) + 36px)); }
    .clock { font-size: clamp(82px, 25vw, 124px); }
    .now { margin-top: 9px; }
    .btn-primary { width: 72px; height: 72px; }
    .btn-secondary, .spacer { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}