/* =======================================================
   TimeRoutine App v0.1 (1단계)
   style.css
======================================================= */

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

button{
    border:none;
    background:none;
    font:inherit;
    color:inherit;
    cursor:pointer;
    outline:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-appearance:none;
    appearance:none;
}

button:focus,
button:focus-visible,
button:active{
    outline:none;
}

input,
textarea,
select{
    font:inherit;
    color:inherit;
    outline:none;
    border:none;
    -webkit-tap-highlight-color:transparent;
}

:root{

    /* ---- System accent colors (Apple SF palette) ---- */
    --blue:#0A84FF;
    --green:#30D158;
    --orange:#FF9F0A;
    --red:#FF3B30;
    --purple:#AF52DE;

    --background:#F5F5F7;
    --card:rgba(255,255,255,.86);

    --surface:#FFFFFF;
    --surface-alt:#F2F2F4;
    --secondary-btn:#E8E8EC;

    --nav-bg:rgba(255,255,255,.88);
    --header-bg:rgba(255,255,255,.78);
    --header-border:rgba(0,0,0,.05);

    --text:#1D1D1F;
    --sub:#6E6E73;

    /* ---- Radius scale ---- */
    --radius-xs:10px;
    --radius-sm:14px;
    --radius:20px;
    --radius-lg:28px;
    --radius-xl:34px;

    /* ---- Elevation (restrained: soft, low-opacity, single layer) ---- */
    --shadow-sm:0 2px 10px rgba(20,20,25,.05);
    --shadow:0 12px 32px rgba(20,20,25,.07);
    --shadow-lg:0 22px 48px rgba(20,20,25,.09);

    --border:rgba(0,0,0,.06);

    --card-blur:24px;
    --nav-blur:26px;
    --header-blur:20px;

    --track-bg:#E4E4E9;
    --today-tint:rgba(10,132,255,.05);

    --body-bg:#F5F5F7;

    /* ---- Motion ---- */
    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.4,.4,1);
    --dur-fast:.16s;
    --dur:.28s;
    --dur-slow:.45s;

    /* ---- Spacing scale ---- */
    --sp-1:4px;
    --sp-2:8px;
    --sp-3:12px;
    --sp-4:16px;
    --sp-5:20px;
    --sp-6:24px;
    --sp-7:32px;
    --sp-8:40px;

}

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

html{
    scroll-behavior:smooth;
}

html{
    overflow-x:hidden;
}

body{
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif;

    background:var(--body-bg);
    color:var(--text);
    min-height:100vh;
    padding-bottom:120px;

    transition:
    background .4s ease,
    color .3s ease,
    padding-bottom .3s ease;
}

body.uiHidden{
    padding-bottom:24px;
}

/* ===================================== */
/* THEME: DARK                            */
/* ===================================== */

body.dark{
    --blue:#0A84FF;
    --green:#30D158;
    --orange:#FF9F0A;
    --red:#FF453A;
    --purple:#BF5AF2;

    --background:#000000;
    --card:rgba(28,28,30,.88);

    --surface:#1C1C1E;
    --surface-alt:#2C2C2E;
    --secondary-btn:#2C2C2E;

    --nav-bg:rgba(20,20,22,.86);
    --header-bg:rgba(0,0,0,.7);
    --header-border:rgba(255,255,255,.07);

    --text:#F5F5F7;
    --sub:#98989D;

    --shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --shadow:0 16px 36px rgba(0,0,0,.45);
    --shadow-lg:0 26px 56px rgba(0,0,0,.55);

    --border:rgba(255,255,255,.08);

    --track-bg:#2C2C2E;
    --today-tint:rgba(10,132,255,.14);

    --body-bg:#000000;
}

/* ===================================== */
/* THEME: APPLE (Brushed Steel / Metal)   */
/* ===================================== */

body.apple{
    --blue:#8FA6B8;
    --green:#30D158;
    --orange:#FF9F0A;
    --red:#FF453A;
    --purple:#A98FD8;

    --background:#2A2C2F;
    --card:rgba(255,255,255,.07);

    --surface:#3A3D41;
    --surface-alt:#313437;
    --secondary-btn:#45484D;

    --nav-bg:rgba(28,30,32,.82);
    --header-bg:rgba(24,26,28,.72);
    --header-border:rgba(255,255,255,.08);

    --text:#F1F2F4;
    --sub:#9A9DA3;

    --shadow-sm:0 2px 10px rgba(0,0,0,.3);
    --shadow:0 18px 40px rgba(0,0,0,.4);
    --shadow-lg:0 28px 58px rgba(0,0,0,.5);

    --border:rgba(255,255,255,.09);

    --track-bg:#1E2022;
    --today-tint:rgba(143,166,184,.14);

    --body-bg:
    radial-gradient(
    circle at 18% -10%,
    #55585c,
    transparent 55%
    ),
    radial-gradient(
    circle at 90% 110%,
    #3a3d40,
    transparent 55%
    ),
    repeating-linear-gradient(
    100deg,
    rgba(255,255,255,.025) 0px,
    rgba(255,255,255,.025) 1px,
    transparent 1px,
    transparent 3px
    ),
    linear-gradient(
    165deg,
    #34363a,
    #1c1d1f 60%,
    #131415
    );

    letter-spacing:-.2px;
}

