*, *::before, *::after {
  box-sizing: border-box;
}

@font-face{
  font-family:"DSEG7";
  src:
    url("https://cdnjs.cloudflare.com/ajax/libs/dseg/0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
}

:root{
  --bg:#12161C;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.16);

  --btn:rgba(255,255,255,.10);
  --btn-fg:#ffffff;
  --ring:0 0 0 2px rgba(255,255,255,.25);

  --modal-bg:#171b21;
  --modal-card:rgba(255,255,255,.055);
  --modal-hover:rgba(255,255,255,.095);
  --modal-border:rgba(255,255,255,.13);

  --wallpaper-darkness:.28;

  --font-dseg:"DSEG7", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
              Roboto, "Noto Sans KR", Arial, sans-serif;

  --font-system:ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Apple SD Gothic Neo", "Noto Sans KR",
                Arial, "Helvetica Neue", sans-serif;

  --font-orbitron:"Orbitron", ui-monospace, SFMono-Regular, Menlo,
                   Monaco, Consolas, "Liberation Mono",
                   "Courier New", monospace;

  --font-poiret:"Poiret One", var(--font-system);
  --font-oooh:"Oooh Baby", var(--font-system);

  --font-clock:var(--font-dseg);

  --clock-shift-y:-32px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

html.theme-light{
  --bg:#FAF9F9;
  --fg:#3b3f46;
  --muted:rgba(43,47,54,.66);
  --line:rgba(43,47,54,.16);

  --btn:rgba(0,0,0,.06);
  --btn-fg:#2b2f36;
  --ring:0 0 0 2px rgba(59,108,255,.25);

  --modal-bg:#ffffff;
  --modal-card:#f6f6f7;
  --modal-hover:#eeeeef;
  --modal-border:rgba(43,47,54,.13);
}

html.theme-light .mode-toggle{
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.12);
}

html.theme-light .mode-btn{
  background:transparent;
  border:0;
  color:#4c4d4f;
  opacity:.7;
}

html.theme-light .mode-btn.active{
  background:rgba(0,0,0,.12);
  color:#2b2f36;
  opacity:1;
}

/* 배경 이미지 사용 시 시계와 메뉴 가독성 유지 */
html.has-wallpaper{
  --fg:#ffffff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.24);
  --btn:rgba(18,22,28,.42);
  --btn-fg:#ffffff;
  --modal-bg:rgba(20,24,30,.96);
  --modal-card:rgba(255,255,255,.08);
  --modal-hover:rgba(255,255,255,.14);
  --modal-border:rgba(255,255,255,.17);
}

html.has-wallpaper .mode-toggle{
  background:rgba(18,22,28,.40);
  border-color:rgba(255,255,255,.18);
}

html.has-wallpaper .mode-btn,
html.has-wallpaper .mode-btn.active{
  color:#ffffff;
}

html.has-wallpaper .mode-btn.active{
  background:rgba(255,255,255,.19);
}

html.font-dseg{
  --font-clock:var(--font-dseg);
}

html.font-system{
  --font-clock:var(--font-system);
}

html.font-orbitron{
  --font-clock:var(--font-orbitron);
}

html.font-poiret{
  --font-clock:var(--font-poiret);
}

html.font-oooh{
  --font-clock:var(--font-oooh);
}

html,
body{
  height:100%;
}

body{
  margin:0;
  background-color:var(--bg);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--fg);
  font-family:var(--font-system);
  display:grid;
  place-items:center;
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:rgba(0,0,0,var(--wallpaper-darkness));
  opacity:0;
  transition:opacity .2s ease, background-color .2s ease;
}

html.has-wallpaper body::before{
  opacity:1;
}

body,
.clock-stack,
.time-wrap,
#timeText,
.ampm,
.bottom-ui,
.mode-toggle,
.mode-btn,
.controls,
.btn,
.menu,
.menu-item,
.digit-box,
.sep-box,
.city-modal,
.city-modal *,
.wallpaper-modal,
.wallpaper-modal *{
  font-style:normal !important;
}


/* =========================
   Wix 테마 수신 전 앱 숨김
========================= */

