/* reset */
*,*::before,*::after{box-sizing:border-box}

/* 색/레이아웃 */
:root{
  --bg:#F2F2F7; --bg-grad:linear-gradient(180deg,#FFFFFF 0%,#F6F6FA 60%,#F2F2F7 100%);
  --text:#111114; --text-dim:#6B7280; --stroke:rgba(0,0,0,.06); --ring:rgba(0,0,0,.06); --shadow:rgba(0,0,0,.12);
  --safe-b:env(safe-area-inset-bottom,16px); --safe-t:env(safe-area-inset-top,10px);
  /* spacing scale (8pt 기반) */
  --s-1:4px; --s0:8px; --s1:12px; --s2:16px; --s3:20px; --s4:24px; --s5:32px; --s6:40px; --s7:48px; --s8:64px;
  /* icon & radius */
  --icon: clamp(56px, 16vw, 88px);
  --radius-app:24px;
}
html,body{height:100%}
body{margin:0;display:grid;place-items:center;background:var(--bg-grad);color:var(--text);
  font-family:-apple-system,system-ui,"SF Pro Text","SF Pro Display",Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Noto Color Emoji,sans-serif}
.stage{width:100%;height:100%;display:grid;place-items:center}

/* 여기: CodePen 모바일 높이 보정 */
.viewport{
  width:clamp(360px, 100vw, 480px);
  height:100dvh;         /* 기본 */
  height:100svh;         /* 지원 브라우저에서 URL바 영향 제거 */
  position:relative;
}
.app{position:relative;width:100%;height:100%;overflow:hidden;border-radius:36px}
.app--viewer-open{overflow:visible;border-radius:0}

/* 배경 */
.panorama{position:fixed;inset:0;
  background:
    radial-gradient(60% 60% at 20% 25%, rgba(10,132,255,.10), transparent 60%),
    radial-gradient(50% 50% at 80% 20%, rgba(163,113,247,.10), transparent 60%),
    radial-gradient(60% 60% at 50% 85%, rgba(255,209,10,.12), transparent 60%),
    var(--bg-grad);
  filter:saturate(105%);transform:translateX(0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:0; pointer-events:none}

/* 상태바 */
.island{position:absolute;top:calc(6px + var(--safe-t));left:0;right:0;display:flex;justify-content:center;z-index:3}
.island__pill{height:34px;min-width:180px;padding:0 12px;border-radius:17px;background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:0 6px 18px var(--shadow)}
.time{font-weight:700;letter-spacing:.2px}
.status .sig,.status .wifi,.status .bat{width:12px;height:12px;border-radius:3px;background:rgba(0,0,0,.35)}

/* Optional: center time inside the pill (hide status icons) */
.island.island--time-center .island__pill{justify-content:center;gap:0}
.island.island--time-center .status{display:none}
.island.island--time-center .time{text-align:center;min-width:4ch}

/* 캐러셀 */
.carousel{
  position:relative; overflow:hidden;
  width:100%; height:100%; z-index:1;
  touch-action:pan-y; /* 세로 스크롤 허용, 좌우는 JS로 */
  -webkit-user-select:none; user-select:none;
}
.carousel__track{
  height:100%; display:flex; flex-direction:row;
  transform:translate3d(0,0,0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.page{
  position:relative;height:100%; flex:0 0 100%;
  padding:calc(56px + var(--safe-t)) var(--s2) calc(88px + var(--safe-b));
}

/* 홈: “세로 중앙 고정” */
.page--home .home-wrap{
  min-height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--s2);
  width:100%; max-width:900px; margin:0 auto;
  --content-w: min(420px, 92%);
}

/* 배너는 항상 한 화면에 들어오게 */
.banner{
  width:100%; max-width:var(--content-w);
  height:clamp(172px, 28vh, 300px);
  border-radius:26px;overflow:hidden;border:1px solid var(--stroke);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.70)),
    radial-gradient(120% 120% at 10% -10%, rgba(10,132,255,.20), transparent 60%),
    radial-gradient(140% 140% at 90% 110%, rgba(163,113,247,.22), transparent 60%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 10px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
  margin-block-end: var(--s6);
}
.banner__content{height:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s5);padding:var(--s5);text-align:left}
.banner__image{width:clamp(72px,14vw,120px);height:clamp(72px,14vw,120px);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px var(--shadow)}
.banner__title{margin:0;font-size:clamp(26px, 3.8vw, 40px);font-weight:800;letter-spacing:.2px;line-height:1.15}
.banner__subtitle{display:none}
.banner{text-decoration:none;color:inherit}
.banner:hover .banner__title{text-decoration:none}

/* 홈 아이콘: 4칸 한 줄, 중앙 정렬 */
.home-row{
  display:grid;
  grid-template-columns:repeat(4, var(--icon));
  align-items:flex-start;
  gap:var(--s3); width:100%; max-width:var(--content-w);
  margin-inline:auto; justify-content:space-between;
  margin-top:clamp(8px, 6vh, 56px);
}

/* 앱 페이지 */
.apps-wrap{max-width:900px;margin:0 auto}
.apps-row{
  display:grid; grid-template-columns:repeat(3, var(--icon));
  justify-content:start; column-gap:20px;
}
.apps-wrap{margin-top:clamp(12px, 8vh, 72px)}