body.apple.metalLight{
    --background:#EBEDEF;
    --card:rgba(255,255,255,.55);

    --surface:#F4F5F6;
    --surface-alt:#E6E8EA;
    --secondary-btn:#DADDE0;

    --nav-bg:rgba(244,245,246,.82);
    --header-bg:rgba(244,245,246,.72);
    --header-border:rgba(255,255,255,.5);

    --text:#1C1D1F;
    --sub:#6B6E73;

    --shadow-sm:0 2px 10px rgba(20,20,25,.06);
    --shadow:0 14px 34px rgba(20,20,25,.09);
    --shadow-lg:0 24px 52px rgba(20,20,25,.11);

    --border:rgba(255,255,255,.5);

    --track-bg:#DADDE0;
    --today-tint:rgba(10,132,255,.07);

    --body-bg:
    linear-gradient(
    165deg,
    #f5f6f7,
    #e6e8ea 60%,
    #dadde0
    );
}

/* ===================================== */
/* THEME: GLASS (iOS Liquid Glass)        */
/* ===================================== */

body.glass{
    --blue:#0A84FF;
    --green:#30D158;
    --orange:#FF9F0A;
    --red:#FF453A;
    --purple:#BF5AF2;

    --background:#E9EEF9;
    --card:rgba(255,255,255,.46);

    --surface:rgba(255,255,255,.66);
    --surface-alt:rgba(255,255,255,.42);
    --secondary-btn:rgba(255,255,255,.52);

    --nav-bg:rgba(255,255,255,.44);
    --header-bg:rgba(255,255,255,.36);
    --header-border:rgba(255,255,255,.6);

    --text:#0B0B0F;
    --sub:#4B4B55;

    --shadow-sm:0 3px 14px rgba(31,38,135,.09);
    --shadow:0 20px 50px rgba(31,38,135,.14);
    --shadow-lg:0 30px 68px rgba(31,38,135,.17);

    --border:rgba(255,255,255,.7);

    --track-bg:rgba(255,255,255,.4);
    --today-tint:rgba(10,132,255,.10);

    --card-blur:30px;
    --nav-blur:32px;
    --header-blur:26px;

    --body-bg:
    radial-gradient(
    circle at 12% 6%,
    rgba(255,150,190,.32),
    transparent 45%
    ),
    radial-gradient(
    circle at 88% 12%,
    rgba(130,175,255,.34),
    transparent 48%
    ),
    radial-gradient(
    circle at 28% 92%,
    rgba(150,255,215,.26),
    transparent 48%
    ),
    linear-gradient(
    180deg,
    #e3ebfb,
    #eef2ff
    );
}

body.glass .heroCard,
body.glass .quoteCard,
body.glass .ddayRow,
body.glass .todoItem,
body.glass .settingItem,
body.glass .modalSheet,
body.glass .header,
body.glass .bottomNav,
body.glass .headerButtons button,
body.glass .viewTabs,
body.glass .dateNav,
body.glass .todoAddRow input,
body.glass .rectTimetable,
body.glass .scheduleBlock,
body.glass .scheduleListItem,
body.glass .searchRow input,
body.glass .clockWrap,
body.glass .calendarDay,
body.glass .templateChip{
    backdrop-filter:blur(var(--card-blur)) saturate(180%);
    -webkit-backdrop-filter:blur(var(--card-blur)) saturate(180%);
    border:1px solid var(--border);
    box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.6);
}

body.glass .fab{
    box-shadow:
    0 18px 40px rgba(10,132,255,.35),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ===================================== */
/* LAYOUT                                 */
/* ===================================== */

.header{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    backdrop-filter:blur(var(--header-blur));
    background:var(--header-bg);
    border-bottom:1px solid var(--header-border);
    transition:background .3s ease, border-color .3s ease;
}

.logo{
    font-size:28px;
    font-weight:700;
    letter-spacing:-.5px;
}

.logo span{
    color:var(--blue);
}

.headerButtons{
    display:flex;
    gap:10px;
}

.headerButtons button{
    width:48px;
    height:48px;
    border-radius:var(--radius-sm);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow-sm);
    transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease);
    font-size:19px;
}

.headerButtons button:hover{
    box-shadow:var(--shadow);
}

.headerButtons button:active{
    transform:scale(.92);
    box-shadow:var(--shadow-sm);
}

main{
    max-width:760px;
    margin:auto;
    padding:22px;
}

.page{
    display:none;
}

.page.active{
    display:block;
    animation:pageIn var(--dur) var(--ease-out);
}

@keyframes pageIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:none; }
}

@keyframes fade{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:none; }
}

/* ===================================== */
/* HOME - HERO / CLOCK / WEATHER          */
/* ===================================== */

.heroCard{
    padding:30px;
    border-radius:var(--radius-xl);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
    transform-style:preserve-3d;
    will-change:transform;
}

.today{
    color:var(--sub);
    margin-bottom:6px;
    font-size:15px;
    font-weight:600;
    letter-spacing:-.1px;
}

.heroClock{
    font-size:56px;
    font-weight:700;
    letter-spacing:-1.5px;
    margin:4px 0 22px;
    font-variant-numeric:tabular-nums;
}

.heroClock span{
    font-size:22px;
    font-weight:600;
    color:var(--sub);
    margin-left:8px;
}

.weatherRow{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--surface-alt);
    border-radius:var(--radius);
    padding:16px 18px;
    transition:background var(--dur) var(--ease);
}

.weatherEmoji{
    font-size:32px;
}