body:not([data-theme]){
  background-color:transparent;
}

body:not([data-theme]) > main,
body:not([data-theme]) > .world-clock,
body:not([data-theme]) > .city-modal,
body:not([data-theme]) > .wallpaper-modal{
  opacity:0;
}

body[data-theme] > main,
body[data-theme] > .world-clock,
body[data-theme] > .city-modal,
body[data-theme] > .wallpaper-modal{
  opacity:1;
}


/* =========================
   시계 영역
========================= */

.clock{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  transform:translateY(var(--clock-shift-y));
}

.clock-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:1180px;
  padding:0 18px;
}

.time-wrap{
  position:relative;
  display:inline-block;
  line-height:1;
  text-align:center;
  width:auto;
  max-width:100vw;
  padding:0 clamp(18px, 4.8vw, 64px);
}

#timeText{
  font-family:var(--font-clock);
  font-size:clamp(160px, 20vw, 200px);
  color:var(--fg);
  white-space:nowrap;
  text-shadow:0 4px 18px rgba(0,0,0,.18);
  display:inline-block;
}


/* 큰 시계 도시명 + 도시 변경 안내 */
.center-date-row{
  width:100%;
  padding-top:4px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75em;
  color:var(--fg);
}
.center-date-row .center-date{
  width:auto;
  padding-top:0;
  border-top:0;
}
.main-city-label{
  font-family:var(--font-system);
  font-size:clamp(12px, 2.2vw, 24px);
  font-weight:700;
  letter-spacing:.13em;
  color:var(--fg);
  opacity:.68;
  white-space:nowrap;
}
.main-city-label[hidden]{ display:none !important; }

.city-change-toast{
  position:fixed;
  left:50%;
  top:calc(50% + 145px);
  z-index:190;
  transform:translate(-50%, 8px);
  padding:8px 14px;
  border:1px solid var(--modal-border);
  border-radius:999px;
  background:var(--modal-bg);
  color:var(--fg);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  font-family:var(--font-system);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}
.city-change-toast.is-show{
  opacity:1;
  transform:translate(-50%, 0);
}

#timeText.is-boxed{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:0;
  letter-spacing:0;
}

.digit-box{
  display:inline-block;
  width:.85em;
  text-align:center;
}

.sep-box{
  display:inline-block;
  width:.45em;
  text-align:center;
  opacity:.95;
}

.ampm{
  position:absolute;
  right:1.7em;
  bottom:-1.8em;

  font-family:var(--font-clock);
  font-size:clamp(25px, 3vw, 70px);

  color:var(--fg);
  font-weight:600;
  letter-spacing:.04em;

  user-select:none;
  white-space:nowrap;

  line-height:1;
  opacity:.98;
}


/* =========================
   날짜 / 요일
========================= */

.center-info{
  margin-top:clamp(60px, 7.5vw, 85px);
  min-width:min(560px, 86vw);

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:7px;

  transition:
    opacity .25s ease,
    transform .25s ease,
    max-height .25s ease,
    margin-top .25s ease;

  overflow:hidden;
  max-height:90px;
}

.center-info.is-hidden{
  opacity:0;
  transform:translateY(-8px);
  max-height:0;
  margin-top:0;
  pointer-events:none;
}

.center-date{
  width:100%;

  padding-top:4px;
  border-top:1px solid var(--line);

  font-family:var(--font-system);
  font-size:clamp(12px, 2.2vw, 24px);
  font-weight:700;

  letter-spacing:.18em;

  color:var(--fg);
  opacity:.82;
}

.center-day{
  width:100%;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);

  font-family:var(--font-system);
  font-size:clamp(11px, 2vw, 20px);
  font-weight:700;

  letter-spacing:.24em;

  color:var(--fg);
  opacity:.72;
}


/* =========================
   세계 시계
========================= */

.world-clock{
  position:fixed;

  left:50%;
  bottom:calc(40px + var(--safe-b));
  transform:translateX(-50%);
  width:min(1890px, 99vw);

  display:grid;
  grid-template-columns:repeat(6, 1fr);

  align-items:center;
  z-index:45;
}

