/* 온라인 시계 — 도구 공통 디자인 언어(그라데이션 히어로) + 전체 화면 시계 무대
   설정 패널·사용법·FAQ 는 부트스트랩 클래스만 쓰고, 여기서는 부트스트랩으로 낼 수 없는
   시계 무대(#clkStage)와 시계 모양만 다룬다.
   시계 무대의 색은 사이트 테마(data-bs-theme)와 별개다 — 사용자가 고른 「화면 색」을 따른다. */

.clk-tool {
    --tool-gradient: linear-gradient(135deg, #111827 0%, #0f766e 100%);
}

/* ===== 히어로 ===== */
.clk-hero {
    background: var(--tool-gradient);
    border-radius: 16px;
    padding: 28px 24px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}
.clk-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px; width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.clk-hero-icon { font-size: 36px; position: relative; z-index: 1; }
.clk-hero h1 { font-size: 1.75rem; font-weight: 800; margin: 6px 0 4px; position: relative; z-index: 1; }
.clk-hero p { margin: 0; opacity: .85; position: relative; z-index: 1; }

/* ===== 시계 무대 ===== */
.clk-stage {
    --clk-bg: #0b0d12;
    --clk-fg: #f1f5f9;
    --clk-muted: #94a3b8;
    --clk-card: #1b1f27;
    --clk-card-2: #20252f;
    --clk-line: rgba(0, 0, 0, .6);
    --clk-accent: #2dd4bf;
    --clk-fade: rgba(11, 13, 18, .55);   /* 진행 막대 왼쪽을 배경 쪽으로 눅이는 색 (은은한 그라디언트) */
    --clk-hand-sec: #f97316;
    --clk-track: rgba(255, 255, 255, .12);
    --clk-btn: rgba(255, 255, 255, .1);
    --clk-btn-hover: rgba(255, 255, 255, .2);
    --clk-bg-hi: #141821;                 /* 무대 가운데를 아주 살짝 밝힌다 (은은한 비네트) */
    /* 플립 카드 — 위 반쪽은 위가 조금 밝고, 아래 반쪽은 아래로 조금 어두워진다 */
    --clk-flip-t1: #262b35;
    --clk-flip-t2: #1e222b;
    --clk-flip-b1: #1b1f27;
    --clk-flip-b2: #15181f;
    --clk-flip-hi: rgba(255, 255, 255, .06);   /* 카드 위 가장자리 빛 */
    --clk-flip-shadow: 0 .035em .07em rgba(0, 0, 0, .5), 0 .01em .015em rgba(0, 0, 0, .4);
    --clk-dial-1: #222731;
    --clk-dial-2: #171a21;
    --clk-dial-shadow: drop-shadow(0 12px 28px rgba(0, 0, 0, .45));
    --clk-hand-shadow: rgba(0, 0, 0, .55);

    position: relative;
    width: 100%;
    height: clamp(300px, 62vh, 720px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--clk-bg);
    background-image: radial-gradient(ellipse 75% 70% at 50% 45%, var(--clk-bg-hi), var(--clk-bg));
    color: var(--clk-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.clk-stage.clk-theme-light {
    --clk-bg: #f4f6f8;
    --clk-fg: #0f172a;
    --clk-muted: #64748b;
    --clk-card: #ffffff;
    --clk-card-2: #f8fafc;
    --clk-line: rgba(15, 23, 42, .14);
    --clk-accent: #0f766e;
    --clk-fade: rgba(244, 246, 248, .6);
    --clk-hand-sec: #ea580c;
    --clk-track: rgba(15, 23, 42, .1);
    --clk-btn: rgba(15, 23, 42, .06);
    --clk-btn-hover: rgba(15, 23, 42, .12);
    --clk-bg-hi: #fbfcfd;
    --clk-flip-t1: #ffffff;
    --clk-flip-t2: #f9fafb;
    --clk-flip-b1: #f3f5f8;
    --clk-flip-b2: #eceff3;
    --clk-flip-hi: rgba(255, 255, 255, .9);
    --clk-flip-shadow: 0 .03em .07em rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .06);
    --clk-dial-1: #ffffff;
    --clk-dial-2: #f1f4f7;
    --clk-dial-shadow: drop-shadow(0 10px 24px rgba(15, 23, 42, .12));
    --clk-hand-shadow: rgba(15, 23, 42, .25);
}

/* 전체 화면 — 네이티브(Fullscreen API)와 대체(position:fixed) 둘 다 같은 모양 */
.clk-stage.clk-is-full {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* inset 은 오래된 태블릿 사파리(14 미만)에 없다 */
    width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 1090;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.clk-stage:fullscreen { width: 100%; height: 100%; }
html.clk-lock, html.clk-lock body { overflow: hidden; }

/* 마우스·터치가 없으면 커서와 조작 단추를 숨긴다 (전체 화면일 때만 JS 가 붙인다) */
.clk-stage.clk-idle { cursor: none; }
.clk-stage.clk-idle .clk-ctrl { opacity: 0; pointer-events: none; }

/* 번인 방지 이동 — 아주 느리게 */
.clk-shift {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform 40s linear;
}

.clk-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
}
.clk-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    font-size: 100px;
}
.clk-group { display: inline-flex; align-items: center; }

/* 세로 화면에서는 시·분·초를 위아래로 쌓는다 */
.clk-portrait .clk-inner.clk-stackable { flex-direction: column; }
.clk-portrait .clk-inner.clk-stackable .clk-sep { display: none; }
.clk-portrait .clk-inner.clk-stackable .clk-group + .clk-group { margin-top: .08em; }

.clk-sep {
    color: var(--clk-muted);
    font-weight: 700;
    padding: 0 .06em;
    position: relative;
    top: -.06em;
}
.clk-ampm {
    font-size: .2em;
    font-weight: 600;
    color: var(--clk-muted);
    align-self: flex-start;
    margin: .3em .45em 0;
    letter-spacing: .04em;
}
.clk-portrait .clk-stackable .clk-ampm { align-self: center; margin: 0 0 .1em; }

/* ----- 플립 시계 ----- */
.clk-flip .clk-group { gap: .06em; }
.clk-fd {
    position: relative;
    display: inline-block;
    width: .74em;
    height: 1.1em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--clk-fg);
    letter-spacing: -.02em;
    border-radius: .08em;
    box-shadow: var(--clk-flip-shadow);
    -webkit-perspective: 2.5em;
    perspective: 2.5em;
}
.clk-fd > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background: var(--clk-flip-t2);
}
/* 위 반쪽: 위가 조금 밝고 가장자리에 가는 빛 / 아래 반쪽: 아래로 조금 어둡게 */
.clk-fd > .t, .clk-fd > .ft {
    top: 0;
    border-radius: .08em .08em 0 0;
    background: linear-gradient(180deg, var(--clk-flip-t1), var(--clk-flip-t2));
    box-shadow: inset 0 1px 0 var(--clk-flip-hi);
}
.clk-fd > .b, .clk-fd > .fb {
    bottom: 0;
    border-radius: 0 0 .08em .08em;
    background: linear-gradient(180deg, var(--clk-flip-b1), var(--clk-flip-b2));
}
.clk-fd > span > i {
    display: block;
    height: 200%;
    line-height: 1.1em;
    text-align: center;
    font-style: normal;
}
.clk-fd > .b > i, .clk-fd > .fb > i { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.clk-fd > .ft {
    z-index: 2;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.clk-fd > .fb {
    z-index: 2;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.clk-fd::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(1px, .012em);
    margin-top: max(-.5px, -.006em);
    background: var(--clk-line);
    box-shadow: 0 1px 0 var(--clk-flip-hi);   /* 이음선 바로 아래 가는 빛 — 접힌 자리처럼 보이게 */
    z-index: 3;
}
/* 플립 콜론 — 글자 대신 카드 가운데에 맞춘 둥근 점 두 개 */
.clk-flip .clk-sep {
    position: relative;
    top: 0;
    width: .3em;
    height: 1.1em;
    padding: 0;
    color: transparent;
}
.clk-flip .clk-sep::before, .clk-flip .clk-sep::after {
    content: '';
    position: absolute;
    left: 50%;
    width: .1em;
    height: .1em;
    margin: -.05em 0 0 -.05em;
    border-radius: 50%;
    background: var(--clk-muted);
    opacity: .75;
}
.clk-flip .clk-sep::before { top: 34%; }
.clk-flip .clk-sep::after { top: 66%; }
.clk-fd.is-flip > .ft { -webkit-animation: clkFlipTop .28s ease-in forwards; animation: clkFlipTop .28s ease-in forwards; }
.clk-fd.is-flip > .fb { -webkit-animation: clkFlipBot .28s .28s ease-out forwards; animation: clkFlipBot .28s .28s ease-out forwards; }
@-webkit-keyframes clkFlipTop { from { -webkit-transform: rotateX(0); } to { -webkit-transform: rotateX(-90deg); } }
@keyframes clkFlipTop { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@-webkit-keyframes clkFlipBot { from { -webkit-transform: rotateX(90deg); } to { -webkit-transform: rotateX(0); } }
@keyframes clkFlipBot { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ----- 큰 디지털 ----- */
/* 고정폭 글꼴(빗금 친 0)은 코드처럼 보여서, 시스템 글꼴 + 같은 폭 숫자(tabular-nums)로 바꿨다 */
.clk-digital {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    letter-spacing: -.035em;
}
.clk-digital .clk-sep { color: var(--clk-accent); font-weight: 500; padding: 0 .04em; top: -.07em; }
/* 현재 시각에서는 초를 작게 — 시·분 아랫줄에 맞춘다 */
.clk-digital .clk-sec-sm {
    font-size: .36em;
    font-weight: 500;
    color: var(--clk-muted);
    align-self: flex-end;
    margin: 0 0 .2em .1em;
    letter-spacing: -.01em;
}
.clk-digital .clk-sec-sm .clk-sep { color: var(--clk-muted); opacity: .6; top: -.04em; }
.clk-portrait .clk-digital .clk-sec-sm { align-self: center; margin: .1em 0 0; }

/* ----- 미니멀 ----- */
.clk-minimal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    letter-spacing: -.045em;
}
.clk-minimal .clk-sep { font-weight: 200; color: var(--clk-fg); opacity: .35; padding: 0 .03em; top: -.07em; }
.clk-minimal .clk-small {
    font-size: .3em;
    font-weight: 300;
    color: var(--clk-muted);
    align-self: flex-end;
    margin: 0 0 .24em .22em;
    letter-spacing: 0;
}
.clk-minimal .clk-ampm { font-size: .15em; font-weight: 400; margin-top: .22em; }
.clk-portrait .clk-minimal .clk-small { align-self: center; margin: .1em 0 0; }

/* ----- 아날로그 ----- */
.clk-analog { display: block; overflow: visible; -webkit-filter: var(--clk-dial-shadow); filter: var(--clk-dial-shadow); }
.clk-analog .a-g1 { stop-color: var(--clk-dial-1); }
.clk-analog .a-g2 { stop-color: var(--clk-dial-2); }
.clk-analog .a-sh { flood-color: var(--clk-hand-shadow); flood-opacity: 1; }
.clk-analog .a-dial { stroke: var(--clk-track); stroke-width: 1; }
.clk-analog .a-tick { stroke: var(--clk-muted); stroke-width: .7; stroke-linecap: round; opacity: .55; }
.clk-analog .a-tick.is-hour { stroke: var(--clk-fg); stroke-width: 1.8; opacity: .9; }
.clk-analog .a-tick.is-q { stroke-width: 2.6; opacity: 1; }
.clk-analog .a-num { fill: var(--clk-fg); font-size: 12.5px; font-weight: 500; text-anchor: middle; dominant-baseline: central;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; opacity: .88; }
.clk-analog .a-arc { fill: none; stroke: var(--clk-accent); stroke-width: 3.5; stroke-linecap: round; opacity: .55; }
.clk-analog .a-h, .clk-analog .a-m { fill: var(--clk-fg); stroke: var(--clk-fg); stroke-width: .6; stroke-linejoin: round; }
.clk-analog .a-s { stroke: var(--clk-hand-sec); stroke-width: 1.1; stroke-linecap: round; }
.clk-analog .a-cap { fill: var(--clk-hand-sec); }
.clk-analog .a-cap-o { fill: var(--clk-fg); }
.clk-analog .a-txt { fill: var(--clk-fg); font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: central;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum'; letter-spacing: .02em; }
.clk-analog .a-sub { fill: var(--clk-muted); font-size: 7.5px; font-weight: 600; text-anchor: middle; dominant-baseline: central;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }

/* ===== 날짜·안내·진행률 (글자 크기는 JS 가 무대 크기에 맞춰 정한다) ===== */
.clk-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--clk-muted);
    font-weight: 500;
    line-height: 1.35;
    width: 100%;
}
.clk-date { color: var(--clk-fg); opacity: .85; }
.clk-label { margin-top: .2em; white-space: pre-line; }
.clk-date:empty, .clk-label:empty, .clk-status:empty, .clk-head:empty { display: none; }
.clk-prog { width: min(86%, 36em); margin: .7em auto 0; }
.clk-prog[hidden] { display: none; }
.clk-prog-row {
    display: flex;
    align-items: center;
    gap: .75em;
}
.clk-prog-end {
    flex: 0 0 auto;
    font-size: .78em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.clk-prog-bar {
    position: relative;
    flex: 1 1 auto;
    min-width: 3em;
    height: .42em;
    border-radius: 1em;
    background: var(--clk-track);
}
.clk-prog-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background-color: var(--clk-accent);
    background-image: linear-gradient(90deg, var(--clk-fade), rgba(0, 0, 0, 0));
    transition: width 1s linear, background-color 4s ease;
}
/* 지금 위치 — 막대 위의 작은 점 (배경색 테를 둘러 막대에서 떼어 보이게) */
.clk-prog-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: .9em;
    height: .9em;
    margin: -.45em 0 0 -.45em;
    border-radius: 50%;
    background: var(--clk-accent);
    box-shadow: 0 0 0 .18em var(--clk-bg);
    transition: left 1s linear, background-color 4s ease;
}
.clk-prog-text { font-size: .8em; margin-top: .55em; }

/* ===== 퇴근 카운트다운 ===== */
/* 숫자 위 제목 — 무엇의 남은 시간인지 */
.clk-head {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--clk-accent);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    transition: color 4s ease;
}
.clk-head::before {
    content: '';
    width: .42em;
    height: .42em;
    border-radius: 50%;
    background: currentColor;
}