.weatherTemp{
    font-size:22px;
    font-weight:700;
}

.weatherDesc{
    color:var(--sub);
    font-size:13px;
}

.weatherLoc{
    margin-left:auto;
    color:var(--sub);
    font-size:13px;
    text-align:right;
}

/* ===================================== */
/* HOME - DDAY                            */
/* ===================================== */

.sectionHead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:26px 0 14px;
}

.sectionHead h3{
    font-size:18px;
    font-weight:700;
}

.sectionAddButton{
    width:34px;
    height:34px;
    border-radius:var(--radius-xs);
    background:var(--card);
    box-shadow:var(--shadow);
    font-size:18px;
    color:var(--blue);
}

.ddayHeaderButton{
    width:auto !important;
    padding:0 16px !important;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px !important;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
}

.ddayListWrap{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:50vh;
    overflow-y:auto;
    margin-bottom:6px;
}

.ddayRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 18px;
    border-radius:var(--radius);
    background:var(--surface-alt);
    transition:.2s var(--ease);
}

.ddayRow:active{
    transform:scale(.98);
}

.ddayRow .ddayRowName{
    font-size:14px;
    font-weight:600;
}

.ddayRow .ddayRowDate{
    font-size:12px;
    color:var(--sub);
    margin-top:3px;
}

.ddayRow .ddayRowNum{
    font-size:17px;
    font-weight:800;
    color:var(--blue);
}

.ddayEmpty,
.todoEmpty,
.scheduleEmpty{
    padding:30px 10px;
    text-align:center;
    color:var(--sub);
    font-size:14px;
}

/* ===================================== */
/* HOME - QUOTE                           */
/* ===================================== */

.quoteCard{
    margin-top:26px;
    padding:26px;
    border-radius:var(--radius-lg);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
    transform-style:preserve-3d;
    will-change:transform;
}

.quoteCardHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.quoteCardHeader h3{
    font-size:16px;
    font-weight:700;
    color:var(--sub);
}

.quoteAddButton{
    width:30px;
    height:30px;
    border-radius:var(--radius-xs);
    background:var(--surface-alt);
    color:var(--blue);
    font-size:16px;
    font-weight:700;
}

#todayQuote{
    font-size:18px;
    font-weight:600;
    line-height:1.5;
}

.motivateButton{
    margin-top:18px;
    width:100%;
    height:52px;
    border-radius:var(--radius);
    background:linear-gradient(135deg,var(--blue),#5CB6FF);
    color:#fff;
    font-weight:700;
    font-size:15px;
    box-shadow:0 14px 30px rgba(10,132,255,.28);
    transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease);
}

@media (hover:hover) and (pointer:fine){
    .motivateButton:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 36px rgba(10,132,255,.32);
    }
}

.motivateButton:active{
    transform:scale(.97);
    box-shadow:0 10px 22px rgba(10,132,255,.26);
}

/* ===================================== */
/* SCHEDULE PAGE - HEADER CONTROLS        */
/* ===================================== */

.pageTitle{
    font-size:26px;
    font-weight:800;
    margin-bottom:18px;
}

.viewTabs{
    display:flex;
    gap:6px;
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    border-radius:var(--radius);
    padding:6px;
    box-shadow:var(--shadow);
    margin-bottom:18px;
}

.viewTab{
    flex:1;
    padding:10px 4px;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:600;
    color:var(--sub);
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-spring);
    text-align:center;
}

.viewTab.active{
    background:var(--blue);
    color:#fff;
}

.viewTab:active{
    transform:scale(.95);
}

.viewTab:disabled{
    opacity:.4;
}

.dateNav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    border-radius:var(--radius);
    padding:14px 18px;
    box-shadow:var(--shadow);
    margin-bottom:20px;
}

.dateNavArrow{
    width:38px;
    height:38px;
    border-radius:var(--radius-xs);
    background:var(--surface-alt);
    font-size:16px;
    font-weight:700;
    color:var(--text);
    transition:transform var(--dur-fast) var(--ease-spring), background var(--dur) var(--ease);
}

.dateNavArrow:active{
    transform:scale(.9);
    background:var(--secondary-btn);
}

.dateNavLabel{
    font-size:16px;
    font-weight:700;
    text-align:center;
}

.dateNavLabel small{
    display:block;
    font-weight:500;
    color:var(--sub);
    font-size:12px;
    margin-top:2px;
}

.dateNavToday{
    display:block;
    margin:0 auto 16px;
    font-size:12px;
    font-weight:700;
    color:var(--blue);
    background:var(--surface-alt);
    padding:8px 12px;
    border-radius:var(--radius-xs);
}

/* ===================================== */
/* RECTANGULAR (VERTICAL) TIMETABLE       */
/* ===================================== */

.rectTimetable{
    position:relative;
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:14px 6px;
}

/* ----- 주간(월~일) 그리드 -----
   JS(renderRectTimetable)가 화면 높이에 맞춰 시간당 픽셀 높이를 계산해서
   weekHourGutter / weekDayCol 의 높이와 각 블록의 top/height를 인라인 스타일로 지정합니다.
   그리드 칸 배치도 JS에서 gridColumn/gridRow를 직접 지정해 요일이 밀리는 문제를 방지합니다. */

.weekGrid{
    display:grid;
    grid-template-columns:34px repeat(7, minmax(0, 1fr));
    grid-template-rows:auto 1fr;
    width:100%;
    box-sizing:border-box;
    background:var(--surface);
    border-radius:var(--radius);
    padding:8px 3px;
}

