:root{
  --ui-side:16px;
  --ui-gap-1:8px;
  --ui-gap-2:12px;
  --ui-gap-3:16px;
  --ui-page-title:24px;
  --ui-hero-title:20px;
  --ui-card-title:17px;
  --ui-body:13px;
  --ui-help:11px;
  --ui-badge:10px;
  --ui-button-h:52px;
  --ui-radius-lg:22px;
  --ui-radius-sm:16px;
}

html.yunature-mobile-guard,html.yunature-mobile-guard body{
  max-width:100%;
  overflow-x:clip;
  overscroll-behavior-x:none;
  touch-action:pan-x pan-y;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html.yunature-mobile-guard :is(img,video,canvas,svg){max-width:100%}
html.yunature-mobile-guard :is(input,select,textarea){font-size:16px!important}

html.preview-green{
  --pink:#49a96d!important;
  --pink-strong:#2f8b55!important;
  --pink-soft:#edf8f0!important;
  --pink-line:#d4eadb!important;
  --deep:#256f45!important;
  --blush:#eef9f1!important;
}
html.preview-green body{background:#f1f6f2!important}
html.preview-green .app{background:linear-gradient(180deg,#fbfffc,#f2faf4 72%,#fff)!important}
html.preview-green :is(.discover,.primary,.select,.profileSave,.cta,.navBubble){background:linear-gradient(135deg,#63bd80,#32945a)!important;box-shadow:0 8px 18px rgba(43,132,79,.18)!important}
html.preview-green :is(.captureChip,.selectedBadge){background:#e5f5e9!important;color:#277548!important}
html.preview-green :is(.navItem.on,.featureArrow,.learnArrow,.profileClose){color:#318653!important}
html.preview-green :is(.learnIcon,.featureIcon){background:#e7f6eb!important;color:#2f8551!important}
html.preview-green .splashTrack i{background:linear-gradient(90deg,#70c68a,#319359)!important}

/* 홈: 공통 좌우선과 균형 잡힌 한 화면 구성 */
html.sub-customer:has(.bottomNav),html.sub-customer:has(.bottomNav) body{height:100%;overflow:hidden!important}
html.sub-customer:has(.bottomNav) .app{
  width:min(100%,480px);
  height:100dvh;
  min-height:0!important;
  display:grid;
  grid-template-rows:48px 54px minmax(156px,1.3fr) minmax(138px,1fr) minmax(100px,.72fr);
  gap:var(--ui-gap-1);
  padding:calc(8px + env(safe-area-inset-top)) var(--ui-side) calc(66px + env(safe-area-inset-bottom))!important;
  overflow:hidden;
}
html.sub-customer:has(.bottomNav) .topbar{min-height:0;height:48px}
html.sub-customer:has(.bottomNav) .brand img{width:52px;height:52px}
html.sub-customer:has(.bottomNav) .brandGreeting{font-size:var(--ui-help)}
html.sub-customer:has(.bottomNav) .brandGreeting strong{font-size:var(--ui-body)}
html.sub-customer:has(.bottomNav) :is(.iconButton,.avatarButton){width:38px;height:38px}
html.sub-customer:has(.bottomNav) .intro{align-self:center;margin:0 2px}
html.sub-customer:has(.bottomNav) .intro p{margin:0 0 3px;font-size:var(--ui-help)}
html.sub-customer:has(.bottomNav) .intro h1{font-size:var(--ui-page-title);line-height:1.14}
html.sub-customer:has(.bottomNav) .discover{height:auto;min-height:0;padding:18px 20px 72px;border-radius:var(--ui-radius-lg)}
html.sub-customer:has(.bottomNav) .discoverText strong{font-size:27px;line-height:1.1}
html.sub-customer:has(.bottomNav) .discoverText span{margin-top:6px;font-size:var(--ui-body)}
html.sub-customer:has(.bottomNav) .captureChip{left:12px;right:12px;bottom:10px;min-height:50px;margin:0!important;padding:10px 14px;font-size:15px!important}
html.sub-customer:has(.bottomNav) .captureChip svg{width:22px;height:22px}
html.sub-customer:has(.bottomNav) .featureGrid{height:auto;min-height:0;gap:10px;margin:0}
html.sub-customer:has(.bottomNav) .featureCard{min-height:0;padding:13px 14px;border-radius:var(--ui-radius-lg)}
html.sub-customer:has(.bottomNav) .featureHead h2{font-size:var(--ui-card-title)}
html.sub-customer:has(.bottomNav) .featureCount{font-size:var(--ui-badge)}
html.sub-customer:has(.bottomNav) .featureIcon{width:46px;height:46px;margin:8px auto 6px;border-radius:14px}
html.sub-customer:has(.bottomNav) .featureIcon svg{width:27px;height:27px}
html.sub-customer:has(.bottomNav) .featureCard p{font-size:10px;line-height:1.3}
html.sub-customer:has(.bottomNav) .featureArrow{right:10px;bottom:10px;width:26px;height:26px}
html.sub-customer:has(.bottomNav) .friends{height:auto;min-height:0;margin:0;padding:13px 14px;overflow:hidden;border-radius:var(--ui-radius-lg)}
html.sub-customer:has(.bottomNav) .sectionHead h2{font-size:var(--ui-card-title)}
html.sub-customer:has(.bottomNav) .chatAction{padding:6px 9px;font-size:10px}
html.sub-customer:has(.bottomNav) .emptyFriends{gap:10px;margin-top:8px}
html.sub-customer:has(.bottomNav) .miniAvatar{width:30px;height:30px}
html.sub-customer:has(.bottomNav) .emptyFriends p{font-size:10px;line-height:1.3}
html.sub-customer:has(.bottomNav) .emptyFriends strong{font-size:var(--ui-help)}
html.sub-customer:has(.bottomNav) .bottomNav{height:calc(62px + env(safe-area-inset-bottom));padding-top:6px}
html.sub-customer:has(.bottomNav) .navBubble{width:52px;height:52px}
html.sub-customer:has(.bottomNav) .navItem.discoverNav{top:-19px}

/* 곤충 선택: 전체는 고정, 곤충 목록만 좌우 이동 */
html.sub-customer:has(.pickerWrap),html.sub-customer:has(.pickerWrap) body{width:100%;height:100dvh;max-height:100dvh;overflow:hidden!important;overscroll-behavior:none!important}
html.sub-customer:has(.pickerWrap) body{position:fixed;inset:0;touch-action:pan-x}
html.sub-customer:has(.pickerWrap) .app{width:min(100%,480px);height:100dvh!important;max-height:100dvh;min-height:0!important;display:grid;grid-template-rows:64px 148px 18px minmax(0,1fr);gap:8px;padding:calc(8px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom))!important;overflow:hidden!important;touch-action:pan-x}
html.sub-customer:has(.pickerWrap) .topbar{height:64px;min-height:0;padding:0 var(--ui-side);grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
html.sub-customer:has(.pickerWrap) .brand img{width:52px;height:52px}
html.sub-customer:has(.pickerWrap) .heading h1{font-size:var(--ui-page-title);line-height:1.14}
html.sub-customer:has(.pickerWrap) .heading small{margin-top:3px;font-size:var(--ui-help)}
html.sub-customer:has(.pickerWrap) .boardLink{font-size:10px}
html.sub-customer:has(.pickerWrap) .pickerWrap{height:148px;margin:0}
html.sub-customer:has(.pickerWrap) .picker{height:148px;padding:0 var(--ui-side) 6px;touch-action:pan-x;overscroll-behavior-x:contain;overscroll-behavior-y:none}
html.sub-customer:has(.pickerWrap) .insectCard{height:140px;flex-basis:112px;border-radius:var(--ui-radius-sm)}
html.sub-customer:has(.pickerWrap) .insectVisual{height:96px}
html.sub-customer:has(.pickerWrap) .insectName{font-size:15px}
html.sub-customer:has(.pickerWrap) .dragGuide{height:18px;margin:0;font-size:10px;touch-action:manipulation}
html.sub-customer:has(.pickerWrap) .detail{height:auto;min-height:0;margin:0 var(--ui-side);padding:10px;border-radius:var(--ui-radius-lg);touch-action:manipulation}
html.sub-customer:has(.pickerWrap) .specimen{min-height:0;border-radius:var(--ui-radius-sm)}
html.sub-customer:has(.pickerWrap) .primary{min-height:var(--ui-button-h);margin-top:8px;border-radius:var(--ui-radius-sm);font-size:17px}
html.sub-customer:has(.pickerWrap) .learn{min-height:48px;margin-top:8px;border-radius:var(--ui-radius-sm)}
html.sub-customer:has(.pickerWrap) .learnText strong{font-size:var(--ui-card-title)}
html.sub-customer:has(.pickerWrap) .learnText small{font-size:10px}

/* 도감: 제목·본문·버튼을 동일한 단계로 정렬 */
html.sub-customer:has(.nameRow) .app{padding-left:var(--ui-side);padding-right:var(--ui-side)}
html.sub-customer:has(.nameRow) .topbar{min-height:52px}
html.sub-customer:has(.nameRow) .heading h1{font-size:var(--ui-page-title)}
html.sub-customer:has(.nameRow) .heading p{font-size:var(--ui-help)}
html.sub-customer:has(.nameRow) .card{border-radius:var(--ui-radius-lg)}
html.sub-customer:has(.nameRow) .content{padding:12px 14px 9px}
html.sub-customer:has(.nameRow) .name h2{font-size:var(--ui-hero-title)}
html.sub-customer:has(.nameRow) .summary{font-size:var(--ui-help)}
html.sub-customer:has(.nameRow) .feature strong{font-size:10.5px}
html.sub-customer:has(.nameRow) .select{min-height:48px;border-radius:var(--ui-radius-sm);font-size:15px}

@media(max-height:700px){
  html.sub-customer:has(.bottomNav) .app{grid-template-rows:42px 46px minmax(138px,1.28fr) minmax(122px,1fr) minmax(84px,.7fr);gap:6px;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:calc(58px + env(safe-area-inset-bottom))!important}
  html.sub-customer:has(.bottomNav) .topbar{height:42px}
  html.sub-customer:has(.bottomNav) .intro h1{font-size:21px}
  html.sub-customer:has(.bottomNav) .discover{padding:14px 17px 62px}
  html.sub-customer:has(.bottomNav) .discoverText strong{font-size:23px}
  html.sub-customer:has(.bottomNav) .captureChip{bottom:8px;min-height:44px;margin:0!important;padding:8px 11px;font-size:14px!important}
  html.sub-customer:has(.bottomNav) .featureCard{padding:9px 11px}
  html.sub-customer:has(.bottomNav) .featureIcon{width:38px;height:38px;margin:5px auto 3px}
  html.sub-customer:has(.bottomNav) .friends{padding:9px 11px}
  html.sub-customer:has(.bottomNav) .emptyFriends{margin-top:4px}
  html.sub-customer:has(.bottomNav) .bottomNav{height:calc(56px + env(safe-area-inset-bottom))}
  html.sub-customer:has(.bottomNav) .navBubble{width:47px;height:47px}
  html.sub-customer:has(.pickerWrap) .app{grid-template-rows:56px 132px 16px minmax(0,1fr);gap:6px;padding-top:calc(4px + env(safe-area-inset-top))!important;padding-bottom:calc(6px + env(safe-area-inset-bottom))!important}
  html.sub-customer:has(.pickerWrap) .topbar{height:56px}
  html.sub-customer:has(.pickerWrap) .brand img{width:46px;height:46px}
  html.sub-customer:has(.pickerWrap) .heading h1{font-size:21px}
  html.sub-customer:has(.pickerWrap) .pickerWrap,html.sub-customer:has(.pickerWrap) .picker{height:132px}
  html.sub-customer:has(.pickerWrap) .insectCard{height:126px}
  html.sub-customer:has(.pickerWrap) .insectVisual{height:85px}
  html.sub-customer:has(.pickerWrap) .primary{min-height:46px}
  html.sub-customer:has(.pickerWrap) .learn{min-height:44px}
}

/* Desktop guard: keep the phone canvas centered and prevent horizontal page drift. */
@media(min-width:600px){
  html.sub-customer:has(.pickerWrap),
  html.sub-customer:has(.pickerWrap) body{
    width:100%;
    max-width:100%;
    height:100dvh;
    overflow:hidden!important;
    touch-action:auto;
  }
  html.sub-customer:has(.pickerWrap) body{
    position:static;
    inset:auto;
    display:flex;
    justify-content:center;
    padding:18px 0;
  }
  html.sub-customer:has(.pickerWrap) .app{
    flex:0 0 480px;
    width:480px;
    height:calc(100dvh - 36px)!important;
    max-height:calc(100dvh - 36px);
    margin:0;
  }
  html.sub-customer:has(.pickerWrap) :is(.topbar,.pickerWrap,.dragGuide,.detail,.specimen){
    min-width:0;
    max-width:100%;
  }
  html.sub-customer:has(.pickerWrap) .detail{
    width:auto;
  }
  html.sub-customer:has(.pickerWrap) .heroInsect{
    max-width:calc(100% - 20px);
    max-height:calc(100% - 20px);
    object-fit:contain;
    object-position:center;
  }
}