/* 숫자 묶음 아래 단위 — 레이아웃 높이에 끼지 않게 띄우고, 그만큼 아래 여백을 둔다 */
/* 단위 글자는 작은 화면에서도 11px 아래로 줄지 않게 max() 로 하한을 둔다 */
.clk-inner.clk-has-units { padding-bottom: max(22px, .26em); }
.clk-flip.clk-has-units { padding-bottom: max(26px, .3em); }
.clk-cell { position: relative; display: inline-flex; }
.clk-unit {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .5em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: max(11px, .13em);
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: center;
    color: var(--clk-muted);
}
.clk-flip .clk-unit { margin-top: .9em; }
.clk-minimal .clk-cell-small {
    font-size: .32em;
    align-self: flex-end;
    margin: 0 0 .22em .2em;
}
.clk-minimal .clk-cell-small .clk-small { font-size: 1em; margin: 0; }
.clk-minimal .clk-cell-small .clk-unit { font-size: max(11px, .4em); }
.clk-portrait .clk-inner.clk-stackable .clk-cell ~ .clk-cell { margin-top: max(24px, .3em); }
.clk-portrait .clk-flip .clk-cell ~ .clk-cell { margin-top: max(28px, .34em); }

/* 카운트다운 중에는 날짜를 작게 맨 뒤로 */
.clk-cd .clk-date { order: 9; font-size: .74em; opacity: .55; margin-top: .9em; }