.weekCorner{
    grid-column:1;
    grid-row:1;
}

.weekDayHead{
    grid-row:1;
    text-align:center;
    padding-bottom:6px;
    font-size:10px;
    font-weight:700;
    color:var(--sub);
    overflow:hidden;
    min-width:0;
}

.weekDayHead .weekDayNum{
    display:block;
    font-size:10px;
    margin-top:2px;
}

.weekDayHead.today{
    color:var(--blue);
}

.weekDayHead.sunday{
    color:var(--red);
}

.weekDayHead.saturday{
    color:var(--blue);
}

.weekDayHead.today.sunday,
.weekDayHead.today.saturday{
    color:var(--blue);
}

.weekDayHead.today .weekDayNum{
    display:block;
    width:18px;
    height:18px;
    line-height:18px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    margin:2px auto 0;
    font-size:9px;
}

.weekHourGutter{
    grid-column:1;
    grid-row:2;
    position:relative;
}

.weekHourLabel{
    position:absolute;
    right:2px;
    top:0;
    transform:translateY(+100%);
    font-size:6.5px;
    color:var(--sub);
    white-space:nowrap;
    line-height:1;
}

.weekDayCol{
    grid-row:2;
    position:relative;
    min-width:0;
    border-left:1px solid var(--border);
    background-image:radial-gradient(
        circle,
        color-mix(in srgb, var(--text) 16%, transparent) 0.6px,
        transparent 1px
    );
    background-size:6px var(--row-height, 40px);
    background-position:0 0;
    background-repeat:repeat;
}

.weekDayCol.today{
    background-color:var(--today-tint);
}

.weekNowLine{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:var(--red);
    z-index:2;
}

.weekNowLine::before{
    content:"";
    position:absolute;
    left:-3px;
    top:-3px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--red);
}

.clockNowLine{
    stroke:var(--red);
    stroke-width:2;
    stroke-linecap:round;
    pointer-events:none;
}

.clockNowDot{
    fill:var(--red);
    stroke:var(--surface);
    stroke-width:1.5;
    pointer-events:none;
}

.scheduleBlock{
    position:absolute;
    left:1px;
    right:1px;
    border-radius:8px;
    padding:2px 4px;
    background:var(--block-color, var(--blue));
    color:#fff;
    box-shadow:0 3px 8px rgba(0,0,0,.12);
    transition:.15s var(--ease);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.scheduleBlock:active{
    transform:scale(.97);
}

.scheduleBlock:hover{
    z-index:15;
}

.scheduleBlock .sbTitle{
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.25;
    width:100%;
    min-width:0;
    text-align:center;
}

.scheduleBlock.tiny .sbTitle{
    font-size:8px;
}

/* ----- 일정 호버 툴팁 (이름 + 시간) ----- */

.sbTooltip{
    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px);
    background:rgba(24,24,28,.92);
    color:#fff;
    padding:8px 12px;
    border-radius:var(--radius-xs);
    font-size:11px;
    line-height:1.4;
    white-space:nowrap;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:30;
}

.sbTooltip::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:rgba(24,24,28,.92);
}

