/* ===== 프로토타입 뷰어(index.html) 전용 스타일 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { height: 100vh; overflow: hidden; background: #e8ebf4;
       font-family: 'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; }

.topbar { position: relative; display: flex; align-items: center; height: 60px; padding: 0 24px;
          background: #fff; border-bottom: 1px solid #d8dee9; z-index: 10; }
.topbar h1 { font-size: 20px; font-weight: 700; color: #1f1c5b; }
.topbar .sub { margin-left: 12px; font-size: 13px; color: #9aa; }
.topbar .size { position: absolute; right: 24px; font-size: 13px; color: #aaa; }

.wrap { display: flex; height: calc(100vh - 60px); }

.preview { position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
           overflow: hidden; background: #e8ebf4; }
.device { position: relative; background: #1a1a1a; border-radius: 44px; padding: 16px 12px;
          box-shadow: 0 14px 50px rgba(22,28,43,.35); transform-origin: center center; }
.device::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
                  width: 120px; height: 26px; background: #1a1a1a; border-radius: 0 0 16px 16px; z-index: 2; }
.device__screen { position: relative; width: 402px; border-radius: 30px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.device__screen iframe { width: 402px; height: 874px; border: none; display: block; background: #fff; }

/* 상태표시줄 (iOS 스타일, 화면 상단 고정 · 콘텐츠와 겹치지 않음) */
.statusbar { flex-shrink: 0; height: 46px; background: #fff;
             display: flex; align-items: center; justify-content: space-between;
             padding: 0 26px 0 30px; color: #111; }
.statusbar .sb-time { font-size: 15px; font-weight: 600; letter-spacing: .02em;
                      font-variant-numeric: tabular-nums; }
.statusbar .sb-icons { display: flex; align-items: center; gap: 7px; }
.statusbar svg { display: block; }

.side { width: 312px; height: 100%; background: #fff; overflow-y: auto;
        box-shadow: -4px 0 16px rgba(22,28,43,.07); flex-shrink: 0; }
.side__head { position: sticky; top: 0; background: #fff; padding: 14px 16px 10px; border-bottom: 1px solid #eee; z-index: 5; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
          background: #f4f5fb; border: 1px solid #e4e5f0; border-radius: 9px; }
.search input { flex: 1; border: none; background: none; outline: none; font-size: 13px; color: #333;
                font-family: inherit; }
.count { margin-top: 8px; font-size: 12px; color: #aaa; padding-left: 2px; }
.count b { color: #5a5bfd; }

.group__title { padding: 14px 16px 6px; font-size: 12px; font-weight: 700; color: #1f1c5b;
                background: #f7f8fc; letter-spacing: .02em; }
.item { display: flex; align-items: center; gap: 6px; padding: 11px 16px; cursor: pointer;
        font-size: 13px; color: #555; border-bottom: 1px solid #f3f3f7; }
.item:hover { background: #f8f7ff; color: #5a5bfd; }
.item.active { background: #f3f2ff; color: #1f1c5b; font-weight: 600; box-shadow: inset 3px 0 0 #5a5bfd; }
.item__newtab {
  margin-left: auto; flex-shrink: 0; padding: 5px 10px; border: none; cursor: pointer;
  border-radius: 6px; font-size: 11px; font-weight: 600; font-family: inherit;
  background: #dcdcff; color: #5a5bfd;
}
.item__newtab:hover { background: #5a5bfd; color: #fff; }
.item.hidden, .group.hidden { display: none; }

.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: #d0d0df; border-radius: 3px; }