/* 출근 시각이 없을 때 — 막대 대신 퇴근 시각 칩 */
.clk-label.clk-chip {
    margin-top: .1em;
    padding: .28em .9em;
    border: 1px solid var(--clk-track);
    border-radius: 2em;
    color: var(--clk-fg);
    font-variant-numeric: tabular-nums;
}

/* 퇴근 뒤·쉬는 날 — 큰 한 줄 + 작은 보조 줄 */
.clk-status {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    color: var(--clk-fg);
    font-size: 1.2em;
    font-weight: 600;
    margin-top: .25em;
}
.clk-status > .bi { color: var(--clk-accent); font-size: .9em; }
.clk-rest .clk-date { order: 9; font-size: .74em; opacity: .55; margin-top: .7em; }
.clk-rest .clk-label { font-size: .86em; margin-top: .3em; }

/* 퇴근 1시간 전부터 강조색을 따뜻한 색으로 — 색만 천천히 바뀐다 */
.clk-stage.clk-soon { --clk-accent: #fbbf24; }
.clk-stage.clk-theme-light.clk-soon { --clk-accent: #c2410c; }
.clk-digital .clk-sep { transition: color 4s ease; }
.clk-analog .a-arc { transition: stroke 4s ease; }

/* ===== 현재 시각 ===== */
/* 숫자 위 날짜 줄 — 카운트다운 제목 자리를 같이 쓰되, 점 없이 차분한 글자색으로 */
.clk-tm .clk-head {
    color: var(--clk-fg);
    opacity: .78;
    font-weight: 500;
    letter-spacing: .01em;
}
.clk-tm .clk-head::before { display: none; }

/* 하루 선 — 자정부터 자정까지. 가운데 짧은 눈금이 정오, 아래에 오전·오후 */
.clk-day { width: min(60%, 22em); margin: .35em auto 0; }
.clk-day[hidden] { display: none; }
.clk-day-bar {
    position: relative;
    height: max(2px, .12em);
    border-radius: 1em;
    background: var(--clk-track);
}
.clk-day-bar::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(1px, .08em);
    height: .6em;
    margin: -.3em 0 0 max(-.5px, -.04em);
    border-radius: 1em;
    background: var(--clk-muted);
    opacity: .5;
}
.clk-day-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background-color: var(--clk-accent);
    background-image: linear-gradient(90deg, var(--clk-fade), rgba(0, 0, 0, 0));
    opacity: .8;
}
.clk-day-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: .5em;
    height: .5em;
    margin: -.25em 0 0 -.25em;
    border-radius: 50%;
    background: var(--clk-accent);
    box-shadow: 0 0 0 .14em var(--clk-bg-hi);
    z-index: 1;
}
.clk-day-lab {
    display: flex;
    margin-top: .5em;
    font-size: .68em;
    letter-spacing: .06em;
    line-height: 1.2;
}
.clk-day-lab > span { flex: 1 1 50%; text-align: center; opacity: .55; transition: opacity 4s ease; }
.clk-day-lab > span.is-now { opacity: 1; color: var(--clk-fg); }