.scheduleBlock:hover .sbTooltip{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.sbTooltipTitle{
    font-weight:700;
    margin-bottom:4px;
}

.sbTooltipTime{
    display:flex;
    align-items:center;
    gap:6px;
    opacity:.9;
}

.sbTooltipDot{
    width:8px;
    height:8px;
    border-radius:2px;
    flex-shrink:0;
    background:var(--dot-color, #fff);
}

@media (min-width:640px){
    .weekGrid{
        grid-template-columns:44px repeat(7, minmax(0, 1fr));
        padding:10px 6px;
    }
    .weekDayHead{
        font-size:12px;
        padding-bottom:8px;
    }
    .weekDayHead .weekDayNum{
        font-size:13px;
    }
    .weekDayHead.today .weekDayNum{
        width:24px;
        height:24px;
        line-height:24px;
        font-size:12px;
        margin:3px auto 0;
    }
    .weekHourLabel{
        font-size:9.5px;
        right:6px;
    }
    .scheduleBlock{
        left:3px;
        right:3px;
        padding:4px 8px;
        border-radius:var(--radius-xs);
    }
    .scheduleBlock .sbTitle{
        font-size:12px;
    }
}

/* ===================================== */
/* LIST VIEW                              */
/* ===================================== */

.scheduleListWrap{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.scheduleListItem{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:var(--radius);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}

@media (hover:hover) and (pointer:fine){
    .scheduleListItem:hover{
        transform:translateY(-2px);
        box-shadow:var(--shadow);
    }
}

.scheduleListItem .sliBar{
    width:6px;
    align-self:stretch;
    border-radius:6px;
    background:var(--item-color, var(--blue));
    min-height:36px;
}

.scheduleListItem .sliBody{
    flex:1;
}

.scheduleListItem .sliTitle{
    font-size:15px;
    font-weight:700;
}

.scheduleListItem .sliTime{
    font-size:13px;
    color:var(--sub);
    margin-top:2px;
}

.scheduleListItem .sliMemo{
    font-size:12px;
    color:var(--sub);
    margin-top:4px;
}

/* ===================================== */
/* TODO PAGE                              */
/* ===================================== */

.todoAddRow{
    display:flex;
    gap:10px;
    margin-bottom:18px;
}

.todoAddRow input{
    flex:1;
    padding:16px;
    border-radius:var(--radius);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow);
    color:var(--text);
}

.todoAddRow button{
    width:52px;
    border-radius:var(--radius);
    background:var(--blue);
    color:#fff;
    font-size:22px;
    font-weight:700;
    transition:transform var(--dur-fast) var(--ease-spring);
}

.todoAddRow button:active{
    transform:scale(.92);
}

.todoList{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.todoItem{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:var(--radius);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}

@media (hover:hover) and (pointer:fine){
    .todoItem:hover{
        transform:translateY(-2px);
        box-shadow:var(--shadow);
    }
}

.todoCheck{
    width:26px;
    height:26px;
    border-radius:50%;
    border:2px solid var(--sub);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:transparent;
    font-size:14px;
    transition:.2s var(--ease);
}

.todoItem.done .todoCheck{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
}

.todoText{
    flex:1;
    font-size:15px;
    font-weight:500;
}

.todoItem.done .todoText{
    color:var(--sub);
    text-decoration:line-through;
}

.todoDelete{
    color:var(--sub);
    font-size:18px;
    padding:4px 6px;
}

/* ===================================== */
/* SETTINGS                               */
/* ===================================== */

.settingsList{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.settingItem{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-radius:var(--radius);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow);
    color:var(--text);
    transition:.25s var(--ease);
}

@media (hover:hover) and (pointer:fine){
    .settingItem:hover{
        transform:translateY(-2px);
    }
}

.settingItem.disabled{
    opacity:.55;
    pointer-events:none;
}

.driveStatusWrap{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.driveStatusWrap small{
    color:var(--sub);
    font-size:11px;
    margin-top:2px;
}

.themeSettingItem{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    cursor:default;
}

.themeSettingItem > span{
    font-weight:600;
}

.themeOptions{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.themeOption{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:12px 6px;
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    color:var(--sub);
    font-size:12px;
    font-weight:600;
    transition:.2s var(--ease);
    border:2px solid transparent;
}

@media (hover:hover) and (pointer:fine){
    .themeOption:hover{
        transform:translateY(-2px);
    }
}

.themeOption.active{
    color:var(--text);
    border-color:var(--blue);
    background:var(--surface);
}

.themeSwatch{
    width:40px;
    height:40px;
    border-radius:50%;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.themeSwatchDefault{
    background:linear-gradient(135deg,#ffffff,#f2f2f4 60%,#0A84FF);
}
.themeSwatchDark{
    background:linear-gradient(135deg,#1C1C1E,#000000 60%,#0A84FF);
}
.themeSwatchApple{
    background:linear-gradient(135deg,#5b5e62,#1c1d1f 60%,#8FA6B8);
}
.themeSwatchGlass{
    background:linear-gradient(135deg,#ffffff,#dbe6ff 60%,#0A84FF);
}

.metalDarkSettingItem{
    display:none;
}
.metalDarkSettingItem.show{
    display:flex;
}

.switchToggle{
    width:52px;
    height:30px;
    border-radius:var(--radius-sm);
    background:var(--secondary-btn);
    position:relative;
    transition:.25s var(--ease);
}

.switchToggle .switchKnob{
    position:absolute;
    top:3px;
    left:3px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    transition:left var(--dur) var(--ease-spring);
}

.switchToggle.on{
    background:var(--blue);
}

.switchToggle.on .switchKnob{
    left:25px;
}

.appInfo{
    text-align:center;
    margin-top:30px;
    color:var(--sub);
}

.appInfo h3{
    color:var(--text);
    margin-bottom:8px;
}

.appInfo p{
    font-size:13px;
    line-height:1.5;
}

/* ===================================== */
/* COLOR PICKER (schedule / dday)         */
/* ===================================== */

.colorPickRow{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.colorDot{
    width:34px;
    height:34px;
    border-radius:50%;
    border:3px solid transparent;
    flex-shrink:0;
}

.colorDot.active{
    border-color:var(--text);
}

.presetRow{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    margin-bottom:6px;
}

.presetChip{
    flex-shrink:0;
    padding:8px 14px;
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    font-size:12px;
    font-weight:600;
    color:var(--sub);
}

.presetChip.active{
    background:var(--blue);
    color:#fff;
}

.customColorLabel{
    display:block;
    margin-top:14px;
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    color:var(--sub);
}

.customColorRow{
    display:flex;
    align-items:center;
    gap:10px;
}

.customColorRow input[type="color"]{
    -webkit-appearance:none;
    appearance:none;
    width:44px;
    height:44px;
    flex-shrink:0;
    border:none;
    border-radius:var(--radius-sm);
    padding:0;
    background:var(--surface-alt);
    cursor:pointer;
}

.customColorRow input[type="color"]::-webkit-color-swatch-wrapper{
    padding:4px;
}

.customColorRow input[type="color"]::-webkit-color-swatch{
    border:none;
    border-radius:var(--radius-xs);
}

.customColorRow input[type="text"]{
    flex:1;
    height:44px;
    padding:0 14px;
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
}

/* ===================================== */
/* FAB                                    */
/* ===================================== */

.fab{
    position:fixed;
    right:22px;
    bottom:95px;
    width:68px;
    height:68px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blue),#5CB6FF);
    color:white;
    font-size:36px;
    font-weight:300;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 40px rgba(10,132,255,.32);
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
    z-index:900;
}

@media (hover:hover) and (pointer:fine){
    .fab:hover{
        transform:translateY(-3px);
        box-shadow:0 22px 46px rgba(10,132,255,.38);
    }
}

.fab:active{
    transform:scale(.92);
}

/* ===================================== */
/* MODAL                                  */
/* ===================================== */

.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:flex-end;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(12px);
    z-index:1000;
}

.modal.show{
    display:flex;
    animation:fade var(--dur) var(--ease);
}

.modalSheet{
    position:relative;
    width:100%;
    max-width:760px;
    max-height:90vh;
    overflow:auto;
    background:var(--surface);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:44px 28px 28px;
    animation:slideUp var(--dur-slow) var(--ease-out);
}

.sheetCloseButton{
    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);
    width:56px;
    height:24px;
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    color:var(--sub);
    font-size:16px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    transition:transform .15s ease;
}

.sheetCloseButton:active{
    transform:translateX(-50%) scale(.92);
}

@keyframes slideUp{
    from{ transform:translateY(100%); opacity:.4; }
    to{ transform:translateY(0); opacity:1; }
}

.sheetHeader{
    margin-bottom:24px;
}

.sheetHeader h2{
    font-size:22px;
}

.inputGroup{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
    min-width:0;
}

.inputGroup label{
    font-size:14px;
    font-weight:600;
    color:var(--sub);
}

.inputGroup input,
.inputGroup textarea,
.inputGroup select{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:16px;
    border-radius:var(--radius);
    background:var(--surface-alt);
    color:var(--text);
}

.inputGroup input[type="time"],
.inputGroup input[type="date"]{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:16px 8px;
    font-size:15px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.doubleRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    min-width:0;
}

.doubleRow .inputGroup input[type="time"]{
    padding-left:4px;
    padding-right:4px;
    font-size:14px;
}

.modalButtons{
    display:flex;
    gap:12px;
    margin-top:24px;
}

.deleteRow{
    margin-top:10px;
}

.primaryButton,
.secondaryButton{
    flex:1;
    height:54px;
    border-radius:var(--radius);
    font-weight:700;
    transition:transform var(--dur-fast) var(--ease-spring), opacity var(--dur) var(--ease);
}

.primaryButton{
    background:var(--blue);
    color:white;
}

.secondaryButton{
    background:var(--secondary-btn);
    color:var(--text);
}

.primaryButton:active,
.secondaryButton:active{
    transform:scale(.97);
}

.dangerButton{
    width:100%;
    height:48px;
    border-radius:var(--radius);
    font-weight:700;
    background:transparent;
    color:var(--red);
    transition:transform var(--dur-fast) var(--ease-spring), background var(--dur) var(--ease);
}

.dangerButton:active{
    transform:scale(.97);
    background:var(--surface-alt);
}

/* ===================================== */
/* BOTTOM NAV                             */
/* ===================================== */

.bottomNav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:16px;
    width:calc(100% - 28px);
    max-width:760px;
    height:74px;
    display:flex;
    justify-content:space-around;
    align-items:center;
    border-radius:26px;
    background:var(--nav-bg);
    backdrop-filter:blur(var(--nav-blur));
    box-shadow:var(--shadow);
    z-index:800;
    opacity:1;
    touch-action:none;
    transition:background .3s ease, transform .3s ease, opacity .3s ease;
}

body.uiHidden .bottomNav{
    transform:translate(-50%, 160px);
    opacity:0;
    pointer-events:none;
}

body.uiHidden .fab{
    transform:translateY(160px);
    opacity:0;
    pointer-events:none;
}

.navHandle{
    position:absolute;
    top:6px;
    left:50%;
    transform:translateX(-50%);
    width:36px;
    height:4px;
    border-radius:3px;
    background:var(--sub);
    opacity:.35;
}

.restoreHandle{
    position:fixed;
    left:50%;
    bottom:10px;
    transform:translate(-50%, 40px);
    width:52px;
    height:20px;
    border-radius:var(--radius-xs);
    background:var(--nav-bg);
    backdrop-filter:blur(var(--nav-blur));
    box-shadow:var(--shadow);
    z-index:800;
    opacity:0;
    pointer-events:none;
    touch-action:none;
    transition:transform .3s ease, opacity .3s ease;
}

.restoreHandle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:28px;
    height:4px;
    border-radius:3px;
    background:var(--sub);
    opacity:.5;
}

body.uiHidden .restoreHandle{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, 0);
}

.navButton{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:var(--sub);
    transition:.25s var(--ease);
}

.navButton .navIcon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.navButton .navIcon svg{
    width:100%;
    height:100%;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.navButton.active{
    color:var(--blue);
}

.navButton small{
    font-size:11px;
    font-weight:600;
}

/* ===================================== */
/* TOAST                                  */
/* ===================================== */

.toastContainer{
    position:fixed;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:2000;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    width:100%;
    padding:0 20px;
}

.toast{
    background:var(--surface);
    color:var(--text);
    padding:14px 20px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    font-size:14px;
    max-width:420px;
    display:flex;
    gap:8px;
    align-items:center;
    animation:toastIn var(--dur) var(--ease-out);
}

@keyframes toastIn{
    from{ opacity:0; transform:translateY(-10px) scale(.96); }
    to{ opacity:1; transform:none; }
}

.hidden{
    display:none !important;
}

/* ===================================== */
/* RESPONSIVE                             */
/* ===================================== */

@media (max-width:640px){
    .heroClock{
        font-size:42px;
    }
    .doubleRow{
        grid-template-columns:1fr;
    }
    .themeOptions{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* =======================================================
   TimeRoutine App v0.2 (2단계) — 추가 스타일
======================================================= */

.scheduleHeadRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.scheduleHeadRow .pageTitle{
    margin-bottom:0;
}

.searchRow{
    margin-bottom:12px;
    display:flex;
    gap:10px;
}

.searchRow input{
    flex:1;
    width:auto;
    padding:14px 16px;
    border-radius:var(--radius-sm);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow);
    color:var(--text);
}

.searchAddButton{
    flex-shrink:0;
    width:48px;
    border-radius:var(--radius-sm);
    background:var(--blue);
    color:#fff;
    font-size:22px;
    font-weight:700;
    box-shadow:var(--shadow-sm);
    transition:transform var(--dur-fast) var(--ease-spring);
}

.searchAddButton:active{
    transform:scale(.92);
}

/* ----- 태그 / 반복요일 선택 (일정 모달) ----- */

.tagPickRow,
.weekdayPickRow{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.weekdayPickRow{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
}

.tagPickRow button,
.weekdayPickRow button{
    padding:10px 0;
    text-align:center;
    border-radius:var(--radius-xs);
    background:var(--surface-alt);
    color:var(--sub);
    font-size:13px;
    font-weight:600;
}

.tagPickRow button{
    padding:9px 14px;
}

.tagPickRow button.active,
.weekdayPickRow button.active{
    background:var(--blue);
    color:#fff;
}

.completeButton{
    width:100%;
    height:50px;
    border-radius:var(--radius);
    font-weight:700;
    background:var(--surface-alt);
    color:var(--green);
}

/* ===================================== */
/* 원형 시간표                             */
/* ===================================== */

.clockWrap{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:56px 24px;
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    overflow:visible;
}

.clockTooltip{
    position:absolute;
    left:0;
    top:0;
    transform:translate(-50%, -100%) translateY(-10px);
    background:rgba(24,24,28,.92);
    color:#fff;
    padding:8px 12px;
    border-radius:var(--radius-xs);
    font-size:11px;
    line-height:1.4;
    white-space:nowrap;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease);
    z-index:30;
}

.clockTooltip.show{
    opacity:1;
}

.clockTooltip::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:rgba(24,24,28,.92);
}

#circleView{
    overflow:visible;
}

#clockSvg{
    display:block;
    width:100%;
    max-width:340px;
    height:auto;
    aspect-ratio:1/1;
    margin:0 auto;
    overflow:visible;
}

.clockArc{
    cursor:pointer;
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    transform-origin:center;
}

.clockArc:hover{
    opacity:.88;
}

.clockArc:active{
    opacity:.7;
}

.clockArcLabel{
    font-size:9.5px;
    font-weight:700;
    fill:#fff;
    pointer-events:none;
    paint-order:stroke;
    stroke:rgba(0,0,0,.25);
    stroke-width:2px;
    stroke-linejoin:round;
}

.clockLabel{
    font-size:9px;
    fill:var(--sub);
}

.clockCenterLabel{
    font-size:13px;
    font-weight:700;
    fill:var(--text);
}

/* ===================================== */
/* 달력 뷰                                 */
/* ===================================== */

#calendarView{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    box-sizing:border-box;
}

.calendarHeadRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.calendarWeekRow{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    text-align:center;
    font-size:11px;
    color:var(--sub);
    margin-bottom:6px;
    width:100%;
}

.calendarGrid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:6px;
    margin-bottom:10px;
    width:100%;
}

.calendarDay{
    aspect-ratio:1;
    min-width:0;
    max-width:100%;
    border-radius:var(--radius-xs);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:12px;
    color:var(--text);
    transition:transform var(--dur-fast) var(--ease-spring), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    overflow:hidden;
}

.calendarDay:active{
    transform:scale(.93);
}

.calendarDay.otherMonth{
    opacity:.3;
}

.calendarDay.today{
    box-shadow:inset 0 0 0 2px var(--blue);
    font-weight:700;
}

.calendarDay.selected{
    background:var(--blue);
    color:#fff;
    border-color:transparent;
}

.calendarDots{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2px;
    max-width:100%;
}

.calendarDot{
    width:5px;
    height:5px;
    border-radius:50%;
}

/* ===================================== */
/* 템플릿                                  */
/* ===================================== */

.templateSection{
    margin-top:24px;
}

.templateChipRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.templateChip{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:var(--radius-sm);
    background:var(--card);
    backdrop-filter:blur(var(--card-blur));
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
    font-size:13px;
    font-weight:600;
    transition:transform var(--dur-fast) var(--ease-spring);
}

.templateChip:active{
    transform:scale(.96);
}

.templateChip .tplDelete{
    color:var(--red);
    font-size:14px;
}

.templateEmpty{
    color:var(--sub);
    font-size:13px;
    padding:6px 2px;
}

/* ===================================== */
/* 완료 / 사진 기록 모달                     */
/* ===================================== */

.celebrateHeader{
    text-align:center;
}

.celebrateEmoji{
    font-size:44px;
    margin-bottom:8px;
}

.celebrateSub{
    color:var(--sub);
    font-size:13px;
    margin-top:6px;
}

.photoUpload{
    display:block;
    border-radius:var(--radius);
    background:var(--surface-alt);
    padding:20px;
    text-align:center;
    cursor:pointer;
}

.photoPlaceholder span{
    font-size:30px;
    display:block;
    margin-bottom:8px;
}

.photoPlaceholder p{
    font-size:13px;
    color:var(--sub);
}

.photoPreview{
    width:100%;
    max-height:260px;
    object-fit:cover;
    border-radius:var(--radius);
}

.photoViewModal .photoViewContent{
    width:100%;
    max-width:520px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:20px;
    text-align:center;
    position:relative;
}

.photoViewContent img{
    width:100%;
    border-radius:var(--radius);
    margin-bottom:14px;
}

.photoViewClose{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:16px;
}

.photoActionButton{
    width:100%;
    height:48px;
    border-radius:var(--radius-sm);
    font-weight:700;
}

.photoActionButton.delete{
    background:var(--surface-alt);
    color:var(--red);
}

/* ----- 완료 표시 (일정 블록 / 리스트) ----- */

.scheduleBlock.completed{
    opacity:.5;
}

.scheduleCheckBtn{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--surface-alt);
    font-size:15px;
    flex-shrink:0;
    color:var(--sub);
}

.scheduleCheckBtn.done{
    background:var(--green);
    color:#fff;
}

.scheduleThumb{
    width:32px;
    height:32px;
    border-radius:var(--radius-xs);
    object-fit:cover;
    flex-shrink:0;
}

@media (max-width:640px){
    .viewTabs{
        flex-wrap:wrap;
    }
    .viewTab{
        flex:1 1 45%;
    }
}

/* ===================================== */
/* WELCOME / INSTALL GUIDE                */
/* ===================================== */

.welcomeHeader{
    text-align:center;
}

.welcomeEmoji{
    font-size:44px;
    margin-bottom:8px;
}

.welcomeSub{
    color:var(--sub);
    margin-top:8px;
    line-height:1.6;
}

.installGuide{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:24px;
}

.installStep{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px;
    border-radius:var(--radius);
    background:var(--surface-alt);
}

.installStepNum{
    flex-shrink:0;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--blue);
    color:white;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.installStepText strong{
    display:block;
    margin-bottom:4px;
    font-size:15px;
}

.installStepText p{
    color:var(--sub);
    font-size:13px;
    line-height:1.6;
}

.installIcon{
    font-weight:700;
}

.welcomeDriveNote{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    padding:14px 16px;
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    color:var(--sub);
    font-size:13px;
    line-height:1.5;
}

.welcomeDriveIcon{
    font-size:16px;
    flex-shrink:0;
    line-height:1.4;
}

/* =======================================================
   TimeRoutine App v0.3 — 마이크로 인터랙션 / 3D 인터랙션
   (기능·로직에는 영향 없는 순수 시각 레이어)
======================================================= */

/* ----- 접근성: 키보드 포커스 링 ----- */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.navButton:focus-visible,
[role="switch"]:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
}