.city{
  min-width:30px;
  padding:0 20px;
  border-right:1px solid var(--line);
  text-align:center;
}

.city:last-child{
  border-right:0;
}

.city-name{
  font-family:var(--font-orbitron);
  font-size:clamp(14px, 1.4vw, 16px);
  font-weight:700;
  letter-spacing:.10em;

  color:var(--fg);
  opacity:.72;
  white-space:nowrap;
}

.city-name.is-los-angeles{
  transform:scaleX(.8);
}

.city-time{
  margin-top:10px;
  font-family:var(--font-clock);

  font-size:clamp(25px, 3.9vw, 43px);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--fg);

  white-space:nowrap;
}

.city-date{
  margin-top:7px;
  font-family:var(--font-system);

  font-size:clamp(10px, 1vw, 13px);
  font-weight:600;
  letter-spacing:.08em;

  color:var(--fg);
  opacity:.52;

  white-space:nowrap;
}

.city-ampm{
  font-size:.48em;
  margin-left:.18em;
  opacity:.72;
  letter-spacing:.12em;
}

html.simple-layout .world-clock{
  display:none;
}


/* =========================
   하단 UI
========================= */

.bottom-ui{
  position:relative;
  z-index:60;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:13px;
  margin-top:12px;
}


/* =========================
   기본 / 심플
========================= */

