/* IMO 실제 화면 기준 프리미엄 컴팩트 UI 2026-08-15 */

:root{
  --phone-w:430px !important;
  --phone-h:720px !important;
  --top:52px !important;
  --input-h:50px !important;
  --bottom-nav-h:42px !important;
}

html{
  font-family:
    Pretendard, "Noto Sans KR", Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html,body{
  letter-spacing:-.018em;
}

#app{
  background:
    radial-gradient(circle at 50% 42%,#123568 0,#071b3e 48%,#020b1d 100%)
    !important;
}

.phone{
  width:min(430px,calc(100vw - 12px)) !important;
  height:min(720px,calc(100dvh - 12px)) !important;
  border-radius:18px !important;
  border:1px solid rgba(105,185,255,.38) !important;
  box-shadow:
    0 30px 90px rgba(0,8,28,.62),
    inset 0 1px rgba(255,255,255,.06) !important;
}

/* 상단 */
.topbar{
  min-height:52px !important;
  height:52px !important;
  padding:7px 10px !important;
  grid-template-columns:38px 1fr 38px !important;
}

.topbar button,
.icon-round,
.sound-btn{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  font-size:14px !important;
  border-radius:11px !important;
}

.top-title strong{
  font-size:13px !important;
  line-height:1.15 !important;
}

.top-title span,
#status{
  margin-top:2px !important;
  font-size:9.5px !important;
  line-height:1.15 !important;
}

/* 첫 화면 */
.intro{
  padding:64px 20px 64px !important;
}

.brand h1{
  font-size:26px !important;
  line-height:.96 !important;
}

.brand h1 span{
  font-size:32px !important;
}

.brand p,
.intro-line{
  font-size:11.5px !important;
}

.hero{
  width:198px !important;
  height:198px !important;
  margin-top:16px !important;
}

.hero:before{
  width:194px !important;
  height:194px !important;
}

.hero img{
  max-width:190px !important;
  max-height:190px !important;
}

/* 언어·초기설정 */
.setup{
  padding:58px 12px 10px !important;
}

.setup-inner{
  padding:8px 0 !important;
}

.setup-card{
  width:min(100%,370px) !important;
  padding:18px 17px 14px !important;
  border-radius:21px !important;
}

.setup-card h2{
  margin:8px 0 6px !important;
  font-size:18px !important;
  line-height:1.2 !important;
}

.setup-card p{
  margin:0 0 11px !important;
  font-size:10.8px !important;
  line-height:1.45 !important;
}

.setup-meta,
.setup-actions,
.setup-count,
.setup-text-btn,
.setup-card .step{
  font-size:10px !important;
}

.setup-card .choice-grid{
  gap:6px !important;
}

.setup-card .choice{
  min-height:37px !important;
  height:auto !important;
  padding:7px 9px !important;
  font-size:11.2px !important;
  line-height:1.2 !important;
  border-radius:11px !important;
}

/* 채팅 상단 안내 */
.chat-hero{
  top:58px !important;
  left:10px !important;
  right:54px !important;
  min-height:55px !important;
  padding:8px 10px !important;
  gap:8px !important;
  border-radius:15px !important;
}

.chat-hero .mini-face{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
}

.chat-hero strong{
  font-size:13px !important;
  line-height:1.2 !important;
}

.chat-hero span{
  margin-top:2px !important;
  font-size:9.8px !important;
  line-height:1.35 !important;
}

/* 실제 대화·검색 결과 영역 확대 */
.feed{
  top:120px !important;
  left:10px !important;
  right:52px !important;
  bottom:108px !important;
  padding:7px 2px 16px !important;
  gap:7px !important;
  scroll-padding-bottom:20px !important;
}

.bubble{
  max-width:94% !important;
  padding:9px 11px !important;
  font-size:11.5px !important;
  line-height:1.48 !important;
  border-radius:15px 15px 15px 6px !important;
}

.bubble.user{
  border-radius:15px 15px 6px 15px !important;
}

.card{
  padding:11px !important;
  border-radius:16px !important;
}

.card h2,
.card h3{
  margin:0 0 5px !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

.card p,
.card li,
.card small{
  font-size:10.5px !important;
  line-height:1.45 !important;
}

.card button,
.card-actions button,
.r9-action{
  min-height:31px !important;
  padding:6px 10px !important;
  font-size:10.5px !important;
  border-radius:10px !important;
}

/* 우측 분류 */
body[data-view="chat"] #rightRail{
  z-index:48 !important;
  top:118px !important;
  right:7px !important;
  bottom:108px !important;
  width:39px !important;
  gap:5px !important;
  pointer-events:auto !important;
  overflow-y:auto !important;
}

body[data-view="chat"] #rightRail button{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  flex:0 0 36px !important;
  padding:2px !important;
  border-radius:11px !important;
  pointer-events:auto !important;
}

#rightRail .nav-icon{
  font-size:14px !important;
  line-height:1 !important;
}

#rightRail .nav-label{
  margin-top:1px !important;
  font-size:8px !important;
  line-height:1 !important;
}

/* 하단 빠른 실행 */
body[data-view="chat"] #bottomNav{
  z-index:49 !important;
  left:8px !important;
  right:8px !important;
  bottom:59px !important;
  height:40px !important;
  min-height:40px !important;
  padding:3px 4px !important;
  gap:4px !important;
  pointer-events:auto !important;
  overflow-x:auto !important;
}

body[data-view="chat"] #bottomNav button{
  min-width:54px !important;
  height:32px !important;
  min-height:32px !important;
  padding:3px 7px !important;
  gap:3px !important;
  border-radius:10px !important;
  font-size:9px !important;
  pointer-events:auto !important;
}