.inputGroup input:focus,
.inputGroup textarea:focus,
.searchRow input:focus,
.todoAddRow input:focus{
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
    transition:box-shadow var(--dur) var(--ease);
}

/* ----- 카드 3D 틸트 (포인터 위치에 따른 미세한 기울임) -----
   interactions.js 가 --tilt-x / --tilt-y 커스텀 프로퍼티를 갱신합니다.
   JS가 없거나 저사양/축소된 모션 환경이면 변수가 비어 있어 아무 효과도 없습니다. */

.tiltCard{
    --tilt-x:0deg;
    --tilt-y:0deg;
    perspective:900px;
    transform:
        perspective(900px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y));
}

@media (hover:none){
    .tiltCard{
        transform:none;
    }
}

/* ----- 버튼 리플 (터치 지점에서 은은하게 퍼지는 효과) -----
   interactions.js 가 클릭 시 .rippleDot span 을 생성해 붙입니다. */

.rippleHost{
    overflow:hidden;
}

.rippleHost.rippleNeedsPosition{
    position:relative;
}

.rippleDot{
    position:absolute;
    width:10px;
    height:10px;
    margin:-5px 0 0 -5px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    pointer-events:none;
    transform:scale(0);
    opacity:.6;
    animation:rippleOut .5s var(--ease-out) forwards;
}

body.apple .rippleDot,
.secondaryButton .rippleDot,
.themeOption .rippleDot,
.settingItem .rippleDot,
.dateNavArrow .rippleDot,
.viewTab .rippleDot{
    background:rgba(0,0,0,.08);
}

@keyframes rippleOut{
    to{
        transform:scale(18);
        opacity:0;
    }
}

/* ----- 스켈레톤 로딩 (데이터 대기 중 표시용 유틸리티) ----- */

.skeleton{
    position:relative;
    overflow:hidden;
    background:var(--surface-alt);
    color:transparent !important;
    border-radius:var(--radius-sm);
}

.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        100deg,
        transparent 30%,
        color-mix(in srgb, var(--text) 8%, transparent) 50%,
        transparent 70%
    );
    animation:skeletonSweep 1.4s ease-in-out infinite;
}

@keyframes skeletonSweep{
    from{ transform:translateX(-100%); }
    to{ transform:translateX(100%); }
}

/* ----- 당겨서 새로고침 느낌의 부드러운 저항감 (홈 히어로 카드) ----- */

.heroCard,
.quoteCard{
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease);
}