:root{
  --ux-ink:#142033;
  --ux-muted:#5c697c;
  --ux-blue:#2f5cf4;
  --ux-blue-soft:#edf2ff;
  --ux-surface:#fff;
  --ux-canvas:#f4f7fb;
  --ux-line:#dce4ee;
  --ux-green:#1f7a5c;
  --ux-radius:22px;
  --ux-shadow:0 14px 38px rgba(18,34,57,.08);
  color-scheme:light;
}

html{scroll-behavior:smooth}
body.modern-ux{
  color:var(--ux-ink);
  background:var(--ux-canvas);
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  text-rendering:optimizeLegibility;
}
.modern-ux .app-shell{max-width:1440px;background:var(--ux-canvas)}
.modern-ux main{isolation:isolate}
.modern-ux h1,.modern-ux h2,.modern-ux h3,.modern-ux dialog h2{
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  letter-spacing:-.04em;
}

/* Clear, stable navigation chrome. */
.modern-ux .topbar{
  position:sticky;top:0;z-index:80;height:68px;padding:0 24px;
  background:rgba(255,255,255,.88);border-bottom:1px solid rgba(210,220,232,.85);
  box-shadow:0 8px 28px rgba(20,32,51,.045);backdrop-filter:blur(18px) saturate(1.35);
}
.modern-ux .topbar .brand{height:58px}
.modern-ux .location-button,.modern-ux .round-button,.modern-ux .account-button{
  min-height:44px;border-color:var(--ux-line);background:#fff;
}
.modern-ux .account-button{border-radius:999px;padding-inline:15px}
.modern-ux .bottom-nav{
  z-index:90;bottom:14px;width:min(calc(100% - 32px),690px);height:72px;padding:8px 12px;
  border:1px solid rgba(255,255,255,.9);border-radius:24px;background:rgba(255,255,255,.9);
  box-shadow:0 20px 60px rgba(20,32,51,.18);backdrop-filter:blur(20px) saturate(1.4);
}
.modern-ux .bottom-nav :is(a,button){min-height:54px;border-radius:15px;transition:background .18s,color .18s,transform .18s}
.modern-ux .bottom-nav :is(a,button):active{transform:scale(.96)}
.modern-ux .bottom-nav .active{color:var(--ux-blue);background:var(--ux-blue-soft)}