#bottomNav button span,
#bottomNav .r9-bottom-quick-icon{
  font-size:12px !important;
}

#bottomNav button b{
  font-size:8.7px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

/* 입력창 */
.composer{
  z-index:50 !important;
  left:8px !important;
  right:8px !important;
  bottom:6px !important;
  height:47px !important;
  min-height:47px !important;
  padding:5px 6px !important;
  gap:5px !important;
  border-radius:15px !important;
}

.composer .plus{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  font-size:17px !important;
}

.composer .input,
.composer input{
  min-height:32px !important;
  height:32px !important;
  padding:6px 8px !important;
  font-size:11.5px !important;
  border-radius:10px !important;
}

.composer .send{
  min-width:48px !important;
  min-height:32px !important;
  height:32px !important;
  padding:5px 9px !important;
  font-size:10.5px !important;
  border-radius:10px !important;
}

/* 펼쳐지는 상세 화면 */
.sheet-card,
.r9-overlay-card,
.r9-panel{
  padding:15px !important;
  border-radius:20px !important;
}

.sheet-card h2,
.r9-overlay-card h2,
.r9-panel h2{
  font-size:17px !important;
  line-height:1.22 !important;
}

.sheet-card p,
.r9-overlay-card p,
.r9-panel p{
  font-size:11px !important;
  line-height:1.48 !important;
}

.sheet-card button,
.r9-overlay-card button,
.r9-panel button{
  min-height:32px !important;
  padding:6px 10px !important;
  font-size:10.5px !important;
}

/* 바깥 전체기능 카드도 과대 표시 방지 */
.imo-feature-hub-link{
  top:14px !important;
  right:18px !important;
  padding:8px 13px !important;
  font-size:11px !important;
}

.imo-hub-rail{
  width:210px !important;
  gap:8px !important;
}

.imo-hub-card{
  min-height:105px !important;
  border-radius:16px !important;
}

.imo-hub-card--compact{
  min-height:58px !important;
}

.imo-hub-card b{
  font-size:12px !important;
}

.imo-hub-card small{
  font-size:9.5px !important;
}

/* 모바일은 브라우저 전체 면적 사용 */
@media(max-width:600px){
  #app{
    display:block !important;
  }

  .phone{
    width:100vw !important;
    height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
  }

  .imo-desktop-hub,
  .imo-feature-hub-link{
    display:none !important;
  }
}

@media(max-height:690px) and (min-width:601px){
  :root{
    --phone-h:calc(100dvh - 8px) !important;
  }

  .phone{
    height:calc(100dvh - 8px) !important;
  }

  .chat-hero{
    top:54px !important;
  }

  .feed{
    top:113px !important;
  }

  body[data-view="chat"] #rightRail{
    top:112px !important;
  }
}

/* IMO_SUBPAGES_PREMIUM_FINAL_20260815 */
.topbar{
  grid-template-columns:36px minmax(0,1fr) 36px !important;
}
.top-title{
  min-width:0 !important;
  padding:0 3px !important;
}
.top-title strong{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.top-actions{
  right:7px !important;
  top:7px !important;
  width:36px !important;
}
.top-actions button{
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
}


/* IMO_PWA_UX_FINAL_20260815 */
.imo-pwa-final .r9-overlay__body{display:flex;flex-direction:column;gap:8px;padding:10px 12px 94px!important}
.imo-pwa-final .r9-focus-card,.imo-pwa-final .r9-list,.imo-pwa-final .r9-result{order:1}
.imo-pwa-final .r9-actions,.imo-pwa-final .r9-grid{order:2}
.imo-pwa-final .r9-hero-card,.imo-pwa-final .r9-safety-card{order:3}
.imo-pwa-final .r9-card,.imo-pwa-final .r9-list-card{padding:10px!important;margin:0!important}
.imo-pwa-final .r9-list-card p,.imo-pwa-final .r9-card p{margin:3px 0!important;line-height:1.35!important}
.imo-pwa-final .r9-actions{gap:6px!important;margin-top:6px!important}
.imo-pwa-final .r9-action{min-height:34px!important;padding:6px 10px!important}
.imo-pwa-final #bottomNav{overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.imo-pwa-final #bottomNav button{scroll-snap-align:start;min-width:70px}
.imo-pwa-final video:not(.is-ready){visibility:hidden!important}
@media(min-width:900px){.imo-pwa-final .phone,.imo-pwa-final #phone{width:min(450px,34vw)!important}.imo-pwa-final .r9-overlay__body{padding-inline:14px!important}}
@media(max-width:520px){.imo-pwa-final .r9-overlay__body{padding:8px 9px calc(86px + env(safe-area-inset-bottom))!important}.imo-pwa-final .r9-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* IMO_PWA_UX_CORRECTION_V2 */
.imo-pwa-final .r9-safety-card,.imo-pwa-final .r9-danger-card{max-height:none!important;overflow:visible!important;mask-image:none!important}
.imo-pwa-final .pwa-notice-toggle{display:none!important}
.imo-pwa-final .r9-overlay__body{overflow-y:auto!important;overscroll-behavior:contain}
.imo-pwa-final .r9-overlay__body>.r9-actions,.imo-pwa-final .r9-overlay__body>.r9-grid{order:1}
.imo-pwa-final .r9-overlay__body>.r9-focus-card,.imo-pwa-final .r9-overlay__body>.r9-list,.imo-pwa-final .r9-overlay__body>.r9-result{order:2}
.imo-pwa-final .r9-overlay__body>.r9-hero-card,.imo-pwa-final .r9-overlay__body>.r9-safety-card{order:3}