/* ===== 조작 단추 ===== */
.clk-ctrl {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    transition: opacity .4s ease;
    z-index: 5;
}
.clk-stage.clk-is-full .clk-ctrl {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
}
.clk-ctrl-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--clk-btn);
    color: var(--clk-fg);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.clk-ctrl-btn:hover, .clk-ctrl-btn:focus-visible { background: var(--clk-btn-hover); }
.clk-ctrl-btn:focus-visible { outline: 2px solid var(--clk-accent); outline-offset: 2px; }
.clk-ctrl-btn[hidden] { display: none; }
/* 「지금부터 9시간」 — 글자가 들어가는 알약 모양 (카운트다운 화면에서만 JS 가 보인다) */
.clk-ctrl-pill {
    width: auto;
    padding: 0 16px;
    border-radius: 22px;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* 알약 단추가 보이는 동안은 위쪽에 조작 줄 높이만큼 자리를 비워 「퇴근까지」 제목과 겹치지 않게 한다.
   방향(가로·세로)과 무관하게 모드로만 정한다 — 방향에 묶으면 여백이 방향 판정을 다시 바꿔 경계에서 깜빡인다 */
.clk-stage.clk-has-now { padding-top: 64px; }
.clk-stage.clk-is-full.clk-has-now { padding-top: max(68px, calc(env(safe-area-inset-top) + 60px)); }

/* 근무 시간 직접 입력 — 「9.5」 정도만 들어가면 되는 폭 */
.clk-hours-in { width: 5.5em; flex: 0 0 auto; }

/* 시계 모양 고르기 버튼 — 아이콘 + 이름 */
.clk-style-opt { line-height: 1.2; }

@media (max-width: 575.98px) {
    .clk-hero { padding: 22px 16px; }
    .clk-hero h1 { font-size: 1.5rem; }
    .clk-stage { height: clamp(260px, 52vh, 520px); padding: 16px; border-radius: 12px; }
    .clk-ctrl-pill { padding: 0 12px; font-size: 14px; }
}

/* 움직임 줄이기 설정을 존중한다 — 넘김 애니메이션과 위치 이동을 끈다 */
@media (prefers-reduced-motion: reduce) {
    .clk-fd.is-flip > .ft, .clk-fd.is-flip > .fb { -webkit-animation: none; animation: none; }
    .clk-shift, .clk-prog-bar > span, .clk-prog-dot, .clk-head,
    .clk-digital .clk-sep, .clk-analog .a-arc, .clk-day-lab > span { transition: none; }
}