/* First viewport: concise copy, useful choices, calm photography. */
.modern-ux .focused-home.dogu-playground{padding:30px 28px 118px;background:var(--ux-canvas)}
.modern-ux .dogu-playground .choice-hero{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:34px;margin-bottom:30px}
.modern-ux .dogu-playground .choice-hero .simple-hero-copy{padding:10px 0}
.modern-ux .dogu-playground .choice-hero .simple-kicker{color:var(--ux-blue);letter-spacing:.04em}
.modern-ux .dogu-playground .choice-hero h1{max-width:670px;margin:12px 0;font-size:clamp(38px,4.2vw,58px);line-height:1.12}
.modern-ux .dogu-playground .choice-hero .simple-hero-copy>p:not(.simple-kicker){max-width:520px;color:var(--ux-muted);font-size:17px;line-height:1.65}
.modern-ux .dogu-playground .choice-hero .simple-hero-photo{
  height:280px;margin:0;border:0;border-radius:28px;transform:none;
  box-shadow:var(--ux-shadow);outline:1px solid rgba(219,228,238,.8);
}
.modern-ux .dogu-playground .hero-ai-overlay{inset:auto 14px 54px;background:rgba(20,32,51,.88);backdrop-filter:blur(10px)}
.modern-ux .dogu-playground .hero-actions button{min-height:48px;border:0;border-radius:14px;box-shadow:none}
.modern-ux .dogu-playground .hero-primary{background:var(--ux-blue)}
.modern-ux .dogu-playground .hero-secondary{background:#fff;color:var(--ux-ink);outline:1px solid var(--ux-line)}

.modern-ux .dogu-playground .service-gates>header{margin-bottom:14px}
.modern-ux .dogu-playground .service-gates h2{font-size:22px}
.modern-ux .dogu-playground .service-gate-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px}
.modern-ux .dogu-playground .service-gate{
  min-height:0;padding:14px;border:1px solid var(--ux-line);border-radius:24px;background:#fff;
  box-shadow:0 10px 30px rgba(20,32,51,.055);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.modern-ux .dogu-playground .service-gate>.service-photo{aspect-ratio:16/8.8;margin-bottom:16px;border-radius:16px}
.modern-ux .dogu-playground .service-gate>strong{font-size:27px}
.modern-ux .dogu-playground .service-gate>b{font-size:16px;color:#43526a}
.modern-ux .dogu-playground .service-gate>p{margin:7px 0;color:var(--ux-muted)}
.modern-ux .dogu-playground .service-gate>em{margin-top:auto;color:var(--ux-blue)}
@media(hover:hover){
  .modern-ux .dogu-playground .service-gate:hover{transform:translateY(-3px);border-color:#b8c8fb;box-shadow:0 18px 42px rgba(20,32,51,.1)}
}

/* Photo-led quick tools. Priority tools come first; mobile becomes a short swipe rail. */
.modern-ux .dogu-playground .home-utility{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:min(100%,1120px);margin:0 auto 22px;
}
.modern-ux .quick-menu-head{display:flex;align-items:end;justify-content:space-between;gap:18px;width:min(100%,1120px);margin:28px auto 12px}
.modern-ux .quick-menu-head span{color:var(--ux-blue);font-size:12px;font-weight:900;letter-spacing:.08em}
.modern-ux .quick-menu-head h2{margin:5px 0 0;font-size:22px}
.modern-ux .quick-menu-head p{margin:0;color:var(--ux-muted);font-size:14px}
.modern-ux .dogu-playground .home-utility>:is(button,a){
  position:relative;min-width:0;padding:9px;border:1px solid var(--ux-line);border-radius:18px;background:#fff;
  box-shadow:0 8px 22px rgba(20,32,51,.045);transition:transform .18s,border-color .18s;
}
.modern-ux .dogu-playground .home-utility>:is(button,a):active{transform:scale(.98)}
.modern-ux .dogu-playground .home-utility>:is(button,a).priority-tool{border-color:#b9c9ff;background:linear-gradient(180deg,#fff,#f6f8ff)}
.modern-ux .quick-menu-photo{height:96px;border-radius:12px;margin-bottom:4px}
.modern-ux .dogu-playground .home-utility b{font-size:15px;line-height:1.35}
.modern-ux .dogu-playground .home-utility span{color:var(--ux-muted);font-size:12px;line-height:1.45}
.modern-ux .quick-badge{
  position:absolute;z-index:2;top:15px;left:15px;padding:5px 8px;border-radius:999px;
  color:#fff;background:rgba(20,32,51,.82);font-size:11px;font-weight:850;backdrop-filter:blur(7px);
}

/* Shared surface language across consumer and trainer areas. */
.modern-ux :is(.route-page,.portal-page,.academy-page,.trainer-studio-page,.page-surface,.growth-page,.auction-page){
  width:min(100%,1180px);margin-inline:auto;background:transparent;
}
.modern-ux :is(.route-head,.portal-head,.academy-head,.page-header,.studio-head){margin-bottom:24px}
.modern-ux :is(.route-head,.portal-head,.academy-head,.page-header) h1{line-height:1.12}
.modern-ux :is(.route-head,.portal-head,.academy-head,.page-header)>p,
.modern-ux :is(.route-head,.portal-head,.academy-head,.page-header)>div>p:last-child{color:var(--ux-muted);line-height:1.65}
.modern-ux .route-back{min-height:44px;border-radius:12px}
.modern-ux .training-routes>:is(button,a),
.modern-ux .portal-action-grid>button,
.modern-ux .shop-portal .shop-choice>article{
  border-color:var(--ux-line);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(20,32,51,.055);
}
.modern-ux .training-routes>:is(button,a):active,.modern-ux .portal-action-grid>button:active{transform:scale(.985)}
.modern-ux .photo-service-entry{border-color:#cdd9ff;background:linear-gradient(110deg,#f0f4ff,#fff);box-shadow:0 10px 26px rgba(47,92,244,.07)}
.modern-ux .service-more{padding:0;border-color:var(--ux-line);border-radius:18px;overflow:hidden;box-shadow:none}
.modern-ux .service-more>summary{
  min-height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;
}
.modern-ux .service-more>summary::-webkit-details-marker{display:none}
.modern-ux .service-more>summary::after{content:'＋';margin-left:auto;color:var(--ux-blue);font-size:21px}
.modern-ux .service-more[open]>summary::after{content:'−'}
.modern-ux .service-more[open]>summary{margin:0;border-bottom:1px solid var(--ux-line)}
.modern-ux .service-more>:not(summary){margin:14px}
.modern-ux .summary-hint{color:var(--ux-muted);font-size:12px;font-weight:600}
.modern-ux .service-more[open] .summary-hint{font-size:0}
.modern-ux .service-more[open] .summary-hint::after{content:'접기';font-size:12px}

/* Form and dialog affordances remain predictable everywhere. */
.modern-ux :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid rgba(47,92,244,.42);outline-offset:3px}
.modern-ux :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:48px;border-color:#c8d3e0!important;border-radius:12px!important;background:#fff;font-size:16px;
}
.modern-ux :is(.primary-button,.soft-button,.photo-service-entry,.shop-catalog-button){min-height:48px}
.modern-ux button:disabled{cursor:not-allowed;filter:saturate(.6)}
.modern-ux dialog{border:0;border-radius:26px;box-shadow:0 26px 80px rgba(11,24,43,.28)}
.modern-ux dialog::backdrop{background:rgba(12,25,44,.56);backdrop-filter:blur(4px)}
.modern-ux .dialog-close{min-width:44px;min-height:44px;border-radius:50%;background:#f1f4f8}
.modern-ux .toast{border-radius:14px;box-shadow:0 16px 44px rgba(20,32,51,.2)}

@media(max-width:900px){
  .modern-ux .dogu-playground .home-utility{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
  .modern-ux .topbar{height:60px;padding:0 12px}
  .modern-ux .focused-home.dogu-playground{padding:16px 14px 112px}
  .modern-ux .dogu-playground .choice-hero{grid-template-columns:minmax(0,1fr) 108px;gap:14px;margin:6px 0 22px}
  .modern-ux .dogu-playground .choice-hero .simple-hero-copy{padding:3px 0}
  .modern-ux .dogu-playground .choice-hero h1{font-size:clamp(30px,8.7vw,42px);line-height:1.16;margin:8px 0}
  .modern-ux .dogu-playground .choice-hero .simple-hero-copy>p:not(.simple-kicker){font-size:14px;line-height:1.55}
  .modern-ux .dogu-playground .choice-hero .simple-hero-photo{display:block;height:148px;margin:0;border-radius:22px}
  .modern-ux .dogu-playground .hero-ai-overlay,.modern-ux .dogu-playground .simple-hero-photo figcaption{display:none}
  .modern-ux .dogu-playground .choice-hero .hero-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
  .modern-ux .dogu-playground .hero-actions button{min-height:48px;padding:10px 8px;font-size:13px}
  .modern-ux .dogu-playground .service-gate-grid{grid-template-columns:1fr;gap:10px}
  .modern-ux .dogu-playground .service-gate{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:3px 14px;padding:14px}
  .modern-ux .dogu-playground .service-gate>.service-photo{grid-column:2;grid-row:1/5;width:104px;height:112px;margin:0;aspect-ratio:auto}
  .modern-ux .dogu-playground .service-gate>strong{font-size:23px}
  .modern-ux .dogu-playground .service-gate>p{display:block;grid-column:1;font-size:13px;line-height:1.45}
  .modern-ux .dogu-playground .service-gate>em{grid-column:1;font-size:13px}
  .modern-ux .quick-menu-head{display:block;width:auto;margin:24px 0 10px}
  .modern-ux .dogu-playground .home-utility{
    display:flex;gap:10px;margin:0 -14px 18px;padding:0 14px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .modern-ux .dogu-playground .home-utility::-webkit-scrollbar{display:none}
  .modern-ux .quick-menu-head p{margin-top:4px}
  .modern-ux .dogu-playground .home-utility>:is(button,a){flex:0 0 164px;scroll-snap-align:start;padding:9px}
  .modern-ux .quick-menu-photo{height:92px}
  .modern-ux .bottom-nav{left:8px;right:8px;bottom:8px;width:auto;height:calc(68px + env(safe-area-inset-bottom));padding:6px 8px env(safe-area-inset-bottom);border-radius:22px}
  .modern-ux :is(.route-page,.portal-page,.academy-page,.trainer-studio-page,.page-surface,.growth-page,.auction-page){padding-left:14px;padding-right:14px}
  .modern-ux .route-photo-head{padding-right:94px}
  .modern-ux dialog:not(.sheet){width:min(calc(100% - 20px),680px);max-height:92dvh;padding:22px 16px;border-radius:22px}
}

@media(max-width:390px){
  .modern-ux .dogu-playground .choice-hero{grid-template-columns:1fr 88px}
  .modern-ux .dogu-playground .choice-hero .simple-hero-photo{height:126px}
  .modern-ux .dogu-playground .service-gate{grid-template-columns:minmax(0,1fr) 88px}
  .modern-ux .dogu-playground .service-gate>.service-photo{width:88px;height:102px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .modern-ux *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}