/* 아이콘 */
.app-icon{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text);appearance:none;background:none;border:0;cursor:pointer;width:var(--icon)}
.app-icon:focus{outline:none}
.app-icon:focus-visible .icon-squircle{box-shadow:0 0 0 8px rgba(10,132,255,.15),0 6px 18px var(--shadow),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.03)}
.icon-squircle{width:var(--icon);height:var(--icon);display:grid;place-items:center;border-radius:var(--radius-app);
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.75) 60%,rgba(255,255,255,.7) 100%),var(--icon-grad,linear-gradient(135deg,#e8eefc,#f5f0ff));
  border:1px solid var(--ring);box-shadow:0 6px 18px var(--shadow),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.03)}
.icon-squircle__img{width:66%;height:66%;object-fit:contain}
.icon-squircle--instagram{--icon-grad:linear-gradient(135deg,#f58529 0%,#dd2a7b 38%,#8134af 70%,#515bd4 100%)}
.glyph{font-size:clamp(18px, calc(var(--icon)*0.34), 28px);font-weight:800;letter-spacing:.3px}
.label{font-size:12px;color:var(--text-dim);text-align:center;margin-top:6px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pastel-blue{--icon-grad:linear-gradient(135deg,#EAF3FF,#F0F6FF)}
.pastel-green{--icon-grad:linear-gradient(135deg,#EAFBF1,#F1FFF6)}
.pastel-violet{--icon-grad:linear-gradient(135deg,#F2ECFF,#F8F4FF)}
.pastel-pink{--icon-grad:linear-gradient(135deg,#FFEAF1,#FFF0F4)}
.pastel-magenta{--icon-grad:linear-gradient(135deg,#FFE8F9,#FFF1FB)}
.pastel-cyan{--icon-grad:linear-gradient(135deg,#E8F9FF,#F2FBFF)}
.pastel-gold{--icon-grad:linear-gradient(135deg,#FFF6E5,#FFF9EE)}

/* 페이지 인디케이터 */
.dots{position:absolute;left:0;right:0;bottom:calc(10px + var(--safe-b));display:flex;justify-content:center;gap:8px;z-index:2}
.dot{width:6px;height:6px;border-radius:3px;border:1px solid rgba(0,0,0,.25);background:rgba(0,0,0,.15)}
.dot[aria-current="true"]{background:rgba(0,0,0,.75);border-color:rgba(0,0,0,.75);box-shadow:0 0 8px rgba(0,0,0,.25)}

/* 갤러리 */
.viewer{position:absolute;inset:0;z-index:5;background:#000}
.hidden{display:none}
.viewer-stage{position:absolute;inset:0;display:flex;align-items:center;height:100%;touch-action:none;overflow:hidden}
.viewer-track{position:absolute;inset:0;display:flex;align-items:center;height:100%;transition:transform .25s ease;will-change:transform}
.slide{min-width:100%;height:100%;display:grid;place-items:center}
.slide img{max-width:100%;max-height:100%;transform-origin:center;will-change:transform}
.viewer-hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 12px 0 12px;pointer-events:none}
.viewer-index{color:#fff;font-weight:700;font-size:14px;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);pointer-events:auto}
.viewer-close{pointer-events:auto;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;border-radius:12px;padding:6px 10px;font-weight:700}

/* 짧은 화면: 아이콘/배너 축소 */
@media (max-height: 740px){
  .page{padding:calc(42px + var(--safe-t)) 16px calc(74px + var(--safe-b))}
  :root{--icon:64px}
  .banner{height:clamp(140px, 24vh, 210px)}
}

/* 더 짧은 화면 보정: 배너+아이콘이 한 화면에 */
@media (max-height: 640px){
  .page{padding:calc(36px + var(--safe-t)) 14px calc(66px + var(--safe-b))}
  :root{--icon:60px}
  .home-row{gap:16px}
  .banner{height:clamp(132px, 22vh, 196px)}
}
@media (max-height: 560px){
  .page{padding:calc(30px + var(--safe-t)) 12px calc(60px + var(--safe-b))}
  :root{--icon:56px}
  .banner{height:clamp(124px, 20vh, 184px)}
}

/* 데스크탑 */
/* 태블릿 사이즈: 패드 느낌 */
@media (min-width: 720px){
  .viewport{width:clamp(600px, 90vw, 744px)}
  :root{--icon: clamp(68px, 12vw, 96px)}
  .page--home .home-wrap{ --content-w: min(760px, 90%); }
  .home-row{gap:var(--s4)}
  .banner{height:clamp(220px, 28vh, 320px); margin-block-end: var(--s7)}
}
/* 데스크탑: 크게 보되 과확대 방지 */
@media (min-width:1024px){
  .stage{place-items:center}
  .viewport{width:clamp(640px, 70vw, 900px); height:100dvh}
  .app{border-radius:20px}
  .page{padding:72px 32px 96px}
  .page--home .home-wrap{max-width:1200px}
  .page--home .home-wrap{ --content-w: 900px }
  .banner{height:clamp(260px, 28vh, 360px); margin-block-end: var(--s7)}
  .home-row{grid-template-columns:repeat(4, var(--icon));gap:var(--s5)}
  .apps-row{grid-template-columns:repeat(3, var(--icon));column-gap:24px}
  :root{--icon: clamp(80px, 7vw, 104px); --radius-app:28px}
}

/* 포인터 장치에서 드래그 힌트 */
@media (pointer: fine){
  .carousel{cursor: grab}
  .carousel:active{cursor: grabbing}
}