.mode-toggle{
  display:flex;
  align-items:center;

  gap:0;
  padding:2px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.mode-btn{
  min-width:60px;
  height:24px;

  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--btn-fg);
  opacity:.55;

  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.mode-btn.active{
  opacity:1;
  background:rgba(255,255,255,.18);
}


/* =========================
   설정 메뉴
========================= */

.controls{
  position:static;

  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;

  gap:8px;
  background:transparent;
  padding:0;

  align-items:center;
  justify-content:center;
  justify-items:center;
}

.btn{
  appearance:none;

  border:0;
  border-radius:10px;
  padding:5.5px 10px;

  font-size:12px;
  font-weight:700;

  background:var(--btn);
  color:var(--btn-fg);

  cursor:pointer;
  outline:none;

  white-space:nowrap;
}

.btn:focus-visible{
  box-shadow:var(--ring);
}

.btn-mobile-fs{
  display:none;
}

html.menu-hidden .controls{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

.sep{
  width:1px;
  height:20px;
  background:rgba(127,127,127,.25);
  margin:0 2px;
}

.dropdown{
  position:relative;
}

.menu{
  position:absolute;

  top:calc(100% + 7px);
  bottom:auto;

  left:50%;
  transform:translateX(-50%);

  display:flex;
  flex-wrap:nowrap;
  gap:8px;

  align-items:center;
  justify-content:center;

  background:transparent;
  padding:0;
  max-width:min(92vw, 760px);

  overflow-x:auto;
  overflow-y:hidden;

  -webkit-overflow-scrolling:touch;
  z-index:80;
  white-space:nowrap;
}

.menu[hidden]{
  display:none !important;
}

.menu .menu-item{
  background:var(--btn);
  color:var(--btn-fg);
  opacity:.7;

  border:0;
  border-radius:10px;

  padding:7px 12px;

  font-size:12px;
  font-weight:400;

  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
  text-align:center;
}

.menu .menu-item:focus-visible{
  box-shadow:var(--ring);
  outline:none;
}

.menu .menu-item:hover,
.menu .menu-item:active,
.menu .menu-item:focus-visible{
  opacity:1;
}

html.is-fullscreen .mode-toggle{
  display:flex !important;
}

/* 심플 모드에서는 메뉴 숨김 버튼 감춤 */
html.simple-layout .btn-menu-hide{
  display:none !important;
}


/* =========================
   도시 선택 팝업
========================= */

.city-modal[hidden]{
  display:none !important;
}

.city-modal{
  position:fixed;
  inset:0;

  z-index:200;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.city-modal-backdrop{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.62);

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.city-modal-panel{
  position:relative;
  width:min(620px, 94vw);
  max-height:min(760px, 88vh);

  overflow:auto;
  border:1px solid var(--modal-border);
  border-radius:16px;

  background:var(--modal-bg);
  color:var(--fg);
  box-shadow:0 24px 80px rgba(0,0,0,.32);
  padding:14px 18px;
}

.city-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.city-modal-title{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.02em;
}

.city-modal-close{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:10px;

  background:var(--modal-card);
  color:var(--fg);

  cursor:pointer;

  font-size:20px;
  line-height:1;
}

.city-section + .city-section{
  margin-top:22px;
}

.city-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.city-section-title strong{
  font-size:14px;
}

.city-section-title span{
  font-size:12px;
  color:var(--muted);
}

.main-city-select{
  width:100%;
  height:44px;

  padding:0 13px;

  border:1px solid var(--modal-border);
  border-radius:12px;

  background:var(--modal-card);
  color:var(--fg);

  font:inherit;
  font-size:14px;
  outline:none;
}

.main-city-select:focus{
  box-shadow:var(--ring);
}

.main-city-select option{
  color:#222;
  background:#fff;
}

.small-city-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.city-check{
  position:relative;
  display:flex;
  align-items:center;

  gap:10px;
  min-height:43px;
  padding:6px 8px;

  border:1px solid var(--modal-border);
  border-radius:12px;

  background:var(--modal-card);
  cursor:pointer;
  user-select:none;
}

.city-check:hover{
  background:var(--modal-hover);
}

.city-check input{
  width:16px;
  height:16px;

  margin:0;
  accent-color:#6caeff;
  flex:0 0 auto;
}

.city-check-text{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:2px;
}

.city-check-name{
  font-size:13px;
  font-weight:700;

  line-height:1.15;
}

.city-check-country{
  font-size:11px;
  color:var(--muted);

  line-height:1.15;
}

.city-limit-note{
  min-height:18px;
  margin-top:9px;

  font-size:12px;
  color:var(--muted);
}

.city-limit-note.is-error{
  color:#ff7777;
}

.city-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:2px;
}

.city-action{
  min-width:78px;
  height:38px;

  border:0;
  border-radius:11px;

  background:var(--modal-card);
  color:var(--fg);

  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.city-action.primary{
  background:#dceeff;
  color:#28445f;
}

html:not(.theme-light) .city-action.primary{
  background:#dceeff;
  color:#20384f;
}



/* =========================
   배경화면 선택 팝업
========================= */

.wallpaper-modal[hidden]{
  display:none !important;
}

.wallpaper-modal{
  position:fixed;
  inset:0;
  z-index:210;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.wallpaper-modal .city-modal-panel{
  width:min(690px, 94vw);
}

.wallpaper-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.wallpaper-option{
  appearance:none;
  position:relative;
  min-height:92px;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:13px;
  padding:0;
  background:var(--modal-card);
  color:#fff;
  cursor:pointer;
  outline:none;
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px var(--modal-border);
}

.wallpaper-option::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,.05) 65%);
}

.wallpaper-option[data-wallpaper="default"]{
  background:
    linear-gradient(135deg, #fbfafa 0 50%, #0b0e12 50% 100%);
}

.wallpaper-option[data-wallpaper="default"]::before{
  background:rgba(0,0,0,.08);
}

.wallpaper-option.is-active{
  border-color:#87c7ff;
  box-shadow:
    0 0 0 2px rgba(135,199,255,.20),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.wallpaper-option-label{
  position:absolute;
  left:10px;
  right:10px;
  bottom:8px;
  z-index:2;
  text-align:left;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}

.wallpaper-option[data-wallpaper="default"] .wallpaper-option-label{
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

.wallpaper-upload-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.wallpaper-upload-btn{
  flex:0 0 auto;
  height:38px;
  padding:0 14px;
  border:1px solid var(--modal-border);
  border-radius:11px;
  background:var(--modal-card);
  color:var(--fg);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.wallpaper-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:var(--muted);
}

.wallpaper-range-wrap{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--modal-border);
}

.wallpaper-range-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}

.wallpaper-range-head strong{
  font-size:14px;
}

.wallpaper-range-value{
  font-size:12px;
  color:var(--muted);
}

.wallpaper-range{
  width:100%;
  accent-color:#7ec3ff;
  cursor:pointer;
}

.wallpaper-help{
  margin-top:7px;
  font-size:11px;
  line-height:1.55;
  color:var(--muted);
}

.wallpaper-status{
  min-height:18px;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

.wallpaper-status.is-error{
  color:#ff8585;
}

.wallpaper-status.is-working{
  color:#8ccfff;
}

@media (min-width:1700px){
  html:not(.is-fullscreen) .world-clock{
    bottom:calc(90px + var(--safe-b));
  }
}

@media (max-width:560px){
  .wallpaper-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .wallpaper-option{
    min-height:82px;
  }

  .wallpaper-upload-row{
    align-items:stretch;
    flex-direction:column;
  }

  .wallpaper-upload-btn{
    width:100%;
  }
}


/* =========================
   태블릿 이하
========================= */

@media (max-width:1024px){

  :root{
    --clock-shift-y:-24px;
  }

  .btn-desktop-fs{
    display:none;
  }

  .btn-mobile-fs{
    display:inline-block;
  }

  .time-wrap{
    padding:0 clamp(26px, 6.6vw, 92px);
  }

  #timeText{
    font-size:clamp(54px, 15.2vw, 136px);
  }

  .sep-box{
    width:.38em;
  }

  .world-clock{
    width:min(980px, 98vw);
    grid-template-columns:repeat(6, minmax(0, 1fr));
    bottom:calc(24px + var(--safe-b));
  }

  .city{
    padding:0 14px;
  }

  .bottom-ui{
    margin-top:11px;
  }
}


/* =========================
   태블릿 / 모바일 가로
========================= */

@media (max-width:1024px) and (orientation:landscape){

  :root{
    --clock-shift-y:-20px;
  }

  .bottom-ui{
    margin-top:8px;
    gap:8px;
  }

  #timeText{
    font-size:clamp(55px, 11vw, 100px);
  }

  .time-wrap{
    padding:0 clamp(24px, 5.8vw, 88px);
  }

  .dropdown .menu{
    bottom:auto;
    top:calc(100% + 10px);
  }

  .dropdown .menu .menu-item{
    font-size:11px;
    padding:3px 8px;
  }

  .center-info{
    margin-top:16px;
    gap:0;
  }

  .center-date-row{ padding-top:1px; }
  .center-date,
  .center-day{
    padding-top:0;
    padding-bottom:1px;
    font-size:clamp(11px, .9vw, 12px);
  }
  .main-city-label{ font-size:clamp(11px, .9vw, 12px); }

  .center-day{
    font-size:clamp(10px, .8vw, 11px);
  }

  .world-clock{
    width:min(980px, 98vw);
    grid-template-columns:repeat(6, minmax(0, 1fr));
    bottom:calc(10px + var(--safe-b));
  }

  .mode-btn{
    min-width:50px;
    height:18.5px;
    font-size:11px;
  }

  .mode-toggle{
    padding:0;
  }

  .btn{
    padding:4px 8px;

    font-size:10.3px;
    font-weight:600;
  }

  .city-name{
    font-size:10px;
  }

.city-name.is-los-angeles{
  transform:scaleX(.86);
}

  .city-time{
    margin-top:5px;
    font-size:clamp(14px, 6.8vw, 23px);
  }
}


/* =========================
   모바일 세로
========================= */

@media (max-width:560px) and (orientation:portrait){

  :root{
    --clock-shift-y:-42px;
  }

  .clock-stack{
    padding:0 10px;
  }

  .bottom-ui{
    margin-top:11px;
    gap:14px;
  }

  .mode-btn{
    min-width:60px;
    height:23px;

    font-size:12px;
  }

  .mode-toggle{
    padding:0;
  }

  .controls{
    display:grid;

    grid-template-columns:repeat(8, max-content);
    grid-template-rows:auto auto;

    column-gap:7px;
    row-gap:7px;

    justify-content:center;
    justify-items:center;

    width:auto;
  }

  .btn{
    padding:5px 7px;
    font-size:10.5px;
    font-weight:500;
  }

  .btn-theme{
    grid-column:1 / span 2;
    grid-row:1;
  }

  .btn-h12{
    grid-column:3 / span 2;
    grid-row:1;
  }

  .btn-city{
    grid-column:5 / span 2;
    grid-row:1;
  }

  .btn-date{
    grid-column:7 / span 2;
    grid-row:1;
  }

  .dropdown{
    grid-column:1 / span 2;
    grid-row:2;
  }

  .btn-wallpaper{
    grid-column:3 / span 2;
    grid-row:2;
  }

  .btn-mobile-fs{
    grid-column:5 / span 2;
    grid-row:2;
  }

  .btn-menu-hide{
    grid-column:7 / span 2;
    grid-row:2;
  }

  .sep{
    display:none;
  }

  .dropdown .menu{
    top:calc(100% + 12px);
    bottom:auto;

    width:min(400px, calc(100vw - 23px));
    max-width:none;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    overflow-x:hidden;
    overflow-y:visible;

    white-space:normal;
    left:calc(70% + 50px);
  }

  .dropdown .menu .menu-item{
    font-size:11px;
    padding:3px 8px;
  }

  .time-wrap{
    padding:0 clamp(28px, 8.8vw, 110px);
  }

  #timeText{
    font-size:clamp(54px, 14.8vw, 114px);
  }

  .center-info{
    margin-top:18px;
    gap:9px;
    min-width:min(330px, 88vw);
  }

  .center-date-row{
    padding-top:10px;
    gap:.55em;
  }
  .center-date{
    padding-top:0;
    font-size:clamp(14px, 3.7vw, 15px);
    letter-spacing:.14em;
  }
  .main-city-label{
    font-size:clamp(11px, 3.0vw, 13px);
    letter-spacing:.10em;
  }
  .city-change-toast{
    top:calc(50% + 125px);
    font-size:12px;
    padding:7px 12px;
  }

  .center-day{
    padding-bottom:10px;
    font-size:clamp(11px, 3.1vw, 13px);
    letter-spacing:.18em;
  }

  .world-clock{
    left:50%;
    bottom:calc(17px + var(--safe-b));
    width:min(390px, 96vw);
    grid-template-columns:repeat(3, minmax(0, 1fr));
    row-gap:18px;
  }

  .city{
    border-right:0;
    padding:0 8px;
  }

  .city:not(:nth-child(3n)){
    border-right:1px solid var(--line);
  }

  .city-name{
    font-size:10px;
  }

.city-name.is-los-angeles{
  transform:scaleX(.8);
}

  .city-time{
    margin-top:7px;
    font-size:clamp(15px, 6.7vw, 22px);
  }

  .city-date{
    margin-top:4px;
    font-size:10px;
  }

  .city-modal-panel{
    padding:18px 15px;
    border-radius:18px;
  }

  .small-city-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  .city-check{
    min-height:38px;
    padding:5px 7px;
    gap:7px;
  }

  .city-check-name{
    font-size:12px;
  }

  .city-check-country{
    font-size:10px;
  }
}

@media (max-width:420px){
  .btn{
    padding:5px 6px;
    font-size:10px;
  }

  .time-wrap{
    padding:0 clamp(26px, 9vw, 104px);
  }

  #timeText{
    font-size:clamp(54px, 14.2vw, 108px);
  }
}

/* =========================
   세로 높이가 짧은 화면 보정
========================= */

@media (max-height:760px){
  .center-info{
    margin-top:clamp(28px, 4.2vw, 46px);
    gap:4px;
  }

  .bottom-ui{
    margin-top:8px;
    gap:8px;
  }
}

@media (max-height:620px){
  .center-info{
    margin-top:18px;
    gap:2px;
  }

  .center-date-row{ padding-top:2px; }
  .center-date{ padding-top:0; }

  .center-day{
    padding-bottom:2px;
  }

  .bottom-ui{
    margin-top:6px;
    gap:6px;
  }
}