:root{
  --bg:#0b1020;
  --bg2:#111830;
  --card:#1a2340;
  --card2:#222d52;
  --text:#eaf0ff;
  --muted:#8b96b8;
  --accent:#3b82f6;
  --danger:#ef4444;
  --ok:#22c55e;
  --gap:18px;
  --tile:190px;      /* 기본(보통) 타일 최소 폭 */
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  background:radial-gradient(1200px 700px at 20% -10%, #16204a 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Malgun Gothic","맑은 고딕",sans-serif;
  overflow:hidden;
  user-select:none;
  touch-action:manipulation;
}
.hidden{display:none !important;}

/* ===== 상단바 ===== */
#topbar{
  display:flex;align-items:center;gap:24px;
  padding:22px 28px 10px;
}
.clock-wrap{line-height:1;}
#clock{font-size:64px;font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums;}
#date{font-size:18px;color:var(--muted);margin-top:6px;}
#statusline{flex:1;color:var(--muted);font-size:15px;text-align:center;}
.controls{display:flex;gap:12px;}
.ctrl{
  width:64px;height:64px;border:none;border-radius:18px;
  background:var(--card);color:var(--text);font-size:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.12s;
}
.ctrl:active{transform:scale(.92);background:var(--card2);}
.ctrl.active{background:var(--accent);color:#fff;}

/* ===== 그리드 ===== */
#grid{
  height:calc(100% - 118px);
  padding:8px 28px 28px;
  overflow-y:auto;overflow-x:hidden;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));
  gap:var(--gap);
  align-content:start;
}
body[data-tilesize="s"]{--tile:150px;--gap:14px;}
body[data-tilesize="l"]{--tile:250px;--gap:22px;}

.tile{
  position:relative;
  aspect-ratio:1/.72;
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--card2),var(--card));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  cursor:pointer;transition:.12s;overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.tile:active{transform:scale(.96);}
.tile .ico{
  width:76px;height:76px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:700;color:#fff;
  background:var(--accent);
}
.tile .label{font-size:22px;font-weight:600;text-align:center;padding:0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
body[data-tilesize="s"] .tile .ico{width:56px;height:56px;font-size:30px;border-radius:16px;}
body[data-tilesize="s"] .tile .label{font-size:18px;}
body[data-tilesize="l"] .tile .ico{width:92px;height:92px;font-size:50px;}
body[data-tilesize="l"] .tile .label{font-size:26px;}

/* 편집 모드 */
.tile .del{
  position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:24px;border:none;display:none;
  align-items:center;justify-content:center;cursor:pointer;z-index:2;
}
body.editing .tile .del{display:flex;}
body.editing .tile{animation:wiggle .3s infinite alternate ease-in-out;}
@keyframes wiggle{from{transform:rotate(-.6deg);}to{transform:rotate(.6deg);}}
.tile.dragging{opacity:.4;}
.tile.dragover{outline:3px dashed var(--accent);outline-offset:-3px;}

/* 추가용 점선 타일 */
.tile.add{
  background:transparent;border:2px dashed #3a466e;color:var(--muted);
}
.tile.add .ico{background:transparent;color:var(--muted);font-size:56px;}

/* ===== 사이트 뷰어 ===== */
#viewer{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;}
.viewer-bar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--bg2);}
#viewer-title{flex:1;font-size:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vbtn{border:none;border-radius:14px;background:var(--card);color:var(--text);
  font-size:20px;padding:14px 22px;cursor:pointer;}
.vbtn:active{background:var(--card2);}
.vbtn.big{font-size:24px;padding:20px 34px;background:var(--accent);color:#fff;margin-top:20px;}
#viewer-frame{flex:1;width:100%;border:none;background:#fff;}
#viewer-block{position:absolute;inset:56px 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;font-size:22px;color:var(--muted);gap:8px;}

/* ===== 모달 공통 ===== */
#modal,#settings{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-card{
  width:min(560px,92vw);max-height:92vh;overflow-y:auto;
  background:var(--bg2);border-radius:26px;padding:28px 30px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.modal-card h2{margin:0 0 20px;font-size:26px;}
.modal-card label{display:block;font-size:15px;color:var(--muted);margin:0 0 16px;}
.modal-card label.row{display:flex;align-items:center;gap:12px;}
.modal-card label.check{color:var(--text);font-size:17px;}
.modal-card input[type=text],.modal-card input[type=url],.modal-card select{
  width:100%;margin-top:8px;padding:16px 16px;font-size:19px;
  background:var(--card);border:1px solid #33406b;border-radius:14px;color:var(--text);
}
.modal-card input[type=checkbox]{width:26px;height:26px;accent-color:var(--accent);}
#color-row{display:flex;gap:10px;flex-wrap:wrap;}
.swatch{width:40px;height:40px;border-radius:50%;cursor:pointer;border:3px solid transparent;}
.swatch.sel{border-color:#fff;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:10px;}
.mbtn{border:none;border-radius:14px;font-size:19px;padding:16px 26px;cursor:pointer;color:#fff;}
.mbtn.primary{background:var(--accent);}
.mbtn.ghost{background:var(--card);color:var(--text);}
.mbtn.danger{background:var(--danger);}
.settings-tools{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px;}
.ver{color:var(--muted);font-size:13px;text-align:center;margin:16px 0 4px;}

/* ===== 토스트 ===== */
#toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);
  background:#000c;color:#fff;padding:16px 28px;border-radius:16px;font-size:18px;z-index:80;}

/* 세로 화면(폰) 대응 */
@media (max-aspect-ratio:1/1){
  #clock{font-size:44px;}
  #topbar{gap:12px;padding:16px 16px 8px;}
  .ctrl{width:52px;height:52px;font-size:24px;}
  #grid{padding:8px 16px 20px;}
}