.home-native-pill:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1)}
:root{--p:#6b452b;--s:#a97b50;--ink:#2d251f;--muted:#7d7067;--line:#e4d9cd;--bg:#f7f2eb;--panel:#fffdf9;--grad:linear-gradient(135deg,var(--p),var(--s));--on-p:#fff;--on-s:#fff;--on-grad:#fff}

.mail-reader{width:min(600px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:22px;border:1px solid #ae9270;border-radius:20px;background:#fffaf0;color:#35271e;box-sizing:border-box}.mail-reader::backdrop{background:#19120d88}.mail-reader-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.mail-reader-heading h2{font-size:21px;margin:0}.mail-reader-heading button{flex:none}.mail-reader dl{display:grid;grid-template-columns:minmax(90px,35%) minmax(0,1fr);gap:10px;font-size:14px}.mail-reader dt{color:#7b634a}.mail-reader dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.mail-reader p,.mail-body{white-space:pre-wrap;line-height:1.6}.mail-reader blockquote{margin:15px 0;padding:14px;border-left:3px solid #9a7451;background:#f0e4d3}.mail-response{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.mail-response>button{flex:1}.mail-response form{width:100%;padding-top:15px}.mail-response [hidden]{display:none}.mail-response label{display:grid;gap:8px}.mail-response textarea{width:100%;box-sizing:border-box}.mail-response form button{margin-top:12px}
/* Keep text selection and keyboard focus; suppress only browser game-art callouts. */
  .native-app[data-active-tab="town"] .town-building-screen{position:fixed;z-index:230;inset:0;display:block;width:100vw;height:100dvh;margin:0;overflow:hidden;background-color:#6f5141;background-image:url("./assets/town-ui/building-info-wood.webp");background-position:center top;background-size:100% auto;background-repeat:repeat-y;color:#17120f;font-family:"KCCHanbit",sans-serif}
  .native-app[data-active-tab="town"] .town-building-screen button,.native-app[data-active-tab="town"] .town-building-screen input,.native-app[data-active-tab="town"] .town-building-screen select{font-family:"KCCHanbit",sans-serif}
  .native-app[data-active-tab="town"] .town-building-screen-head{position:relative;height:104px;padding:52px 48px 8px 132px}
  .native-app[data-active-tab="town"] .town-building-screen-back{position:absolute;z-index:2;left:21px;top:44px;width:61px;height:61px;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent!important;box-shadow:none!important}
  .native-app[data-active-tab="town"] .town-building-screen-back img{display:block;width:100%;height:100%;object-fit:contain}
  .native-app[data-active-tab="town"] .town-building-search{display:block;margin:0}.native-app[data-active-tab="town"] .town-building-search input{width:100%;height:43px;min-height:43px;margin:0;padding:8px 22px;border:0!important;border-radius:999px;background:#fff8eddb!important;color:#211711!important;-webkit-text-fill-color:#211711!important;font-size:14px;box-shadow:none!important;color-scheme:light}
  .native-app[data-active-tab="town"] .town-building-town-filters,.native-app[data-active-tab="town"] .town-building-type-filters{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;height:39px;margin:0;padding:0 66px;overflow:hidden;white-space:nowrap}
  .native-app[data-active-tab="town"] .town-building-filter-scroll{display:flex;align-items:center;gap:13px;min-width:0;height:39px;overflow-x:auto;scrollbar-width:none}
  .native-app[data-active-tab="town"] .town-building-filter-scroll::-webkit-scrollbar{display:none}
  .native-app[data-active-tab="town"] .town-building-town-filters button,.native-app[data-active-tab="town"] .town-building-type-filters button{flex:0 0 auto;min-width:46px;min-height:29px;margin:0;padding:7px 10px;border:0;border-radius:999px;background:transparent;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:.45px #17110d;paint-order:stroke fill;font-size:12px;line-height:1;box-shadow:none;text-shadow:0 1px 1px #0009}
  .native-app[data-active-tab="town"] .town-building-town-filters button.on,.native-app[data-active-tab="town"] .town-building-type-filters button.on{background:#fff9e9;color:#241810;-webkit-text-fill-color:#241810;-webkit-text-stroke:0;text-shadow:none}
  .native-app[data-active-tab="town"] .town-building-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:9px;min-height:0;flex:1;padding:4px 3px 18px;overflow-y:auto;overscroll-behavior:contain}
  .native-app[data-active-tab="town"] .town-building-browser-card{display:grid;grid-template-rows:minmax(0,1fr) auto auto;place-items:center;min-width:0;height:158px;margin:0;padding:8px 6px;border:1px solid #c9af88;border-radius:12px;background:#f8eedc;color:#17120f;box-shadow:inset 0 1px #fff,0 3px 0 #c9b18a}
  .native-app[data-active-tab="town"] .town-building-browser-card[hidden]{display:none}
  .native-app[data-active-tab="town"] .town-building-paper{display:flex;flex-direction:column;height:calc(100dvh - 194px);margin:8px 12px 12px;padding:11px;border:5px double #8b6738;border-radius:23px;background:#f5ecdc;box-shadow:0 4px 0 #513821}
  .town-building-catalog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;padding:0 3px 12px;font-size:12px}
  .town-building-catalog-head button{font-size:11px;padding:6px 10px;border:1px solid #c9af88;border-radius:9px;background:#f7ecd7}
  .shared-residents-screen .town-building-catalog-head{flex-wrap:wrap}
  .shared-residents-screen [data-residence-request],.shared-resident-detail{min-height:0;overflow-y:auto;padding:8px 2px 20px}
  .shared-residents-screen [data-residence-request] label{display:grid;gap:6px;margin:12px 0}
  .shared-resident-detail>button{display:block;width:100%;margin:10px 0}
  .town-building-add small{font-size:12px;line-height:1.3}
  .native-app[data-active-tab="town"] .town-building-browser-card>span{display:grid;grid-template: minmax(0,1fr) / minmax(0,1fr);place-items:center;width:100%;height:83px;min-height:0}.native-app[data-active-tab="town"] .town-building-browser-card img{display:block;min-height:0;max-height:83px;width:100%;height:83px;object-fit:contain;filter:drop-shadow(0 3px 2px #0003)}
  .native-app[data-active-tab="town"] .town-building-browser-card>b{max-width:100%;overflow:hidden;color:#17120f;-webkit-text-fill-color:#17120f;-webkit-text-stroke:.45px #fff;paint-order:stroke fill;font-size:12px;line-height:1.3;text-overflow:ellipsis;text-shadow:0 1px 1px #fff;white-space:normal}.native-app[data-active-tab="town"] .town-building-browser-card>small{display:block;color:#7a6856;font-size:9px;line-height:1.3;text-align:center}
  .native-app[data-active-tab="town"] .town-building-add{position:relative;display:grid;align-content:center;justify-items:center;gap:8px;width:100%;height:158px;min-width:0;margin:0;padding:8px;border:1px dashed #b89b70;border-radius:12px;background:#f1e3c6;color:#7b592b;font-size:32px;line-height:1;box-shadow:inset 0 1px #fff}
  .native-app[data-active-tab="town"] .town-building-detail-head{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;height:118px;padding:0 29px 20px 96px;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:.65px #17110d;paint-order:stroke fill;text-shadow:0 2px 2px #0008}
  .native-app[data-active-tab="town"] .town-building-detail-head>b{max-width:100%;overflow:hidden;font-size:28px;font-weight:400;line-height:1;text-overflow:ellipsis;white-space:nowrap}
  .native-app[data-active-tab="town"] .town-building-detail-scroll{height:calc(100dvh - 118px);min-height:0;padding:7px 21px max(32px,env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
  .town-building-photo-upload{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
  .native-app[data-active-tab="town"] .town-building-hero{position:relative;height:clamp(190px,27dvh,246px);margin:0 6px clamp(34px,5dvh,48px)}
  .native-app[data-active-tab="town"] .town-building-interior{display:block;width:100%;height:100%;overflow:hidden;border:0;border-radius:28px;background:#4b392e;object-fit:cover;box-shadow:0 0 0 6px #fff,0 5px 11px #2b160f70}
  .native-app[data-active-tab="town"] .town-building-interior-empty{display:grid;place-items:center;align-content:center;gap:8px;color:#fff}.native-app[data-active-tab="town"] .town-building-interior-empty>span{font-size:58px}.native-app[data-active-tab="town"] .town-building-interior-empty>small{font-size:12px}
  .native-app[data-active-tab="town"] .town-building-exterior{position:absolute;z-index:2;right:-2px;bottom:-43px;display:block;width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 4px 3px #0006)}
  .native-app[data-active-tab="town"] .town-building-detail-form{margin:0 24px}.native-app[data-active-tab="town"] .town-building-detail-form details{display:block!important;margin:0;padding:0;border:0;background:transparent}.native-app[data-active-tab="town"] .town-building-detail-form>details>summary{display:none!important}
  .native-app[data-active-tab="town"] .town-building-detail-form .town-building-editor-card{gap:7px;padding:8px 9px 9px;border:1px solid #f7ead85c;border-radius:16px;background:linear-gradient(180deg,#f2dfc73d 0%,#c8aa8a24 58%,#76564214 100%);box-shadow:inset 0 1px 0 #fff7,0 5px 15px #2b160f25}.native-app[data-active-tab="town"] .town-building-detail-form .town-building-grid{gap:7px 24px}.native-app[data-active-tab="town"] .town-building-detail-form .town-building-editor-card :is(label,h4):not(.building-lighting-settings label){gap:4px;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.35px #17110d;paint-order:stroke fill;font-size:12px;font-weight:400;line-height:1;text-shadow:0 1px 1px #0008}.native-app[data-active-tab="town"] .town-building-detail-form .town-building-editor-card :is(input,select,button,.audience-open-button,.town-audience-field summary,.town-stock-field summary){min-height:36px;padding:7px 10px;border:1px solid #cdb79e!important;border-radius:10px;background:linear-gradient(180deg,#f7eee3 0%,#eadbc9 100%)!important;color:#17120f!important;-webkit-text-fill-color:#17120f!important;font-size:13px;font-weight:400;box-shadow:inset 0 1px 0 #fff9,0 2px 0 #ad947b,0 4px 7px #2b160f24!important;color-scheme:light}
  .native-app[data-active-tab="town"] .town-building-detail-form .town-building-name input{font-size:14px;font-weight:400}
  .native-app[data-active-tab="town"] .town-building-detail-form .town-home-beauty{grid-column:1/-1}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field){grid-column:auto}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field)>details{position:relative}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field)>details>summary{display:flex!important;align-items:center;min-height:36px;padding:7px 10px!important;list-style:none;cursor:pointer}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field)>details>summary::-webkit-details-marker{display:none}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field) .stock-picker{position:absolute;z-index:20;right:0;bottom:calc(100% + 5px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:min(310px,76vw);max-height:220px;padding:8px;overflow-y:auto;border-radius:12px;background:#fffaf0;box-shadow:0 8px 24px #0007}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field) .stock-picker button{min-height:42px;height:auto;font-size:12px;white-space:normal}.native-app[data-active-tab="town"] .town-building-detail-form :is(.town-audience-field,.town-stock-field) .stock-picker button.on{background:var(--p)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  .native-app[data-active-tab="town"] .town-building-detail-form :is(.town-building-advanced,.town-home-editor-help,.town-open-home-details){display:none!important}
.village-feature-dialog{width:min(92vw,480px);max-height:85dvh;padding:20px;overflow:auto;border:3px double #9f7d44;border-radius:20px;background:#fff5e3;color:#34261c;box-shadow:0 20px 60px #0007}
.village-feature-dialog::backdrop{background:#211a1466}
.village-feature-dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.village-feature-dialog h2{font-size:21px;margin:0}
.village-feature-dialog p{font-size:14px;line-height:1.5}
.village-feature-dialog li{margin:10px 0;line-height:1.5}
.placement-options,.building-recovery-options{display:grid;gap:10px;margin:16px 0}
.placement-options button{min-height:46px;text-align:left;background:#f7ebd1;border:1px solid #c4a571;border-radius:12px;color:#3e2c18}
.building-recovery-options label{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #d1ba94;border-radius:10px;background:#fff}
.building-recovery-options input{width:20px;height:20px;flex:none}.building-recovery-options small{display:block;color:#7d6b56}
.character-mood-badge{position:absolute;left:10px;top:10px;z-index:2;pointer-events:auto!important;padding:4px 10px!important;min-height:27px!important;border:1px solid #bfa478!important;border-radius:999px!important;background:#fff2cb!important;color:#47331e!important;-webkit-text-fill-color:#47331e!important;font-size:12px!important;line-height:1.2}
#app :is(button,[role=button],img),dialog :is(button,[role=button],img){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#app img,dialog img{-webkit-user-drag:none}
#app :is(button,[role=button]):focus-visible,dialog button:focus-visible{outline:3px solid #c28b36!important;outline-offset:3px}
html[data-ui-scale="small"]{font-size:15px}
html[data-ui-scale="normal"]{font-size:16px}
html[data-ui-scale="large"]{font-size:17.5px}
html[data-ui-scale="xlarge"]{font-size:19px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui-font)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:15px;padding:12px 17px}button.primary,header nav .on{color:#fff;background:var(--grad);border-color:transparent}.panel{background:#fff;border:1px solid var(--line);border-radius:27px;box-shadow:0 18px 45px #27334b10}
.app-loading-screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 28%,#c69a6b88,transparent 30%),linear-gradient(145deg,#54341f,#8b5b35 58%,#4a2e1d);color:#fff8ef}.app-loading-card{display:grid;justify-items:center;gap:13px;width:min(360px,88vw);padding:30px 24px;border:1px solid #f2d4b288;border-radius:30px;background:#3d261bd9;box-shadow:0 28px 90px #1d0d075f;text-align:center}.app-loading-logo{display:block;width:150px;height:128px;object-fit:contain;filter:drop-shadow(0 16px 18px #1c0d0875)}.app-loading-card strong{font-size:clamp(25px,7vw,34px);letter-spacing:-.04em}.app-loading-card span{color:#ead5c2;font-size:14px}
.app-loading-screen.is-failed .app-loading-card button{margin-top:8px;padding:12px 22px;border:1px solid #f2d4b2;border-radius:999px;background:#f7e5d3;color:#3d261b;font:inherit;font-weight:800}
/* Empty-world entry screen: supplied artwork, no blocking onboarding overlay. */
html body #app.is-welcome>main{max-width:none;margin:0;padding:0!important;height:100dvh;overflow:hidden!important}
.village-account-loading{position:fixed;z-index:80;inset:0;display:grid;place-items:center;overflow:hidden;background:#243526;color:#fff8df}.village-account-loading>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.82)}.village-account-loading>div{position:relative;display:grid;place-items:center;gap:12px;width:min(84vw,420px);padding:30px 24px;border:1px solid #f1dba777;border-radius:26px;background:#392b20dd;box-shadow:0 18px 60px #10170d99;text-align:center}.village-account-loading span{display:block;width:42px;height:42px;border:4px solid #fff4d955;border-top-color:#fff4d9;border-radius:50%;animation:village-account-spin .9s linear infinite}.village-account-loading b{font-size:21px}.village-account-loading p{margin:0;color:#eadfc9;line-height:1.55}@keyframes village-account-spin{to{transform:rotate(360deg)}}
.village-welcome{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:0;padding:clamp(18px,4vw,50px);gap:18px;overflow:hidden;color:#352b22;background:#a2ac75}
.welcome-landscape{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:52% 53%}
.village-welcome::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#10291c55,transparent 34%,#25322138)}
.welcome-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.welcome-brand{font-size:clamp(25px,4vw,36px);color:#fff6d8;text-shadow:0 2px 3px #21170e;padding:8px 25px;border:2px solid #ead8b7;border-radius:12px 18px 13px 19px;background:#513b2e url('./assets/home-ui/wood-strip.webp') center/cover;box-shadow:0 4px 0 #2f201c88}
html #app .welcome-top button{background:#fff8eae8;color:#483627;border:1px solid #bfac8f;font-size:14px;min-height:44px}
.welcome-note{align-self:end;min-width:0;width:min(450px,100%);padding:clamp(24px,3vw,36px);border:1px solid #e8d9b6;border-radius:24px 30px 23px 30px;background:#fff9edee;box-shadow:0 12px 36px #1728133b}
.welcome-eyebrow{margin:0 0 14px;color:#786242;font-size:13px;letter-spacing:.02em}
.welcome-note h1{margin:0;color:#3e3024;font-size:clamp(29px,3.7vw,42px);line-height:1.3;letter-spacing:-.04em;word-break:keep-all;overflow-wrap:anywhere}
.welcome-note h1 em{font-style:normal;color:#4c673e}
.welcome-intro{margin:14px 0 22px;color:#766953;font-size:15px;line-height:1.65;word-break:keep-all}
.welcome-actions{display:grid;gap:10px}
html #app .welcome-actions button{min-height:52px;padding:12px 16px;border-radius:13px;font-size:18px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;background:#fffaf0;color:#55412d;border:1px solid #bca383}
html #app .welcome-actions [data-welcome-create]{display:block;background:#63442f url('./assets/home-ui/wood-strip.webp') center/cover;border:2px solid #dfc79f;color:#fff8e6;box-shadow:0 3px 0 #3e2b1f}
.welcome-actions button:disabled{opacity:.6;cursor:wait}
.welcome-restore-hint{margin:12px 0 18px;font-size:12px;line-height:1.5;text-align:center;color:#7a6b58}
.welcome-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px dashed #cebea2;padding-top:15px}
.welcome-details>span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;text-align:center;word-break:keep-all;overflow-wrap:anywhere;min-width:0;color:#685d49}
.welcome-details img{width:39px;height:39px;object-fit:contain}
.welcome-language{display:flex;justify-content:center;gap:4px;justify-self:start;width:min(450px,100%)}
html #app .welcome-language button{min-height:40px;padding:6px 12px;font-size:12px;background:#263627a8;color:#fff7de;border:1px solid transparent;border-radius:8px}
html #app .welcome-language button[aria-pressed="true"]{border-color:#eed7a4;background:#253423}
@media(max-width:599px){
  .village-welcome{padding:max(12px,env(safe-area-inset-top)) 16px max(8px,env(safe-area-inset-bottom));gap:10px;grid-template-rows:auto minmax(0,1fr) auto auto}
  .welcome-top{grid-row:1}.welcome-note{grid-row:3;padding:22px}.welcome-language{grid-row:4}
  .welcome-brand{font-size:24px;padding:7px 12px;min-width:0}.welcome-landscape{object-position:57% 38%}
  .welcome-note h1{font-size:30px}.welcome-intro{font-size:14px;margin:10px 0 18px}
  .welcome-eyebrow{font-size:12px;margin-bottom:9px}.welcome-restore-hint{font-size:11px;margin-bottom:14px}
  .village-welcome:lang(ja) .welcome-note h1{font-size:clamp(22px,6.2vw,30px)}
}
@media(max-height:740px){
  .welcome-note{padding:16px}.welcome-note h1{font-size:26px}.welcome-eyebrow{margin-bottom:5px}
  .welcome-intro{margin:7px 0 12px;line-height:1.4}.welcome-details{display:none}
  .welcome-restore-hint{margin:8px 0 0}.welcome-actions{gap:7px}
  html #app .welcome-actions button{min-height:46px;padding:9px 12px;font-size:16px}
}
@media(min-width:600px) and (max-height:650px){
  .village-welcome{padding:14px 20px;gap:10px;grid-template-columns:1fr minmax(280px,390px);grid-template-rows:1fr auto}
  .welcome-top{align-self:start}.welcome-note{grid-column:2;grid-row:1/3;align-self:center}.welcome-language{grid-column:1;grid-row:2}
}
.font-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.font-setting-card label{display:grid;gap:8px}.font-preview{display:grid;gap:6px;margin-top:14px;padding:17px 19px;border:1px solid var(--line);border-radius:17px;background:#fff}.font-preview b{font-size:1.2em}.font-preview span{line-height:1.75;color:var(--muted)}
.visual-theme-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.visual-theme-options button{display:flex;align-items:center;gap:10px;text-align:left}.visual-theme-options button i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#222,#888);box-shadow:inset 0 0 0 1px #ffffff55}.visual-theme-options button[data-visual-theme="sage"] i{background:linear-gradient(135deg,#2f6d62,#8eaa96)}.visual-theme-options button[data-visual-theme="rose"] i{background:linear-gradient(135deg,#9f5265,#d39baa)}.visual-theme-options button[data-visual-theme="ocean"] i{background:linear-gradient(135deg,#296b8f,#72a9c5)}.visual-theme-options button[data-visual-theme="lavender"] i{background:linear-gradient(135deg,#735a9d,#ad98cc)}.visual-theme-options button span{display:grid}.visual-theme-options button.on{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 45%,transparent)}
.visual-theme-options button[data-visual-theme="cream"] i{background:linear-gradient(135deg,#fff4d8,#d69b56)}
.visual-theme-options button[data-visual-theme="peach"] i{background:linear-gradient(135deg,#ffe3d7,#ef8d70)}
.visual-theme-options button[data-visual-theme="mint"] i{background:linear-gradient(135deg,#dcf8ed,#50b99d)}
.visual-theme-options button[data-visual-theme="sunshine"] i{background:linear-gradient(135deg,#fff2ad,#e7a71f)}
.place-people-faces{justify-content:center!important;flex-wrap:wrap!important;max-width:200px!important;gap:clamp(0px,calc(8px - var(--people-count)*1px),3px)!important}
.place-people-faces .avatar,.place-people-faces .sprite{width:clamp(28px,calc(66px - var(--people-count)*4px),52px)!important;height:clamp(32px,calc(72px - var(--people-count)*4px),58px)!important}
.place-people-names{max-width:200px!important}
.scene h3{line-height:1.45;margin:10px 0 12px;word-break:keep-all}.scene p{line-height:1.75;margin:0 0 15px;word-break:keep-all}.scene>b{display:block;line-height:1.55;margin-top:4px}

.web-shop-cart{margin:20px;padding:20px;background:#fff8e8;border:1px solid #c5ab7e;border-radius:16px;color:#513d29}.web-shop-cart h2{margin:0 0 14px;font-size:22px}.web-shop-cart-line{display:flex;align-items:center;gap:10px;margin:12px 0}.web-shop-cart-line>span{flex:1}.web-shop-cart-line button{min-width:34px;min-height:34px;padding:4px}.web-shop-cart p{font-size:13px}.web-shop-cart>a{display:block;text-align:center;margin-top:14px;padding:12px;border-radius:10px;background:#755336;color:#fff6e2}.web-shop-cart>a[aria-disabled=true]{opacity:.45}
.web-observe-actions,.web-observe-actions>div{display:flex;align-items:center;gap:10px}.web-observe-actions{justify-content:space-between;padding:14px 0}.web-observe-actions button{position:static;min-height:42px;border:1px solid #c3a87a;background:#fff6df;border-radius:10px;color:#513c27;padding:8px 15px;font-size:14px}.web-observe-actions .discovery-rail-item{position:static;width:auto;height:auto}.web-observe-actions .discovery-rail-button{display:flex;gap:8px;width:auto;height:42px}.web-observe-actions .discovery-question-icon{width:32px;height:25px}.web-observe-actions .discovery-countdown{position:static;font-size:12px;color:#513c27}.web-observe-actions .game-hud-intervene{position:static}
.web-village-summary{padding:24px;background:#fff7e5;border:1px solid #d3b88d;border-radius:18px;text-align:center}.web-village-summary>img{width:70px;height:70px;object-fit:contain}.web-village-summary h2{font-size:22px;margin:10px}.web-village-summary p{font-size:14px}.web-village-summary>div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.web-village-summary button{font-size:13px;min-height:40px}.web-observe-actions .discovery-countdown{color:#513c27!important;text-shadow:none!important}
/* Desktop website shell owns navigation and account layout; mobile retains the game HUD. */
#app.is-desktop-web{max-width:none;margin:0;min-height:100dvh;background:#f5ecd9;color:#46362a}
.web-drawer-shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100dvh}
.web-drawer-sidebar{position:sticky;top:0;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;padding:22px 15px;gap:18px;background:#594031 url('./assets/home-ui/wood-top.webp') center/auto 210px;border-right:5px solid #39291f;color:#fff6dc;box-shadow:4px 0 12px #39291f22}
.web-drawer-sidebar button{font:inherit;color:inherit;box-shadow:none}
.web-drawer-brand{display:grid;justify-items:center;gap:5px;border:0;background:transparent;padding:0 0 14px}
.web-drawer-brand img{width:88px;height:72px;object-fit:contain}.web-drawer-brand b{font-size:26px}.web-drawer-brand small{font-size:12px;color:#ead4b5}
.web-drawer-sidebar nav{display:grid;gap:5px}.web-nav-caption{font-size:11px;color:#e0c7a5;letter-spacing:.08em;padding:13px 12px 5px}
.web-drawer-sidebar nav button{display:flex;align-items:center;gap:12px;min-height:43px;text-align:left;border:1px solid transparent;border-radius:10px;background:#33241844;padding:7px 12px;font-size:15px}
.web-drawer-sidebar nav button img{width:29px;height:29px;object-fit:contain}.web-drawer-sidebar nav button:hover{background:#8f6b46}.web-drawer-sidebar nav button[aria-current=page]{background:#fff2ce;color:#573e2a;border-color:#d0ac70;box-shadow:0 3px 0 #2f201e66}
.web-account-card{margin-top:auto;display:flex;align-items:center;gap:10px;padding:13px 9px;border:1px solid #ae8a62;border-radius:12px;background:#30221ac9;text-align:left}.web-account-card>img,.web-account-card>span:first-child{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}.web-account-card span:last-child{display:grid;gap:3px;min-width:0}.web-account-card b{overflow-wrap:anywhere}.web-account-card small{font-size:11px;color:#dec4a1}
.web-drawer-content .relationship-stage{--web-rel-offset:85px}
.web-drawer-workspace{min-width:0;background:#b18a62 url('./assets/home-design/wood.webp') center/620px auto}
.web-drawer-content .town-native-header{height:auto;min-height:88px;display:flex;flex-wrap:wrap;gap:16px;padding:16px 20px;border:2px solid #69492f;border-radius:18px;background:#fff6e5;box-shadow:0 5px 0 #3e291c33;margin-bottom:16px}
.web-drawer-content .town-native-back{flex:none;width:48px;height:48px;padding:0;border:0;background:transparent;box-shadow:none}
.web-drawer-content .town-native-back img{display:block;width:48px;height:48px;object-fit:contain}
.web-drawer-content .town-native-context{display:flex;align-items:center;gap:10px;min-width:0;flex:1;flex-wrap:wrap}
.web-drawer-content .town-native-community{display:flex;align-items:center;gap:8px;max-width:280px;padding:6px 10px;border:1px solid #c5ab7e;background:#f2e3c4;border-radius:10px;font-size:15px}
.web-drawer-content .town-native-community img{width:32px;height:32px;object-fit:contain}
.web-drawer-content .town-native-town-pill{font-size:15px;padding:8px 12px;background:#fffaf0;border:1px solid #c5ab7e;border-radius:10px}
.web-drawer-content .town-native-status{font-size:13px;color:#735a40}
.web-drawer-content .town-native-menu{display:flex;gap:6px;flex-wrap:wrap}
.web-drawer-content .town-native-menu button{font-size:14px;min-height:40px;padding:8px 14px;border:1px solid #856044;border-radius:10px;background:#6e4b34;color:#fff4d8}
.web-drawer-content .town-map-scroll{border:5px solid #684a35;border-radius:20px;overflow:hidden}
.web-drawer-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 34px;border-bottom:1px solid #d7c7a9;background:#fff9eceb}.web-drawer-topbar>span{display:grid;gap:4px;font-size:12px;color:#8b7157}.web-drawer-topbar b{font-size:24px;color:#46362a}.web-drawer-topbar>div{display:flex;align-items:center;gap:15px;font-size:12px}.web-drawer-topbar button{font-size:13px;background:#f2e2bf;border:1px solid #c3a87a;border-radius:9px;padding:9px 15px;color:#513c27}
.web-drawer-content{padding:24px 28px;max-width:1560px;margin:auto;min-width:0;min-height:76dvh}.web-drawer-content>.panel{border:1px solid #d6c5a6;border-radius:19px;background:#fffaf0;box-shadow:0 5px 18px #6145250b}.web-drawer-content .desktop-observe-scene{border:5px solid #735138;border-radius:22px;overflow:hidden;box-shadow:0 8px 0 #4c34212b}.web-drawer-content .desktop-scene-canvas{min-height:420px}.web-drawer-content .desktop-observe-lower .viewport{height:440px;min-height:0}.web-drawer-content .desktop-observe-log .native-log-card ol:has(>li:only-child){grid-template-columns:1fr}.web-drawer-content .desktop-observe-log .native-log-card li{grid-template-columns:1fr}.web-drawer-content .desktop-observe-lower{grid-template-columns:minmax(0,1fr) minmax(270px,.7fr)}
.web-drawer-footer{background:#fff9eceb;display:flex;justify-content:space-between;gap:20px;padding:20px 34px;border-top:1px solid #deceb1;font-size:12px;color:#8b7157}.web-drawer-footer a{color:inherit}.web-drawer-content .multiplayer-directory{min-height:0}.web-drawer-content .village-welcome{min-height:70dvh}
@media(min-width:721px) and (max-width:1100px){.web-drawer-shell{grid-template-columns:182px minmax(0,1fr)}.web-drawer-content{padding:20px}.web-drawer-topbar{padding:18px 20px}.web-account-status{max-width:150px;overflow-wrap:anywhere}.web-drawer-content .desktop-observe-lower{grid-template-columns:1fr}.web-drawer-brand b{font-size:22px}}

header{height:106px;display:flex;align-items:center;gap:28px;padding:15px 30px;background:#fff;border-bottom:1px solid var(--line);position:relative;top:0;z-index:50}.brand{display:flex;align-items:center;gap:13px;min-width:270px}.brand h1{margin:0;font-size:31px}.brand small,#save-state{color:var(--muted)}.logo{width:76px;height:68px;display:grid;place-items:center;background:transparent}.logo img{display:block;width:100%;height:100%;object-fit:contain}header nav{display:flex;gap:8px;overflow:auto;flex:1}header nav button{white-space:nowrap;font-size:19px}.account{white-space:nowrap}main{padding:26px;max-width:1900px;margin:auto}
.title{display:flex;align-items:center;justify-content:space-between;gap:12px}.empty{max-width:760px;margin:10vh auto;text-align:center;padding:70px 20px}.roster{display:flex;gap:13px;overflow:auto;padding:5px 3px 18px}.roster-card{display:flex;align-items:center;gap:12px;min-width:265px;text-align:left;border:2px solid transparent}.roster-card.on{border-color:var(--own);box-shadow:0 7px 22px color-mix(in srgb,var(--own) 25%,transparent)}.roster-card span{display:grid}.roster-card b{font-size:22px}.roster-card small{color:var(--muted)}
.avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--own,var(--p));color:#fff;display:grid;place-items:center;flex:none;font-size:22px}.sprite{width:76px;height:76px;object-fit:contain;background:transparent;border:0;outline:0;filter:drop-shadow(0 6px 5px #17203355);flex:none}
img[src^="local-media://"]{visibility:hidden}
img.sprite,.char-row>.sprite,.char-row>.avatar,.home-person>.sprite,.home-person>.avatar,.place-people-faces>.sprite,.place-people-faces>.avatar,.person>.sprite,.person>.avatar{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}.person>span.avatar,.home-person>span.avatar{padding:0!important;border-radius:50%!important;background:var(--own,var(--p))!important}.char-row>.avatar,.char-row>.sprite{flex:0 0 auto;margin:0 5px 0 0}.char-row{min-height:92px;padding:12px 14px;box-sizing:border-box}.char-row.on{box-shadow:0 7px 20px color-mix(in srgb,var(--p) 16%,transparent)}
.observe{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(340px,.7fr);gap:18px}.world-hud{position:relative;z-index:20;display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.world-hud>div{background:#fffffff1;border:1px solid #fff;border-radius:17px;padding:11px 15px;box-shadow:0 8px 25px #20304a1e;display:grid}.world-hud>div:last-child{text-align:right}.viewport{height:690px;overflow:auto;overscroll-behavior:contain;touch-action:none;border-radius:27px;background:#d9e9df}.world{position:relative;width:1200px;height:676px;overflow:hidden;transform-origin:0 0;background:#d9e9df}.world-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#d9e9df}.place{position:absolute;transform:translate(-50%,-50%);width:136px;min-height:105px;padding:12px;border:4px solid #fff;border-radius:22px;background:var(--place);box-shadow:0 10px 0 color-mix(in srgb,var(--place) 58%,#333),0 14px 24px #1c293f31;display:grid;place-items:center}.place i{font-style:normal;font-size:27px}.place small{color:#273248}.person{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;background:transparent;border:0;padding:0;z-index:8}.person span{background:#fffffff1;padding:9px 12px;border-radius:12px;font-size:18px}.person .sprite{width:92px;height:92px}.person .avatar{border:0;outline:0}.zoom{display:flex;gap:6px;margin-top:8px}.zoom button{width:46px;height:44px;padding:0}.detail{padding:18px}.hero{height:310px;border-radius:23px;background:var(--grad);overflow:hidden;display:grid;place-items:center}.hero>img:not(.sprite){width:100%;height:100%;object-fit:cover}.hero .sprite{width:85%;height:85%}.detail h2{font-size:36px;margin:18px 0 5px}.detail>p{color:var(--muted)}.scene{background:#f4f7fb;border:1px solid var(--line);border-radius:20px;padding:19px;margin-top:18px}.scene h3{font-size:24px;margin:8px 0}
.editor{display:grid;grid-template-columns:350px 1fr;gap:18px}.editor>aside,.form{padding:24px}.char-row{width:100%;display:flex;gap:11px;align-items:center;text-align:left;margin:9px 0;background:#f6f8fb}.char-row.on{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 25%,transparent)}.char-row span{display:grid}.char-row small,label small{color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fields label,.form>label{display:grid;gap:7px;color:var(--muted)}input,select{width:100%;min-height:54px;border:1px solid var(--line);border-radius:15px;background:#f5f7fb;padding:13px}.check{margin:18px 0}.check input{width:auto;min-height:0}.chips{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.chips button{padding:9px 13px;margin:4px}.chips .on{color:var(--p);border-color:var(--p);background:color-mix(in srgb,var(--p) 11%,#fff)}
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.home{padding:20px}.clean{margin:15px 0;background:#f2f5f9;padding:12px;border-radius:15px}.clean i{display:block;height:10px;margin-top:8px;border-radius:20px;background:linear-gradient(90deg,#f39b81,#f1ce66,#6cc894)}.rooms{position:relative;display:grid;grid-template-columns:1.45fr .9fr .58fr;grid-template-rows:150px 95px 205px;gap:9px;padding:11px;min-height:480px;background:#5c4234;border-radius:24px;overflow:hidden}.room{position:relative;padding:12px;border:5px solid #5c4234;border-radius:15px;background:linear-gradient(#f5f5f4df,#b9bcc1df) center/cover;overflow:hidden;box-shadow:none;filter:none}.living{grid-column:1/3;grid-row:1/3}.kitchen{grid-column:3;grid-row:1}.entry{grid-column:3;grid-row:2}.bath{grid-column:3;grid-row:3}.bedroom{grid-column:1;grid-row:3}.study{grid-column:2;grid-row:3}.room-tools{position:absolute;right:7px;top:7px;display:flex;gap:4px;opacity:.2;transition:.2s}.room:hover .room-tools{opacity:1}.room-tools button{padding:5px 8px;border-radius:9px;font-size:12px}.home-person{position:absolute;z-index:4;display:flex;align-items:center;filter:drop-shadow(0 7px 7px #19223844);background:transparent;border:0;padding:0}.home-person.room-living{left:15%;top:22%}.home-person.room-kitchen{left:79%;top:13%}.home-person.room-entry{left:80%;top:43%}.home-person.room-bath{left:82%;top:73%}.home-person.room-bedroom{left:10%;top:72%}.home-person.room-study{left:47%;top:72%}.home-person.pos-1{transform:translate(20px,58px)}.home-person.pos-2{transform:translate(70px,10px)}.home-person .avatar{width:55px;height:55px}.home-person .sprite{width:70px;height:70px}.home-person span{display:grid;max-width:190px;background:#fff;padding:8px 11px;border-radius:12px}.home-person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.relationship-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.relation{padding:22px;border-radius:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--a) 18%,#fff),color-mix(in srgb,var(--b) 18%,#fff));margin:12px 0}.empty-mini{text-align:center;padding:65px 20px;color:var(--muted)}.relation-dialog{border:0;border-radius:24px;padding:0;box-shadow:0 30px 90px #17203355}.relation-dialog::backdrop{background:#17203377}.relation-dialog form{width:min(460px,90vw);padding:26px;display:grid;gap:15px}.relation-dialog label{display:grid;gap:7px}.relation-dialog .cohabit{display:flex;align-items:center}.relation-dialog .cohabit input{width:auto;min-height:auto}.relation-dialog .hint{color:var(--muted);font-size:14px}.relation-dialog form>div{display:flex;justify-content:flex-end;gap:8px}.town-edit{display:grid;grid-template-columns:1fr 360px;gap:18px}.town-edit>.world{border-radius:27px;overflow:hidden}.town-edit .place{cursor:grab}.home-grid+.title{margin-top:15px}
@media(max-width:900px){header{height:auto;flex-wrap:wrap;padding:9px}.brand{min-width:190px}.brand h1{font-size:25px}.logo{width:50px;height:50px}.brand small{display:none}header nav{order:3;width:100%}header nav button{padding:10px 14px}#save-state{margin-left:auto;font-size:12px}main{padding:8px}.observe,.editor,.town-edit{grid-template-columns:1fr}.roster-card{min-width:220px}.viewport{height:calc(100dvh - 260px);min-height:480px}.detail{margin-top:8px}.home-grid{display:block}.home{margin-bottom:12px}.rooms{min-width:720px}.home{overflow:auto}.fields{grid-template-columns:1fr}.town-edit>.world{min-width:1200px}.town-edit{overflow:auto}}
@media(max-width:600px){body{overflow-x:hidden}#app>header{position:sticky;top:0}.account{max-width:150px;overflow:hidden;text-overflow:ellipsis}.observe>section{min-width:0}.world-hud{position:sticky;left:0;top:0}.world-hud>div{min-width:0;max-width:48%;font-size:14px}.viewport{border-radius:20px}.detail .hero{height:55vh}.room-tools{opacity:1}}

/* 화면·집·로그 안정화 */
.observe{align-items:start}
.viewport{width:100%;height:auto;min-height:420px;aspect-ratio:1672/941;overflow:auto;touch-action:pan-x pan-y;overscroll-behavior:contain}
.viewport .world{width:max(100%,1200px);height:max(100%,676px);transform:none!important}
.world-bg{object-fit:contain}
.place{width:11.33%;height:15.5%;min-height:0;padding:clamp(3px,.7vw,8px);border-width:3px}
.place.has-art{width:12.5%;height:19.5%;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.building-art{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 7px #17203355)}
.place-label{display:grid;place-items:center;min-width:104px;padding:4px 7px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;color:#050505;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 3px #fff}
.place-label small{color:#050505}
.place.has-art .place-label{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);z-index:14;pointer-events:none}
.map-place-label{position:absolute;z-index:30;display:grid;place-items:center;transform:translate(-50%,calc(-100% - 48px));min-width:110px;color:#050505;text-align:center;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 2px 3px #fff;pointer-events:none}.map-place-label small{color:#050505}
.place-people{z-index:18;display:grid!important;justify-items:center!important;gap:3px!important;width:max-content!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important;transform:translate(-50%,-50%)!important;overflow:visible!important}.place-people-faces{display:flex!important;align-items:flex-end!important;gap:2px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:visible!important}.place-people-faces .avatar,.place-people-faces .sprite{width:52px!important;height:58px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;object-fit:contain!important;overflow:visible!important}.place-people-faces>b{display:grid;place-items:center;width:28px;height:28px;margin-left:2px;border-radius:50%;background:var(--p);color:#fff;font-size:11px}.place-people-names{max-width:150px!important;padding:3px 7px!important;border-radius:0!important;background:transparent!important;color:#17120f!important;-webkit-text-fill-color:#17120f!important;font-size:11px!important;text-align:center!important;white-space:normal!important;text-shadow:0 1px 2px #fff,0 -1px 2px #fff;box-shadow:none!important}
.world .place-people-faces>.place-person-face{display:grid!important;place-items:end center!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;appearance:none!important;cursor:pointer}
.date-schedule{display:block!important;margin:10px 0!important;padding:0!important;border:2px solid var(--log-theme)!important;border-radius:17px!important;background:color-mix(in srgb,var(--log-theme) 8%,#fff)!important;overflow:hidden}.date-schedule-title{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--log-theme);color:#fff}.date-schedule-title small{color:#fff!important}.date-schedule>ol{max-height:none!important;overflow:visible!important;margin:0!important;padding:5px 13px 9px!important}.date-schedule>ol>li{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:8px!important;margin:0!important;padding:10px 0!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--log-theme) 20%,var(--line))!important;background:transparent!important}.date-schedule>ol>li:last-child{border-bottom:0!important}.date-schedule>ol time{font-weight:800;color:var(--log-theme)}.date-schedule>ol span{display:grid}.date-schedule>ol small{color:var(--muted)}
.place:not(.has-art) .place-label{padding:0;border:0;background:transparent;box-shadow:none}
.person>span:not(.avatar){font-size:clamp(12px,1.2vw,18px)}
.person .sprite{width:clamp(54px,6vw,92px);height:clamp(54px,6vw,92px)}
.detail-column{display:grid;gap:16px}
.hero{height:270px}
.place-photo{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:15px;margin-top:20px}
.life-log{padding:20px}.life-log ol{list-style:none;padding:0;margin:15px 0 0}.life-log li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--line)}.life-log li>span{display:grid;min-width:0}.life-log small,.life-log time{color:var(--muted)}.life-log .now b{color:var(--p)}
.life-log ol{max-height:460px;overflow-y:auto;overscroll-behavior:contain;padding-right:7px}.home-family-log ol{max-height:360px}
.home-page{width:min(1200px,100%);margin:0 auto}.home-tabs{display:flex;flex-wrap:wrap;gap:10px;overflow:visible;margin:12px 0 18px}.home-tabs button{min-width:172px;min-height:58px;padding:12px 18px;font-size:17px;background:var(--home-grad);background-image:linear-gradient(#17203338,#17203338),var(--home-photo,linear-gradient(transparent,transparent)),var(--home-grad);background-position:center;background-size:cover}.home-tabs .on{color:#fff}
.home-grid{display:block;width:100%;margin:auto}.rooms{grid-template-rows:1.1fr .72fr 1.45fr;min-height:0;aspect-ratio:16/9}
.room-people{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end}
.home-person{position:static}.home-person-status{max-width:180px}.home-person .avatar{width:52px;height:52px}.home-person .sprite{width:66px;height:66px}
.town-edit{grid-template-columns:minmax(0,1fr) 360px}.town-edit>.world{width:100%;height:auto;aspect-ratio:1672/941}
.place-editor{display:grid;gap:7px;margin-top:16px}.place-editor>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;background:#f5f7fb;border-radius:12px}.place-editor button,.image-actions button{padding:8px 10px}.image-actions{display:flex;gap:7px}
@media(max-width:900px){
  .viewport{height:auto;min-height:0}
  .town-edit>.world{min-width:0}
  .town-edit{overflow:visible}
  .rooms{min-width:0}
  .home{overflow:hidden}
}
@media(max-width:600px){
  .world-hud{position:relative}
  .detail .hero{height:220px}
  .rooms{gap:4px;padding:5px}
  .room{padding:7px;border-width:3px}
  .home-person-status{display:none}
  .home-person .avatar{width:42px;height:42px}
  .home-person .sprite{width:48px;height:48px}
  .place b{font-size:12px}.place small{font-size:10px}
  .place{border-width:2px;box-shadow:0 5px 0 color-mix(in srgb,var(--place) 58%,#333)}
}

/* 집 편집과 상태 */
.home-name{font-size:27px;font-weight:700;background:#fff;min-height:46px}
.room-name{position:relative;z-index:6;width:min(170px,62%);min-height:34px;padding:5px 8px;background:#ffffffdd;border-radius:9px}
.resident-editor{margin:14px 0;padding:14px;background:#f4f7fb;border-radius:17px}
.resident-editor h3{margin:0 0 9px}.resident-editor>div{display:flex;flex-wrap:wrap;gap:8px}
.resident-editor button{display:flex;align-items:center;gap:7px;padding:7px 10px}
.resident-editor button.on{color:var(--p);border-color:var(--p);background:color-mix(in srgb,var(--p) 10%,#fff)}
.resident-editor .avatar,.resident-editor .sprite{width:34px;height:34px}
.furniture{position:absolute;z-index:5;left:7px;right:7px;top:50px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.furniture button{padding:4px 7px;border-radius:9px;font-size:12px;background:#ffffffe8}
.furniture button.on{color:#fff;background:var(--grad);border-color:transparent}
.home-statuses{margin-top:18px}.home-statuses>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-status{display:flex;align-items:center;gap:12px;text-align:left;background:color-mix(in srgb,var(--own) 7%,#fff);border-color:color-mix(in srgb,var(--own) 35%,var(--line))}
.home-status span{display:grid;min-width:0}.home-status b{font-size:20px}.home-status small{color:var(--own)}
.home-status em{font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-status .avatar,.home-status .sprite{width:52px;height:52px}
.sleep-room-editor{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:17px;background:#f8fafc}.sleep-room-editor h3{margin:0}.sleep-room-editor>label{display:grid;grid-template-columns:minmax(90px,.5fr) 1fr;align-items:center;gap:10px;margin-top:8px}.sleep-room-editor select{min-height:42px}
.custom-room{grid-column:span 1;grid-row:auto;min-height:130px}
.rooms.has-extra{aspect-ratio:auto;min-height:620px;overflow:visible;grid-auto-rows:minmax(130px,auto)}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

@media(max-width:600px){
  .home{padding:13px}
  .rooms{width:100%;min-width:0;min-height:clamp(620px,160vw,760px);aspect-ratio:auto;grid-template-rows:1.1fr .72fr 1.45fr}
  .room-people{gap:3px;left:5px;right:5px;bottom:5px}
  .home-person-status{display:grid;font-size:12px;padding:5px 7px}
  .home-person-status small{max-width:110px}
  .home-statuses>div{grid-template-columns:1fr}
  .furniture{top:42px}.furniture button{font-size:10px;padding:3px 5px}
}

/* 캐릭터 순서와 집별 색 */
.char-sort-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:stretch;margin:8px 0}
.char-sort-row .char-row{width:100%;margin:0}
.sort-controls{display:grid;gap:4px}
.sort-controls button{width:38px;min-height:0;padding:0;border-radius:11px;font-size:12px}
.sort-controls button:disabled{opacity:.28}
.home-tabs button{color:#fff;opacity:.72;border-color:#ffffff88}
.home-tabs .on{opacity:1;box-shadow:0 7px 20px #24314322}
.home-photo-editor,.character-menu,.town-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.character-menu{padding:6px;border:1px solid var(--line);border-radius:18px;background:#f4f7fb;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.character-menu button{white-space:nowrap;flex:0 0 auto}
.character-menu button.on,.town-tabs button.on{color:#fff;background:var(--grad);border-color:transparent}
.town-tabs{padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px}
.town-tabs .town-choice{display:flex;align-items:center;gap:3px}
.town-tabs .town-choice>button:last-child{padding:8px;color:#c44555}

/* 같은 장소의 인물은 작고 촘촘하게 */
@media(max-width:600px){
  .person .avatar{width:30px;height:30px}
  .person .sprite{width:38px;height:38px}
  .person>span:not(.avatar){max-width:68px;padding:4px 6px;border-radius:8px;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .char-sort-row{gap:4px}
  .sort-controls button{width:34px}
}

/* 세계관 취향 사전 */
.catalog-shell{display:grid;gap:20px}
.catalog-intro{padding:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 13%,#fff),color-mix(in srgb,var(--s) 15%,#fff))}
.catalog-intro h2{margin:0 0 7px;font-size:31px}.catalog-intro p{margin:0;color:var(--muted)}
.catalog-section{padding:22px}.catalog-section>.title h3{margin:0;font-size:26px}
.catalog-add{display:grid;grid-template-columns:1.2fr 1fr 1.5fr auto;gap:8px;margin:16px 0}
.catalog-add.food{grid-template-columns:1.1fr .9fr 1.3fr .7fr .7fr auto}
.catalog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.catalog-card{display:grid;grid-template-columns:74px 1fr auto;gap:11px;align-items:start;padding:13px;border:1px solid var(--line);border-radius:18px;background:#f7f9fc}
.catalog-card img,.catalog-thumb{width:74px;height:74px;object-fit:cover;border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 20%,#fff),color-mix(in srgb,var(--s) 25%,#fff))}
.catalog-card .catalog-fields{display:grid;gap:7px}.catalog-card input,.catalog-card select{min-height:39px;padding:8px 10px;border-radius:10px}
.catalog-card .delete{padding:7px 9px;color:#c33}.catalog-card small{color:var(--muted)}
.favorite-groups{display:grid;gap:12px}.favorite-group{padding:13px;border:1px solid var(--line);border-radius:16px;background:#f8fafc}
.favorite-group strong{display:block;margin-bottom:7px}.favorite-group button{padding:8px 11px;margin:3px}
.favorite-group button.on,.stock-picker button.on{color:#fff;background:var(--grad);border-color:transparent}
.place-stock{margin:9px 0 15px;padding:12px;background:#f4f7fb;border-radius:15px}
.place-stock>strong{display:block;margin-bottom:8px}.stock-picker{display:flex;flex-wrap:wrap;gap:6px}.stock-picker button{padding:7px 10px}
.place-editor details{border:1px solid var(--line);border-radius:15px;background:#f7f9fc;padding:10px}.place-editor summary{cursor:pointer;font-size:18px}

@media(max-width:1100px){.catalog-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .catalog-add,.catalog-add.food{grid-template-columns:1fr 1fr}.catalog-add button{grid-column:1/-1}
  .catalog-cards{grid-template-columns:1fr}.catalog-card{grid-template-columns:58px 1fr auto}
  .catalog-card img,.catalog-thumb{width:58px;height:58px}
}

/* 수동 계정 저장과 취향 사전 스티커 */
.sync-panel{margin:0 0 22px;padding:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 9%,#fff),color-mix(in srgb,var(--s) 10%,#fff))}
.sync-panel h2{margin:0 0 8px}.sync-panel p{font-weight:700}.sync-actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.catalog-sticker{display:inline-block;width:34px;height:34px;margin-right:7px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 3px 3px #0002)}
.building-art{object-fit:contain;background:transparent;filter:drop-shadow(0 8px 6px #2235)}
.place.has-art{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible}
.place.has-art .building-name{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);max-width:130px;padding:0;color:#182033;background:transparent;border:0;box-shadow:none;text-shadow:0 2px 2px #fff,0 -1px 2px #fff;white-space:nowrap;font-weight:800}
@media(max-width:600px){
  .sync-actions{display:grid}.sync-actions button{width:100%}
  .room-tools{opacity:1}
  .catalog-sticker{width:28px;height:28px}
}

/* 2026-08-01 저장·관찰 UI 정리 */
.place{transform:translate(-50%,-50%) scale(var(--place-scale,1))}
.roster-card{min-width:215px;padding:11px}.roster-card b{font-size:18px}.roster-card .avatar{width:46px;height:46px}
.place-config{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}.place-config label{display:grid;gap:5px}
.log-modal[hidden]{display:none}.log-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px;background:#10182788;backdrop-filter:blur(5px)}
.log-dialog{width:min(620px,100%);max-height:86dvh;overflow:auto;padding:24px;border-radius:25px;background:#fff;box-shadow:0 24px 80px #10182755}
.log-dialog .title{margin-bottom:12px}.log-dialog img{display:block;width:100%;max-height:390px;object-fit:cover;border-radius:18px;margin-top:15px}.log-dialog p{line-height:1.7}
.life-log li{cursor:pointer}.life-log li:hover{background:color-mix(in srgb,var(--p) 7%,#fff)}
.town-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:10px}
.observe-town-switcher{display:flex;align-items:center;gap:8px;overflow:auto;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:#fff}
.observe-town-switcher>b{white-space:nowrap}.observe-town-switcher button{padding:8px 12px;white-space:nowrap}
.observe-town-switcher button.on{color:#fff;background:var(--grad);border-color:transparent}

@media(max-width:700px){
  .roster{gap:8px;padding-bottom:10px}.roster-card{min-width:158px;gap:7px;padding:8px}.roster-card b{font-size:15px}.roster-card small{font-size:11px}
  .roster-card .avatar{width:38px;height:38px}.roster-card .sprite{width:44px;height:44px}
  .place-config{grid-template-columns:1fr}.place-editor details{padding:8px}
  .log-dialog{padding:18px}.log-dialog img{max-height:48dvh}
}

/* 2026-08-11: one vivid global palette controls every screen and character. */
.visual-theme-options button i{
  background:linear-gradient(135deg,var(--theme-a,#20242a),var(--theme-b,#6d747d))!important;
}
.visual-theme-options button.on{
  background:color-mix(in srgb,var(--p) 10%,var(--panel))!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
:is(
  button.primary,header nav .on,.furniture button.on,.character-menu button.on,.town-tabs button.on,
  .favorite-group button.on,.stock-picker button.on,.observe-town-switcher button.on,
  .color-mode-options button.on,.personality-choice button.on,.routine-toolbar .on,
  .audience-dialog-list button.on,.fashion-extra-fields button.on,.closet-chip-grid button.on,
  .layout-picker button.on,.outfit-item-picker button.on,.native-sub-tabs button.on,
  .mobile-character-pane-grid button.on,.mobile-character-strip button.on
){
  color:var(--on-grad)!important;
  -webkit-text-fill-color:var(--on-grad)!important;
}
html[data-color-mode][data-active-tab="settings"] .settings-shell button.primary,
html[data-color-mode][data-active-tab="settings"] .color-mode-options button.on{
  color:var(--on-grad)!important;
  -webkit-text-fill-color:var(--on-grad)!important;
}

/* Older saves may still contain personal colors. They remain readable data, but no longer tint UI. */
[style*="--own:"]{--own:var(--p)!important;--own-secondary:var(--s)!important}
[style*="--character-own:"]{--character-own:var(--p)!important;--character-secondary:var(--s)!important}
[style*="--relationship-own:"]{--relationship-own:var(--p)!important;--relationship-own-secondary:var(--s)!important}
[style*="--native-own:"]{--native-own:var(--p)!important;--native-own-secondary:var(--s)!important}
[style*="--resident-theme:"]{--resident-theme:var(--p)!important}
[style*="--home-grad:"]{--home-grad:var(--grad)!important}

/* Final Baroque authority: the compatibility layer above must not return the
   ornamental theme to the standard navy settings skin. */
html.native-app[data-color-mode][data-visual-theme="baroque"] body>header,
html.native-app[data-color-mode][data-visual-theme="baroque"] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-bottom:1px solid #a77a4f!important;
  background:linear-gradient(180deg,#17191f 0%,#0d0f13 100%)!important;
  box-shadow:0 9px 28px #08090c55,inset 0 -1px #d0a06655!important;
}
html[data-color-mode][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell{
  background:
    radial-gradient(circle at 9% 4%,#d0a06614,transparent 26%),
    linear-gradient(145deg,#151519,#24191c)!important;
  border-color:#79573d!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#79573d!important;
  background:
    radial-gradient(circle at 12% 4%,#d0a06612,transparent 27%),
    linear-gradient(145deg,#251c1e,#19181b)!important;
  color:#f3e4cd!important;
  box-shadow:0 17px 38px #0606094f,inset 0 0 0 1px #d0a06618!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell{
  background:
    radial-gradient(circle at 9% 4%,#fffaf3 0 2%,transparent 24%),
    linear-gradient(145deg,#e5d1af,#c7a477)!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#b58350!important;
  background:
    linear-gradient(90deg,transparent 0 97%,#8f5e310b 97%),
    radial-gradient(circle at 15% 8%,#fffaf0 0 2%,transparent 28%),
    linear-gradient(145deg,#f9eedc,#ead8bb)!important;
  color:#2c1a17!important;
  box-shadow:0 15px 34px #5a382629,inset 0 0 0 1px #fff7e188!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"]{
  position:relative!important;overflow:hidden!important;min-height:82px!important;
  border:2px solid #b98552!important;
  background:linear-gradient(115deg,#111318 0 24%,#efe0c7 24% 72%,#762f43 72% 100%)!important;
  color:#2c1a17!important;-webkit-text-fill-color:#2c1a17!important;
  box-shadow:inset 0 0 0 1px #f2d6aa66,0 8px 20px #1d11183d!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] span{
  position:relative;z-index:2;padding:5px 55px 5px 10px;border-radius:10px;background:#efe0c7e8!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] :is(b,small){
  color:#2c1a17!important;-webkit-text-fill-color:#2c1a17!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"]::after{
  content:"❦";position:absolute;z-index:2;right:18px;top:50%;translate:0 -50%;color:#f0c78f;font:700 28px Georgia,serif;text-shadow:0 1px #351724;
}

/* 2026-08-11q: home editing, requests and statistics use real HTML controls. */
.home-observe-tools{position:absolute;z-index:22;display:flex;align-items:center;justify-content:center;gap:6px}
.home-observe-tools button{min-height:31px;padding:6px 10px;border:1px solid #ffffff45;border-radius:999px;background:#101722b8;color:#fff;font:800 11px/1 inherit;box-shadow:0 6px 16px #0004;backdrop-filter:blur(10px)}
.native-observe-home>.home-observe-tools{top:max(111px,calc(env(safe-area-inset-top) + 103px));left:50%;translate:-50% 0;white-space:nowrap}
.desktop-observe-scene .home-observe-tools{top:62px;right:20px}

:is(.home-display-editor-dialog,.character-stats-dialog){width:min(760px,calc(100vw - 24px));max-height:min(820px,calc(100dvh - 24px));padding:0;border:1px solid var(--line);border-radius:26px;background:var(--panel);color:var(--ink);box-shadow:0 24px 80px #0008;overflow:hidden}
:is(.home-display-editor-dialog,.character-stats-dialog)::backdrop{background:#07101bb8;backdrop-filter:blur(5px)}
:is(.home-display-editor-dialog,.character-stats-dialog)>form{display:grid;gap:15px;max-height:inherit;padding:22px;overflow:auto;box-sizing:border-box}
.home-dialog-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.home-dialog-head small{letter-spacing:.15em;color:var(--muted)}
.home-dialog-head h2{margin:3px 0 0}
.home-dialog-head>button{width:45px;height:45px;padding:0;border:1px solid var(--line);border-radius:15px;background:var(--soft);color:var(--ink);font-size:28px;line-height:1}
.home-display-editor-dialog>form>label{display:grid;gap:8px;font-weight:850}
.home-display-editor-dialog :is(select,input[type="text"],input:not([type])){width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--soft);color:var(--ink);box-sizing:border-box}
.home-display-editor-dialog input[type="range"]{width:100%;accent-color:var(--p)}
.home-display-editor-dialog label>b{justify-self:end;margin-top:-28px;color:var(--p)}
.character-stat-summary{display:flex;align-items:baseline;gap:10px;padding:15px 18px;border-radius:18px;background:linear-gradient(135deg,var(--p),var(--s));color:var(--on-grad)}
.character-stat-summary b{font-size:38px;line-height:1}.character-stat-summary span{font-weight:900}
.character-stat-highlights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.character-stat-highlights article{display:grid;gap:7px;min-width:0;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}
.character-stat-highlights small{color:var(--muted);font-weight:800}.character-stat-highlights b{font-size:20px;color:var(--p)}
.character-stat-donuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.character-stat-donuts article{display:grid;place-items:center;align-content:center;gap:8px;min-width:0;padding:13px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.character-stat-donuts article>i{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:conic-gradient(from -90deg,color-mix(in srgb,var(--p) calc(72% + var(--chart-index)*5%),var(--s)) calc(var(--chart-percent)*1%),color-mix(in srgb,var(--line) 68%,transparent) 0);font-style:normal;position:relative}
.character-stat-donuts article>i::after{content:"";position:absolute;inset:9px;border-radius:inherit;background:var(--panel)}
.character-stat-donuts article b{position:relative;z-index:1;color:var(--ink);font-size:18px}.character-stat-donuts article>span{text-align:center;color:var(--muted);font-weight:800;font-size:13px}
.character-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.character-stat-grid section{min-width:0;padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--soft)}
.character-stat-grid h3{margin:0 0 10px;font-size:16px}
.character-stat-grid ol{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.character-stat-grid li{display:grid;gap:5px}
.character-stat-grid li>span{display:flex;justify-content:space-between;gap:8px;min-width:0}
.character-stat-grid li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-stat-grid li small{flex:none;color:var(--muted)}
.character-stat-grid li>i{display:block;height:7px;border-radius:99px;background:color-mix(in srgb,var(--p) 13%,var(--panel));overflow:hidden}
.character-stat-grid li>i>u{display:block;width:var(--stat-value);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--p),var(--s));text-decoration:none}
.character-stat-actions{position:sticky;bottom:-22px;display:grid;grid-template-columns:1fr auto;gap:10px;margin:0 -22px -22px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(12px)}
.character-stat-actions button{min-height:44px}
.character-stat-actions button.primary{background:linear-gradient(135deg,var(--p),var(--s))!important;color:var(--on-grad,#fff)!important;border-color:color-mix(in srgb,var(--p) 72%,var(--line))!important}
@media not all {
.statistics-report{position:relative;display:grid;gap:16px;width:min(980px,calc(100% - 28px));margin:0 auto;padding:84px 18px calc(92px + env(safe-area-inset-bottom));color:#2e2118}.statistics-back-button{position:absolute;z-index:3;left:18px;top:18px;width:58px;height:58px;padding:0;border:0;background:transparent url("./assets/home-ui/back.webp") center/contain no-repeat;filter:drop-shadow(0 4px 3px #0005)}.statistics-report-head{padding:5px 0 3px 74px}.statistics-report-head small,.statistics-card header small,.personality-top>small{color:#9a7417;font:800 11px/1.2 sans-serif;letter-spacing:.14em}.statistics-report-head h1{margin:4px 0 3px;font-size:34px}.statistics-report-head p{margin:0;color:#725f50}.statistics-scope-tabs{display:flex;gap:8px;overflow-x:auto;padding:3px 1px 7px;scrollbar-width:none}.statistics-scope-tabs button{display:flex;align-items:center;gap:7px;flex:0 0 auto;min-height:43px;padding:8px 15px;border:1px solid #b79c70;border-radius:999px;background:#fffaf0;color:#3a2a1d;box-shadow:0 3px 0 #c6aa78;font-weight:800}.statistics-scope-tabs button.on{border-color:#8c6a13;background:#e6c43c;box-shadow:inset 0 1px #fff9,0 3px 0 #9c7621}.statistics-scope-tabs small{display:grid;place-items:center;min-width:21px;height:21px;border-radius:50%;background:#fff8;font-size:11px}.statistics-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.statistics-summary article,.statistics-lifestyle article{display:grid;gap:5px;padding:16px;border:1px solid #ccb78f;border-radius:18px;background:linear-gradient(150deg,#fffdf6,#eee2cd);box-shadow:0 5px 0 #c0a477}.statistics-summary small,.statistics-lifestyle small{color:#796754;font-weight:750}.statistics-summary b{font-size:29px}.statistics-summary em{margin-left:3px;font-size:14px;font-style:normal}.statistics-card{padding:18px;border:1px solid #cbb58c;border-radius:24px;background:#fffaf0;box-shadow:0 7px 0 #bea174}.statistics-card>header{display:flex;align-items:end;justify-content:space-between;gap:12px}.statistics-card h2{margin:3px 0 0}.statistics-card header p{margin:0;color:#75614d;font-weight:800}.population-legend{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin:16px 0 8px;text-align:center;font-size:12px;font-weight:850}.population-legend .male{color:#477dc1}.population-legend .female{color:#dc6aa6}.population-legend .other{color:#6c625b}.population-pyramid{display:grid;gap:5px}.population-row{display:grid;grid-template-columns:1fr 78px 1fr;align-items:center;gap:7px;min-height:24px}.population-row>span{display:flex;justify-content:center;gap:3px;font-size:11px;font-weight:850;text-align:center}.population-row>span small{color:#786d64}.population-row>i{display:flex;align-items:center;width:var(--population);min-width:0;height:18px;border-radius:5px;font-style:normal}.population-row>i b{padding:0 5px;color:#fff;font-size:10px}.population-row>i.male{justify-self:end;justify-content:flex-start;background:linear-gradient(90deg,#87aee0,#477dc1)}.population-row>i.female{justify-self:start;justify-content:flex-end;background:linear-gradient(90deg,#dc6aa6,#f0a6ca)}.statistics-lifestyle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.statistics-lifestyle b{font-size:25px}.statistics-personality{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,1.2fr);align-items:center;gap:22px}.personality-donut{display:grid;place-items:center;width:min(220px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:var(--personality-chart);box-shadow:0 3px 0 #aa8b5f}.personality-donut:before{content:"";grid-area:1/1;width:64%;aspect-ratio:1;border-radius:50%;background:#fffaf0}.personality-donut>span{grid-area:1/1;z-index:1;display:flex;align-items:baseline;gap:4px}.personality-donut b{font-size:35px}.personality-donut small{font-weight:800}.personality-top h2{margin:4px 0 12px}.personality-top ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}.personality-top li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px;border-radius:13px;background:#f1e5d1}.personality-top li em{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d8b639;font-style:normal;font-weight:900}.personality-top li span{color:#7b6650;font-weight:800}.statistics-social header h2{margin:3px 0 14px}.statistics-social>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.statistics-social article{display:grid;gap:4px;padding:12px;border-radius:15px;background:#f1e5d1}.statistics-social article b{font-size:21px;color:#74520f}.statistics-social article span{font-size:12px;font-weight:750}.statistics-report>.character-stat-actions{position:fixed;z-index:5;left:50%;bottom:0;width:min(980px,100%);margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);box-sizing:border-box}.statistics-report>.character-stat-actions button{width:100%}
@media(max-width:620px){.statistics-report{width:100%;padding-inline:14px;box-sizing:border-box}.statistics-report-head{padding-left:65px}.statistics-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.statistics-summary article{padding:12px 9px}.statistics-summary b{font-size:23px}.statistics-personality{grid-template-columns:minmax(115px,.75fr) minmax(0,1.25fr);gap:12px}.personality-donut b{font-size:27px}.statistics-social>div{grid-template-columns:repeat(2,minmax(0,1fr))}.population-row{grid-template-columns:1fr 64px 1fr}.statistics-card{padding:14px}.statistics-report-head h1{font-size:29px}}

/* Statistics controls stay in the report flow so scope tabs and the final card
   are never covered by floating actions or native button colour rules. */
.statistics-report{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.statistics-back-button{background:transparent url("./assets/character-ui/back.webp") center/contain no-repeat!important}
.statistics-scope-tabs{position:relative;z-index:2;align-items:stretch;min-height:53px;overflow-y:visible}
.statistics-scope-tabs button{height:43px!important;color:#3a2a1d!important;-webkit-text-fill-color:#3a2a1d!important;background:#fffaf0!important;box-shadow:0 3px 0 #c6aa78!important}
.statistics-scope-tabs button.on{background:#e6c43c!important;box-shadow:inset 0 1px #fff9,0 3px 0 #9c7621!important}
.statistics-report>.character-stat-actions{position:relative;z-index:2;left:auto;bottom:auto;width:100%;margin:8px 0 0;padding:0;transform:none;box-sizing:border-box}
}

/* Statistics owns one stable top bar; only the paper report below it scrolls. */
html.native-app[data-active-tab="statistics"] #app>.native-sub-header{
  position:relative!important;isolation:isolate;flex:0 0 60px!important;min-height:60px!important;padding:2px max(12px,env(safe-area-inset-right)) 2px max(7px,env(safe-area-inset-left))!important;
  overflow:hidden;border:0!important;border-bottom:2px solid #2c1e17!important;border-radius:0!important;
  background:#5a3c2c url("./assets/home-ui/wood-top.webp") center/cover no-repeat!important;color:#fff1d4!important;-webkit-text-fill-color:#fff1d4!important;
  box-shadow:0 3px 0 #1e140f99,0 7px 15px #24170f2b!important
}
html.native-app[data-active-tab="statistics"] #app>.native-sub-header::after{content:"";position:absolute;z-index:-1;inset:0;background:#2b180d3d;pointer-events:none}
html.native-app[data-active-tab="statistics"] #app>.native-sub-header button{
  width:56px!important;height:56px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent url("./assets/home-ui/back.webp") center/contain no-repeat!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font-size:0!important;box-shadow:none!important;filter:drop-shadow(0 3px 2px #0005)
}
html.native-app[data-active-tab="statistics"] #app>.native-sub-header b{font-family:var(--home-ui-font);font-size:23px;font-weight:400;text-shadow:0 2px 2px #24150dcc}
html.native-app[data-active-tab="statistics"] #app>.native-sub-header span{font-family:var(--home-ui-font);font-size:12px;opacity:1;text-shadow:0 2px 2px #24150dcc}
html.native-app[data-active-tab="statistics"] #app>main{padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;background:#eee7d7!important;overscroll-behavior-y:contain!important;scrollbar-gutter:stable}
html.native-app[data-active-tab="statistics"] #app>main>.statistics-report{height:auto!important;max-height:none!important;overflow:visible!important;overscroll-behavior:auto!important}

.statistics-report{
  position:relative;display:grid;align-content:start;gap:15px;width:min(920px,100%);min-height:100%;margin:0 auto;padding:18px 16px calc(24px + env(safe-area-inset-bottom));
  color:#2e2118;background:linear-gradient(135deg,#fffdf8,#f3eadb);box-sizing:border-box
}
.statistics-report-head{
  position:relative;display:grid;align-content:center;min-height:104px;margin:0;padding:17px 17px 15px 84px;overflow:hidden;
  border:1px solid #c6aa7c!important;border-radius:8px!important;background:#f8edde!important;box-shadow:0 5px 0 #b99865!important;box-sizing:border-box
}
.statistics-report-head::before{content:"";position:absolute;left:16px;top:50%;width:56px;height:56px;translate:0 -50%;background:url("./assets/home-ui/statistics.webp") center/contain no-repeat;filter:drop-shadow(0 3px 2px #0003)}
.statistics-report-head small,.statistics-card header small,.personality-top>small{color:#9a7417;font:800 11px/1.2 sans-serif;letter-spacing:.14em}
.statistics-report-head h1{margin:3px 0 2px;font-size:31px;line-height:1.05}.statistics-report-head p{margin:0;color:#725f50;font-size:14px;line-height:1.35;word-break:keep-all}
.statistics-scope-tabs{display:flex;align-items:stretch;gap:8px;min-height:45px;padding:2px 1px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.statistics-scope-tabs::-webkit-scrollbar{display:none}
.statistics-scope-tabs button,.statistics-report>.character-stat-actions button{
  display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;height:43px;min-height:43px;padding:0 26px;border:0!important;border-radius:0!important;
  background-color:transparent!important;background-image:url("./assets/home-ui/pill-left.webp"),url("./assets/home-ui/pill-right.webp"),url("./assets/home-ui/pill-middle.webp")!important;
  background-position:left center,right center,center!important;background-size:auto 100%,auto 100%,auto 100%!important;background-repeat:no-repeat,no-repeat,repeat-x!important;
  color:#fff3d9!important;-webkit-text-fill-color:#fff3d9!important;font-family:var(--home-ui-font);font-size:15px;font-weight:400;text-shadow:0 2px 1px #1d100aaa;box-shadow:none!important
}
.statistics-scope-tabs button.on{filter:brightness(1.18) saturate(1.1);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.statistics-scope-tabs small{display:grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#fff3;font:700 11px/1 sans-serif}
.statistics-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.statistics-summary article,.statistics-lifestyle article{display:grid;gap:5px;min-width:0;padding:14px 12px;border:1px solid #ccb78f;border-radius:15px;background:linear-gradient(150deg,#fffdf6,#eee2cd);box-shadow:0 4px 0 #c0a477}.statistics-summary small,.statistics-lifestyle small{color:#796754;font-weight:750}.statistics-summary b{font-size:27px;white-space:nowrap}.statistics-summary em{margin-left:3px;font-size:13px;font-style:normal}
.statistics-card{padding:17px;border:1px solid #cbb58c;border-radius:20px;background:#fffaf0;box-shadow:0 6px 0 #bea174;box-sizing:border-box}.statistics-card>header{display:flex;align-items:end;justify-content:space-between;gap:12px}.statistics-card h2{margin:3px 0 0}.statistics-card header p{margin:0;color:#75614d;font-weight:800}.population-legend{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin:16px 0 8px;text-align:center;font-size:12px;font-weight:850}.population-legend .male{color:#477dc1}.population-legend .female{color:#dc6aa6}.population-legend .other{color:#6c625b}.population-pyramid{display:grid;gap:5px}.population-row{display:grid;grid-template-columns:1fr 78px 1fr;align-items:center;gap:7px;min-height:24px}.population-row>span{display:flex;justify-content:center;gap:3px;font-size:11px;font-weight:850;text-align:center}.population-row>span small{color:#786d64}.population-row>i{display:flex;align-items:center;width:var(--population);min-width:0;height:18px;border-radius:5px;font-style:normal}.population-row>i b{padding:0 5px;color:#fff;font-size:10px}.population-row>i.male{justify-self:end;justify-content:flex-start;background:linear-gradient(90deg,#87aee0,#477dc1)}.population-row>i.female{justify-self:start;justify-content:flex-end;background:linear-gradient(90deg,#dc6aa6,#f0a6ca)}
.statistics-lifestyle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.statistics-lifestyle b{font-size:23px}.statistics-personality{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(0,1.2fr);align-items:center;gap:20px}.personality-donut{display:grid;place-items:center;width:min(210px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:var(--personality-chart);box-shadow:0 3px 0 #aa8b5f}.personality-donut:before{content:"";grid-area:1/1;width:64%;aspect-ratio:1;border-radius:50%;background:#fffaf0}.personality-donut>span{grid-area:1/1;z-index:1;display:flex;align-items:baseline;gap:4px}.personality-donut b{font-size:34px}.personality-donut small{font-weight:800}.personality-top h2{margin:4px 0 12px}.personality-top ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}.personality-top li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px;border-radius:13px;background:#f1e5d1}.personality-top li em{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d8b639;font-style:normal;font-weight:900}.personality-top li span{color:#7b6650;font-weight:800}.statistics-social header h2{margin:3px 0 14px}.statistics-social>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.statistics-social article{display:grid;gap:4px;padding:12px;border-radius:15px;background:#f1e5d1}.statistics-social article b{font-size:21px;color:#74520f}.statistics-social article span{font-size:12px;font-weight:750}.statistics-report>.character-stat-actions{position:relative;display:block;left:auto;bottom:auto;width:100%;margin:7px 0 0;padding:0;transform:none;background:transparent;border:0;backdrop-filter:none}.statistics-report>.character-stat-actions button{width:100%;font-size:17px}
@media(max-width:620px){.statistics-report{padding:15px 12px calc(20px + env(safe-area-inset-bottom))}.statistics-report-head{min-height:96px!important;padding:14px 13px 13px 73px!important}.statistics-report-head::before{left:12px;width:50px;height:50px}.statistics-report-head h1{font-size:27px}.statistics-report-head p{font-size:12px}.statistics-summary article{padding:12px 8px}.statistics-summary b{font-size:22px}.statistics-card{padding:14px}.statistics-personality{grid-template-columns:minmax(112px,.72fr) minmax(0,1.28fr);gap:12px}.personality-donut b{font-size:27px}.statistics-social>div{grid-template-columns:repeat(2,minmax(0,1fr))}.population-row{grid-template-columns:1fr 64px 1fr}}

/* The active portrait is indicated by a theme-coloured aura, not a ring. */
html.native-app[data-active-tab="observe"] .native-character-picker button.on,
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button.on{
  outline:0!important;background:transparent!important;box-shadow:none!important
}
html.native-app[data-active-tab="observe"] .native-character-picker button.on :is(.avatar,.sprite){
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px var(--picker-theme,var(--p))) drop-shadow(0 0 16px var(--picker-theme,var(--p)))!important;
  animation:native-picker-aura 2.2s ease-in-out infinite alternate
}
@keyframes native-picker-aura{from{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--picker-theme,var(--p))) drop-shadow(0 0 12px var(--picker-theme,var(--p)))}to{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 11px var(--picker-theme,var(--p))) drop-shadow(0 0 21px var(--picker-theme,var(--p)))}}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .character-stat-grid{grid-template-columns:minmax(0,1fr)}
  .character-stat-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-stat-donuts{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.home-display-editor-dialog,.character-stats-dialog)>form{padding:17px}
  .character-stat-actions{bottom:-17px;margin:0 -17px -17px;padding-inline:17px}
}
@media(prefers-reduced-motion:reduce){html.native-app[data-active-tab="observe"] .native-character-picker button.on :is(.avatar,.sprite){animation:none!important}}

/* 2026-08-11g FINAL THEME AUTHORITY — this block intentionally follows every
   compatibility rule above, so fixed legacy whites/navies cannot win. */
html[data-color-mode][data-visual-theme],
html[data-color-mode][data-visual-theme] body,
html[data-color-mode][data-visual-theme] main:not(.web-drawer-content){
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 8% -8%,color-mix(in srgb,var(--s) 18%,transparent),transparent 32%),
    radial-gradient(circle at 94% 12%,color-mix(in srgb,var(--p) 12%,transparent),transparent 28%),
    var(--bg)!important;
}
html[data-color-mode][data-visual-theme] body>header,
html[data-color-mode][data-visual-theme] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header),
html[data-color-mode][data-visual-theme].native-app .native-sub-header{
  border-color:var(--theme-border)!important;
  background:linear-gradient(135deg,var(--theme-surface-strong),var(--panel))!important;
  color:var(--ink)!important;
  box-shadow:0 10px 32px var(--theme-shadow)!important;
}
html[data-color-mode][data-visual-theme] :is(
  .panel,.form,.setting-card,.sync-panel,.feedback-card,.font-preview,
  .catalog-kind,.catalog-dex-card,.catalog-card,.favorite-group,
  .shop-cart,.premium-product,.preview-notice,
  .shop-coming:not(.shop-expansion-showcase),.relationship-page:not(.relationship-redesign),.relation,
  .character-menu,.town-tabs,.resident-editor,.sleep-room-editor,.place-editor details,
  .desktop-observe-log .native-log-card,.native-status-card,.native-log-card
):not(.relationship-redesign){
  border-color:var(--theme-border)!important;
  background:linear-gradient(145deg,var(--theme-surface),var(--panel))!important;
  color:var(--ink)!important;
  box-shadow:0 14px 38px var(--theme-shadow)!important;
}
html[data-color-mode][data-visual-theme] :is(.settings-shell,.catalog-shell,.shop-store,.relationship-page:not(.relationship-redesign)){
  border-color:var(--theme-border)!important;
  background:radial-gradient(circle at 5% 1%,color-mix(in srgb,var(--s) 14%,transparent),transparent 28%),linear-gradient(155deg,var(--theme-wash),var(--bg))!important;
  color:var(--ink)!important;
}
html[data-color-mode][data-visual-theme] :is(input,select,textarea):not(.home-town-picker *):not(.dictionary-shell *):not(.character-book-v8 *):not(.relationship-fullscreen-dialog *),
html[data-color-mode][data-visual-theme] :is(.settings-shell,.catalog-shell,.shop-store,.relationship-page:not(.relationship-redesign),.editor,.home-page) button:not(.meeting-walker):not(.meeting-pair *):not(.character-book-v8 *):not(.primary):not(.place):not(.person):not(.home-person):not(.room-pet):not(.home-interaction-avatar):not(.theme-swatch):not(.character-draft-back):not(.character-draft-action):not(.character-pane-ribbon):not(.character-pane-add):not(.character-wallet-selected):not(.character-registration-photo):not(.character-roster-entry):not(.character-roster-add):not(.character-roster-reorder):not(.character-full-tab):not(.character-full-save):not(.character-full-image-slot):not(.character-full-placement-card):not(.character-overview-section-tab):not(.character-overview-next-bookmark):not(.home-native-pill):not(.home-native-back):not(.home-native-info-link):not(.home-native-house-name):not(.room-furniture-item){
  border-color:var(--theme-border)!important;
  background:var(--theme-surface)!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
html[data-color-mode][data-visual-theme] :is(dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog),.visual-theme-dialog) form{
  border-color:var(--theme-border)!important;
  background:linear-gradient(145deg,var(--theme-surface),var(--panel))!important;
  color:var(--ink)!important;
}
html[data-color-mode][data-visual-theme] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog)::backdrop{background:color-mix(in srgb,var(--p) 32%,#10131acc)!important}
html[data-color-mode][data-visual-theme] :is(.setting-card,.panel,.form,.native-status-card,.native-log-card) :is(p,small,time):not(.room-edit-hint){color:var(--muted)!important}
html[data-color-mode][data-visual-theme] .current-visual-theme{
  border-color:var(--theme-border)!important;
  background:linear-gradient(125deg,var(--theme-surface),var(--theme-surface-strong))!important;
}
html[data-color-mode][data-visual-theme="rose"] body{
  background:radial-gradient(circle at 12% 0,#cfb4ab66,transparent 30%),radial-gradient(circle at 88% 14%,#d7ccae78,transparent 28%),linear-gradient(145deg,var(--bg),color-mix(in srgb,#b2babc 18%,var(--bg)))!important;
}
html[data-color-mode][data-visual-theme="cobalt"] body{
  background:radial-gradient(circle at 9% 0,#e0c58f38,transparent 28%),radial-gradient(circle at 93% 8%,#3c507d55,transparent 32%),linear-gradient(150deg,var(--bg),color-mix(in srgb,#112250 13%,var(--bg)))!important;
}
html[data-color-mode][data-visual-theme="baroque"] body{
  background:radial-gradient(circle at 12% -3%,#fee39f88,transparent 30%),radial-gradient(circle at 88% 8%,#efbb554d,transparent 28%),linear-gradient(145deg,var(--bg),color-mix(in srgb,#ad6d15 13%,var(--bg)))!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab] body>header,
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-color:#ad6d15!important;background:linear-gradient(135deg,#fff9e8,#fee39f 58%,#efbb55)!important;color:#441004!important;box-shadow:0 10px 32px #79380b24,inset 0 -1px #ad6d1566!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab] body>header,
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-color:#ad6d15!important;background:linear-gradient(135deg,#180b03,#2a1306 58%,#79380b)!important;color:#fff2cf!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell,
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#e2bf6d!important;background:linear-gradient(145deg,#fff9e8,#fbf5d2)!important;color:#441004!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell,
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#79380b!important;background:linear-gradient(145deg,#2a1306,#180b03)!important;color:#fff2cf!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"]{
  border-color:#ad6d15!important;background:linear-gradient(115deg,#441004 0 24%,#fbf5d2 24% 72%,#efbb55 72% 100%)!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] span{background:#fff9e8e8!important}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] :is(b,small){color:#441004!important;-webkit-text-fill-color:#441004!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html[data-color-mode][data-visual-theme] :is(.panel,.form,.setting-card,.sync-panel,.feedback-card,.native-status-card,.native-log-card){box-shadow:0 9px 24px var(--theme-shadow)!important}
}

/* 2026-08-11g: one theme system for the whole app. Legacy rules used fixed
   white, beige, teal and navy surfaces, so changing a theme often recolored
   only the buttons. These final tokens now tint the page, navigation, cards,
   editors, dialogs and form controls together. */
html[data-color-mode],
html[data-color-mode] body,
html[data-color-mode] main:not(.web-drawer-content){
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 8% -8%,color-mix(in srgb,var(--s) 18%,transparent),transparent 32%),
    radial-gradient(circle at 94% 12%,color-mix(in srgb,var(--p) 12%,transparent),transparent 28%),
    var(--bg)!important;
}
html[data-color-mode] body>header,
html[data-color-mode] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header),
html[data-color-mode].native-app .native-sub-header{
  border-color:var(--theme-border)!important;
  background:linear-gradient(135deg,var(--theme-surface-strong),var(--panel))!important;
  color:var(--ink)!important;
  box-shadow:0 10px 32px var(--theme-shadow)!important;
}
html:not(.native-app) #app>header{isolation:isolate}
html:not(.native-app) #app>header nav{position:relative;z-index:40;pointer-events:auto!important}
html:not(.native-app) #app>header nav [data-tab]{position:relative;z-index:41;pointer-events:auto!important;touch-action:manipulation}
html[data-color-mode] :is(
  .panel,.form,.setting-card,.sync-panel,.feedback-card,.font-preview,
  .catalog-kind,.catalog-dex-card,.catalog-card,.favorite-group,
  .shop-cart,.premium-product,.preview-notice,
  .shop-coming:not(.shop-expansion-showcase),.relationship-page:not(.relationship-redesign),.relation,
  .character-menu,.town-tabs,.resident-editor,.sleep-room-editor,.place-editor details,
  .desktop-observe-log .native-log-card,.native-status-card,.native-log-card
):not(.relationship-redesign){
  border-color:var(--theme-border)!important;
  background:linear-gradient(145deg,var(--theme-surface),var(--panel))!important;
  color:var(--ink)!important;
  box-shadow:0 14px 38px var(--theme-shadow)!important;
}
html[data-color-mode] :is(.settings-shell,.catalog-shell,.shop-store,.relationship-page:not(.relationship-redesign)){
  border-color:var(--theme-border)!important;
  background:
    radial-gradient(circle at 5% 1%,color-mix(in srgb,var(--s) 14%,transparent),transparent 28%),
    linear-gradient(155deg,var(--theme-wash),var(--bg))!important;
  color:var(--ink)!important;
}
html[data-color-mode] :is(input,select,textarea):not(.home-town-picker *):not(.dictionary-shell *):not(.character-book-v8 *):not(.relationship-fullscreen-dialog *),
html[data-color-mode] :is(.settings-shell,.catalog-shell,.shop-store,.relationship-page:not(.relationship-redesign),.editor,.home-page) button:not(.meeting-walker):not(.meeting-pair *):not(.character-book-v8 *):not(.primary):not(.place):not(.person):not(.home-person):not(.room-pet):not(.home-interaction-avatar):not(.theme-swatch):not(.character-draft-back):not(.character-draft-action):not(.character-pane-ribbon):not(.character-pane-add):not(.character-wallet-selected):not(.character-registration-photo):not(.character-roster-entry):not(.character-roster-add):not(.character-roster-reorder):not(.character-full-tab):not(.character-full-save):not(.character-full-image-slot):not(.character-full-placement-card):not(.character-overview-section-tab):not(.character-overview-next-bookmark):not(.home-native-pill):not(.home-native-back):not(.home-native-info-link):not(.home-native-house-name):not(.room-furniture-item){
  border-color:var(--theme-border)!important;
  background:var(--theme-surface)!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
html[data-color-mode] :is(dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog),.visual-theme-dialog) form{
  border-color:var(--theme-border)!important;
  background:linear-gradient(145deg,var(--theme-surface),var(--panel))!important;
  color:var(--ink)!important;
}
html[data-color-mode] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog)::backdrop{background:color-mix(in srgb,var(--p) 32%,#10131acc)!important}
html[data-color-mode] :is(.setting-card,.panel,.form,.native-status-card,.native-log-card) :is(p,small,time):not(.room-edit-hint){color:var(--muted)!important}
html[data-color-mode] .current-visual-theme{
  border-color:var(--theme-border)!important;
  background:linear-gradient(125deg,var(--theme-surface),var(--theme-surface-strong))!important;
}

html[data-visual-theme="rose"] body{
  background:
    radial-gradient(circle at 12% 0,#cfb4ab66,transparent 30%),
    radial-gradient(circle at 88% 14%,#d7ccae78,transparent 28%),
    linear-gradient(145deg,var(--bg),color-mix(in srgb,#b2babc 18%,var(--bg)))!important;
}
html[data-visual-theme="cobalt"] body{
  background:
    radial-gradient(circle at 9% 0,#e0c58f38,transparent 28%),
    radial-gradient(circle at 93% 8%,#3c507d55,transparent 32%),
    linear-gradient(150deg,var(--bg),color-mix(in srgb,#112250 13%,var(--bg)))!important;
}
html[data-visual-theme="baroque"] body{
  background:
    radial-gradient(circle at 12% -3%,#fee39f88,transparent 30%),
    radial-gradient(circle at 88% 8%,#efbb554d,transparent 28%),
    linear-gradient(145deg,var(--bg),color-mix(in srgb,#ad6d15 13%,var(--bg)))!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab] body>header,
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-color:#ad6d15!important;
  background:linear-gradient(135deg,#fff9e8,#fee39f 58%,#efbb55)!important;
  color:#441004!important;
  box-shadow:0 10px 32px #79380b24,inset 0 -1px #ad6d1566!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab] body>header,
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-color:#ad6d15!important;
  background:linear-gradient(135deg,#180b03,#2a1306 58%,#79380b)!important;
  color:#fff2cf!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell,
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#e2bf6d!important;
  background:linear-gradient(145deg,#fff9e8,#fbf5d2)!important;
  color:#441004!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell,
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#79380b!important;
  background:linear-gradient(145deg,#2a1306,#180b03)!important;
  color:#fff2cf!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"]{
  border-color:#ad6d15!important;
  background:linear-gradient(115deg,#441004 0 24%,#fbf5d2 24% 72%,#efbb55 72% 100%)!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] span{background:#fff9e8e8!important}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] :is(b,small){color:#441004!important;-webkit-text-fill-color:#441004!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html[data-color-mode] :is(.panel,.form,.setting-card,.sync-panel,.feedback-card,.native-status-card,.native-log-card){box-shadow:0 9px 24px var(--theme-shadow)!important}
}

/* Theme selection stays compact in Settings and opens as its own responsive picker. */
.current-visual-theme{
  display:flex;align-items:center;gap:14px;margin:18px 0 12px;padding:15px 16px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--theme-a) 12%,var(--panel)),color-mix(in srgb,var(--theme-b) 18%,var(--panel)));
}
.current-visual-theme>i{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--theme-a),var(--theme-b));box-shadow:inset 0 0 0 2px #ffffff88,0 5px 15px #0002}
.current-visual-theme>span{display:grid;min-width:0;gap:2px}.current-visual-theme small{color:var(--muted)}.current-visual-theme b{font-size:1.08rem}.current-visual-theme em{font-style:normal;color:var(--muted);overflow-wrap:anywhere}
.open-visual-theme-picker{width:100%;min-height:50px}
dialog.visual-theme-dialog{width:min(920px,calc(100vw - 28px));max-width:none;margin:auto;padding:0;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--ink);box-shadow:0 24px 80px #0006;overflow:hidden}
dialog.visual-theme-dialog::backdrop{background:#121418aa;backdrop-filter:blur(5px)}
.visual-theme-dialog>form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(86dvh,820px);margin:0}
.visual-theme-dialog-head{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:14px;align-items:start;padding:20px 22px 15px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--p) 9%,var(--panel)),var(--panel))}
.visual-theme-dialog-head span{min-width:0}.visual-theme-dialog-head :is(h2,p){margin:2px 0}.visual-theme-dialog-head small{letter-spacing:.14em;color:var(--muted)}.visual-theme-dialog-head>button{width:48px;height:48px;padding:0;font-size:1.5rem}
.visual-theme-dialog-body{overflow:auto;padding:6px 22px 24px}.visual-theme-dialog-body>h3{margin:20px 0 9px;color:var(--ink)}
.visual-theme-dialog .visual-theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.visual-theme-dialog .visual-theme-options button{position:relative;min-height:76px;padding:12px 14px}.visual-theme-dialog .visual-theme-options button>em{position:absolute;right:10px;top:8px;padding:3px 7px;border-radius:999px;background:var(--p);color:var(--on-p);font-size:.72rem;font-style:normal}
.visual-theme-dialog-actions{display:flex;justify-content:flex-end;padding:12px 22px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 65%,var(--panel))}

/* Princess Pink: antique blush silk, pearl cream, powder blue-grey and warm gilt. */
html[data-color-mode="light"][data-visual-theme="rose"] body{background:radial-gradient(circle at 12% 2%,#fffaf6 0 4%,transparent 30%),linear-gradient(145deg,#eee9e4,#d7ccae 155%)}
html[data-color-mode="light"][data-visual-theme="rose"] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){background:linear-gradient(180deg,#fffaf7f5,#f3e9e5f2);border-bottom-color:#c0af99;box-shadow:0 8px 28px #8a625018}
html[data-color-mode="light"][data-visual-theme="rose"] :is(.panel,.setting-card,.sync-panel){border-color:#c0af99;background:linear-gradient(145deg,#fffaf7,#f4ece8)}
html[data-color-mode="light"][data-visual-theme="rose"] :is(button.primary,header nav button.on,.color-mode-options button.on){background:linear-gradient(135deg,#b57873,#cfb4ab)!important;border-color:#a56b67!important;color:#fffaf6!important;-webkit-text-fill-color:#fffaf6!important}
html[data-color-mode][data-visual-theme="rose"] .visual-theme-options button[data-visual-theme="rose"]{overflow:hidden;border-color:#b57873;background:linear-gradient(120deg,#fff8f4 0 34%,#d7ccae 34% 57%,#b2babc 57% 72%,#cfb4ab 72% 100%)}
html[data-color-mode][data-visual-theme="rose"] .visual-theme-options button[data-visual-theme="rose"] span{position:relative;z-index:1;padding:7px 9px;border-radius:10px;background:#fffaf0e8}
html[data-color-mode][data-visual-theme="rose"] .visual-theme-options button[data-visual-theme="rose"] :is(b,small){color:#413330!important;-webkit-text-fill-color:#413330!important}
html[data-color-mode][data-visual-theme="rose"] .current-visual-theme{border-color:#b57873;background:linear-gradient(125deg,#fffaf6,#d7ccae 48%,#b2babc 115%)}
html[data-color-mode][data-visual-theme="rose"] .current-visual-theme :is(b,small,em){color:#413330!important;-webkit-text-fill-color:#413330!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  dialog.visual-theme-dialog{width:calc(100vw - 16px);border-radius:20px}
  .visual-theme-dialog>form{max-height:92dvh}
  .visual-theme-dialog-head{padding:16px 14px 12px}.visual-theme-dialog-body{padding:4px 14px 20px}
  .visual-theme-dialog .visual-theme-options{grid-template-columns:minmax(0,1fr)}
  .visual-theme-dialog-actions{padding:10px 14px}
  .current-visual-theme{align-items:flex-start}.current-visual-theme>i{width:46px;height:46px;flex-basis:46px}
}

/* Baroque Salon: lacquered framing, aged paper, wine-red textile and bronze.
   The ornament stays on structural surfaces so logs and forms remain calm. */
html[data-visual-theme="baroque"] body{
  background:
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--s) 14%,transparent),transparent 27%),
    radial-gradient(circle at 88% 92%,color-mix(in srgb,var(--p) 12%,transparent),transparent 31%),
    var(--bg);
}
html[data-visual-theme="baroque"] :is(h1,h2,h3,.title>b,.native-observe-top b):not(.routine-shell *){
  font-family:Georgia,"Times New Roman","Noto Serif KR","Batang",serif;
  letter-spacing:-.025em;
}
html[data-visual-theme="baroque"] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-bottom-color:#a77a4f!important;
  background:linear-gradient(180deg,#17191f 0%,#0d0f13 100%)!important;
  box-shadow:0 9px 28px #08090c38,inset 0 -1px #d0a06655!important;
}
html[data-visual-theme="baroque"] header :is(b,small){color:#f1dfc5!important;-webkit-text-fill-color:#f1dfc5!important}
html[data-visual-theme="baroque"] header nav button{
  border-color:#6f513a!important;background:#17171b!important;color:#ead9c1!important;-webkit-text-fill-color:#ead9c1!important;
}
html[data-visual-theme="baroque"] header nav button.on{
  border-color:#d0a066!important;background:linear-gradient(145deg,#8e344b,#5d2031 55%,#b98552)!important;color:#fff5e8!important;-webkit-text-fill-color:#fff5e8!important;
}
html[data-visual-theme="baroque"] :is(.panel,.setting-card,.sync-panel,.native-sub-header){
  border-color:color-mix(in srgb,#b98552 64%,var(--line))!important;
  box-shadow:0 17px 38px #1c111523,inset 0 0 0 1px color-mix(in srgb,#f1d4a5 20%,transparent)!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"] :is(.panel,.setting-card,.sync-panel){
  background:
    linear-gradient(90deg,transparent 0 96%,#9f6c3a0b 96%),
    radial-gradient(circle at 18% 12%,#fffaf0 0 2%,transparent 27%),
    linear-gradient(145deg,#f9eedc,#ead8bb)!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"] :is(.panel,.setting-card,.sync-panel){
  background:
    radial-gradient(circle at 16% 9%,#d0a06612,transparent 28%),
    linear-gradient(145deg,#241b1d,#17171b)!important;
}
html[data-visual-theme="baroque"] :is(.settings-shell>h1,.panel>.title h1,.panel>.title h2,.setting-card>h2)::after{
  content:" ❦";color:#b98552;font-size:.64em;letter-spacing:.1em;vertical-align:.12em;
}
html[data-visual-theme="baroque"] :is(button.primary,.color-mode-options button.on,.visual-theme-options button.on){
  border-color:#d6ad76!important;
  background:linear-gradient(145deg,#8e344b,#672538 58%,#b98552)!important;
  box-shadow:0 8px 18px #4b17272b,inset 0 1px #f5d7aa55!important;
  color:#fff7eb!important;-webkit-text-fill-color:#fff7eb!important;
}
html[data-visual-theme="baroque"] :is(input,select,textarea,button){border-color:color-mix(in srgb,#b98552 48%,var(--line))}
html[data-visual-theme="baroque"] .heritage-theme-options button[data-visual-theme="baroque"]{
  position:relative;overflow:hidden;min-height:82px;
  background:linear-gradient(115deg,#111318 0 24%,#efe0c7 24% 72%,#762f43 72% 100%)!important;
  color:#2c1a17!important;-webkit-text-fill-color:#2c1a17!important;
  border:2px solid #b98552!important;
}
html[data-visual-theme="baroque"] .heritage-theme-options button[data-visual-theme="baroque"]::after{
  content:"❦";position:absolute;right:18px;top:50%;translate:0 -50%;color:#e7bd82;font:700 28px Georgia,serif;text-shadow:0 1px #351724;
}
html[data-visual-theme="baroque"] .heritage-theme-options button[data-visual-theme="baroque"] span{position:relative;z-index:1;padding:5px 54px 5px 10px;background:#efe0c7dd;border-radius:10px}
html[data-visual-theme="baroque"] .heritage-theme-options button[data-visual-theme="baroque"] :is(b,small){color:#2c1a17!important;-webkit-text-fill-color:#2c1a17!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html[data-visual-theme="baroque"] header{background:linear-gradient(180deg,#17191f,#0d0f13)!important}
  html[data-visual-theme="baroque"] .heritage-theme-options button[data-visual-theme="baroque"]{min-height:76px}
  html[data-visual-theme="baroque"] .heritage-theme-options button[data-visual-theme="baroque"]::after{right:12px;font-size:23px}
}
.character-manage-theme{display:none!important}

/* 생활 상호작용은 연애 장면이 아니어도 두 인물의 분위기를 화면에 보여 준다. */
.native-app .scene-tone-interaction-warm .native-scene-atmosphere{
  background:radial-gradient(circle at 50% 56%,#8fe8cd38,transparent 38%);
}
.native-app .scene-tone-interaction-playful .native-scene-atmosphere{
  background:
    radial-gradient(circle at 30% 45%,#ffe88c35,transparent 24%),
    radial-gradient(circle at 72% 38%,#8ddcff2b,transparent 27%);
}
.native-app .scene-tone-interaction-tense .native-scene-atmosphere{
  background:linear-gradient(145deg,#23374b33,#7a4c2645 65%,#15202d66);
}
.native-app .scene-tone-interaction-warm .native-scene-effects i,
.native-app .scene-tone-interaction-playful .native-scene-effects i,
.native-app .scene-tone-interaction-tense .native-scene-effects i{
  animation:native-social-spark 2.1s ease-in-out infinite;
}
.native-app .scene-tone-interaction-warm .native-scene-lineup-person{
  animation:native-social-bob 2.8s ease-in-out infinite;
}
.native-app .scene-tone-interaction-playful .native-scene-lineup-person:nth-child(odd){
  animation:native-social-nudge-left 1.55s ease-in-out infinite;
}
.native-app .scene-tone-interaction-playful .native-scene-lineup-person:nth-child(even){
  animation:native-social-nudge-right 1.55s -.78s ease-in-out infinite;
}
.native-app .scene-tone-interaction-tense .native-scene-lineup-person:nth-child(odd){
  animation:native-pull-away-left 2.7s ease-in-out infinite;
}
.native-app .scene-tone-interaction-tense .native-scene-lineup-person:nth-child(even){
  animation:native-pull-away-right 2.7s ease-in-out infinite;
}
@keyframes native-social-spark{
  0%,100%{opacity:0;transform:translate(-50%,10px) scale(.62) rotate(-8deg)}
  35%,65%{opacity:.92}
  78%{transform:translate(-50%,-22px) scale(1.04) rotate(8deg)}
}
@keyframes native-social-bob{0%,100%{translate:0 2px}50%{translate:0 -7px}}
@keyframes native-social-nudge-left{0%,100%{translate:-2px 2px;rotate:-1deg}48%{translate:7px -5px;rotate:2deg}}
@keyframes native-social-nudge-right{0%,100%{translate:2px 0;rotate:1deg}48%{translate:-7px -4px;rotate:-2deg}}

/* 말풍선은 배경 사진 위에서도 흐려지지 않도록 완전 불투명하게 유지한다. */
.native-app .native-conversation-bubbles{
  z-index:12!important;
  opacity:1!important;
  filter:none!important;
}
.native-app .native-conversation-bubbles i{
  border-color:#132031!important;
  background:#fff!important;
  color:#132031!important;
  box-shadow:0 8px 20px #0009,0 0 0 2px #ffffff80!important;
  filter:none!important;
}
.native-app .native-conversation-bubbles i::after{
  border-color:#132031!important;
  background:#fff!important;
}
.native-app .native-conversation-bubbles.is-playful i{background:#fff8cb!important;color:#513a00!important}
.native-app .native-conversation-bubbles.is-playful i::after{background:#fff8cb!important}
.native-app .native-conversation-bubbles.is-tense i{background:#eaf2f8!important;color:#253848!important}
.native-app .native-conversation-bubbles.is-tense i::after{background:#eaf2f8!important}

/* 화이트 모드는 앱형 화면과 팝업까지 밝은 면/어두운 글자로 통일한다. */
html[data-color-mode="light"] .relationship-map-dialog,
html[data-color-mode="light"] .relationship-map-dialog form,
html[data-color-mode="light"] .official-relation-dialog,
html[data-color-mode="light"] .official-relation-dialog form{
  border-color:#d9d0c7!important;
  background:#fffdf9!important;
  color:#302a25!important;
}
html[data-color-mode="light"] .relationship-map-dialog::backdrop,
html[data-color-mode="light"] .official-relation-dialog::backdrop{background:#2e292466!important}
html[data-color-mode="light"] .relationship-map-dialog-head{
  border-color:#ddd3c9!important;
  background:#fffdf9f2!important;
  color:#302a25!important;
}
html[data-color-mode="light"] .relationship-map-dialog :is(h1,h2,h3,p,b,small,button),
html[data-color-mode="light"] .official-relation-dialog :is(h1,h2,h3,p,b,small,button){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html[data-color-mode="light"] .relationship-map-dialog button,
html[data-color-mode="light"] .official-relation-dialog button{
  border-color:#d8cec5!important;
  background:#fff!important;
}
html[data-color-mode="light"] .relationship-map-canvas{
  border:1px solid #e1d8cf!important;
  background:radial-gradient(circle at center,#fff 0 34%,#f4efe7 100%)!important;
}

html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-game-menu button{
  border-color:#cfc7be!important;
  background:#fffdf0e8!important;
  color:#302a25!important;
  box-shadow:0 8px 20px #392e2428,inset 0 1px 0 #fff!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button{
  border-color:#d8cec5!important;
  background:#fffdf0dc!important;
  color:#302a25!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button.on{
  border-color:transparent!important;
  background:transparent!important;
  color:#221f1c!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] :is(.native-status-card,.native-log-card){
  border-color:color-mix(in srgb,var(--native-own) 30%,#d7cec5)!important;
  background:color-mix(in srgb,rgba(255,255,255,.9) 94%,var(--native-own))!important;
  color:#302a25!important;
  box-shadow:0 16px 34px #392e2433!important;
  backdrop-filter:blur(18px) saturate(1.06)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] :is(.native-status-card,.native-log-card) :is(h1,b){
  color:#2e2924!important;
  -webkit-text-fill-color:#2e2924!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-status-card>small,
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-status-card p,
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-log-card :is(time,small){
  color:#6f6258!important;
  -webkit-text-fill-color:#6f6258!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-log-card li{border-color:#dfd6cd!important}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-log-card button{
  border-color:#d6ccc3!important;
  background:#fff!important;
  color:#302a25!important;
}

html[data-color-mode="light"].native-app[data-active-tab="character"] .mobile-character-dashboard:not([data-character-ui-version="4"]){
  background:
    radial-gradient(circle at 24% 10%,color-mix(in srgb,var(--character-own) 24%,transparent),transparent 42%),
    linear-gradient(155deg,color-mix(in srgb,var(--character-own) 10%,#fff),color-mix(in srgb,var(--character-secondary) 12%,#f3eee8))!important;
  color:#302a25!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] :is(.mobile-character-heading,.mobile-character-strip button):not(.mobile-character-dashboard[data-character-ui-version="4"] *){
  border-color:#d9d0c7!important;
  background:#fffdf9!important;
  color:#302a25!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] :is(.mobile-character-heading,.mobile-character-strip button):not(.mobile-character-dashboard[data-character-ui-version="4"] *) :is(b,small){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] .mobile-character-dashboard:not([data-character-ui-version="4"]) .mobile-character-strip button.on{
  border-color:color-mix(in srgb,var(--p) 70%,#302a25)!important;
  background:color-mix(in srgb,var(--p) 24%,#fff)!important;
}

html[data-color-mode="light"][data-active-tab="shop"] .shop-store{
  background:transparent!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="shop"] :is(.premium-product,.shop-cart,.shop-coming,.preview-notice){
  border-color:#d9d0c7!important;
  background:#fffdf9!important;
  color:#302a25!important;
  box-shadow:0 12px 28px #392e241a!important;
}
html[data-color-mode="light"][data-active-tab="shop"] .premium-product-heading>span{
  border-color:#d8cec5!important;
  background:#eee6dd!important;
  color:#49392f!important;
  -webkit-text-fill-color:#49392f!important;
}
html[data-color-mode="light"][data-active-tab="shop"] .shop-store :is(h1,h2,h3,b,strong,p,small,span,label){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="shop"] :is(.premium-current,.cart-line,.cart-total){
  border-color:#ded5cc!important;
  background:#f3ede6!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="shop"] :is(.premium-buy,.cart-quantity button,.cart-remove){
  border-color:#cfc5bb!important;
  background:#f4ece4!important;
  color:#3b3029!important;
  -webkit-text-fill-color:#3b3029!important;
}
html[data-color-mode="light"][data-active-tab="shop"] .premium-buy.primary{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--p),var(--s))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* 2026-08-07: 관찰 화면 폭, 관계도 내보내기와 화면 모드 */
.relationship-map-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.relationship-map-actions button{flex:1 1 210px}
.color-mode-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.color-mode-options button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:58px;
}
.color-mode-options button span{font-size:22px}
.color-mode-options button.on{
  border-color:color-mix(in srgb,var(--p) 76%,#fff);
  background:linear-gradient(135deg,var(--p),var(--s));
  color:#fff;
  box-shadow:0 10px 25px color-mix(in srgb,var(--p) 30%,transparent);
}
.native-scene-refresh{
  position:absolute;
  z-index:86;
  top:max(56px,calc(env(safe-area-inset-top) + 48px));
  left:50%;
  display:flex;
  align-items:center;
  gap:4px;
  min-height:32px;
  padding:5px 9px;
  border:1px solid #ffffff35;
  border-radius:999px;
  background:#1017229e;
  color:#fff;
  box-shadow:0 7px 20px #0004;
  backdrop-filter:blur(10px);
  transform:translateX(-50%);
}
.native-scene-refresh span{font-size:18px;line-height:1}
.native-scene-refresh small{font-size:9px}

html[data-color-mode="dark"]{color-scheme:dark}
html[data-color-mode="light"]{color-scheme:light}
html[data-color-mode="dark"][data-active-tab="settings"],
html[data-color-mode="dark"][data-active-tab="settings"] body,
html[data-color-mode="dark"][data-active-tab="settings"] main:not(.web-drawer-content){
  background:
    radial-gradient(circle at 82% 6%,color-mix(in srgb,var(--p) 25%,transparent),transparent 34%),
    linear-gradient(155deg,#0d1825,#172638 58%,#0d1723)!important;
  color:#f5f8fb!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell{
  border-color:#ffffff1c!important;
  background:transparent!important;
  color:#f5f8fb!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] :is(.setting-card,.sync-panel,.feedback-card){
  border:1px solid #ffffff20!important;
  background:linear-gradient(145deg,#18283a,#22374b)!important;
  color:#f7fafc!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend){
  color:#f7fafc!important;
  -webkit-text-fill-color:#f7fafc!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(p,small){
  color:#bdc9d5!important;
  -webkit-text-fill-color:#bdc9d5!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(input,select,textarea){
  border-color:#d7e0e8!important;
  background:#f7f9fc!important;
  color:#172231!important;
  -webkit-text-fill-color:#172231!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .font-preview,
html[data-color-mode="dark"][data-active-tab="settings"] .storage-meter{
  border-color:#ffffff22!important;
  background:#101c2a!important;
  color:#f7fafc!important;
}

html[data-color-mode="light"],
html[data-color-mode="light"] body{
  background:#f5f1ea!important;
  color:#302a25;
}
html[data-color-mode="light"] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header),
html[data-color-mode="light"].native-app .native-sub-header{
  border-color:#d9d0c7!important;
  background:color-mix(in srgb,var(--p) 18%,#fff)!important;
  color:#2f2924!important;
}
html[data-color-mode="light"].native-app:is(
  [data-active-tab="catalog"],
  [data-active-tab="shop"],
  [data-active-tab="settings"],
  [data-active-tab="character"],
  [data-active-tab="relationship"]
),
html[data-color-mode="light"].native-app:is(
  [data-active-tab="catalog"],
  [data-active-tab="shop"],
  [data-active-tab="settings"],
  [data-active-tab="character"],
  [data-active-tab="relationship"]
) body,
html[data-color-mode="light"].native-app:is(
  [data-active-tab="catalog"],
  [data-active-tab="shop"],
  [data-active-tab="settings"],
  [data-active-tab="character"],
  [data-active-tab="relationship"]
) main{
  background:
    radial-gradient(circle at 84% 6%,color-mix(in srgb,var(--p) 13%,transparent),transparent 32%),
    #f5f1ea!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell,
html[data-color-mode="light"][data-active-tab="catalog"] .catalog-shell,
html[data-color-mode="light"][data-active-tab="shop"] .shop-store{
  background:transparent!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="settings"] :is(.setting-card,.sync-panel,.feedback-card),
html[data-color-mode="light"][data-active-tab="catalog"] :is(.catalog-kind,.catalog-dex-card),
html[data-color-mode="light"][data-active-tab="shop"] :is(.premium-product,.shop-cart,.shop-coming,.preview-notice){
  border-color:#ddd3c9!important;
  background:#fffdf9!important;
  color:#302a25!important;
  box-shadow:0 12px 30px #38271612!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend,p,small),
html[data-color-mode="light"][data-active-tab="catalog"] .catalog-shell :is(h1,h2,h3,b,label,p,small),
html[data-color-mode="light"][data-active-tab="shop"] .shop-store :is(h1,h2,h3,b,strong,label,p,small){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="character"] .mobile-character-dashboard,
html[data-color-mode="light"][data-active-tab="relationship"] .character-view-editor,
html[data-color-mode="light"][data-active-tab="relationship"] .relationship-pair-magnet{
  background:linear-gradient(155deg,#f8f4ee,#eee6dd)!important;
  color:#302a25!important;
}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .relationship-map-dialog .relationship-map-canvas svg text{
    font-size:11px!important;
    stroke-width:4px!important;
  }
  .relationship-map-dialog .relationship-map-canvas svg .map-relation{font-size:11px!important}
  .relationship-map-dialog .relationship-map-canvas svg .map-stage{font-size:8px!important}
  .relationship-map-dialog .relationship-map-canvas svg .map-heart{font-size:18px!important;stroke-width:3px!important}
  html.native-app[data-active-tab="observe"] .native-character-picker{
    padding-inline:2px;
  }
  html[data-color-mode="light"].native-app[data-active-tab="settings"] .settings-shell{
    background:transparent!important;
    color:#302a25!important;
  }
}

@media(min-width:721px){
  html:is(
    [data-active-tab="catalog"],
    [data-active-tab="routine"],
    [data-active-tab="shop"],
    [data-active-tab="settings"]
  ) main{
    max-width:none;
    background:
      radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--p) 23%,transparent),transparent 31%),
      linear-gradient(155deg,#0d1825,#172638 58%,#0d1723);
    color:#f5f8fb;
  }
  html[data-active-tab="catalog"] .catalog-shell,
  html[data-active-tab="routine"] .routine-shell,
  html[data-active-tab="shop"] .shop-store,
  html[data-active-tab="settings"] .settings-shell{
    max-width:1520px;
    margin:0 auto;
    border-color:#ffffff1c;
    background:linear-gradient(145deg,#111e2cec,#192b3dec);
    color:#f5f8fb;
  }
  html[data-active-tab="catalog"] .catalog-shell :is(h1,h2,h3,b,label),
  html[data-active-tab="routine"] .routine-shell :is(h1,h2,h3,b,strong,label),
  html[data-active-tab="shop"] .shop-store :is(h1,h2,h3,b,strong,label),
  html[data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend){
    color:#f7fafc;
  }
  html[data-active-tab="catalog"] .catalog-shell :is(p,small),
  html[data-active-tab="routine"] .routine-shell :is(p,small),
  html[data-active-tab="shop"] .shop-store :is(p,small),
  html[data-active-tab="settings"] .settings-shell :is(p,small){
    color:#b8c5d1;
  }
  html[data-active-tab="catalog"] :is(.catalog-kind,.catalog-dex-card),
  html[data-active-tab="settings"] :is(.setting-card,.sync-panel,.feedback-card),
  html[data-active-tab="shop"] :is(.premium-product,.shop-cart,.shop-coming,.preview-notice){
    border-color:#ffffff1f;
    background:linear-gradient(145deg,#1a2939,#223448);
    color:#f7fafc;
  }
  html[data-active-tab="catalog"] .catalog-kind > .title button,
  html[data-active-tab="catalog"] .catalog-section > .title button{
    border-color:#ffffff2b;
    background:#ffffff10;
    color:#f8fafc;
    -webkit-text-fill-color:#f8fafc;
  }
  html[data-active-tab="routine"] :is(.weekly-scroll,.weekly-table,.routine-day){
    border-color:#ffffff1c;
    background:#101b29;
    color:#f7fafc;
  }
  html[data-active-tab="routine"] .routine-day h3{background:#192638;color:#fff}
  html[data-active-tab="routine"] .routine-block{background:#ffffff10;color:#fff}
  html[data-active-tab="settings"] .settings-shell :is(input,select,textarea){
    border-color:#d8e0e8;
    background:#f6f8fb;
    color:#172231;
    -webkit-text-fill-color:#172231;
  }
  html[data-active-tab="settings"] .settings-shell :is(input,textarea)::placeholder{
    color:#687585;
    -webkit-text-fill-color:#687585;
    opacity:1;
  }
  html[data-active-tab="settings"] .feedback-category-grid span{
    border-color:#ffffff25;
    background:#ffffff0d;
    color:#e7edf4;
  }
  html[data-active-tab="settings"] .feedback-category-grid input:checked+span{
    background:linear-gradient(135deg,var(--p),var(--s));
    color:#fff;
  }
  html[data-active-tab="shop"] :is(.premium-current,.cart-line){
    background:#ffffff0c;
    color:#fff;
  }
  html[data-active-tab="settings"] .sync-actions button:not(.primary),
  html[data-active-tab="settings"] [data-guide-reset],
  html[data-active-tab="settings"] [data-reset]{
    border-color:#ffffff28;
    background:#ffffff10;
    color:#f7fafc;
  }
}

html[data-active-tab="settings"] .font-preview,
html[data-active-tab="settings"] .storage-meter{
  border-color:#ffffff20!important;
  background:#ffffff0b!important;
  color:#f7fafc!important;
}
html[data-active-tab="settings"] .font-preview b,
html[data-active-tab="settings"] .font-preview span,
html[data-active-tab="settings"] .storage-meter :is(h3,b,small){
  color:#f7fafc!important;
}
@keyframes relationship-roulette-deal{
  from{opacity:0;transform:translateX(calc(var(--fan-shift) * 2)) scale(.55)}
  to{opacity:.72;transform:translateX(var(--fan-shift)) scale(.78)}
}
@keyframes relationship-roulette-selected{
  0%,100%{filter:brightness(1);translate:0 0}
  50%{filter:brightness(1.13);translate:0 -3px}
}

/* 현재 장면 전문과 취향 사전 썸네일을 모바일 홈에서 숨기지 않는다. */
.native-app .native-status-card p{
  display:block;
  overflow:visible;
  white-space:normal;
  word-break:keep-all;
  -webkit-line-clamp:unset;
  line-clamp:unset;
}
/* 모바일 캐릭터·관계 화면: 홈과 같은 어두운 게임 UI */
@keyframes relationship-card-deal{
  from{opacity:0;transform:translateX(var(--fan-shift)) rotate(var(--fan-angle)) scale(.5)}
  to{opacity:.72;transform:translateX(var(--fan-shift)) rotate(var(--fan-angle)) scale(.86)}
}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .native-app[data-active-tab="character"] .character-editor{display:block;margin:-12px -10px;width:calc(100% + 20px)}
  .native-app[data-active-tab="character"] .character-editor>.form{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .native-app[data-active-tab="character"] .desktop-character-list,
  .native-app[data-active-tab="character"] .desktop-character-editor{display:none!important}
  .native-app[data-active-tab="character"] .mobile-character-dashboard{
    display:grid;
    align-content:start;
    gap:12px;
    min-height:calc(100dvh - 60px - env(safe-area-inset-top));
    padding:0 12px max(28px,env(safe-area-inset-bottom));
    color:#302219;
    background:#f5ecd3;
  }
  .mobile-character-top{display:grid;gap:8px}.mobile-character-top>div:last-child{display:flex;justify-content:flex-end;gap:7px}.mobile-character-top>div:last-child button{min-height:36px;padding:6px 10px;border-color:#ffffff2b;background:#ffffff10;color:#fff;font-size:10px}
  .mobile-character-strip{display:flex;gap:8px;padding:5px 3px 11px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.mobile-character-strip::-webkit-scrollbar{display:none}
  .mobile-character-strip button{flex:0 0 74px;display:grid;place-items:center;gap:3px;min-height:82px;padding:7px;border-color:#ffffff1f;background:#ffffff0d;color:#fff;scroll-snap-align:center}
  .mobile-character-strip button.on{border-color:#fff;background:color-mix(in srgb,var(--own) 72%,#192331);box-shadow:0 10px 24px #0006,inset 0 1px #ffffff3d}
  .mobile-character-strip .avatar,.mobile-character-strip .sprite{width:50px;height:50px}.mobile-character-strip small{max-width:62px;overflow:hidden;color:#ffffffc7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-character-heading{display:none!important}
  .mobile-character-heading .avatar,.mobile-character-heading .sprite{width:76px;height:76px;filter:drop-shadow(0 10px 12px #0008)}.mobile-character-heading>span{display:grid;min-width:0}.mobile-character-heading small{color:#ffffff83;font-size:9px;letter-spacing:.15em}.mobile-character-heading h1{margin:2px 0;font-size:27px}.mobile-character-heading p{margin:0;color:#ffffffa8;font-size:11px}
  .mobile-character-pane-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:2px 0 6px}
  .mobile-character-pane-grid button{position:relative;display:flex;align-items:center;justify-content:center;min-height:54px;padding:9px 48px;border:2px solid #2b211b!important;border-radius:3px 15px 4px 12px;text-align:center;color:#251a15!important;-webkit-text-fill-color:#251a15!important;box-shadow:0 3px 0 #3b2a20;clip-path:polygon(2% 3%,97% 0,100% 17%,98% 94%,3% 100%,0 82%)}
  .mobile-character-pane-grid button:nth-child(1){background:#b95043!important}.mobile-character-pane-grid button:nth-child(2){background:#c98946!important}.mobile-character-pane-grid button:nth-child(3){background:#ded969!important}.mobile-character-pane-grid button:nth-child(4){background:#a9c674!important}.mobile-character-pane-grid button:nth-child(5){background:#78b5ca!important}.mobile-character-pane-grid button:nth-child(6){background:#8d78bd!important}
  .mobile-character-pane-grid button>span{position:absolute;left:13px;display:grid;place-items:center;width:29px;height:29px;border:2px solid #2b211b;border-radius:50%;background:#fff8e5;font-size:14px}.mobile-character-pane-grid button>b{font-size:18px;font-weight:900}.mobile-character-pane-grid button>small{display:none}
  .mobile-character-pane-grid button.on{outline:3px solid #fff6d9;outline-offset:-6px;filter:saturate(1.12)}
  .mobile-character-profile-draft{display:grid;gap:10px;margin:0 -12px;padding:0 12px 12px;border-bottom:5px solid #3b291f;background:#f5ecd3}
  .mobile-character-profile-draft>header{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;min-height:76px;margin:0 -12px;padding:4px 12px;background:#493326 url("./assets/home-ui/wood-strip.webp") center/100% 100% no-repeat!important;color:#fff0ca!important;-webkit-text-fill-color:#fff0ca!important}
  .mobile-character-profile-draft>header b{grid-column:2;text-align:center;font-family:var(--home-ui-font);font-size:23px;font-weight:400;text-shadow:0 2px 3px #2a160dcc}
  .character-draft-back{grid-column:1;grid-row:1;width:56px;height:56px;padding:0;border:0!important;background:transparent url("./assets/home-ui/back.webp") center/contain no-repeat!important;box-shadow:none!important}
  .character-draft-sheet{display:grid;grid-template-columns:minmax(92px,.78fr) minmax(0,1.42fr);gap:12px;min-height:232px;padding:15px 14px;border:2px solid #33251d;border-radius:16px 10px 14px 18px;background:#fffdf8!important;color:#302219!important;-webkit-text-fill-color:#302219!important;box-shadow:0 5px 0 #8b6a54}
  .character-draft-sheet :is(strong,small,dt,dd){color:inherit!important;-webkit-text-fill-color:inherit!important}
  .character-draft-identity{display:grid;align-content:start;justify-items:center;gap:6px;min-width:0;padding:5px;border-right:2px solid #9e8d7d}
  .character-draft-identity :is(.avatar,.sprite){width:86px;height:86px;border:2px solid #2d211a;border-radius:50%;background:#e7ded4;object-fit:cover}
  .character-draft-identity strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.character-draft-identity small{font-size:10px;text-align:center;color:#77685d}
  .character-draft-sheet dl{display:grid;align-content:start;gap:5px;margin:0}.character-draft-sheet dl>div{display:grid;grid-template-columns:minmax(58px,.58fr) minmax(0,1fr);align-items:end;gap:8px;min-width:0}.character-draft-sheet dt{font-size:12px;font-weight:900}.character-draft-sheet dd{min-width:0;margin:0;padding:0 3px 3px;border-bottom:2px solid #6e5d50;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
  .character-draft-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.character-draft-actions button{min-width:0;min-height:37px;padding:7px 5px;border:2px solid #2d211a!important;border-radius:999px;background:#f8f0e3!important;color:#38261d!important;-webkit-text-fill-color:#38261d!important;font-size:10px;font-weight:900;white-space:nowrap}.character-draft-actions button:nth-child(2){background:#c98946!important}.character-draft-actions button.danger{background:#b95043!important;color:#fff8e8!important;-webkit-text-fill-color:#fff8e8!important}
  .mobile-character-top{padding:8px;border:2px solid #6e5543;border-radius:13px;background:#fff8ec}.mobile-character-strip button{border-color:#8c725f;background:#efe2d1;color:#302219}.mobile-character-strip button.on{border-color:#2e211a;background:color-mix(in srgb,var(--own) 24%,#fff8ec);box-shadow:0 5px 12px #4a352733}.mobile-character-strip small{color:#4f4035}
  .mobile-character-editor-dialog,.mobile-character-reorder-dialog{width:min(430px,calc(100vw - 12px));max-height:calc(100dvh - 12px);border-radius:24px}
  .mobile-character-editor-dialog .mobile-character-editor-shell,.mobile-character-reorder-dialog form{max-height:calc(100dvh - 12px)}
  .mobile-character-editor-body{padding:14px 12px}
  .mobile-character-editor-body .fields,.mobile-character-editor-body .profile-license .fields,.mobile-character-editor-body .health-field-grid,.mobile-character-editor-body .personality-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  .mobile-character-editor-body .fields>*,.mobile-character-editor-body .health-field-grid>*,.mobile-character-editor-body .personality-detail-grid>*{min-width:0}
  .mobile-character-editor-body .personality-detail-grid>.personality-choice{padding:10px}.mobile-character-editor-body .personality-detail-grid>.personality-choice b{font-size:12px}.mobile-character-editor-body .personality-detail-grid>.personality-choice small{font-size:9px}
  .mobile-character-editor-body .personality-detail-grid select{min-height:44px;padding:8px 7px;font-size:11px}
  .mobile-character-editor-body .physical-trait-groups{grid-template-columns:1fr;padding:10px}.mobile-character-editor-body .physical-trait-groups>div:first-child{grid-column:auto}
  .mobile-character-editor-body .eye-color-pair{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

}

/* 홈 화면의 축약 로그는 눌러서 오늘 기록 전문을 읽을 수 있다. */
.native-log-card>div>span{display:flex;gap:6px}
.native-log-dialog{
  width:min(720px,calc(100vw - 20px));
  max-height:calc(100dvh - 20px);
  padding:0;
  overflow:hidden;
  border:1px solid #ffffff7a;
  border-radius:26px;
  background:#fffdf9;
  color:#2f2924;
  box-shadow:0 28px 90px #0009;
}
.native-log-dialog::backdrop{background:#0b1119cc;backdrop-filter:blur(5px)}
.native-log-dialog form{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;max-height:calc(100dvh - 20px);padding:0}
.native-log-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 18px;border-bottom:1px solid var(--line)}
.native-log-dialog-head span{display:grid}.native-log-dialog-head small{color:var(--muted);font-size:10px;letter-spacing:.08em}.native-log-dialog-head h2{margin:2px 0 0}
.native-log-dialog-head button{width:44px;height:44px;padding:0;font-size:27px}
.native-log-dialog>form>ol{display:block;max-height:none;margin:0;padding:8px 18px 18px;overflow-y:auto;list-style:none;overscroll-behavior:contain}
.native-log-dialog>form>ol>li{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.native-log-dialog>form>ol>li>span{display:grid;gap:4px}.native-log-dialog time,.native-log-dialog small{color:var(--muted)}.native-log-dialog small{white-space:normal;line-height:1.6}.native-log-dialog time{font-size:14px;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}.log-participants{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}.log-participants:empty{display:none}.log-participants .log-companion{display:inline-flex;align-items:center;gap:6px;font-size:12px;max-width:100%;min-width:0}.log-companion b{overflow-wrap:anywhere}.log-entry-body{gap:8px;min-width:0}.native-log-dialog .log-order-control{margin:0;padding:8px 18px;border-bottom:1px solid var(--line)}.log-companion :is(.avatar,.sprite){width:30px;height:30px;object-fit:contain}
.native-log-dialog-close{margin:10px 18px max(14px,env(safe-area-inset-bottom))}

/* 방 이름과 편집 버튼은 같은 상단 묶음에 두어 인물 얼굴을 가리지 않는다. */
.room-heading{position:relative;z-index:10;display:grid;justify-items:start;gap:4px;width:max-content;max-width:100%}
.room-heading>b{padding:3px 7px;border-radius:8px;background:#ffffffe0;box-shadow:0 2px 7px #0002}
.room-heading .room-edit-hint{position:static;right:auto;bottom:auto;min-height:0;padding:4px 8px;border-radius:8px;font-size:10px}

/* Furniture and people share the room stacking context, ordered by art bottom. */
.room-furniture-layer{position:absolute;inset:0;z-index:auto;overflow:visible;pointer-events:none}
.home.is-editing .room-furniture-layer:has(.is-dragging)::before,.home.is-editing .room.is-furniture-drop-target .room-furniture-layer::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(to right,#40566b52 1px,transparent 1px),linear-gradient(to bottom,#40566b52 1px,transparent 1px);background-size:calc(var(--furniture-cell-w,25%)/4) calc(var(--furniture-cell-h,25%)/4);box-shadow:inset 0 0 0 1px #40566b62;pointer-events:none}
html[data-color-mode][data-visual-theme] .home-page button.room-furniture-item,
.home-page button.room-furniture-item{position:absolute;left:var(--furniture-x);top:var(--furniture-y);z-index:var(--furniture-layer);display:grid!important;place-items:center;width:calc(var(--furniture-cell-w,25%)*var(--furniture-grid-width,1))!important;min-width:0!important;height:calc(var(--furniture-cell-h,25%)*var(--furniture-grid-height,1))!important;min-height:0!important;margin:0!important;padding:3px!important;border:0!important;border-radius:12px!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;transform:translate(-50%,-50%) rotate(var(--furniture-rotation)) scale(var(--furniture-scale));transform-origin:50% 70%;touch-action:manipulation;user-select:none;pointer-events:auto;filter:none!important}
.furniture-sprite{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.chair-frame-overlay{display:grid;place-items:center;position:absolute;left:var(--furniture-x);top:var(--furniture-y);width:calc(var(--furniture-cell-w,25%)*var(--furniture-grid-width,1));height:calc(var(--furniture-cell-h,25%)*var(--furniture-grid-height,1));padding:3px;box-sizing:border-box;pointer-events:none;transform:translate(-50%,-50%) scale(var(--furniture-scale));transform-origin:50% 70%}
.room-furniture-art:has(.furniture-sprite){width:calc(100% * var(--sprite-width,1));height:auto;aspect-ratio:var(--sprite-ratio)}
.chair-frame-overlay img{width:100%;height:100%;object-fit:contain}
.home-life-person.is-seated{width:var(--seat-person-width)!important;transform:translate(-50%,-78%)!important}
.home-life-person.is-seated .home-person-visual{width:var(--seat-person-width);max-width:none}
@media(prefers-reduced-motion:no-preference){html:not([data-animation-intensity="off"]) .home-life-person.is-seated.is-hugging .home-person-visual{animation:hug-left 3.4s ease-in-out infinite!important}html:not([data-animation-intensity="off"]) .home-life-person.is-seated.is-hugging[data-seat-slot="1"] .home-person-visual{animation-name:hug-right!important}}
.home-life-person.is-seated .home-person-visual :is(.avatar,.sprite){width:100%!important;height:auto!important;max-width:100%!important}
.home-life-using.scene-action-eating .home-person-visual{animation:home-activity-cook 1.7s ease-in-out infinite!important}
.room-furniture-art{display:grid;place-items:center;width:100%;height:100%;font-size:clamp(27px,5.4vw,56px);line-height:1;transform:scaleX(var(--furniture-flip,1));filter:drop-shadow(0 4px 4px #17203345)}
.room-furniture-item[data-furniture-columns="2"] .room-furniture-art,.room-furniture-item[data-furniture-columns="3"] .room-furniture-art,.room-furniture-item[data-furniture-rows="2"] .room-furniture-art{font-size:clamp(34px,7.2vw,72px)}
.room-furniture-item.is-couple-bed{padding:0!important;border-radius:0!important}
.room-furniture-item.is-couple-bed .room-couple-bed-art{transform:scaleX(var(--furniture-flip,1)) scale(1.05)}
.room-couple-bed-art,.room-couple-bed-overlay{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px #17203345)}
.couple-bed-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.couple-bed-base{z-index:0}.couple-bed-quilt{z-index:1}.couple-bed-footboard{z-index:2}
.room-furniture-overlay-layer{position:absolute;inset:0;z-index:auto;overflow:visible;pointer-events:none}
.room-couple-bed-overlay{position:absolute;left:var(--furniture-x);top:var(--furniture-y);z-index:calc(var(--furniture-layer) + 1);width:calc(var(--furniture-cell-w,25%)*var(--furniture-grid-width,1));height:calc(var(--furniture-cell-h,25%)*var(--furniture-grid-height,1));transform:translate(-50%,-50%) rotate(var(--furniture-rotation)) scale(var(--furniture-scale));transform-origin:50% 70%}
.room-couple-bed-overlay .couple-bed-layer{transform:scaleX(var(--furniture-flip,1)) scale(1.05)}
.room-foreground-layer{position:absolute;inset:0;z-index:6;overflow:visible;pointer-events:none}
.home-bed-foreground-status{position:absolute;left:var(--bed-status-x);top:var(--bed-status-y);z-index:1;display:grid;place-items:center;max-width:min(150px,86%);transform:translateX(-50%);filter:drop-shadow(0 5px 5px #19223835)}
.home-bed-foreground-status .home-interaction-status{min-width:88px;max-width:132px;padding:6px 9px!important}
.home-bed-foreground-status.is-shared .home-interaction-status{min-width:104px;max-width:148px}
.home-bed-foreground-status .home-interaction-status b{font-size:11px}
.home-bed-foreground-status .home-interaction-status small{font-size:8px}
.room-furniture-props{position:absolute;left:50%;bottom:58%;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:1px;width:max-content;max-width:72px;transform:translateX(-50%);pointer-events:none}
.room-furniture-props i{display:block;font-style:normal;font-size:clamp(10px,1.65vw,17px);line-height:1;filter:drop-shadow(0 2px 2px #17203380);transform:translateY(calc((var(--prop-slot,0) % 2) * -2px))}
html body #app .home .room-furniture-item small{display:none;position:absolute;left:50%;top:100%;max-width:92px;padding:3px 6px;border-radius:999px;background:#30251ef2;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:10px;line-height:1.2;text-shadow:none;white-space:normal;text-align:center;min-width:48px;overflow-wrap:anywhere;transform:translateX(-50%) rotate(calc(var(--furniture-rotation) * -1));pointer-events:none}
.home.is-editing .room-furniture-item{pointer-events:none!important;cursor:grab;touch-action:none!important}
.home.is-editing .room-furniture-art{pointer-events:auto;touch-action:none}
.home.is-editing .furniture-drag-preview *{pointer-events:none!important}
.home.is-editing .furniture-drag-source{opacity:0}
.home.is-editing .room-furniture-item.furniture-drag-preview{pointer-events:none!important;z-index:1000}
html body #app .home.is-editing .room-furniture-item small{display:block}
.home.is-editing .room-furniture-item.is-selected::after{content:"";position:absolute;inset:var(--selection-inset-y,-2px) var(--selection-inset-x,-2px);border:2px dashed #fff;border-radius:14px;box-shadow:0 0 0 2px var(--p),0 5px 14px #17203355;pointer-events:none}
.home.is-editing .room-furniture-item.is-dragging{cursor:grabbing;opacity:.9}
.furniture-edit-toolbar{position:fixed;left:calc(50% + 26px);bottom:max(18px,env(safe-area-inset-bottom));z-index:700;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:6px;width:calc(100vw - 76px);max-width:520px;box-sizing:border-box;padding:8px;border:1px solid #bfa783;border-radius:16px;background:#fff5e4;box-shadow:0 4px 12px #24150b44;transform:translateX(-50%);overscroll-behavior:contain}
.furniture-edit-toolbar[hidden]{display:none!important}.furniture-edit-toolbar strong{flex:0 0 auto;max-width:100px;padding:0 6px;color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.furniture-edit-toolbar button{flex:0 0 auto;display:grid;place-items:center;min-width:42px;height:42px;padding:7px 10px;border-color:#ffffff38;background:#ffffff14;color:#fff;font-size:17px}.furniture-edit-toolbar button.danger{font-size:11px}.furniture-edit-toolbar button.primary{font-size:11px}
.native-app .furniture-edit-toolbar{top:auto;bottom:12px}
html body #app .furniture-edit-toolbar .chair-magnet-toggle{width:auto!important;height:28px!important;padding:3px 8px!important;font-size:10px!important}.furniture-edit-toolbar .chair-magnet-toggle[aria-pressed="true"]{outline:2px solid #87995d}.furniture-edit-heading{display:flex;align-items:center;gap:8px;min-width:0}
.furniture-edit-heading .furniture-toolbar-toggle{flex:0 0 34px!important;width:34px!important;height:32px!important;padding:0!important;font-size:19px!important}
.furniture-edit-toolbar.is-collapsed{width:min(280px,calc(100vw - 76px))}
.furniture-edit-toolbar.is-collapsed .furniture-edit-actions,.furniture-edit-toolbar.is-collapsed .furniture-edit-heading select{display:none!important}
html body #app .furniture-edit-heading select{flex:1;min-width:0;width:100%;max-width:100%;height:32px;min-height:0;margin:0;padding:4px 10px;border:1px solid #bfa783;border-radius:10px;background:#fffdf6;color:#392b21;-webkit-text-fill-color:#392b21;font-size:12px}
.furniture-edit-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-width:0;max-width:100%}
html body #app .furniture-edit-toolbar button{box-sizing:border-box;display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:100%;min-width:0!important;min-height:0!important;height:34px!important;margin:0!important;padding:3px!important;font-size:11px!important;white-space:normal;overflow-wrap:anywhere;line-height:1.1;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;background:#75543d!important;border:1px solid #b39970!important;border-radius:10px!important;text-shadow:none!important}
html body #app .furniture-edit-toolbar button span{color:inherit!important;-webkit-text-fill-color:inherit!important;font-size:inherit!important}
html body #app .furniture-edit-toolbar strong{color:#392b21!important}
.home:has(.home-furniture-drawer:not(.is-collapsed)) .furniture-edit-toolbar{bottom:calc(var(--home-drawer-height) + 16px)}
.furniture-props-dialog{width:min(520px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;border:1px solid #ffffff70;border-radius:24px;background:#fffaf2;color:#30271f;box-shadow:0 28px 90px #10182788}
.furniture-props-dialog::backdrop{background:#1018279e;backdrop-filter:blur(5px)}
.furniture-props-dialog form{display:grid;gap:15px;max-height:calc(100dvh - 20px);padding:18px;overflow-y:auto}.furniture-props-dialog .title{display:flex;align-items:center;justify-content:space-between}.furniture-props-dialog .title h2{margin:2px 0}.furniture-props-dialog .title>button{width:44px;height:44px;padding:0}.furniture-props-dialog p{margin:0;color:#6f6258}.furniture-props-dialog section{display:grid;gap:8px}.furniture-props-dialog section h3{margin:0;font-size:14px}
.furniture-prop-picker,.furniture-prop-current{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.furniture-prop-picker button,.furniture-prop-current button{display:grid;place-items:center;gap:2px;min-width:0;min-height:76px;padding:8px 4px;border-color:#d6c3b2;background:#fff}.furniture-prop-picker span,.furniture-prop-current span{font-size:25px}.furniture-prop-picker b,.furniture-prop-current b{max-width:100%;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.furniture-prop-current small{font-size:9px;color:#a34d43}.furniture-props-done{min-height:48px}
@media(max-width:460px){.furniture-prop-picker,.furniture-prop-current{grid-template-columns:repeat(4,minmax(58px,1fr));overflow-x:auto}.furniture-edit-toolbar strong{display:none}}

/* 생활 시뮬레이션 캐릭터는 방 안의 실제 백분율 좌표를 사용한다. 가구보다
   위에, 편집 손잡이보다 아래에 두고 이동 중에도 눌러 상태를 확인할 수 있다. */
.room-people.has-home-life{position:absolute;inset:0;z-index:auto;display:block;max-width:none;max-height:none;overflow:visible;pointer-events:none}
.home-life-roaming-layer{position:absolute;z-index:30;inset:0;overflow:visible;pointer-events:none;container-type:size}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person{--life-edge:min(82px,50%);position:absolute;left:clamp(var(--life-edge),var(--life-x),calc(100% - var(--life-edge)));top:var(--life-y);z-index:4;display:flex;flex-direction:column;align-items:center;max-width:min(150px,82%);pointer-events:auto;transform:translate(-50%,-72%);will-change:transform}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person.is-couple-bed-user{--life-edge:36px}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person.is-couple-bed-user.is-using-couple-bed{left:var(--life-x);transform:translate(-50%,-50%);max-width:none}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person.is-couple-bed-user.is-using-couple-bed .home-person-visual{width:var(--bed-face-size,52px);height:var(--bed-face-size,52px);transform-origin:50% 50%;rotate:var(--couple-bed-character-rotation,0deg);scale:1}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person.is-couple-bed-user.is-using-couple-bed .home-person-visual>:is(.avatar,.sprite){width:88%!important;height:88%!important;max-width:none!important;object-fit:contain!important}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person.is-couple-bed-user.is-under-cover .room-sleep-mark{right:-2px;top:-8px}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person .home-person-status{max-width:105px;padding:5px 7px;font-size:10px;line-height:1.2}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person .home-person-status small{display:-webkit-box;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-waiting-to-walk{transform:translate(var(--life-dx),var(--life-dy))}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking{animation:home-life-walk var(--life-duration) linear var(--life-delay) both}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking .home-person-visual{animation:home-life-step var(--walk-step-duration,.42s) ease-in-out infinite}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-careful{animation-timing-function:ease-in-out;animation-duration:calc(var(--life-duration) * 1.22)}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-careful .home-person-visual{--walk-step-duration:.62s;animation-name:home-life-careful-step}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-poised .home-person-visual{--walk-step-duration:.5s;animation-name:home-life-poised-step}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-light{animation-duration:calc(var(--life-duration) * .88)}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-light .home-person-visual{--walk-step-duration:.3s;animation-name:home-life-light-step}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-striding{animation-duration:calc(var(--life-duration) * .76)}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-striding .home-person-visual{--walk-step-duration:.33s;animation-name:home-life-striding-step}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-shadow{animation-duration:calc(var(--life-duration) * .46)}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.walk-style-shadow .home-person-visual{--walk-step-duration:.2s;animation-name:home-life-shadow-step}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking.is-approaching-conversation .home-person-visual{animation:home-life-eager-step .28s ease-in-out infinite}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-using .home-person-visual{animation:home-person-float 3.2s var(--home-float-delay,0s) ease-in-out infinite}
:is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-waiting{opacity:.94}
.home-interaction-card{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:min(184px,94%);padding:0;border:0;background:transparent;filter:drop-shadow(0 7px 7px #19223844)}
.room-people.has-home-life .home-life-interaction{position:absolute;left:clamp(min(98px,50%),var(--life-x),calc(100% - min(98px,50%)));top:var(--life-y);z-index:5;pointer-events:auto;transform:translate(-50%,-72%)}
.home-interaction-visual{position:relative;display:flex!important;align-items:flex-end!important;justify-content:center!important;width:76px;min-width:76px;height:58px;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.home-interaction-avatar{display:grid!important;place-items:center!important;width:48px;height:54px;margin:0 -10px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-style:normal;transform-origin:50% 82%}
.home-interaction-avatar:last-of-type{margin:0 0 0 -10px!important}
.home-interaction-avatar :is(.avatar,.sprite){width:48px!important;height:54px!important;padding:0!important;border:0!important;border-radius:0!important;object-fit:contain!important;background:transparent!important;box-shadow:none!important}
.home-interaction-visual>em{position:absolute;z-index:7;left:50%;top:-5px;color:#ff6f91;font:900 20px/1 sans-serif;text-shadow:0 2px 3px #0006;transform:translateX(-50%)}
.home-interaction-speech{position:absolute;z-index:8;inset:-17px -4px auto;display:flex;justify-content:space-between;pointer-events:none}
.home-interaction-speech i{position:relative;display:grid;place-items:center;min-width:26px;height:18px;padding:0 5px;border:1px solid #4c4038;border-radius:12px;background:#fffdf7;color:#504238;font:900 8px/1 sans-serif;box-shadow:0 2px 5px #0004;animation:home-talk-bubble 1.7s ease-in-out infinite}
.home-interaction-speech i:nth-child(2){margin-top:9px;animation-delay:.55s}.home-interaction-speech i::after{content:"";position:absolute;bottom:-4px;width:6px;height:6px;border-right:1px solid #4c4038;border-bottom:1px solid #4c4038;background:#fffdf7;transform:rotate(45deg)}
.home-interaction-status{display:grid!important;gap:1px!important;min-width:78px;max-width:108px;padding:6px 8px!important;border:0!important;border-radius:11px!important;background:#fffdf3e8!important;box-shadow:0 3px 9px #0003!important;color:#2f2924!important;-webkit-text-fill-color:#2f2924!important;text-align:center}
.home-interaction-status b,.home-interaction-status small{display:block;min-width:0;margin:0;color:inherit!important;-webkit-text-fill-color:inherit!important;line-height:1.25;white-space:normal;word-break:keep-all}
.home-interaction-status b{font-size:10px}.home-interaction-status small{font-size:8px;color:#554940!important;-webkit-text-fill-color:#554940!important}
.home-person-chat-bubble{position:absolute;z-index:9;right:-9px;top:-10px;display:grid;place-items:center;width:26px;height:18px;border:1px solid #4c4038;border-radius:12px;background:#fffdf7;color:#504238;font:900 8px/1 sans-serif;box-shadow:0 2px 5px #0004;animation:home-talk-bubble 1.7s ease-in-out infinite}
.home-person-chat-bubble::after{position:absolute;content:"";right:5px;bottom:-4px;width:6px;height:6px;border-right:1px solid #4c4038;border-bottom:1px solid #4c4038;background:#fffdf7;transform:rotate(45deg)}
.home-life-using.scene-action-watch .home-person-visual{animation:home-activity-watch 2.8s ease-in-out infinite!important}
.home-life-using.scene-action-rest .home-person-visual{animation:home-activity-rest 4.4s ease-in-out infinite!important}
.home-life-using:is(.scene-action-shower,.scene-action-groom) .home-person-visual{animation:home-activity-groom 1.9s ease-in-out infinite!important}
.home-life-using:is(.scene-action-cook,.scene-action-eat) .home-person-visual{animation:home-activity-cook 1.25s steps(2,end) infinite!important}
.home-life-using:is(.scene-action-study,.scene-action-create) .home-person-visual{animation:home-activity-focus 3.1s ease-in-out infinite!important}
.home-life-using:is(.scene-action-music,.scene-action-exercise,.scene-action-play) .home-person-visual{animation:home-activity-rhythm 1.15s ease-in-out infinite!important}
.home-life-using.scene-action-exercise .home-person-visual{animation:home-activity-exercise .92s cubic-bezier(.45,0,.55,1) infinite!important}
.home-life-using.is-conversing:not(.scene-action-exercise) .home-person-visual{transform-origin:50% 88%}
.home-life-using.is-conversing.conversation-slot-1:not(.scene-action-exercise) .home-person-visual{animation:home-conversation-left 1.45s ease-in-out infinite!important}
.home-life-using.is-conversing.conversation-slot-2:not(.scene-action-exercise) .home-person-visual{animation:home-conversation-right 1.45s .24s ease-in-out infinite!important}
.home-life-using.is-bed-conversation .home-person-visual{transform-origin:50% 64%!important}
.home-life-using.is-conversing.is-bed-conversation.conversation-slot-1 .home-person-visual{animation:home-bed-conversation-left 4.6s ease-in-out infinite!important}
.home-life-using.is-conversing.is-bed-conversation.conversation-slot-2 .home-person-visual{animation:home-bed-conversation-right 4.6s .55s ease-in-out infinite!important}
.home-life-using.scene-action-sleep .home-person-visual{animation:home-activity-sleep 5.2s ease-in-out infinite!important}
/* Sleep habits animate inside the existing bed pose, never the room position.
   Only transform/opacity change; reduced-motion keeps the static sleep pose. */
@media(prefers-reduced-motion:no-preference){
  .home-life-using.scene-action-sleep[data-sleep-style] .home-person-visual{animation-duration:var(--sleep-duration,5.2s)!important;animation-delay:var(--sleep-delay,0s)!important}
  .home-life-using[data-sleep-style="tidy"] .home-person-visual{animation-name:sleep-tidy!important}
  .home-life-using[data-sleep-style="kick"] .home-person-visual{animation-name:sleep-kick!important}
  .home-life-using[data-sleep-style="curl"] .home-person-visual{animation-name:sleep-curl!important}
  .home-life-using[data-sleep-style="stretch"] .home-person-visual{animation-name:sleep-stretch!important}
  .home-life-using[data-sleep-style="hug"] .home-person-visual{animation-name:sleep-hug!important}
  .home-life-using[data-sleep-style="talk"] .home-person-visual{animation-name:sleep-talk!important}
  .home-life-using[data-sleep-style="restless"] .home-person-visual{animation-name:sleep-restless!important}
  .home-life-using[data-sleep-style="still"] .home-person-visual{animation-name:sleep-still!important}
  .home-life-using[data-sleep-style="light"] .home-person-visual{animation-name:sleep-light!important}
  .home-life-using[data-sleep-style="snore"] .home-person-visual{animation-name:sleep-snore!important}
  .home-life-using[data-sleep-style="talk"] .home-person-visual::after{content:"…";position:absolute;right:-12%;top:0;padding:0 4px;border-radius:8px;background:#fff8e8;color:#443224;font:700 12px/1.2 sans-serif;animation:sleep-murmur 8.5s var(--sleep-delay,0s) infinite;pointer-events:none}
}
@keyframes sleep-tidy{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes sleep-kick{0%,65%,100%{transform:translate(0,0)}70%{transform:translate(2%,3%) rotate(3deg)}76%{transform:translate(-2%,1%) rotate(-2deg)}82%{transform:translate(1%,2%)}}
@keyframes sleep-curl{0%,100%{transform:rotate(-8deg) scale(.96)}50%{transform:rotate(-10deg) scale(.975)}}
@keyframes sleep-stretch{0%,70%,100%{transform:scale(1)}82%{transform:scale(1.07,1.025)}90%{transform:scale(1.035,1)}}
@keyframes sleep-hug{0%,100%{transform:rotate(5deg) scale(.97)}50%{transform:translate(-2%,1%) rotate(7deg) scale(.985)}}
@keyframes sleep-talk{0%,60%,100%{transform:scale(1)}66%,76%{transform:scale(1,1.035) rotate(1deg)}71%,81%{transform:scale(1) rotate(-1deg)}}
@keyframes sleep-restless{0%,35%,100%{transform:rotate(0)}45%{transform:translate(-4%,1%) rotate(-5deg)}65%{transform:translate(4%,1%) rotate(5deg)}80%{transform:translate(-1%,0) rotate(-1deg)}}
@keyframes sleep-still{0%,100%{transform:scale(1)}50%{transform:scale(1.006)}}
@keyframes sleep-light{0%,70%,100%{transform:translate(0,0)}76%{transform:translate(0,-2%) rotate(3deg)}83%{transform:translate(0,-1%) rotate(-2deg)}90%{transform:translate(0,0)}}
@keyframes sleep-snore{0%,100%{transform:scale(1)}35%{transform:scale(1.045,1.035)}55%{transform:scale(1.015)}65%{transform:scale(1.025)}80%{transform:scale(1)}}
@keyframes sleep-murmur{0%,58%,90%,100%{opacity:0}66%,80%{opacity:1}}
@keyframes home-bed-conversation-left{0%,100%{transform:translate(0,1px) rotate(-1deg)}28%{transform:translate(1px,-1px) rotate(1deg)}58%{transform:translate(0,-2px) rotate(-2deg)}76%{transform:translate(-1px,0) rotate(1deg)}}
@keyframes home-bed-conversation-right{0%,100%{transform:translate(0,0) rotate(1deg)}24%{transform:translate(-1px,-2px) rotate(-1deg)}52%{transform:translate(1px,-1px) rotate(2deg)}78%{transform:translate(0,1px) rotate(-1deg)}}
.home-interaction-kiss .home-interaction-avatar:first-of-type{animation:home-interaction-kiss-left 1.8s ease-in-out infinite}.home-interaction-kiss .home-interaction-avatar:nth-of-type(2){animation:home-interaction-kiss-right 1.8s ease-in-out infinite}.home-interaction-kiss .home-interaction-visual>em{animation:home-interaction-heart 1.8s ease-in-out infinite}
.home-interaction-hug .home-interaction-avatar:first-of-type{animation:home-interaction-hug-left 2.2s ease-in-out infinite}.home-interaction-hug .home-interaction-avatar:nth-of-type(2){animation:home-interaction-hug-right 2.2s ease-in-out infinite}
.home-interaction-taunt .home-interaction-avatar,.meeting-pair.is-social-taunt button{animation:social-taunt 2s ease-in-out infinite}
.home-interaction-insult .home-interaction-avatar,.meeting-pair.is-social-insult button{animation:social-insult 1.7s ease-in-out infinite}
.home-interaction-argue .home-interaction-avatar,.meeting-pair.is-social-argue button{animation:social-argue 1.2s ease-in-out infinite alternate}
.home-interaction-fight .home-interaction-avatar,.meeting-pair.is-social-fight button{animation:social-fight .8s ease-in-out infinite alternate}
.home-interaction-cook .home-interaction-avatar,.meeting-pair.is-social-cook_together button{animation:social-cook 1.4s ease-in-out infinite}
:is(.home-interaction-taunt,.home-interaction-insult,.home-interaction-argue,.home-interaction-fight,.home-interaction-cook) .home-interaction-avatar:nth-of-type(2){animation-delay:-.4s}
html[data-animation-intensity="off"] :is(.home-interaction-avatar,.meeting-pair button),html[data-animation-intensity="reduced"] :is(.home-interaction-avatar,.meeting-pair button){animation:none!important}
@media(prefers-reduced-motion:reduce){.home-interaction-avatar,.meeting-pair button{animation:none!important}}
@keyframes social-taunt{50%{transform:translateY(-3px) rotate(-7deg)}}
@keyframes social-insult{30%{transform:translateX(4px) rotate(4deg)}60%{transform:translateX(-2px)}}
@keyframes social-argue{to{transform:translateY(-5px) rotate(3deg)}}
@keyframes social-fight{to{transform:translateX(5px) rotate(-6deg)}}
@keyframes social-cook{50%{transform:translateY(3px) rotate(3deg)}}
.account-reset-control{display:grid;gap:6px;width:100%}.account-deletion-links{display:flex;flex-direction:column;align-items:stretch;gap:10px}.account-reset-control small{line-height:1.5}
.direct-command-dialog{box-sizing:border-box;width:min(92vw,480px);max-height:86dvh;padding:20px 20px 24px;border:3px solid #fffdf6;border-radius:30px;background:#f8f1df;color:#6b4434;overflow:hidden;box-shadow:0 12px 45px #24170940;contain:layout style}
.direct-command-dialog::backdrop{background:#201b1670}
.direct-command-dialog>header{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;height:auto;padding:0 0 16px;border:0;background:none;position:static}
.direct-command-dialog>header>span{flex:1;min-width:0;text-align:left}.direct-command-dialog>header small{display:block;color:#907b5e;font-size:13px;line-height:1.5;margin-bottom:3px}.direct-command-dialog h2{font-size:clamp(21px,5vw,27px);line-height:1.25;margin:0;color:#5b4030}
.direct-command-dialog>header button{flex:0 0 46px;width:46px;height:46px;padding:0;border:0;border-radius:0;background:transparent url('./assets/home-ui/back.webp') center/contain no-repeat;box-shadow:none}
.command-breadcrumb{margin:0 0 12px;padding-bottom:10px;border-bottom:1px dashed #cbb897;font-size:12px;color:#8d775b}
.direct-command-body{max-height:calc(86dvh - 155px);overflow:auto;overscroll-behavior:contain;padding:2px 1px 6px;touch-action:pan-y}
.direct-command-dialog .home-occupant-command{margin:0;border:0;padding:0}.direct-command-dialog [hidden]{display:none!important}
.command-menu-page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.direct-command-dialog .command-menu-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-width:0;min-height:52px;margin:0;padding:11px 9px;border:1px solid #ddcdb0;border-radius:15px;background:#fffdf5;color:#704a38;-webkit-text-fill-color:#704a38;box-shadow:0 2px 0 #d9c8a7;font:700 clamp(14px,3.8vw,18px)/1.4 KCCHanbit,sans-serif;overflow-wrap:anywhere;white-space:normal;touch-action:pan-y}
.direct-command-dialog .command-category{position:relative;flex-direction:column;gap:5px;min-height:112px;padding:15px 8px;background:#fff9e9;border-color:#e0cb9e;border-radius:20px}.command-category-icon{display:block;font-size:27px;line-height:1.2}.command-category b{font-size:18px}.command-category small{font:12px/1.45 KCCHanbit,sans-serif;color:#8d7b65;-webkit-text-fill-color:#8d7b65}.command-category:nth-child(3n+2){background:#edf1df;border-color:#ced6b5}.command-category:nth-child(3n){background:#f8eae2;border-color:#e4cabb}
.command-hobby-summary{grid-column:1/-1;padding:15px;background:#efe7d3;border-radius:16px}.command-hobby-summary>b{font-size:16px}.command-hobby-summary p{margin:7px 0 0;font-size:13px;line-height:1.6;color:#8b745a}.command-hobby-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.command-hobby-tags>span{padding:5px 9px;background:#fffcf3;border-radius:10px;font-size:13px;overflow-wrap:anywhere}.direct-command-dialog .command-primary{grid-column:1/-1;background:#7c8f62;border-color:#6c7e54;color:#fffdf5;-webkit-text-fill-color:#fffdf5;box-shadow:0 2px 0 #586844}.command-section-label{grid-column:1/-1;margin:10px 0 0;font-size:13px;font-weight:400;color:#8d775b}
.direct-command-dialog .command-menu-button:active{transform:translateY(2px);box-shadow:0 1px 2px #51483648}.direct-command-dialog .command-menu-button:disabled{opacity:.5}.direct-command-dialog .command-companion{grid-column:1/-1}.command-target-page>[data-direct-target-list]{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.command-target-page .direct-person-choice{min-height:75px}
.direct-command-dialog .command-payment{grid-column:1/-1;display:grid;gap:8px;margin:10px 0;font-size:15px}.command-payment select{max-width:100%;min-height:44px}.command-menu-page>p{grid-column:1/-1}
.home-interaction-talk .home-interaction-avatar:first-of-type,.home-interaction-play .home-interaction-avatar:first-of-type,.home-interaction-together .home-interaction-avatar:first-of-type{animation:home-interaction-talk-left 1.2s ease-in-out infinite}.home-interaction-talk .home-interaction-avatar:nth-of-type(2),.home-interaction-play .home-interaction-avatar:nth-of-type(2),.home-interaction-together .home-interaction-avatar:nth-of-type(2){animation:home-interaction-talk-right 1.2s .2s ease-in-out infinite}
.home-interaction-together .home-interaction-visual>em{animation:home-interaction-heart 1.8s ease-in-out infinite}
.home-interaction-watch .home-interaction-visual{width:98px;min-width:98px}
.home-interaction-watch .home-interaction-avatar{margin:0 -7px 0 0!important}
.home-interaction-watch .home-interaction-avatar:last-of-type{margin:0 0 0 -7px!important}
.home-interaction-watch .home-interaction-avatar:first-of-type{animation:home-tv-watch-left 2.4s ease-in-out infinite}.home-interaction-watch .home-interaction-avatar:nth-of-type(2){animation:home-tv-watch-right 2.4s .18s ease-in-out infinite}
.home-tv-reaction{position:absolute;z-index:9;top:-14px;font:normal 15px/1 sans-serif;filter:drop-shadow(0 2px 2px #0005);animation:home-tv-reaction-pop 2.4s ease-in-out infinite;pointer-events:none}
.home-interaction-avatar-1 .home-tv-reaction{right:auto;left:-8px}
.home-interaction-avatar-2 .home-tv-reaction{right:-8px;left:auto;animation-delay:.18s}
.home-interaction-watch .tv-reaction-angry{animation-name:home-tv-angry}.home-interaction-watch .tv-reaction-cry{animation-name:home-tv-cry}
@keyframes home-interaction-kiss-left{0%,40%,100%{transform:translateX(-2px) rotate(0)}58%,72%{transform:translateX(7px) rotate(3deg)}}
@keyframes home-interaction-kiss-right{0%,40%,100%{transform:translateX(2px) rotate(0)}58%,72%{transform:translateX(-7px) rotate(-3deg)}}
@keyframes home-interaction-heart{0%,36%,100%{opacity:.35;transform:translate(-50%,5px) scale(.72)}58%,76%{opacity:1;transform:translate(-50%,-5px) scale(1.18)}}
@keyframes home-interaction-hug-left{0%,100%{transform:translateX(-1px) rotate(0)}50%{transform:translateX(5px) rotate(2deg)}}
@keyframes home-interaction-hug-right{0%,100%{transform:translateX(1px) rotate(0)}50%{transform:translateX(-5px) rotate(-2deg)}}
@keyframes home-interaction-talk-left{0%,100%{transform:translateY(1px)}50%{transform:translateY(-3px)}}
@keyframes home-interaction-talk-right{0%,100%{transform:translateY(-2px)}50%{transform:translateY(1px)}}
@keyframes home-tv-watch-left{0%,100%{transform:translateY(0) rotate(-1deg)}30%{transform:translateY(-2px) rotate(1deg)}48%{transform:translateY(-5px) rotate(-3deg)}65%{transform:translateY(-1px) rotate(1deg)}}
@keyframes home-tv-watch-right{0%,100%{transform:translateY(0) rotate(1deg)}26%{transform:translateY(-1px) rotate(-1deg)}50%{transform:translateY(-5px) rotate(3deg)}68%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes home-tv-reaction-pop{0%,22%,100%{opacity:.35;transform:translateY(3px) scale(.72)}42%,72%{opacity:1;transform:translateY(-3px) scale(1.08)}}
@keyframes home-tv-angry{0%,100%{transform:translateY(0) rotate(0)}38%{transform:translate(-2px,-2px) rotate(-3deg)}48%{transform:translate(2px,-3px) rotate(3deg)}58%{transform:translate(-1px,-2px) rotate(-2deg)}}
@keyframes home-tv-cry{0%,100%{transform:translateY(0) rotate(0)}48%{transform:translateY(2px) rotate(-2deg)}70%{transform:translateY(-1px) rotate(1deg)}}
@keyframes home-life-walk{from{transform:translate(calc(-50% + var(--life-dx,0cqw)),calc(-72% + var(--life-dy,0cqh)))}to{transform:translate(-50%,-72%)}}
@keyframes home-life-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes home-life-careful-step{0%,100%{transform:translate(0,0) rotate(-.5deg)}50%{transform:translate(1px,-2px) rotate(.5deg)}}
@keyframes home-life-poised-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes home-life-light-step{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes home-life-striding-step{0%,100%{transform:translate(-2px,1px) rotate(-3deg)}50%{transform:translate(3px,-5px) rotate(3deg)}}
@keyframes home-life-shadow-step{0%,100%{transform:translate(-4px,1px) rotate(-5deg) scaleY(.96)}25%{transform:translate(1px,-6px) rotate(2deg) scaleY(1.02)}50%{transform:translate(5px,0) rotate(5deg) scaleY(.96)}75%{transform:translate(0,-5px) rotate(-2deg) scaleY(1.01)}}
@keyframes home-life-eager-step{0%,100%{transform:translate(-1px,1px) rotate(-4deg)}50%{transform:translate(2px,-5px) rotate(4deg)}}
@keyframes home-talk-bubble{0%,100%{opacity:.6;transform:translateY(2px) scale(.94)}50%{opacity:1;transform:translateY(-2px) scale(1.04)}}
@keyframes home-activity-watch{0%,100%{transform:translateY(0) rotate(-1deg)}45%{transform:translateY(-2px) rotate(1deg)}52%{transform:translateY(-2px) rotate(-2deg)}}
@keyframes home-activity-rest{0%,100%{transform:translateY(1px) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes home-activity-groom{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes home-activity-cook{0%,100%{transform:translate(-1px,0) rotate(-1deg)}50%{transform:translate(2px,-2px) rotate(1deg)}}
@keyframes home-activity-focus{0%,100%{transform:translateY(0) rotate(0)}38%{transform:translateY(1px) rotate(1deg)}62%{transform:translateY(-1px) rotate(-1deg)}}
@keyframes home-activity-rhythm{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes home-activity-exercise{0%,100%{transform:translateY(1px) rotate(-2deg) scaleY(.97)}28%{transform:translate(-2px,-6px) rotate(3deg) scaleY(1.03)}55%{transform:translateY(2px) rotate(1deg) scaleY(.94)}76%{transform:translate(2px,-5px) rotate(-3deg) scaleY(1.02)}}
@keyframes home-conversation-left{0%,100%{transform:translateY(1px) rotate(-2deg)}36%{transform:translate(2px,-3px) rotate(3deg)}64%{transform:translate(1px,0) rotate(1deg)}}
@keyframes home-conversation-right{0%,100%{transform:translateY(0) rotate(2deg)}34%{transform:translate(-1px,1px) rotate(-1deg)}62%{transform:translate(-2px,-3px) rotate(-3deg)}}
@keyframes home-activity-sleep{0%,100%{transform:translateY(1px) scale(1)}50%{transform:translateY(0) scale(1.015)}}
@keyframes home-pet-roam{
  0%{transform:translate(calc(-50% + var(--pet-dx,0cqw)),calc(-50% + var(--pet-dy,0cqh))) rotate(-3deg)}
  100%{transform:translate(-50%,-50%) rotate(0)}
}
.home-pet-roaming :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation:home-pet-step .72s ease-in-out infinite;transform-origin:50% 90%;will-change:transform}
.home-pet-roaming.pet-motion-sniff :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation-name:home-pet-sniff}
.home-pet-roaming.pet-motion-look :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation-name:home-pet-look;animation-duration:2.4s}
.home-pet-roaming.pet-motion-stretch :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation-name:home-pet-stretch;animation-duration:3.2s}
.home-pet-roaming.pet-motion-pounce :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation-name:home-pet-pounce;animation-duration:1.1s}
.home-pet-roaming.is-sleeping{animation:none!important;will-change:auto!important}
.home-pet-roaming.is-sleeping :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation:none!important}
@keyframes home-pet-step{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes home-pet-sniff{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translate(2px,2px) rotate(5deg)}}
@keyframes home-pet-look{0%,65%,100%{transform:rotate(0)}72%,88%{transform:rotate(-7deg)}}
@keyframes home-pet-stretch{0%,70%,100%{transform:scale(1)}82%{transform:scale(1.08,.9) translateY(2px)}}
@keyframes home-pet-pounce{0%,100%{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-6px) rotate(3deg)}}
@media(max-width:1200px),(orientation:portrait){
  :is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person{--life-edge:min(82px,50%);max-width:76%;transform:translate(-50%,-70%)}
  :is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person .home-person-status{max-width:76px;padding:3px 5px;font-size:8px}
  :is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person img.avatar{width:40px;height:40px}
  :is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person img.sprite{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  :is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-walking{animation:none}
  :is(.room-people.has-home-life,.home-life-roaming-layer) .home-life-person .home-person-visual{animation:none!important}
  .home-interaction-card :is(.home-interaction-avatar,.home-interaction-visual>em,.home-tv-reaction){animation:none!important}
  .home-interaction-speech i,.home-person-chat-bubble,.home-pet-roaming,.home-pet-roaming :is(.room-pet-icon,.room-pet-photo,.room-pet-emoji){animation:none!important}
}

/* 이동 장면은 상태 글자만 바꾸지 않고 관찰 캐릭터 자체도 계속 전진한다. */
.is-scene-moving .native-character-stage{animation:native-scene-travel 3.2s ease-in-out infinite!important;will-change:transform}
.is-scene-moving.walk-style-careful .native-character-stage{animation-duration:4.1s!important}
.is-scene-moving.walk-style-poised .native-character-stage{animation-duration:3.6s!important}
.is-scene-moving.walk-style-light .native-character-stage{animation-duration:2.7s!important}
.is-scene-moving.walk-style-striding .native-character-stage{animation-duration:2.35s!important}
.is-scene-moving.walk-style-shadow .native-character-stage{animation-duration:1.15s!important}
.is-scene-moving .native-scene-lineup-person :is(.avatar,.sprite){animation:home-life-step .42s ease-in-out infinite}
.is-scene-moving .native-scene-lineup-person.walk-style-careful :is(.avatar,.sprite){animation-name:home-life-careful-step;animation-duration:.62s}
.is-scene-moving .native-scene-lineup-person.walk-style-poised :is(.avatar,.sprite){animation-name:home-life-poised-step;animation-duration:.5s}
.is-scene-moving .native-scene-lineup-person.walk-style-light :is(.avatar,.sprite){animation-name:home-life-light-step;animation-duration:.3s}
.is-scene-moving .native-scene-lineup-person.walk-style-striding :is(.avatar,.sprite){animation-name:home-life-striding-step;animation-duration:.33s}
.is-scene-moving .native-scene-lineup-person.walk-style-shadow :is(.avatar,.sprite){animation-name:home-life-shadow-step;animation-duration:.2s}
.is-scene-jogging .native-character-stage{animation:native-scene-jog 1.15s steps(4,end) infinite!important}
.native-scene-moving-badge{position:absolute;z-index:28;right:-5px;top:8%;display:flex;align-items:center;gap:4px;min-width:max-content;padding:5px 7px;border:1px solid #fff9;border-radius:12px;background:#172033dc;color:#fff;box-shadow:0 4px 11px #0006;text-shadow:0 1px 2px #000;pointer-events:none}
.native-scene-moving-badge>i{font:normal 15px/1 sans-serif;animation:scene-moving-mark .8s steps(2,end) infinite}.native-scene-moving-badge>b{font-size:9px;line-height:1;white-space:nowrap}
@keyframes native-scene-travel{0%,100%{transform:translate3d(-13px,2px,0)}50%{transform:translate3d(14px,-3px,0)}}
@keyframes native-scene-jog{0%,100%{transform:translate3d(-15px,3px,0) rotate(-1deg)}25%{transform:translate3d(-5px,-8px,0) rotate(1deg)}50%{transform:translate3d(6px,2px,0) rotate(-1deg)}75%{transform:translate3d(16px,-7px,0) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.is-scene-moving .native-character-stage,.native-scene-moving-badge>i{animation:none!important}}

/* 장소가 없는 이동 장면도 마을 지도 위에서 실제로 움직이는 모습으로 보인다. */
.meeting-walker{position:absolute;z-index:32;left:var(--meeting-x0);top:var(--meeting-y0);display:grid;justify-items:center;width:max-content;max-width:100px;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:auto;transform:translate(-50%,-60%);animation:meeting-route var(--meeting-duration) linear var(--meeting-delay) both}
.meeting-walker :is(.avatar,.sprite){width:64px;height:72px;object-fit:contain;animation:home-life-step .42s ease-in-out infinite}
.meeting-walker.is-stationary,.meeting-walker.is-stationary :is(.avatar,.sprite){animation:none}
.meeting-pair .meeting-caption,.meeting-walker .meeting-caption{display:grid;gap:2px;padding:5px 9px;background:#fff8eee8;border:1px solid #d7c5b0;border-radius:12px;box-shadow:0 2px 5px #20180e20;font-size:11px;color:#302418;text-align:center;text-shadow:none}.meeting-caption small{max-width:140px;font-size:10px;line-height:1.3}.meeting-walker.is-kissing::after{content:'♥';position:absolute;top:-10px;right:-5px;color:#d66a90;font-size:19px;pointer-events:none;animation:meeting-kiss-heart 2.8s ease-in-out infinite}.meeting-walker.is-kissing :is(.avatar,.sprite){animation:meeting-kiss 2.8s ease-in-out infinite}.meeting-walker :is(.avatar,.sprite){background:transparent;border:0;box-shadow:none;padding:0}@keyframes meeting-kiss{50%{rotate:7deg;translate:3px 0}}@keyframes meeting-kiss-heart{50%{translate:0 -6px;opacity:.5}}
.shared-character-empty{position:fixed;inset:0;z-index:25;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow:auto;background:#795b43;color:#fff8eb}.shared-character-empty>header,.shared-character-empty>footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.shared-character-empty>header button{width:52px;height:52px;padding:0;border:0;background:transparent}.shared-character-empty>header img{width:100%;height:100%;object-fit:contain}.shared-character-empty h1{font-size:24px;margin:0}.shared-character-empty .character-group-selector{position:relative;top:auto;left:auto;width:min(100%,680px);color:inherit;flex-wrap:wrap;font-size:16px}.empty-registration{display:flex;align-items:center;gap:24px;width:min(100%,680px);padding:clamp(20px,4vw,36px);box-sizing:border-box;border:8px solid #4d3428;border-radius:24px;background:#fff8eb;color:#30251e;box-shadow:0 5px 15px #24180f40}.empty-registration>img{width:clamp(60px,15vw,130px);height:auto;flex-shrink:0}.empty-registration h2{font-size:clamp(18px,3vw,28px);line-height:1.4;margin:0 0 16px}.empty-registration p{font-size:16px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere}.shared-character-empty>footer button{padding:12px 18px;border:1px solid #c4af8d;border-radius:18px;background:#fff8eb;color:#30251e;font:inherit;min-height:48px}.character-group-selector{position:absolute;z-index:12;top:11%;left:27%;width:65%;display:flex;align-items:center;gap:6px;font-size:12px;color:#fff8eb}.character-group-selector select{pointer-events:auto;min-width:0;flex:1;width:100%;padding:6px 10px;border:1px solid #bca78d;border-radius:12px;background:#f6eddd;color:#433329;font:inherit}
.background-action-tray{position:fixed;z-index:2147483000;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:50%;transform:translateX(-50%);display:grid;gap:8px;max-height:32dvh;overflow:auto;width:min(calc(100vw - 24px),420px);pointer-events:none}
.background-action-notice{pointer-events:auto;display:grid;grid-template-columns:36px minmax(0,1fr) auto 28px;align-items:center;gap:10px;box-sizing:border-box;width:100%;padding:14px 12px;border:1px solid #d5c0a0;border-radius:18px;background:linear-gradient(115deg,#fffaf0,#f4e9d5);color:#523d2e;box-shadow:0 5px 18px #20180e26;font:13px/1.45 system-ui}
.background-action-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid #d2b994;border-radius:12px;background:#eaddc5;color:#886841;font:22px/1 system-ui}
.background-action-copy{display:grid;gap:3px;min-width:0}.background-action-copy strong{font-size:14px;font-weight:650}.background-action-copy>span{color:#86735d;font-size:12px;overflow-wrap:anywhere;max-height:4.5em;overflow:auto}
.background-action-notice button{min-height:32px;padding:6px 9px;border:1px solid #c8b08e;border-radius:9px;background:#fff8eb;color:#654b35;font:inherit;touch-action:pan-y}
.background-action-notice .background-action-dismiss{grid-column:4;width:28px;padding:0;border:0;background:transparent;color:#9b856c;font-size:22px}
.background-action-notice[data-state=success] .background-action-icon{background:#e3e9d4;color:#657650;border-color:#c2cba9}
.background-action-notice[data-state=error] .background-action-icon{background:#f1dfd4;color:#a46349;border-color:#d5ad96}
.background-action-notice [hidden]{display:none}
.home-person.is-remote-contact .remote-contact-prop{position:absolute;right:0;bottom:3px;font-style:normal;font-size:22px;pointer-events:none;animation:remote-contact-tap 2.4s ease-in-out infinite}
@keyframes remote-contact-tap{0%,65%,100%{transform:rotate(0)}20%,40%{transform:rotate(-7deg)}30%,50%{transform:rotate(3deg)}}
html[data-animation-intensity=off] .remote-contact-prop,html[data-animation-intensity=reduced] .remote-contact-prop{animation:none!important}
@media(prefers-reduced-motion:reduce){.remote-contact-prop{animation:none!important}}
.meeting-pair{--pair-half:min(90px,calc(var(--pair-room-width,100%)/2 - 8px));left:clamp(calc(var(--pair-room-left,0%) + var(--pair-half) + 8px),var(--pair-x,50%),calc(var(--pair-room-left,0%) + var(--pair-room-width,100%) - var(--pair-half) - 8px));width:min(180px,calc(var(--pair-room-width,100%) - 16px));position:absolute;z-index:32;transform:translate(-50%,-60%);display:grid;justify-items:center;max-width:180px;pointer-events:auto}.meeting-pair-faces{display:flex;align-items:center;max-width:100%;width:128px}.meeting-pair .meeting-caption{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}.meeting-pair .meeting-caption small{max-width:100%}.meeting-pair-faces button{position:relative;display:block;flex:1 1 64px;min-width:0;width:64px;height:72px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none}.meeting-pair-faces :is(.avatar,.sprite){width:100%;height:100%;object-fit:contain;background:none;border:0;box-shadow:none}.meeting-pair-faces .is-blushing::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 10px 6px at 26% 64%,#ef728383,transparent),radial-gradient(ellipse 10px 6px at 74% 64%,#ef728383,transparent)}.meeting-pair.is-kissing .meeting-pair-faces button:first-child{animation:meeting-kiss 2.8s ease-in-out infinite}.meeting-pair.is-kissing .meeting-pair-faces button:last-child{animation:meeting-kiss 2.8s ease-in-out infinite reverse}.meeting-pair.is-talking .meeting-pair-faces{position:relative}.meeting-pair.is-talking .meeting-pair-faces::after{content:'•••';position:absolute;right:-7px;top:-12px;min-width:26px;padding:3px 5px;border:1px solid #ad9a81;border-radius:12px 12px 12px 2px;background:#fff7e7;color:#705742;font:16px/1 system-ui;pointer-events:none;animation:meeting-chat 2.4s ease-in-out infinite}.meeting-pair.is-talking button:first-child{animation:meeting-chat-nod 2.4s ease-in-out infinite}.meeting-pair.is-talking button:last-child{animation:meeting-chat-nod 2.4s ease-in-out 1.2s infinite}@keyframes meeting-chat{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-3px);opacity:1}}@keyframes meeting-chat-nod{0%,35%,100%{transform:translateY(0)}15%{transform:translateY(-3px)}}html[data-animation-intensity=off] .meeting-pair.is-talking button,html[data-animation-intensity=off] .meeting-pair.is-talking .meeting-pair-faces::after,html[data-animation-intensity=reduced] .meeting-pair.is-talking button{animation:none}
@media(prefers-reduced-motion:reduce){.meeting-pair.is-talking .meeting-pair-faces::after,.meeting-pair.is-talking button{animation:none}}
.home-person.is-hugging:not(.is-walking) .home-person-visual,.meeting-pair.is-hugging .meeting-pair-faces>button:first-child,.native-scene-lineup.is-hugging>.pair-slot-left{animation:hug-left 3.4s ease-in-out infinite}.meeting-pair.is-hugging .meeting-pair-faces>button:last-child,.native-scene-lineup.is-hugging>.pair-slot-right{animation:hug-right 3.4s ease-in-out infinite}@keyframes hug-left{0%,100%{translate:0 0;rotate:0deg}35%,70%{translate:12% 0;rotate:4deg}}@keyframes hug-right{0%,100%{translate:0 0;rotate:0deg}35%,70%{translate:-12% 0;rotate:-4deg}}@media(prefers-reduced-motion:reduce){.is-hugging button,.is-hugging>.pair-slot-left,.is-hugging>.pair-slot-right,.home-person.is-hugging .home-person-visual{animation:none!important}}html[data-animation-intensity=off] .is-hugging button,html[data-animation-intensity=off] .is-hugging>.pair-slot-left,html[data-animation-intensity=off] .is-hugging>.pair-slot-right,html[data-animation-intensity=off] .home-person.is-hugging .home-person-visual{animation:none!important}
.meeting-pair.is-kissing::after{content:'♥';position:absolute;top:-10px;color:#d66a90;animation:meeting-kiss-heart 2.8s ease-in-out infinite}
/* Local affection animation: warm glow and a gentle approach, no network timer. */
.native-scene-lineup.is-affection::before{display:block}.is-affection{isolation:isolate}.is-affection::before{content:'';position:absolute;inset:-35%;z-index:-1;background:radial-gradient(ellipse,#e8518530 0%,transparent 73%);pointer-events:none;animation:affection-glow 3s ease-in-out infinite}.is-affection::after{content:'♥ ♥ ♥';position:absolute;z-index:2;left:50%;top:0;color:#ff3c89;font-size:30px;white-space:nowrap;text-shadow:0 0 14px #ff375f;pointer-events:none;animation:affection-heart 3s ease-out infinite}.is-affection .meeting-pair-faces>button:first-child,.is-affection .native-scene-lineup-person:first-child{animation:affection-left 3s ease-in-out infinite}.is-affection .meeting-pair-faces>button:last-child,.is-affection .native-scene-lineup-person:last-child{animation:affection-right 3s ease-in-out infinite}@keyframes affection-left{50%{translate:5px 0;rotate:3deg}}@keyframes affection-right{50%{translate:-5px 0;rotate:-3deg}}@keyframes affection-glow{50%{opacity:.75}}@keyframes affection-heart{0%{translate:-50% 0;opacity:0}35%{opacity:1}100%{translate:-50% -35px;opacity:0}}@media(prefers-reduced-motion:reduce){.is-affection,.is-affection *,.is-affection::before,.is-affection::after{animation:none!important}}
.meeting-pair.is-gifting::after{content:'🎁';position:absolute;top:16px;left:calc(50% - var(--gift-direction,1)*25%);font-size:22px;pointer-events:none;animation:gift-pass 2.5s ease-in-out infinite}@keyframes gift-pass{0%,100%{translate:0 -10px;opacity:0}25%{opacity:1}75%{translate:calc(var(--gift-direction,1)*40px) -10px;opacity:1}}
@keyframes meeting-route{from{left:var(--meeting-x0);top:var(--meeting-y0)}to{left:var(--meeting-x1);top:var(--meeting-y1)}}
@media(prefers-reduced-motion:reduce){.meeting-walker :is(.avatar,.sprite){animation:none}}
.town-traveler{position:absolute;z-index:24;display:grid!important;justify-items:center!important;width:max-content!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#17120f!important;-webkit-text-fill-color:#17120f!important;transform:translate3d(-50%,-50%,0);animation:town-traveler-route var(--travel-duration,22s) var(--traveler-delay,0s) linear infinite;will-change:transform;backface-visibility:hidden;pointer-events:auto}
.town-traveler.is-village-walk{animation-name:town-traveler-village-route;animation-duration:var(--route-duration,28s);will-change:left,top,transform}.town-traveler.is-decoration-visit{animation:none}.town-traveler.is-decoration-visit .town-traveler-visual :is(.avatar,.sprite){animation:town-action-idle 2.8s ease-in-out infinite}
@supports (offset-path:polygon(0 0,100% 0,100% 100%)){
  .town-traveler.is-village-walk{left:0!important;top:0!important;offset-path:polygon(var(--route-x0) var(--route-y0),var(--route-x1) var(--route-y1),var(--route-x2) var(--route-y2),var(--route-x3) var(--route-y3),var(--route-x4) var(--route-y4),var(--route-x5) var(--route-y5));offset-anchor:center;offset-rotate:0deg;transform:translateZ(0);animation-name:town-traveler-village-route-composited;will-change:offset-distance,transform}
}
.town-traveler-visual{position:relative;display:grid;place-items:end center;width:54px;height:58px;background:transparent!important;background-image:none!important;box-shadow:none!important}.town-traveler-visual :is(.avatar,.sprite){width:48px!important;height:54px!important;padding:0!important;border:0!important;background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;object-fit:contain!important;animation:town-traveler-step var(--town-step-duration,.52s) ease-in-out infinite;will-change:transform;backface-visibility:hidden}
.town-traveler.walk-style-careful .town-traveler-visual :is(.avatar,.sprite){animation-name:home-life-careful-step}.town-traveler.walk-style-poised .town-traveler-visual :is(.avatar,.sprite){animation-name:home-life-poised-step}.town-traveler.walk-style-light .town-traveler-visual :is(.avatar,.sprite){animation-name:home-life-light-step}.town-traveler.walk-style-striding .town-traveler-visual :is(.avatar,.sprite){animation-name:home-life-striding-step}.town-traveler.walk-style-shadow .town-traveler-visual :is(.avatar,.sprite){animation-name:home-life-shadow-step;animation-timing-function:steps(2,end)}
.town-traveler-visual>i{position:absolute;right:-8px;top:-5px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 3px;border:0;border-radius:0;background:transparent;color:#fff;font:normal 13px/1 sans-serif;text-shadow:0 2px 3px #0009;box-shadow:none;animation:town-traveler-signal 1.2s ease-in-out infinite}
.town-traveler-status{display:grid;gap:1px;max-width:92px;padding:4px 7px;border-radius:10px;background:#fffdf3ed;box-shadow:0 3px 8px #0004;text-align:center}.town-traveler-status b,.town-traveler-status small{overflow:hidden;color:#17120f!important;-webkit-text-fill-color:#17120f!important;text-overflow:ellipsis;white-space:nowrap;text-shadow:none}.town-traveler-status b{font-size:10px}.town-traveler-status small{font-size:8px}
.town-traveler.is-conversation{animation-duration:calc(var(--travel-duration,22s) * 1.08)}.town-traveler.is-conversation .town-traveler-visual :is(.avatar,.sprite){animation:town-conversation-walk var(--town-step-duration,.52s) ease-in-out infinite}.town-traveler.is-conversation:nth-of-type(even) .town-traveler-visual{transform:scaleX(-1)}.town-traveler.is-conversation:nth-of-type(even) .town-traveler-visual>i{transform:scaleX(-1)}
.place-people.is-town-conversation{z-index:25}.place-people.is-town-conversation .place-person-face:first-of-type{animation:town-conversation-left 1.2s ease-in-out infinite}.place-people.is-town-conversation .place-person-face:nth-of-type(2){animation:town-conversation-right 1.2s .18s ease-in-out infinite}.town-conversation-bubbles{position:absolute!important;left:50%!important;right:auto!important;bottom:100%!important;top:auto!important;z-index:5!important;display:flex!important;gap:24px!important;width:max-content!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important;overflow:visible!important;transform:translateX(-50%)!important;pointer-events:none!important}.place-people.bubble-edge-left .town-conversation-bubbles{left:0!important;right:auto!important;transform:none!important}.place-people.bubble-edge-right .town-conversation-bubbles{left:auto!important;right:0!important;transform:none!important}.place-people.bubble-below .town-conversation-bubbles{top:100%!important;bottom:auto!important}.town-conversation-bubbles i{display:grid;place-items:center;min-width:25px;height:18px;padding:0 5px;border:1px solid #493b31;border-radius:12px;background:#fffdf7;color:#493b31;font:900 8px/1 sans-serif;white-space:nowrap;overflow:visible;box-shadow:0 2px 5px #0004;animation:home-talk-bubble 1.55s ease-in-out infinite}.town-conversation-bubbles i:nth-child(2){animation-delay:.55s}
.town-action-symbol{position:absolute;z-index:4;right:-8px;top:-9px;display:grid;place-items:center;min-width:22px;height:22px;border:0;background:transparent;color:#fff;font:normal 15px/1 sans-serif;text-shadow:0 2px 2px #0008;box-shadow:none;pointer-events:none}.place-person-face:is(.town-action-eat,.town-action-study,.town-action-work,.town-action-medical,.town-action-clean) :is(.avatar,.sprite){animation:town-action-busy 1.35s ease-in-out infinite;transform-origin:center bottom}.place-person-face.town-action-music :is(.avatar,.sprite){animation:town-action-music 1.05s ease-in-out infinite;transform-origin:center bottom}.place-person-face.town-action-exercise :is(.avatar,.sprite){animation:town-action-exercise .72s ease-in-out infinite}.place-person-face.town-action-talk :is(.avatar,.sprite){animation:town-conversation-left 1.2s ease-in-out infinite}.place-person-face.town-action-rest :is(.avatar,.sprite){animation:town-action-rest 2.8s ease-in-out infinite}.town-traveler.town-action-exercise:not(.is-village-walk){animation-duration:calc(var(--travel-duration,22s) * .7)}.town-traveler.town-action-rest:not(.is-village-walk){animation-duration:calc(var(--travel-duration,22s) * 1.35)}.building-dress-code{margin:12px 0}.building-dress-code-open{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:10px 16px;border:2px solid #ae8945;border-radius:17px;background:linear-gradient(145deg,#fff8d8,#e8cf8a);color:#302113;text-align:left;box-shadow:inset 0 1px #fff,0 5px 0 #8f6e38}.building-dress-code-open>span{display:grid;gap:3px}.building-dress-code-open b{font-size:18px}.building-dress-code-open small{color:#725c3b;font-size:13px}.building-dress-code-open i{font:700 31px/1 sans-serif}.building-dress-code-dialog{width:min(94vw,680px);max-height:88dvh;margin:auto;padding:0;border:0;border-radius:24px;background:#fffaf0;color:#2c1e14;box-shadow:0 18px 70px #1b100b80}.building-dress-code-dialog::backdrop{background:#24150f8c;backdrop-filter:blur(3px)}.building-dress-code-dialog>form{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;max-height:88dvh;padding:19px}.building-dress-code-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.building-dress-code-dialog header>span{display:grid;gap:2px}.building-dress-code-dialog header small{color:#9b6d1c;font:700 11px/1.2 sans-serif;letter-spacing:.12em}.building-dress-code-dialog header b{font-size:24px}.building-dress-code-dialog header>button{width:42px;height:42px;border:1px solid #b9a98d;border-radius:50%;background:#fffdf8;font-size:25px}.building-dress-code-settings{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;align-items:end}.building-dress-code-settings>label{min-width:0;min-height:58px}.building-dress-code-settings .book-check-field{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid #c7b58f;border-radius:14px;background:#fffdf7}.building-dress-select{display:grid;gap:5px;font-weight:700}.building-dress-select select{width:100%;height:42px;padding:0 10px;border:1px solid #c7b58f;border-radius:12px;background:#fffdf7;color:#2c1e14}.building-dress-code-groups{display:grid;gap:16px;min-height:0;padding-right:3px;overflow:auto}.building-dress-code-groups>section{display:grid;gap:8px}.building-dress-code h5{margin:0;font-size:17px}.building-dress-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.building-dress-chips button{min-width:0;min-height:44px;padding:7px 6px;border:1px solid #c3ad83;border-radius:13px;background:#fffdf8;color:#312115;font-weight:700;box-shadow:0 3px 0 #c8b387}.building-dress-chips button.on{border-color:#9b7016;background:#e8c83c;color:#2a1c0d;box-shadow:inset 0 1px #fff8,0 3px 0 #9d7b24}.building-dress-code-dialog footer>button{width:100%;min-height:48px;border:0;border-radius:15px;background:#654735;color:#fff7df;font-size:18px;font-weight:700}.routine-dress-chips{display:flex;flex-wrap:wrap;gap:6px}.routine-dress-code{margin:4px 0;padding:10px;border:1px solid #c8aa78;border-radius:14px;background:#fff9e9}.routine-dress-code>div{display:grid;gap:9px;margin-top:10px}.routine-dress-code h4{margin:6px 0 0}.routine-dress-chips label{position:relative}.routine-dress-chips input{position:absolute;opacity:0}.routine-dress-chips span{display:block;padding:6px 9px;border:1px solid #bea880;border-radius:999px;background:#fff}.routine-dress-chips input:checked+span{background:#e0b824;color:#2b1d0c}.routine-inline-check{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}@media(max-width:520px){.building-dress-code-dialog>form{padding:15px}.building-dress-code-settings{grid-template-columns:1fr}.building-dress-code-settings>label{min-height:50px}.building-dress-chips{grid-template-columns:repeat(3,minmax(0,1fr))}.building-dress-chips button{min-height:42px;font-size:13px}}
.building-dress-uniform-help{grid-column:3;align-self:start;margin-top:-6px;color:#725f47;font-size:11px;line-height:1.35}.routine-dress-code>div>small{color:#725f47;font-size:12px;line-height:1.4}@media(max-width:520px){.building-dress-uniform-help{grid-column:1;margin-top:-4px}}
@keyframes town-action-busy{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(1px) rotate(1deg)}}@keyframes town-action-music{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}@keyframes town-action-exercise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes town-action-rest{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(1px) scale(.98)}}
.place-person-face:is(.town-action-idle,.town-action-shop) :is(.avatar,.sprite){animation:town-action-idle 3.2s ease-in-out infinite;transform-origin:center bottom}.place-person-face.town-action-shop :is(.avatar,.sprite){animation-name:town-action-shop;animation-duration:1.8s}
@keyframes town-action-idle{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-2px) rotate(.6deg)}}
@keyframes town-action-shop{0%,100%{transform:translate(0,0) rotate(-1deg)}35%{transform:translate(-1px,-2px) rotate(1deg)}70%{transform:translate(1px,-1px) rotate(-1deg)}}
@keyframes town-traveler-route{0%,100%{transform:translate3d(calc(-50% - 34px),calc(-50% + 18px),0)}14%{transform:translate3d(calc(-50% - 18px),calc(-50% - 2px),0)}28%{transform:translate3d(calc(-50% + 2px),calc(-50% - 18px),0)}43%{transform:translate3d(calc(-50% + 22px),calc(-50% - 12px),0)}57%{transform:translate3d(calc(-50% + 38px),calc(-50% - 2px),0)}70%{transform:translate3d(calc(-50% + 28px),calc(-50% + 13px),0)}82%{transform:translate3d(calc(-50% + 12px),calc(-50% + 22px),0)}92%{transform:translate3d(calc(-50% - 12px),calc(-50% + 25px),0)}}
@keyframes town-traveler-village-route{0%,100%{left:var(--route-x0);top:var(--route-y0);transform:translate3d(-50%,-50%,0)}16.666%{left:var(--route-x1);top:var(--route-y1);transform:translate3d(-50%,-50%,0)}33.333%{left:var(--route-x2);top:var(--route-y2);transform:translate3d(-50%,-50%,0)}50%{left:var(--route-x3);top:var(--route-y3);transform:translate3d(-50%,-50%,0)}66.666%{left:var(--route-x4);top:var(--route-y4);transform:translate3d(-50%,-50%,0)}83.333%{left:var(--route-x5);top:var(--route-y5);transform:translate3d(-50%,-50%,0)}}
@keyframes town-traveler-village-route-composited{from{offset-distance:0%}to{offset-distance:100%}}

.mood-factor-list{display:grid;gap:10px;margin:12px 0;padding:0;list-style:none}
.mood-factor-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px;border:1px solid #d4bfa0;border-radius:15px;background:#fff8ea;color:#493725}
.mood-factor-list li>span{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.mood-factor-list li>b{min-width:38px;padding:3px 7px;border-radius:10px;background:#f1dfc5;text-align:center;font-size:16px}
.mood-factor-list li>b.negative{color:#9b443d!important;-webkit-text-fill-color:#9b443d!important}
.mood-factor-list li>b.positive{color:#386e56!important;-webkit-text-fill-color:#386e56!important}
@keyframes town-traveler-step{0%,100%{transform:translate3d(0,0,0) rotate(-1.2deg)}50%{transform:translate3d(0,-3px,0) rotate(1.2deg)}}
@keyframes town-conversation-walk{0%,100%{transform:translateY(1px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes town-conversation-left{0%,100%{transform:translateX(-2px) rotate(-2deg)}50%{transform:translateX(2px) translateY(-3px) rotate(2deg)}}
@keyframes town-conversation-right{0%,100%{transform:translateX(2px) rotate(2deg)}50%{transform:translateX(-2px) translateY(-2px) rotate(-2deg)}}
@keyframes town-traveler-signal{0%,100%{transform:scale(.9);opacity:.72}50%{transform:scale(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){.town-traveler,.town-traveler :is(.avatar,.sprite),.town-traveler-visual>i,.place-person-face :is(.avatar,.sprite),.town-action-symbol{animation:none!important}}

/* 캐릭터 두 명을 자석처럼 조합하는 관계 편집기 */
.relationship-pair-magnet{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:14px;
  min-height:360px;
  margin-top:14px;
  padding:14px;
  border-radius:26px;
  background:linear-gradient(135deg,#e9eef4,#fbf7f2);
  box-shadow:inset 0 0 0 1px #ffffffc9;
}
.relationship-character-rail{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:360px;
  padding:140px 8px;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  overscroll-behavior:contain;
}
.relationship-character-rail::-webkit-scrollbar{display:none}
.relationship-character-rail button{
  flex:0 0 76px;
  display:grid;
  place-items:center;
  gap:2px;
  min-width:0;
  padding:6px;
  border:0;
  scroll-snap-align:center;
  background:transparent;
  opacity:.52;
  transform:scale(.78);
  transition:.18s ease;
}
.relationship-character-rail button.on{
  opacity:1;
  transform:scale(1.08);
  background:color-mix(in srgb,var(--view-primary) 16%,#fff);
  box-shadow:0 9px 20px #1e293b24;
}
.relationship-character-rail .avatar,.relationship-character-rail .sprite{width:52px;height:52px}
.relationship-character-rail small{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.source-rail{border-radius:999px 30px 30px 999px;background:linear-gradient(90deg,#ffffff18,#fff)}
.target-rail{border-radius:30px 999px 999px 30px;background:linear-gradient(90deg,#fff,#ffffff18)}
.relationship-pair-core{
  align-self:center;
  display:grid;
  place-items:center;
  gap:8px;
  min-width:0;
  padding:18px 12px;
  text-align:center;
}
.relationship-pair-icons{display:flex;align-items:center;justify-content:center;gap:9px}
.relationship-pair-icons .avatar,.relationship-pair-icons .sprite{width:72px;height:72px;filter:drop-shadow(0 8px 8px #1720333b)}
.relationship-pair-icons i{font-size:26px;font-style:normal}
.relationship-pair-core>small,.relationship-pair-core>span{color:var(--muted)}
.relationship-pair-core>strong{font-size:20px;line-height:1.35;word-break:keep-all}
.relationship-pair-core>em{padding:7px 11px;border-radius:999px;background:#fff;font-style:normal;font-weight:800}
.relationship-pair-core>button{width:min(260px,100%)}

.relationship-map-dialog{
  width:min(980px,calc(100vw - 20px));
  max-height:calc(100dvh - 20px);
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:26px;
  background:#fffdf9;
  box-shadow:0 30px 100px #10172299;
}
.relationship-map-dialog::backdrop{background:#101722bd;backdrop-filter:blur(4px)}
.relationship-map-dialog form{max-height:calc(100dvh - 20px);padding:16px;overflow-y:auto}
.relationship-map-dialog-head{position:sticky;top:-16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-16px -16px 10px;padding:16px;border-bottom:1px solid var(--line);background:#fffdf9f2;backdrop-filter:blur(10px)}
.relationship-map-dialog-head span{display:grid}.relationship-map-dialog-head h2{margin:1px 0 0}.relationship-map-dialog-head small{color:var(--muted);font-size:9px;letter-spacing:.1em}
.relationship-map-dialog-head button{width:44px;height:44px;padding:0;font-size:26px}
.relationship-map-filter{display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);gap:12px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:18px;background:#f8f3ec}
.relationship-map-filter>label{display:grid;align-content:start;gap:6px}.relationship-map-filter select{width:100%;min-height:44px}.relationship-map-filter fieldset{min-width:0;margin:0;padding:8px 10px 10px;border:1px solid var(--line);border-radius:14px}.relationship-map-filter legend{padding:0 5px;font-weight:800}
.relationship-map-character-list{display:flex;gap:7px;padding:2px 0 4px;overflow-x:auto;scrollbar-width:thin}
.relationship-map-character-list button{display:grid;flex:0 0 72px;justify-items:center;gap:4px;min-height:76px;padding:6px;border:2px solid transparent;border-radius:14px;background:#eee5da;color:#6f625a;opacity:.58}
.relationship-map-character-list button.on{border-color:#60483b;background:#fff;color:#251c17;opacity:1;box-shadow:0 3px 10px #2f241b1c}.relationship-map-character-list :is(.avatar,.sprite){width:42px!important;height:42px!important;object-fit:contain!important}.relationship-map-character-list span{max-width:64px;overflow:hidden;font-size:10px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.relationship-color-legend{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.relationship-color-legend span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#f4efe9;font-size:11px}
.relationship-color-legend span::before{content:"";width:10px;height:10px;border-radius:50%;background:#777}
.relationship-color-legend .tone-0::before{background:#EA69A4}.relationship-color-legend .tone-1::before{background:#FF97C7}.relationship-color-legend .tone-2::before{background:#4AA3DF}.relationship-color-legend .tone-3::before{background:#438b72}.relationship-color-legend .tone-4::before{background:#4f77b8}.relationship-color-legend .tone-5::before{background:#c27a2c}.relationship-color-legend .tone-6::before{background:#7b5bb5}.relationship-color-legend .tone-7::before{background:#a83f3f}.relationship-color-legend .tone-8::before{background:#7d756d}
.relationship-map{margin:12px 0 0;padding:0;overflow:hidden}
.relationship-map-scroll{width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.relationship-map-dialog .relationship-map-canvas{width:900px;min-width:900px}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  /* 집의 방 개수에 따라 한 화면 크기의 평면을 같은 비율로 더 잘게 나눈다. */
  .native-app[data-active-tab="home"] main{padding:7px!important}
  .native-app[data-active-tab="home"] .home-page>.title{gap:7px;margin-bottom:6px}
  .native-app[data-active-tab="home"] .home-page>.title>div:first-child p{display:none}
  .native-app[data-active-tab="home"] .home-page>.title h1{font-size:23px}
  .native-app[data-active-tab="home"] .home-top-actions button{min-height:38px;padding:7px 10px;font-size:12px}
  .native-app[data-active-tab="home"] .home-tabs{flex-wrap:nowrap;margin:5px 0 8px;padding-bottom:3px;overflow-x:auto}
  .native-app[data-active-tab="home"] .home-tabs button{flex:0 0 150px;min-width:150px;min-height:48px;padding:7px 10px;font-size:13px}
  .native-app[data-active-tab="home"] .home{padding:8px;border-radius:21px}
  .native-app[data-active-tab="home"] .home>.title{margin-bottom:4px}
  .native-app[data-active-tab="home"] .clean{margin:6px 0;padding:7px 9px;font-size:11px}
  .native-app[data-active-tab="home"] .clean i{height:6px;margin-top:4px}
  .native-app[data-active-tab="home"] .rooms,
  .native-app[data-active-tab="home"] .rooms.has-extra{
    display:grid;
    grid-template-columns:repeat(var(--room-cols),minmax(0,1fr));
    grid-template-rows:repeat(var(--room-rows),minmax(0,1fr));
    grid-auto-flow:row;
    width:100%;
    height:calc(100dvh - 118px);
    min-height:560px;
    max-height:820px;
    aspect-ratio:auto;
    gap:4px;
    padding:4px;
    overflow:hidden;
    border-radius:22px;
  }
  .native-app[data-active-tab="home"] .rooms>.room{
    grid-column:auto!important;
    grid-row:auto!important;
    min-width:0;
    min-height:0;
    padding:5px;
    border-width:3px;
  }
  .native-app[data-active-tab="home"] .room-heading{gap:2px}
  .native-app[data-active-tab="home"] .room-heading>b{max-width:100%;padding:2px 5px;overflow:hidden;font-size:clamp(11px,3.3vw,16px);text-overflow:ellipsis;white-space:nowrap}
  .native-app[data-active-tab="home"] .room-heading .room-edit-hint{padding:3px 6px;font-size:8px}
  .native-app[data-active-tab="home"] .room-people{left:4px;right:4px;bottom:4px;max-height:none}
  .native-app[data-active-tab="home"] .home-person .avatar{width:40px;height:40px}
  .native-app[data-active-tab="home"] .home-person .sprite{width:46px;height:46px}
  .native-app[data-active-tab="home"] .home-person-status{max-width:82px;padding:4px 6px;font-size:10px}
  .native-app[data-active-tab="home"] .home-person-status small{display:none}
  .native-app[data-active-tab="home"] .room-pet-status small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

  .relationship-map-dialog .relationship-map-canvas{width:720px;min-width:720px}
  .relationship-map-dialog form{padding:12px}.relationship-map-dialog-head{top:-12px;margin:-12px -12px 8px;padding:12px}
  .relationship-map-filter{grid-template-columns:1fr;padding:9px}.relationship-map-character-list button{flex-basis:66px}
}

/* 아이콘형 세계관 취향 도감 */
.catalog-icon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 6px;margin-top:14px}
html #app .catalog-tile{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:44px;padding:3px 0;border:0;background:transparent;box-shadow:none;color:var(--ink)}
.catalog-tile-art{display:grid;place-items:center;width:min(100%,76px);aspect-ratio:1;background:#f5e7ce;border:1px solid #c9ae87;border-radius:19%;box-shadow:0 3px 0 #8d69442e;font-size:clamp(23px,4vw,36px);overflow:hidden}
.catalog-tile-art img{display:block;width:100%;height:100%;object-fit:contain}
html #app .catalog-tile b{width:100%;font-size:clamp(10px,2.6vw,14px);line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.catalog-add-tile .catalog-tile-art{border:1px dashed #9a7651;background:#fff8ec;color:#825934}
.catalog-item-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:16px;border:1px solid #c5a889;border-radius:22px;background:var(--panel);color:var(--ink);overflow:auto}
.catalog-item-dialog::backdrop{background:#20170f80}
.catalog-dialog-close{display:block;margin-left:auto;min-height:44px}
.catalog-item-dialog .catalog-dex-card{margin-top:10px}.catalog-item-dialog summary{pointer-events:none}
@media(max-width:600px){html #app .catalog-shell{padding:10px}html #app .catalog-section{padding:10px!important}.catalog-icon-grid{gap:12px 4px}}
.catalog-dex-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:14px}
.catalog-dex-card{border:1px solid var(--line);border-radius:18px;background:#f8fafc;overflow:hidden}
.catalog-dex-card summary{min-height:148px;padding:12px;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;cursor:pointer;list-style:none}
.catalog-dex-card summary::-webkit-details-marker{display:none}.catalog-app-icon{width:78px;height:78px;border-radius:22px!important;display:grid;place-items:center;object-fit:cover;font-size:40px;background:linear-gradient(145deg,#fff,#e5edf5);border:1px solid #fff;box-shadow:0 8px 18px #15223824,inset 0 1px 0 #fff}.catalog-dex-card summary>b{font-size:18px}.catalog-dex-card summary>small{color:var(--muted)}
.catalog-dex-card[open]{grid-column:span 2;background:#fff;box-shadow:0 12px 30px #17203312}.catalog-detail{padding:14px;border-top:1px solid var(--line);display:grid;gap:10px}.catalog-detail label{display:grid;gap:5px}
@media(max-width:900px){.catalog-dex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.catalog-dex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-dex-card[open]{grid-column:1/-1}.catalog-dex-card summary{min-height:126px}.form-actions{display:grid}.form-actions button{width:100%}}

/* 모바일 마을 편집 지도는 편집 폼 위에 크게 표시 */
@media(max-width:900px){
  .town-edit{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}
  .town-edit>.world{display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:210px;aspect-ratio:1672/941;margin:0 0 14px;border-radius:20px}
  .town-edit>.form{width:100%;min-width:0}
}
.place-photo-tools{display:grid;gap:8px;margin:12px 0}.place-photo-tools>span,.pet-actions{display:flex;gap:7px;flex-wrap:wrap}
.pets{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.pet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.pet-card{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:14px;border:1px solid var(--line);border-radius:20px;background:#f8fafc}.pet-avatar{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#fff,#dce8e4);font-size:38px;box-shadow:0 6px 14px #17203318}.pet-avatar img{width:100%;height:100%;object-fit:cover}.pet-info{display:grid;align-content:start;gap:3px}.pet-info>b{font-size:19px}.pet-info small{color:var(--muted)}.pet-info p{margin:5px 0 0}.pet-edit{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pet-edit label{display:grid;gap:4px}.pet-actions{grid-column:1/-1}
@media(max-width:600px){.pet-grid{grid-template-columns:1fr}.pet-edit{grid-template-columns:1fr}}

/* 조용한 상태 알림 */
#mini-toast{position:fixed;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px));z-index:2147483647;max-width:calc(100vw - 32px);padding:8px 13px;border-radius:999px;background:#172033f2;color:#fff;font-size:13px;box-shadow:0 8px 24px #17203355;opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:.18s}
#mini-toast.show{opacity:1;transform:translate(-50%,0)}

/* 전원 취침 안내 */
.viewport{position:relative}
.sleep-gate{position:absolute;z-index:40;left:50%;top:18px;transform:translateX(-50%);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(680px,calc(100% - 28px));box-sizing:border-box;padding:12px 14px;border:1px solid #ffffffb8;border-radius:18px;background:#172033d9;color:#fff;box-shadow:0 10px 32px #17203355;backdrop-filter:blur(8px)}
.sleep-gate>span{font-size:27px}.sleep-gate>div{min-width:0}.sleep-gate h2{margin:0;font-size:18px}.sleep-gate p{margin:3px 0 0;color:#ffffffd4;font-size:12px}.sleep-gate button{flex:none;padding:9px 12px;background:#fff;color:#172033}

/* 모든 사진 업로드 공통 자르기 */
.crop-dialog{width:min(760px,calc(100vw - 24px));max-height:94dvh;padding:0;border:0;border-radius:25px;box-shadow:0 30px 90px #10182766}
.character-scene-images-dialog{width:min(720px,calc(100vw - 22px));max-height:92dvh;margin:auto;padding:0;border:0;border-radius:24px;background:#fffaf0;color:#2d2119;box-shadow:0 24px 80px #1b100a77;overflow:hidden}.character-scene-images-dialog::backdrop{background:#20150f99;backdrop-filter:blur(3px)}.character-scene-images-dialog>form{display:grid;gap:14px;max-height:92dvh;padding:20px;overflow:auto}.character-scene-images-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.character-scene-images-dialog header span{display:grid;gap:3px}.character-scene-images-dialog header small{color:#9d7521;font-weight:800}.character-scene-images-dialog header b{font-size:25px}.character-scene-images-dialog header>button{width:42px;height:42px;padding:0;border-radius:50%;font-size:25px}.character-scene-images-dialog>form>p{margin:0;color:#695b4c;line-height:1.55}.character-scene-image-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.character-scene-image-list section{display:grid;gap:8px;padding:12px;border:1px solid #d3bd91;border-radius:18px;background:#fffdf7}.character-scene-image-list h3{margin:0;font-size:16px}.character-scene-image-list section>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.character-scene-image-list section>div>button{display:grid;place-items:center;gap:5px;min-width:0;min-height:112px;padding:8px;border:1px solid #cbb997;border-radius:13px;background:#f4ead7;color:#392b20}.character-scene-image-list section img{display:block;width:100%;height:74px;object-fit:contain}.character-scene-image-list section span{display:grid;place-items:center;width:100%;height:74px;border:1px dashed #b9a688;border-radius:9px;color:#7c6b56;font-size:20px;font-weight:800}.character-scene-image-list section footer{display:grid;grid-template-columns:1fr 1fr;gap:6px}.character-scene-image-list section footer button{min-width:0;min-height:34px;padding:5px;border-radius:9px;font-size:11px}.character-scene-images-dialog>form>.primary{position:sticky;bottom:0;min-height:48px}@media(max-width:600px){.character-scene-image-list{grid-template-columns:repeat(2,minmax(0,1fr))}.character-scene-images-dialog>form{padding:15px}.character-scene-image-list section>div>button{min-height:96px}.character-scene-image-list section img,.character-scene-image-list section span{height:58px}}
.image-url-dialog{width:min(560px,calc(100vw - 24px));padding:0;border:0;border-radius:23px;box-shadow:0 30px 90px #10182766}.image-url-dialog::backdrop{background:#10182799;backdrop-filter:blur(4px)}.image-url-dialog form{padding:20px;display:grid;gap:14px}.image-url-dialog label{display:grid;gap:7px}.image-url-dialog h2{margin:0}
.crop-dialog::backdrop{background:#10182799;backdrop-filter:blur(4px)}
.crop-dialog form{padding:20px;display:grid;gap:12px}
.crop-dialog h2{margin:0}.crop-dialog .title button{padding:5px 11px;font-size:22px}
.crop-stage{width:100%;overflow:hidden;border-radius:18px;background:#192033}
.crop-stage canvas{display:block;width:100%;height:100%;object-fit:contain}
.crop-dialog label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:10px}
.crop-dialog input{min-height:34px;padding:0}.crop-dialog small{color:var(--muted)}
.crop-actions{display:flex;justify-content:flex-end;gap:8px}

@media(max-width:600px){
  .place{width:11.33%;height:15.5%;min-height:0;padding:2px;border-width:1px;box-shadow:0 2px 0 color-mix(in srgb,var(--place) 58%,#333)}
  .place.has-art{width:12.5%;height:19.5%}
  .place i{font-size:clamp(10px,4vw,27px)}
  .place-label{min-width:0;width:100%;padding:2px;border-width:1px}
  .place.has-art .building-name{bottom:-8px;max-width:70px;font-size:8px}
  .crop-dialog form{padding:14px}.crop-dialog label{grid-template-columns:68px 1fr}
}

/* 인물 이름은 지도 아이콘 아래, 사진 자르기는 직접 드래그 */
.person{flex-direction:column!important;align-items:center!important}
.person>span:not(.avatar){margin-top:-7px;padding:6px 10px!important}
.crop-stage{position:relative;cursor:grab;touch-action:none;user-select:none}
.crop-stage.dragging{cursor:grabbing}
.crop-guide{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:#101827bd;color:#fff;font-size:12px;pointer-events:none;white-space:nowrap}
.home-life-log{margin-top:22px;box-shadow:none}
.owned-items{padding:12px;border-radius:16px;background:#f5f8ff}

/* 자연스러운 한국어 줄바꿈과 통합 생활 로그 */
body,button,input,select,small,b,p,span{word-break:keep-all;overflow-wrap:break-word}
.life-log li{cursor:default}
.life-log li:hover{background:transparent}
.life-log li.important{margin:5px 0;padding:11px 10px;border-left:5px solid var(--log-theme);border-radius:10px;background:color-mix(in srgb,var(--log-theme) 9%,#fff)}
.life-log li.important b,.life-log li.important time{color:var(--log-theme)}
.shared-life-log{margin-top:18px;box-shadow:none}
.home-family-log{margin-top:18px;box-shadow:none}.log-person{display:grid!important;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px}.log-person>.avatar,.log-person>.sprite{width:42px;height:42px}.log-person>span{display:grid}
.setting-card{display:grid;gap:10px;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:#f7f9fc}
.setting-card h2{margin:0}.setting-card label{display:grid;gap:7px}.setting-card small{color:var(--muted)}
.sound-setting-card .sound-volume-control{grid-template-columns:minmax(0,1fr) auto;align-items:center}.sound-setting-card .sound-volume-control input{grid-column:1/-1;width:100%;accent-color:var(--p)}.sound-setting-card .sound-volume-control output{font-variant-numeric:tabular-nums;color:var(--muted)}.sound-setting-card>[data-sound-preview]{justify-self:start}
.settings-shell,.settings-shell>*{min-width:0;max-width:100%;box-sizing:border-box}
.settings-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-category-grid>:is(button,a){display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:4px 10px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:17px;background:var(--panel);color:var(--text);text-align:left;text-decoration:none}
.settings-category-grid>:is(button,a)>span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--p) 12%,var(--panel));font-size:23px}
.settings-category-grid>:is(button,a)>b,.settings-category-grid>:is(button,a)>small{min-width:0}.settings-category-grid>:is(button,a)>small{color:var(--muted)}
.achievements-setting-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.achievements-setting-card>header h2{margin:2px 0 0}.achievements-setting-card>header>span>small{letter-spacing:.14em}.achievements-setting-card>header>b{padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--p) 14%,var(--panel));white-space:nowrap}.achievement-platform-status{padding:10px 13px;border-radius:12px;background:color-mix(in srgb,var(--p) 8%,var(--panel));font-weight:700}.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.achievement-card{display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;padding:14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 92%,var(--p) 8%);opacity:.78}.achievement-card.is-unlocked{border-color:color-mix(in srgb,#d5a823 58%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,#fff2b0 30%,var(--panel)),var(--panel));opacity:1}.achievement-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--p) 10%,var(--panel));font-size:25px}.achievement-card h3,.achievement-card p{margin:2px 0}.achievement-card p{min-height:2.8em;font-size:.9em}.achievement-card progress{width:calc(100% - 48px);height:8px;accent-color:#d5a823}.achievement-card div>b{float:right;font-size:.8em;color:var(--muted)}.achievement-actions{display:flex;flex-wrap:wrap;gap:10px}.achievement-actions button{flex:1 1 180px}
.settings-pane-heading{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px}.settings-pane-heading>:is(button,a){display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);font-size:28px;text-decoration:none}.settings-pane-heading>span{display:grid;gap:2px}.settings-pane-heading h2,.settings-pane-heading small{margin:0}
.notification-setting-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.notification-setting-head>span{display:grid;gap:5px}.notification-setting-head p{margin:0}.notification-setting-head>button{flex:0 0 auto}.notification-permission-state{width:max-content;margin:2px 0!important;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--p) 12%,transparent);font-size:.86rem;font-weight:800}.notification-settings-detail{display:block;width:100%;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-sizing:border-box}.notification-settings-body{display:grid;width:100%;min-width:0;max-width:100%;gap:13px;padding:14px 16px 16px;box-sizing:border-box}.notification-settings-body>h3,.notification-settings-body>p{margin:0}.notification-character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px}.notification-character-option{display:grid!important;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px!important;min-width:0;padding:9px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.notification-character-option input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;opacity:0;clip-path:inset(50%);pointer-events:none}.notification-character-option img,.notification-character-option>span{grid-row:1;width:34px;height:34px;border-radius:50%;object-fit:cover;background:color-mix(in srgb,var(--p) 14%,var(--panel));display:grid;place-items:center;font-weight:900}.notification-character-option b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-character-option.on,.notification-kind-grid button.on{border-color:var(--p);box-shadow:inset 0 0 0 1px var(--p);background:color-mix(in srgb,var(--p) 10%,var(--panel))}.notification-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.notification-kind-grid{display:flex;flex-wrap:wrap;gap:7px;min-width:0;max-width:100%}.notification-kind-grid button{display:block;width:auto;max-width:100%;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);cursor:pointer}.notification-kind-grid button>span{display:block;min-width:0;white-space:normal}
.character-notification-consent{width:min(520px,calc(100vw - 24px));border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--text)}.character-notification-consent form{display:grid;gap:16px;padding:20px}.character-notification-consent h2,.character-notification-consent p{margin:0}.character-notification-consent ul{display:grid;gap:8px;margin:0;padding-left:22px}
@media(max-width:640px){.settings-category-grid{grid-template-columns:1fr}.settings-category-grid>:is(button,a){padding:13px}.settings-shell .notification-settings-body{padding-inline:10px}.notification-setting-head{display:grid}.notification-setting-head>button{width:100%}.notification-setting-grid{grid-template-columns:1fr}.notification-character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.achievement-grid{grid-template-columns:1fr}.achievement-card p{min-height:0}}

/* 방 안 반려동물 */
.room-pets{position:absolute;right:8px;top:48%;transform:none;z-index:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.room-pet{display:flex;align-items:flex-end;gap:3px;max-width:170px;padding:0;border:0;background:transparent;box-shadow:none;filter:drop-shadow(0 7px 7px #19223844)}
.room-pet img,.room-pet-emoji{width:44px;height:44px;display:grid;place-items:center;object-fit:contain;background:transparent;font-size:29px;flex:0 0 auto}.room-pet .room-pet-photo{border-radius:50%;object-fit:cover}.room-pet .room-pet-icon{border-radius:0;object-fit:contain}
.room-pet-status{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:1px!important;min-width:72px;max-width:125px;padding:6px 8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left;white-space:normal!important}
.room-pet-status b,.room-pet-status small{display:block!important;width:100%;max-width:100%;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:normal!important}.room-pet-status b{font-size:11px;line-height:1.25}.room-pet-status small{color:var(--muted);font-size:9px;line-height:1.3}
.home-person-status,.home-person-status b,.room-pet-status,.room-pet-status b{color:#2f2924!important}
.pet-person{background:transparent!important}.pet-person .pet-emoji{background:color-mix(in srgb,var(--p) 10%,#fff);font-size:28px}
.building-preset{display:block!important;width:84%!important;height:auto!important;aspect-ratio:1;background-size:contain!important;background-position:center bottom!important;background-repeat:no-repeat!important;border-radius:0!important;transform:scale(var(--place-scale,1));transform-origin:center bottom;box-shadow:none!important}
.building-preset.preset-building{background-image:url("world-assets/building-types/generic-building-handdrawn.webp")!important}
.building-preset.preset-home{background-image:url("world-assets/drawer-home.webp")!important}
.roster-card.away{opacity:.72}
.house-event-icon{display:grid!important;place-items:center;background:#eef2f5!important;font-size:21px}
.rooms,.room{overflow:hidden}
.room{isolation:auto}.room:hover,.room:focus-within{z-index:auto}
.room-has-occupants{z-index:auto}
.home-person{min-width:0;max-width:100%;flex:0 1 auto}.home-person-visual{position:relative;display:grid;place-items:center;flex:0 0 auto;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;animation:home-person-float 3.2s var(--home-float-delay,0s) ease-in-out infinite}.home-person img.avatar,.home-person img.sprite{object-fit:contain;object-position:center;max-width:100%}
.room-people{max-width:calc(100% - 12px);max-height:none;overflow:visible;align-content:flex-end}
.room-people.is-horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start}
.room-people.is-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-end}
.room-people .home-person{max-width:min(145px,100%)}.room-people .pet-person{max-width:min(120px,100%)}
.room-people .home-person-status{min-width:0;max-width:100%;overflow-wrap:break-word}
.home-person .native-person-action-prop{position:absolute;z-index:6;left:auto;right:-8px;top:-5px;display:grid;place-items:center;width:27px;height:27px;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;font-size:23px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 4px #0007);transform-origin:50% 85%}.home-person .native-person-action-prop img{width:100%;height:100%;padding:0;border:0;border-radius:0;object-fit:contain;background:transparent!important;box-shadow:none!important}.home-person.scene-action-eating .native-person-action-prop{animation:native-prop-eat 1.7s ease-in-out infinite}.home-person.scene-action-gaming .native-person-action-prop{animation:native-prop-game-buttons .48s steps(2,end) infinite}.home-person:is(.scene-action-sweeping,.scene-action-wiping,.scene-action-organizing) .native-person-action-prop{animation:native-prop-work 2.1s ease-in-out infinite}.home-person .native-person-action-prop.catalog-food-photo{left:auto;right:-12px;top:-8px;width:38px;height:38px;border-radius:50%;overflow:hidden}.home-person .native-person-action-prop.catalog-food-photo img{border-radius:50%;object-fit:cover}
@keyframes home-person-float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-5px)}}
.cars{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.car-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.car-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#f7f9fc}.car-card>div{display:grid;gap:4px;flex:1}.car-card small{color:var(--muted)}.car-icon{font-size:38px}.car-photo{width:88px;height:66px;border-radius:13px;object-fit:cover;background:#fff}.car-edit{grid-template-columns:repeat(2,minmax(0,1fr))!important}.car-edit .danger{align-self:end}.room-more{position:static;display:grid;place-items:center;flex:0 0 auto;min-width:38px;width:38px;height:38px;padding:0;border:2px solid #fff;border-radius:50%;background:#273248;color:#fff;font-size:13px;font-weight:900;box-shadow:0 5px 12px #17203344}.room-pets .room-more{align-self:center}
.fields>label:has([data-image="photo"]){order:-20;grid-column:1/-1;padding:16px;border:2px solid color-mix(in srgb,var(--p) 28%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--p) 5%,white)}
.profile-license>.check{display:flex;align-items:center;gap:10px;margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f8fafc}
.profile-license>.check input[type="checkbox"]{flex:0 0 20px!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;margin:0!important;padding:0!important;border-radius:5px!important}
.personality-choice{padding:15px;border:1px solid var(--line);border-radius:18px;background:#f8fafc}.personality-choice>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.personality-choice>small{display:block;color:var(--muted);line-height:1.55}.personality-choice button.on{background:var(--grad);color:#fff;border-color:transparent}
.resident-setting{display:contents}.resident-setting label{display:grid;gap:3px;font-size:12px;color:var(--muted)}.resident-setting select{padding:8px}
.group-members{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--line);border-radius:15px;padding:12px}.group-members[hidden]{display:none}.group-members label{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.group-members input{width:auto}

/* 관찰 지도는 페이지 스크롤을 막지 않고 화면 너비에 맞춰 표시 */
.viewport{width:100%;height:auto;min-height:0;aspect-ratio:1672/941;overflow:visible;touch-action:pan-y;overscroll-behavior:auto}
.viewport .world{width:100%;height:100%;min-width:0;min-height:0}
.person{touch-action:pan-y}.person.icon-only{display:grid;place-items:center}.person.icon-only .avatar,.person.icon-only .sprite{margin:0}
@media(max-width:900px){
  header{display:flex;align-items:center}
  header nav{order:3;flex:0 0 100%;width:100%;max-width:100%;overflow-x:auto}
  header #save-state{order:2;margin-left:auto}
}
@media(max-width:600px){
  .roster-card{min-width:270px!important;width:auto!important;padding:9px 11px!important;display:flex!important;justify-content:flex-start!important;gap:9px!important}
  .roster-card>.roster-info{display:grid!important;min-width:0}
  .roster-card>.roster-info b{font-size:17px}.roster-card>.roster-info small{display:block;max-width:190px;overflow:visible;white-space:normal}
  .roster-card .avatar{width:46px!important;height:46px!important}.roster-card .sprite{width:52px!important;height:52px!important}
  .person .avatar{width:42px;height:42px}.person .sprite{width:52px;height:52px}
  .person.show-name{flex-direction:column}.person.show-name span{padding:3px 6px;font-size:11px}
}
@media(max-width:600px){.car-edit{grid-template-columns:1fr!important}}
.locked-option{color:var(--muted)}

/* 성격 슬라이더: 현재 선택과 양극을 한눈에 표시 */
.fields>label:has(>input[data-field="spiceTolerance"]),.fields>label:has(>input[data-field="sweetPreference"]){display:none}
.fields>label:has(>input[data-field="socialEnergy"]),.fields>label:has(>input[data-field="sensingIntuition"]),.fields>label:has(>input[data-field="thinkingFeeling"]),.fields>label:has(>input[data-field="perceivingJudging"]){display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px;border:1px solid var(--line);border-radius:17px;background:#f8fafc;font-family:inherit}
.fields>label:has(>input[data-field="socialEnergy"]) b,.fields>label:has(>input[data-field="sensingIntuition"]) b,.fields>label:has(>input[data-field="thinkingFeeling"]) b,.fields>label:has(>input[data-field="perceivingJudging"]) b{grid-column:2;text-align:right;color:var(--p);font:700 15px/1.35 inherit}
.fields>label:has(>input[data-field="socialEnergy"]) input,.fields>label:has(>input[data-field="sensingIntuition"]) input,.fields>label:has(>input[data-field="thinkingFeeling"]) input,.fields>label:has(>input[data-field="perceivingJudging"]) input{grid-column:1/-1;grid-row:3}
.fields>label:has(>input[data-field="socialEnergy"])::before,.fields>label:has(>input[data-field="sensingIntuition"])::before,.fields>label:has(>input[data-field="thinkingFeeling"])::before,.fields>label:has(>input[data-field="perceivingJudging"])::before{grid-column:1;grid-row:2;color:var(--muted);font:600 12px/1.35 inherit}
.fields>label:has(>input[data-field="socialEnergy"])::after,.fields>label:has(>input[data-field="sensingIntuition"])::after,.fields>label:has(>input[data-field="thinkingFeeling"])::after,.fields>label:has(>input[data-field="perceivingJudging"])::after{grid-column:2;grid-row:2;text-align:right;color:var(--muted);font:600 12px/1.35 inherit}
.fields>label:has(>input[data-field="socialEnergy"])::before{content:"내향 · 혼자 충전"}.fields>label:has(>input[data-field="socialEnergy"])::after{content:"외향 · 사람과 충전"}
.fields>label:has(>input[data-field="sensingIntuition"])::before{content:"감각 · 현실과 경험"}.fields>label:has(>input[data-field="sensingIntuition"])::after{content:"직관 · 가능성과 상상"}
.fields>label:has(>input[data-field="thinkingFeeling"])::before{content:"사고 · 논리와 원칙"}.fields>label:has(>input[data-field="thinkingFeeling"])::after{content:"감정 · 공감과 가치"}
.fields>label:has(>input[data-field="perceivingJudging"])::before{content:"인식 · 유연한 즉흥"}.fields>label:has(>input[data-field="perceivingJudging"])::after{content:"판단 · 계획과 정리"}

/* 집에서 동거인들의 현재 장면을 화면 분할로 표시 */
.resident-scenes{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.resident-scenes>.title{margin-bottom:12px}.resident-scenes>.title small{color:var(--muted)}
.resident-scenes>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:stretch}
.resident-scene-card:only-child{grid-column:1/-1}
.resident-scene-card{min-width:0;height:100%;padding:13px;border:1px solid color-mix(in srgb,var(--resident-theme) 30%,var(--line));border-radius:22px;background:#fff;box-shadow:0 10px 24px #1720330d;display:grid;grid-template-rows:auto 1fr}
.resident-profile{display:grid;grid-template-columns:minmax(90px,.8fr) 1fr;gap:12px;align-items:center}
.resident-profile-picture{display:grid;place-items:center;justify-self:start;width:min(100%,112px);aspect-ratio:1;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--resident-theme) 10%,#f4eee6)}
.resident-profile-picture>.resident-character-image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;border-radius:inherit!important;object-position:center!important;background:transparent!important;filter:none}
.resident-profile-picture>.avatar{object-fit:cover!important}.resident-profile-picture>.sprite{box-sizing:border-box;padding:5%;object-fit:contain!important}
.resident-profile>img{width:100%;height:150px;object-fit:cover;border-radius:17px}.resident-profile>.avatar,.resident-profile>.sprite{width:100%;height:150px;border-radius:17px}
.resident-profile>.resident-character-image{display:block!important;width:100%!important;height:150px!important;max-width:none!important;object-fit:contain!important;background:transparent!important}
.resident-profile h3{margin:0;font-size:27px}.resident-profile small{color:var(--muted)}
.resident-current{align-self:stretch;box-sizing:border-box;margin:11px 0 8px;padding:13px;border-radius:17px;background:color-mix(in srgb,var(--resident-theme) 6%,#f5f7fb);overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto}
.resident-current>small{color:var(--resident-theme);line-height:1.45}.resident-current h3{margin:9px 0 12px;font-size:21px;line-height:1.45;word-break:keep-all}.resident-current p{margin:0 0 16px;line-height:1.75;word-break:keep-all}.resident-current>b{display:block;line-height:1.55;margin-top:2px}
.resident-current>img{display:block;width:100%;height:150px;margin-top:20px;border-radius:14px;object-fit:cover;overflow:hidden}
.home-person-status{min-width:0}
@media(min-width:601px){.home-person-status{max-width:320px}.home-person small{overflow:visible;text-overflow:clip;white-space:normal;word-break:keep-all}}
@media(min-width:601px){
  .room-people{display:flex;gap:5px}
  .room-people .home-person{width:auto;max-width:100%;min-width:0;flex-direction:row}
  .room-people .home-person-status{display:grid;min-width:0;max-width:min(360px,calc(100% - 48px));padding:6px 9px}
  .room-people .home-person-status small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all}
  .room-people .home-person .avatar{width:44px;height:44px;flex:0 0 44px}
  .room-people .home-person .sprite{width:52px;height:52px;flex:0 0 52px}
}
.relationship-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.relationship-card-grid .relation{display:flex;flex-direction:column;min-width:0;margin:0}
.relation-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:14px}
.relation-actions button{width:100%;min-width:0}
.relationship-map{margin:20px 0;padding:18px;overflow:visible;touch-action:pan-y pinch-zoom;border:1px solid var(--line);border-radius:22px;background:#fbfaf7}
.relationship-map-canvas{position:relative;width:100%;height:auto;aspect-ratio:1/1;overflow:visible;pointer-events:none;touch-action:pan-y pinch-zoom;border-radius:18px;background:radial-gradient(circle at center,#fff 0 34%,#f4efe7 100%)}
.relationship-map-canvas svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.relationship-map-canvas svg text{paint-order:stroke;stroke:#fff;stroke-width:8px;stroke-linejoin:round;fill:#33261f;font-size:17px;font-weight:900}
.relationship-map-canvas svg .map-relation{font-size:18px}
.relationship-map-canvas svg .map-stage{font-size:14px;font-weight:600;fill:#74665d}
.relationship-map-canvas svg .map-heart{stroke:#fff;stroke-width:4px;font-size:24px;font-weight:900;paint-order:stroke}
.relationship-map-node{display:grid;place-content:center;justify-items:center;gap:5px;width:156px;height:156px;padding-top:10px;overflow:visible;box-sizing:border-box;text-align:center}
.relationship-map-node .avatar,.relationship-map-node .sprite{width:88px;height:88px;overflow:visible!important;object-fit:contain!important;filter:drop-shadow(0 7px 10px #3b2d204d)}
.relationship-map-node b{max-width:110px;padding:4px 9px;border-radius:999px;background:#fff;box-shadow:0 3px 12px #2f241b1c;font-size:17px}
.relationship-map-node.map-node-pair{width:200px;height:200px}
.relationship-map-node.map-node-pair .avatar,.relationship-map-node.map-node-pair .sprite{width:116px;height:116px}
.relationship-map-node.map-node-pair b{max-width:150px;font-size:26px}
.relationship-map-canvas .map-official rect{fill:transparent;stroke:none}
.relationship-map-canvas .map-official text{paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.relation-temporal{display:inline-flex!important;align-items:center;gap:10px;width:auto!important;max-width:none;margin:4px 0!important;padding:10px 13px!important;border:1px solid var(--line);border-radius:14px;background:#f7f8fb}
.relation-temporal input{width:20px;height:20px;flex:0 0 auto}.relation-temporal span{display:grid;gap:2px}.relation-temporal small{font-weight:500;color:var(--muted)}
.past-fault{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.past-fault[hidden],.sibling-direction[hidden],.parent-direction[hidden]{display:none!important}
.past-fault small{grid-column:1/-1}
.sibling-kinship-grid{display:grid;gap:10px;margin-top:14px}
.sibling-kinship-grid label{display:grid;grid-template-columns:minmax(140px,.7fr) minmax(220px,1.3fr);align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px}
.sibling-pair-people{display:grid;grid-template-columns:38px minmax(0,1fr) 24px 38px minmax(0,1fr);align-items:center;gap:7px}
.sibling-pair-people i{text-align:center;font-style:normal}.relation-mini-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#e8ecef}.relation-mini-avatar.fallback{display:grid;place-items:center;font-weight:900;color:#fff;background:#577}
.character-view-dialog-title .character-view-dialog-direction{display:flex;align-items:center;gap:10px}.character-view-dialog-direction>.avatar{width:58px;height:58px}.character-view-dialog-direction>i{font-size:24px;font-style:normal}.character-view-dialog-direction h2{margin:0}
.character-view-fields label{grid-template-columns:minmax(0,1fr) minmax(220px,.9fr);align-items:center}.character-view-fields label>select{align-self:center}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){.past-fault{grid-template-columns:1fr}.sibling-kinship-grid label,.character-view-fields label{grid-template-columns:1fr}.sibling-pair-people{grid-template-columns:34px 1fr 20px 34px 1fr}}
.character-view-editor{min-width:0;max-width:100%;margin:20px 0;padding:18px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#f8f6f2}
.character-view-source-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;max-width:100%;padding:4px 2px 12px}
.character-view-source-tabs button{display:grid;place-items:center;min-width:0;min-height:68px;padding:7px}
.character-view-source-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--view-primary),var(--view-secondary));border-color:transparent}
.character-view-source-tabs .avatar,.character-view-source-tabs .sprite{width:52px;height:52px}
.character-view-panel{display:grid;grid-template-columns:1fr;gap:10px;min-width:0}
.character-view-panel[hidden]{display:none}
.character-view-panel.character-view-dex{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.character-view-card{min-width:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff}
.character-view-card.character-view-token{aspect-ratio:1;border-radius:18px;border-color:color-mix(in srgb,var(--target-theme) 30%,var(--line));overflow:visible}
.character-view-open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:12px;text-align:left;border:0;border-radius:0;background:#fff}
.character-view-open:hover{background:#f8f5ef}
.character-view-open em{max-width:190px;padding:7px 10px;overflow:hidden;border-radius:999px;background:#f2ece5;font-style:normal;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.character-view-token .character-view-open{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:8px;border-radius:17px;background:color-mix(in srgb,var(--target-theme) 5%,#fff)}
.character-view-token .character-view-open:hover{background:color-mix(in srgb,var(--target-theme) 12%,#fff)}
.character-view-token .character-view-open::after{content:"";position:absolute;right:7px;bottom:7px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:var(--target-theme);box-shadow:0 1px 4px #0003}
.character-view-token .avatar,.character-view-token .sprite{width:min(62px,85%);height:min(62px,85%)}
.character-view-token-summary{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.character-view-dialog{width:min(920px,calc(100vw - 28px));max-height:min(88vh,900px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:22px;background:#fff}
.character-view-dialog::backdrop{background:#1d1712a8;backdrop-filter:blur(3px)}
.character-view-dialog>form{padding:18px}.character-view-dialog .title{position:sticky;top:-18px;z-index:2;margin:-18px -18px 8px;padding:18px;background:#fff;border-bottom:1px solid var(--line)}
.character-view-dialog-context{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
.character-view-card>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;cursor:pointer;list-style:none}
.character-view-card>summary::-webkit-details-marker{display:none}
.character-view-card>summary em{max-width:190px;padding:7px 10px;overflow:hidden;border-radius:999px;background:#f2ece5;font-style:normal;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.character-view-card[open]>summary{border-bottom:1px solid var(--line)}
.character-view-heading{display:flex;align-items:center;gap:10px;min-width:0}
.character-view-heading .avatar,.character-view-heading .sprite{width:58px;height:58px;flex:0 0 58px}
.character-view-direction-icons{display:flex;align-items:center;gap:3px;flex:0 0 auto}.character-view-direction-icons i{font-style:normal;font-size:20px;font-weight:900}.character-view-direction-icons .avatar,.character-view-direction-icons .sprite{width:46px;height:46px;flex:0 0 46px}
.character-view-heading>span{min-width:0}.character-view-heading b,.character-view-heading small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-view-heading small{color:var(--muted)}
.official-relation-inline{display:inline-flex!important;align-items:center;gap:5px;width:max-content;max-width:100%;margin-top:5px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--view-primary) 13%,#fff);color:#33281f;font-size:12px;line-height:1.25;white-space:normal!important;word-break:keep-all}.official-relation-inline b{display:inline!important}.official-relation-inline.none{background:#f2eee8;color:var(--muted)}
.character-view-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}.character-view-fields label{display:grid;grid-template-columns:1fr;gap:7px;min-width:0;align-content:start}
.character-view-fields select{width:100%;max-width:100%;min-width:0}
.character-view-fields label>span{display:grid}.character-view-fields small{color:var(--muted);word-break:keep-all}
@media(max-width:700px){
  .relationship-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .relationship-card-grid .relation{padding:12px;border-radius:15px}
  .relationship-card-grid .relation h2{margin:8px 0;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
  .relationship-card-grid .relation p{margin:6px 0;font-size:13px;line-height:1.45}
  .relationship-card-grid .relation-avatars .avatar,.relationship-card-grid .relation-avatars .sprite{width:42px;height:42px}
  .relation-actions{gap:7px;padding-top:10px}
  .relation-actions button{padding:8px 5px;font-size:12px;line-height:1.25}
  .character-view-fields{grid-template-columns:1fr}
  .character-view-editor{padding:13px}
  .character-view-source-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .character-view-source-tabs button{min-height:56px;padding:5px}
  .character-view-source-tabs .avatar,.character-view-source-tabs .sprite{width:44px;height:44px}
  .character-view-panel.character-view-dex{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .character-view-card>summary{grid-template-columns:minmax(0,1fr)}
  .character-view-dialog>form{padding:13px}.character-view-dialog .title{top:-13px;margin:-13px -13px 6px;padding:13px}
  .character-view-card>summary em{max-width:100%;justify-self:start}
  .character-view-heading .avatar,.character-view-heading .sprite{width:50px;height:50px;flex-basis:50px}
  .relationship-map{padding:10px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y}
  .relationship-map>.title{position:sticky;left:0;width:calc(100vw - 70px)}
  .relationship-map-canvas{display:block;width:720px;min-width:720px}
  .relationship-map-canvas svg text{stroke-width:7px}
}
.town-edit .place{touch-action:none;user-select:none;-webkit-user-select:none}.town-edit>.world{touch-action:pan-y}
.routine-screen-head,.routine-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.routine-back-button{width:50px;height:50px;padding:0;border:0;background:transparent}.routine-back-button img{width:100%;height:100%;object-fit:contain}.routine-character-switcher{position:relative}.routine-character-switcher>summary{cursor:pointer}.routine-title-row>span{display:flex;align-items:center;gap:10px}.routine-title-row>span>img{width:48px;height:48px;object-fit:contain}.routine-title-row h1{margin:0}.routine-toolbar{display:flex;gap:8px;overflow-x:auto;margin:12px 0}.routine-toolbar button{white-space:nowrap}.routine-toolbar button>span{display:block}.weekly-table{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:9px;min-width:1080px}.weekly-scroll{overflow-x:auto;padding-bottom:8px}.routine-day{position:relative;min-height:260px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#f7f9fc}.routine-day h3{position:sticky;top:0;margin:0 0 8px;padding:6px;background:#f7f9fc}.routine-block{display:grid;gap:3px;margin:7px 0;padding:9px;border-left:5px solid var(--p);border-radius:10px;background:#fff}.routine-block-main{display:grid;gap:3px;width:100%;padding:0;border:0;background:transparent;text-align:left}.routine-block small{color:var(--muted)}.routine-block-delete{justify-self:end}.routine-day-add{width:100%;padding:5px}.routine-day-empty{display:block;margin-top:8px;text-align:center;color:var(--muted)}
.routine-toolbar .avatar,.routine-toolbar .sprite{width:34px;height:34px;vertical-align:middle;margin-right:6px}.routine-toolbar .on{color:#fff;background:var(--grad)}textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:15px;background:#f5f7fb;padding:13px;font:inherit}.relation-avatars{display:flex;align-items:center;gap:5px;margin-bottom:8px}.relation-avatars .avatar,.relation-avatars .sprite{width:58px;height:58px;margin:0;border:0!important;outline:0!important;box-shadow:none!important}.relation-avatars>*:nth-child(n+2){transform:none}
.routine-return-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 90%,var(--p) 10%)}.routine-return-panel span{display:grid;gap:3px}.routine-return-panel small{color:var(--muted);line-height:1.4}.routine-return-panel>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.routine-return-panel button{white-space:nowrap}
@media(max-width:620px){.routine-return-panel{align-items:stretch;flex-direction:column}.routine-return-panel>div{justify-content:stretch}.routine-return-panel button{flex:1}}
.pet-actions::before{content:"사진";flex:0 0 100%;font-weight:800}.pet-actions button:nth-of-type(1)::after{content:" 선택"}.pet-actions button:nth-of-type(2)::after{content:" · 이미지 주소"}.pet-actions button:nth-of-type(3),.pet-actions button:nth-of-type(4){display:none}
.backup-notice{width:min(520px,calc(100vw - 28px));padding:0;border:0;border-radius:22px;box-shadow:0 24px 80px #10182755}.backup-notice::backdrop{background:#10182788}.backup-notice form{display:grid;gap:15px;padding:22px}.backup-notice h2,.backup-notice p{margin:0}.backup-notice label{display:flex;align-items:center;gap:8px}.backup-notice input{width:auto;min-height:0}.backup-notice button{width:100%}
.place-config label:has([data-place-field="spicy"]),.place-config label:has([data-place-field="sweet"]){display:none!important}
.audience-open-button{width:100%;display:grid;gap:4px;text-align:left;padding:13px 15px}.audience-open-button small{color:var(--muted);white-space:normal}
.audience-dialog{width:min(680px,calc(100vw - 24px));padding:0;border:0;border-radius:22px;box-shadow:0 28px 90px #10182766}.audience-dialog::backdrop{background:#10182788}.audience-dialog form{display:grid;gap:14px;padding:20px}.audience-dialog h2{margin:0}.audience-dialog .title small{color:var(--muted)}.audience-dialog-list{display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;max-height:52vh;overflow-y:auto;padding:10px;border:1px solid var(--line);border-radius:16px;background:#f6f8fb}.audience-dialog-list button{padding:8px 11px}.audience-dialog-list button.on{color:#fff;background:var(--grad);border-color:transparent}.audience-dialog-list button[hidden]{display:none}.place-main-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:8px 0 14px}.place-main-actions select{min-height:46px;padding:9px}.place-main-actions button{padding:9px 12px}
@media(max-width:600px){.place-main-actions{grid-template-columns:1fr}.audience-dialog form{padding:14px}.audience-dialog-list{max-height:58vh}}

@media(max-width:600px){
  /* 캐릭터 목록을 짧고 촘촘하게 */
  .editor>aside{padding:12px}
  .editor>aside>.title h2{font-size:23px}
  .editor>aside>.title button{padding:8px 11px}
  .char-sort-row{margin:4px 0}
  .char-sort-row .char-row{min-height:72px;padding:7px 9px;gap:7px}
  .char-row .avatar,.char-row .sprite{width:48px;height:48px}
  .char-row b{font-size:17px}.char-row small{font-size:13px}
  .sort-controls{gap:2px}.sort-controls button{width:28px;height:34px;font-size:10px}
  /* 방 안 인물은 아이콘 아래에 상태 전문 표시 */
  .home-person{flex-direction:column;align-items:center;max-width:145px}
  .home-person-status{display:grid!important;max-width:140px!important;padding:5px 7px!important;text-align:center;white-space:normal!important}
  .home-person-status small{display:-webkit-box!important;max-width:135px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important;word-break:keep-all!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .room-people{align-items:flex-start}
  .room-pets{right:4px;top:46%}.room-pet{max-width:132px;flex-direction:column;align-items:center;gap:2px}.room-pet img,.room-pet-emoji{width:38px;height:38px;font-size:25px}.room-pet-status{min-width:86px;max-width:98px;padding:4px 6px!important;text-align:center}.room-pet-status b{font-size:10px}.room-pet-status small{font-size:8px}
  .life-log .title{align-items:flex-start}.life-log .title small{max-width:48%;text-align:right}
  .resident-scenes>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .resident-scene-card{padding:7px;border-radius:16px}
  .resident-profile{grid-template-columns:1fr;gap:5px;text-align:center}.resident-profile>img,.resident-profile>.avatar,.resident-profile>.sprite,.resident-profile>.resident-character-image{height:112px!important}
  .resident-profile h3{font-size:19px}.resident-profile small{font-size:12px}
  .resident-current{padding:8px;border-radius:12px}.resident-current h3{font-size:16px}.resident-current p,.resident-current b{font-size:12px}
  .resident-current>img{height:105px}
}

@media(max-width:600px){
  html,body,#app,main,header,.panel,.editor,.form{max-width:100%;min-width:0}
  body,#app,main{overflow-x:hidden}
  main>*{min-width:0;max-width:100%}
  .editor{display:block;width:100%;overflow:hidden}
  .editor>aside,.editor>.form{width:100%;min-width:0;padding:12px}
  .character-menu{width:100%;max-width:100%;flex-wrap:wrap;overflow-x:hidden}
  .character-menu button{flex:1 1 auto}
  .chips{min-width:0;max-width:100%;overflow:hidden}
  .chips button{max-width:100%;white-space:normal;overflow-wrap:break-word}
  .fields,.pet-edit,.relationship-grid{grid-template-columns:minmax(0,1fr)}
  .town-edit{width:100%;max-width:100%;overflow:hidden}
  .town-edit>.world{width:100%;min-width:0;aspect-ratio:1200/676;height:auto}
  .map-place-label{z-index:40;min-width:62px;max-width:104px;transform:translate(-50%,calc(-100% - 9px));font-size:10px;line-height:1.1}
  .map-place-label b{font-size:12px;line-height:1.05}.map-place-label small{font-size:8px}
  .place-people-faces .avatar,.place-people-faces .sprite{width:43px!important;height:48px!important}
}
.install-app-button{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:1200;width:auto;padding:12px 18px;border:0;border-radius:999px;background:var(--p,#6b452b);color:#fff;box-shadow:0 8px 24px #0003;font-weight:800}
.building-shape-open{width:100%;margin:8px 0;padding:12px}.building-shape-dialog{width:min(760px,calc(100vw - 24px));border:0;border-radius:24px;padding:0;box-shadow:0 24px 80px #10182755}.building-shape-dialog::backdrop{background:#10182788}.building-shape-dialog form{padding:20px}.building-shape-dex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.building-shape-dex button{position:relative;display:grid;gap:8px;padding:12px;min-width:0;background:#f6f3ee}.building-shape-dex button.on{outline:3px solid var(--p)}.building-shape-dex button.recommended{background:#edf8f3;border-color:var(--p)}.building-shape-dex button>span{min-height:18px;color:var(--p);font-size:11px}.building-shape-dex button>small{display:block;color:#796d64;font-size:.72rem;line-height:1.35}.building-shape-dex img{width:100%;height:150px;object-fit:contain}
.storage-meter{display:grid;gap:8px;margin-top:18px;padding:16px;border-radius:18px;background:#f7f3ee}.storage-meter h3,.storage-meter b{margin:0}.storage-meter>div{height:12px;overflow:hidden;border-radius:999px;background:#ddd5cc}.storage-meter i{display:block;height:100%;background:linear-gradient(90deg,#6b452b,#a9784f)}.storage-meter small{color:var(--muted)}
.wake-habit-field,.sleep-habit-field{display:grid;gap:8px}.profile-license .fields>.check{align-content:center}.official-relation-heading{margin:28px 0 12px}.fashion-extra-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.profile-license .fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.profile-license .fields>*{min-width:0;max-width:100%}
.profile-license .fields input,.profile-license .fields select{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.profile-extra-settings{display:contents}.profile-extra-settings>label{display:grid;gap:8px;min-width:0}.profile-extra-settings select{min-height:58px;padding-block:11px}
.profile-orientation-setting{display:grid;gap:8px;align-content:center;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fbf8f3}.profile-orientation-setting button{width:100%}.profile-orientation-setting small{min-width:0;overflow-wrap:anywhere;color:var(--muted)}
.profile-license .fields>label.check{display:flex!important;min-height:58px;flex-direction:row!important;align-items:center;justify-content:flex-start;gap:12px;padding:13px 16px}.profile-license .fields>label.check input{width:20px;height:20px;margin:0;flex:0 0 auto}
.export-font-picker{display:grid;gap:8px;margin-top:18px}.export-font-picker select{min-height:54px}
.profile-license-field{display:flex!important;align-items:center!important;align-self:stretch;gap:11px!important;min-height:58px!important;margin:0!important;padding:14px 16px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:#f8fafc!important}
.profile-license-field input{flex:0 0 20px!important;width:20px!important;height:20px!important;min-height:20px!important;margin:0!important}
.profile-tag-actions{grid-column:1/-1;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fbf8f3}.profile-tag-actions small{min-width:0;overflow-wrap:anywhere;color:var(--muted)}.profile-export-open{grid-column:1/-1;width:100%;margin-top:24px}.profile-tags-dialog,.profile-export-dialog{width:min(720px,calc(100vw - 24px));border:0;border-radius:24px;padding:0}.profile-tags-dialog form,.profile-export-dialog form{padding:22px}.profile-tag-grid{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.profile-tag-grid button.on{color:#fff;background:var(--p)}.profile-export-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.profile-export-options button{display:grid;gap:6px;padding:24px;text-align:left}.profile-export-options small{color:var(--muted)}
.profile-tag-grid.has-categories{display:grid;grid-template-columns:1fr;max-height:min(62dvh,620px);overflow:auto}.profile-tag-category{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fbf8f3}.profile-tag-category h3{margin:0;font-size:17px}.profile-tag-category>div{display:flex;flex-wrap:wrap;gap:9px}.profile-tag-category button{min-height:44px;padding:9px 13px}
@media(max-width:700px){.profile-license .fields{grid-template-columns:1fr}.profile-tag-actions{grid-template-columns:1fr}.profile-export-options{grid-template-columns:1fr}.building-shape-dex{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fashion-extra-fields .chips{margin:0;padding:12px}.fashion-extra-fields .chips>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.fashion-extra-fields button.on{background:var(--grad);color:#fff;border-color:transparent}
.show-outfit-button{width:100%;margin:8px 0 12px;background:#f7f3ee;border-color:#9f7859;color:#5b3a24}.outfit-dialog{width:min(760px,calc(100vw - 24px));border:0;border-radius:24px;padding:0;box-shadow:0 24px 80px #10182755}.outfit-dialog::backdrop{background:#10182788}.outfit-dialog form{padding:20px}.outfit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:18px}.outfit-grid article{display:grid;gap:7px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff}.outfit-grid img,.outfit-grid article>span{width:100%;height:180px;object-fit:contain;border-radius:12px}.outfit-grid article>span{display:grid;place-items:center;font-size:56px}.outfit-grid small{color:var(--muted)}
.wardrobe-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.wardrobe-head h2,.wardrobe-head p{margin-top:0}.wardrobe-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:22px;border:10px solid #6b452b;border-radius:26px;background:linear-gradient(90deg,#f4eee7 1px,transparent 1px),linear-gradient(#f4eee7 1px,transparent 1px),#fff;background-size:25% 50%;min-height:380px}.wardrobe-item{display:grid;align-content:start;gap:7px;padding:10px;min-width:0;background:#fffdfacc;border:2px solid transparent;border-radius:18px}.wardrobe-item.on{border-color:var(--p);box-shadow:0 8px 22px #0002}.wardrobe-item img,.wardrobe-item>span{width:100%;height:150px;object-fit:contain;border-radius:12px}.wardrobe-item>span{display:grid;place-items:center;font-size:54px}.wardrobe-item small{color:var(--muted);overflow-wrap:anywhere}
@media(max-width:700px){.building-shape-dex{grid-template-columns:1fr 1fr}.building-shape-dex img{height:105px}.fashion-extra-fields{grid-template-columns:1fr}.wardrobe-head{display:grid}.wardrobe-board{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;border-width:7px}.wardrobe-item img,.wardrobe-item>span{height:120px}.outfit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.outfit-grid img,.outfit-grid article>span{height:130px}}
.wardrobe-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}.wardrobe-character-strip{padding:12px;display:grid;align-content:start;gap:8px}.wardrobe-character-strip button{display:flex;align-items:center;gap:10px;text-align:left}.wardrobe-character-strip button.on{border-color:var(--p);background:color-mix(in srgb,var(--p) 10%,#fff)}.wardrobe-character-strip img,.wardrobe-character-strip .avatar{width:52px;height:52px;object-fit:contain}.closet-main{padding:24px;min-width:0}.closet-main>.title>div:last-child{display:flex;gap:8px}.closet-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.closet-item-card{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;background:#faf8f5}.closet-item-card img,.closet-item-card>span{width:86px;height:86px;object-fit:contain;border-radius:14px;background:#fff}.closet-item-card>span{display:grid;place-items:center;font-size:40px}.closet-item-card div{display:grid;gap:5px;min-width:0}.closet-item-card small{color:var(--muted);white-space:normal;word-break:keep-all}.outfit-section-title{margin-top:30px}.saved-outfits{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}.saved-outfit-card{padding:13px;border:1px solid var(--line);border-radius:21px;background:#fff}.saved-outfit-card>div:not(.outfit-collage){display:grid;gap:4px;margin:10px 2px}.outfit-collage{height:230px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:7px;padding:10px;border-radius:17px;background:#f1eee9}.outfit-collage img,.outfit-collage>span{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:10px;min-width:0;min-height:0}.outfit-collage>span{display:grid;place-items:center}.outfit-collage>:first-child{grid-column:span 2;grid-row:span 2}.outfit-collage>:nth-child(2){grid-column:span 2}.outfit-collage.cluster-2>:first-child,.outfit-collage.cluster-6>:first-child{grid-column:span 3;grid-row:span 1}.outfit-collage.cluster-3>:first-child,.outfit-collage.cluster-9>:first-child{grid-column:span 1;grid-row:span 3}.outfit-collage.cluster-4>:first-child,.outfit-collage.cluster-8>:first-child{grid-column:span 2;grid-row:span 3}.outfit-collage.cluster-5>:nth-child(2),.outfit-collage.cluster-10>:nth-child(2){grid-column:span 2;grid-row:span 2}.outfit-collage.cluster-7>:first-child,.outfit-collage.cluster-11>:first-child{grid-column:span 3;grid-row:span 2}.outfit-collage.cluster-12{grid-template-columns:repeat(3,1fr)}.outfit-collage.cluster-12>*{grid-column:auto!important;grid-row:auto!important}.outfit-collage.cluster-13>:first-child{grid-column:2/4;grid-row:1/3}.clothing-editor-dialog,.outfit-editor-dialog{width:min(1050px,calc(100vw - 24px));max-height:92dvh}.clothing-editor-dialog form,.outfit-editor-dialog form{overflow:auto;max-height:88dvh}.clothing-editor-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px}.clothing-preview{display:grid;align-content:start;gap:12px}.clothing-preview img,.clothing-preview>span{width:100%;height:300px;object-fit:contain;border-radius:20px;background:#f4f4f4}.clothing-preview>span{display:grid;place-items:center;font-size:80px}.clothing-fields{display:grid;gap:12px}.clothing-fields h3{margin:10px 0 0}.closet-chip-grid{display:flex;flex-wrap:wrap;gap:7px}.closet-chip-grid button.on,.layout-picker button.on,.outfit-item-picker button.on{background:var(--grad);color:#fff;border-color:transparent}.layout-picker{display:grid;grid-template-columns:repeat(7,minmax(70px,1fr));gap:8px}.layout-picker button{padding:7px}.layout-picker button>span{height:72px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}.layout-picker i{display:block;background:currentColor;border-radius:2px}.layout-picker i:first-child{grid-row:span 2;grid-column:span 2}.outfit-item-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:8px}.outfit-item-picker button{display:grid;gap:5px;place-items:center;padding:8px}.outfit-item-picker img,.outfit-item-picker button>span{width:100%;height:95px;object-fit:contain}.outfit-item-picker button>span{display:grid;place-items:center;font-size:40px}
@media(max-width:800px){.wardrobe-shell{grid-template-columns:1fr}.wardrobe-character-strip{display:flex;overflow-x:auto}.wardrobe-character-strip button{flex:0 0 auto}.closet-main{padding:14px}.closet-main>.title{display:grid}.closet-main>.title>div:last-child{width:100%}.closet-main>.title>div:last-child button{flex:1}.closet-items,.saved-outfits{grid-template-columns:1fr}.closet-item-card{grid-template-columns:72px minmax(0,1fr) auto}.closet-item-card img,.closet-item-card>span{width:72px;height:72px}.clothing-editor-grid{grid-template-columns:1fr}.clothing-preview{grid-template-columns:140px minmax(0,1fr);align-items:center}.clothing-preview img,.clothing-preview>span{height:140px}.layout-picker{grid-template-columns:repeat(4,minmax(60px,1fr))}}
.dlc-store{max-width:1050px;margin:auto}.dlc-badge{padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--p) 13%,#fff);color:var(--p)}.dlc-empty{min-height:420px;display:grid;place-items:center;align-content:center;text-align:center;gap:12px}.dlc-empty>span{font-size:80px}.dlc-empty button{margin-top:8px}
.shop-store{display:grid;gap:22px}.premium-product{padding:28px;border-radius:28px;background:linear-gradient(135deg,#35261e,#754b31 58%,#bd8551);color:#fff;box-shadow:0 20px 50px #52311e2b}.premium-product-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px}.premium-product-heading>span{display:grid;place-items:center;width:86px;height:86px;border-radius:24px;background:#ffffff1c;border:1px solid #ffffff33;font-size:13px;letter-spacing:.12em}.premium-product h2{margin:4px 0;font-size:30px}.premium-product-heading>b{font-size:27px;white-space:nowrap}.premium-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.premium-benefits p{margin:0;padding:14px;border-radius:16px;background:#ffffff14;border:1px solid #ffffff26}.premium-buy{display:block;width:100%;padding:16px;background:#fff!important;color:#493020!important;text-align:center;text-decoration:none}.premium-current{display:grid;gap:5px;padding:16px;border-radius:17px;background:#ffffff18}.premium-warning{margin:16px 0 0;font-size:13px;line-height:1.6;color:#fffddd}.shop-coming{padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--soft)}.shop-coming h2,.shop-coming p{margin:0}.shop-coming p{margin-top:7px;color:var(--muted)}
.shop-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.shop-product-grid .one-time-product{display:flex;flex-direction:column;min-width:0;height:100%;box-sizing:border-box}.shop-product-grid .one-time-product>p{flex:1;line-height:1.65}.shop-product-grid .premium-product-heading{align-items:start}.shop-product-grid .premium-buy{margin-top:18px}.shop-product-grid .premium-product-heading>span{width:68px;height:68px}.shop-product-grid .premium-product-heading>b{font-size:22px}.shop-product-icon{display:block;width:86px;height:86px;object-fit:contain;align-self:start;background:transparent}.shop-product-grid .shop-product-icon{width:68px;height:68px}
[data-building-shape^="medieval-"],label:has([data-world-era]){display:none!important}
.building-preset-image{display:block;width:100%;height:100%;object-fit:contain;overflow:visible}.dlc-product{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,#fffaf0,#f3eadb)}.dlc-product-art{min-height:230px;display:grid;place-items:center;border-radius:20px;background:#6f4933;color:#fff;font-size:90px}.dlc-product h2{margin:4px 0 8px}.dlc-product p,.dlc-product li{line-height:1.65}.dlc-buy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}.dlc-buy-row>b{font-size:26px}.dlc-buy{text-decoration:none;text-align:center}.dlc-note{color:var(--muted);font-size:13px}@media(max-width:700px){.dlc-product{grid-template-columns:1fr}.dlc-product-art{min-height:150px}.dlc-buy-row{align-items:stretch;flex-direction:column}}
@media(max-width:700px){.premium-product{padding:20px}.premium-product-heading{grid-template-columns:auto minmax(0,1fr)}.premium-product-heading>span{width:62px;height:62px;border-radius:18px}.premium-product-heading>b{grid-column:1/-1}.premium-product h2{font-size:23px}.premium-benefits{grid-template-columns:1fr}}
@media(max-width:1000px){.shop-product-grid{grid-template-columns:1fr}.shop-product-grid .premium-product-heading>b{grid-column:auto}}@media(max-width:700px){.shop-product-grid .premium-product-heading>b{grid-column:1/-1}}
.relation-editor-dialog{width:min(980px,calc(100vw - 24px));max-height:94dvh}.relation-editor-dialog form{width:100%;box-sizing:border-box;display:grid;gap:18px;max-height:92dvh;overflow:auto;padding:30px}.relation-pair-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;justify-content:stretch!important}.relation-pair-fields label{min-width:0}.relation-interaction-picker>div{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;justify-content:stretch!important}.relation-interaction-picker button{width:100%;min-width:0;padding:10px 8px;white-space:normal;word-break:keep-all}.relation-tags{display:flex;flex-wrap:wrap;gap:7px}.relation-interaction-picker button.on{color:#fff;background:var(--grad);border-color:transparent}.relation-stage{font-size:18px;font-weight:800;color:var(--p)}.relation-tags{margin:8px 0 14px}.relation-tags span{padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--p) 10%,#fff);font-size:12px}
@media(max-width:760px){.relation-editor-dialog form{padding:16px}.relation-pair-fields{grid-template-columns:1fr 1fr}.relation-interaction-picker>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.relation-pair-fields{grid-template-columns:1fr}.relation-interaction-picker>div{grid-template-columns:1fr 1fr}}
.relation-member-picker,.crush-direction,.parent-direction{padding:14px;border:1px solid var(--line);border-radius:18px}.relation-member-picker>div,.crush-columns section>div{display:flex;flex-wrap:wrap;gap:8px}.relation-character-chip{display:flex!important;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#f7f8fa;color:var(--ink)!important}.relation-character-chip:has(input:checked){border-color:var(--p);background:color-mix(in srgb,var(--p) 12%,#fff)}.relation-character-chip input{width:auto;min-height:0}.crush-columns{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;justify-content:stretch!important}.crush-columns section{display:grid;gap:10px}.crush-columns>span{font-size:28px}.relation-interaction-title{display:flex!important;align-items:center;justify-content:flex-start!important;gap:8px}.relation-interaction-title h3{margin-right:auto}.relation-interaction-picker details{margin:9px 0;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fafbfc}.relation-interaction-picker summary{display:flex;align-items:center;gap:8px;cursor:pointer}.relation-interaction-picker summary>b{margin-right:auto}.relation-interaction-picker summary span{display:flex;gap:5px}.relation-interaction-picker summary button,.relation-interaction-title button{padding:6px 9px;font-size:12px}.relation-interaction-picker details>div{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}
@media(max-width:760px){.crush-columns{grid-template-columns:1fr}.crush-columns>span{transform:rotate(90deg);justify-self:center}.relation-interaction-picker details>div{grid-template-columns:repeat(2,minmax(0,1fr))}.relation-interaction-title{flex-wrap:wrap}.relation-interaction-title h3{flex:0 0 100%}}

.parent-columns{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}.parent-columns section{display:grid;gap:9px}.parent-columns section>div{display:flex;flex-wrap:wrap;gap:8px}.parent-columns>span{font-size:28px}@media(max-width:760px){.parent-columns{grid-template-columns:1fr}.parent-columns>span{transform:rotate(90deg);justify-self:center}}
.relation-order-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}.relation-order-control>b,.relation-order-control small{grid-column:1/-1}.relation-order-control span{min-width:0;font-weight:800;overflow-wrap:normal;word-break:keep-all}.relation-order-control button{white-space:nowrap}@media(max-width:560px){.relation-order-control{grid-template-columns:1fr}.relation-order-control button{width:100%}}

/* 집 편집 체크박스, 장면 카드와 첫 사용 안내 */
.pet-edit label.check{display:flex!important;align-items:center;justify-content:flex-start;gap:9px;min-height:46px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:#fff}
.pet-edit label.check input{flex:0 0 auto;width:20px!important;min-height:20px!important;height:20px;margin:0}
.resident-current{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;box-sizing:border-box}
.resident-current>img{margin-top:20px!important;padding-top:0;box-sizing:border-box;border-radius:14px!important}
.relation-activity-details{margin:10px 0 14px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--p) 22%,var(--line));border-radius:13px;background:#ffffffa8}
.relation-activity-details summary{cursor:pointer;font-weight:800;color:var(--p)}
.relation-activity-details .relation-tags{margin:10px 0 0}
.feedback-card a{display:block;width:max-content;max-width:100%;text-decoration:none}
.feedback-card .feedback-email-button{margin:0;padding:14px 19px;border-radius:15px;background:var(--grad);color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:850;text-align:center;box-shadow:0 9px 22px color-mix(in srgb,var(--p) 24%,transparent)}
.feedback-email-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 12px}
.feedback-email-type{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:52px;line-height:1.3}
@media(max-width:620px){.feedback-email-types{grid-template-columns:1fr}}
.feedback-status a{display:inline!important;width:auto!important;text-decoration:underline!important}
.relation-type-help{display:block;min-height:2.8em;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--p) 7%,#fff);color:var(--muted);line-height:1.55}
@media(max-width:600px){.sleep-gate{top:8px;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:calc(100% - 16px);padding:9px 10px;border-radius:14px}.sleep-gate>span,.sleep-gate p{display:none}.sleep-gate h2{font-size:14px;line-height:1.25;white-space:normal}.sleep-gate button{padding:7px 9px;font-size:12px;white-space:nowrap}}
.parent-kinship-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.parent-kinship-grid label{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:#fff}.parent-kinship-grid label>span{display:grid}.parent-kinship-grid small{color:var(--muted)}.parent-kinship-grid input{width:20px!important;height:20px!important;min-height:20px!important}
.sibling-role-list{display:grid!important;gap:9px}.sibling-role-list>label{display:grid!important;grid-template-columns:minmax(100px,1fr) minmax(130px,.8fr) auto minmax(180px,1fr);align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:15px;background:#fff}.sibling-role-list>label>b{font-size:17px}.sibling-role-list>label>span{display:flex;align-items:center;gap:7px}.sibling-role-list select{min-width:0}.sibling-blood input{width:20px!important;height:20px!important;min-height:20px!important}.sibling-direction>small{display:block;margin-top:10px;color:var(--muted)}
.parent-direction [data-role-character][hidden],.sibling-direction [data-role-character][hidden]{display:none!important}
@media(max-width:760px){.parent-kinship-grid{grid-template-columns:1fr}.sibling-role-list>label{grid-template-columns:1fr}.sibling-role-list>label>select{width:100%}}
.feedback-card label.check{display:flex!important;align-items:center;justify-content:flex-start;gap:10px}
.feedback-card label.check input{flex:0 0 20px;width:20px!important;height:20px!important;min-height:20px!important;margin:0}
.feedback-card form{display:grid;gap:18px}.feedback-card fieldset{margin:0;padding:0;border:0}.feedback-card legend{margin-bottom:10px;font-weight:800}.feedback-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.feedback-category-grid label{position:relative}.feedback-category-grid input{position:absolute;opacity:0;pointer-events:none}.feedback-category-grid span{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center;font-weight:800}.feedback-category-grid input:checked+span{color:#fff;border-color:transparent;background:var(--grad)}.feedback-card textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:16px;background:#f5f7fb;padding:16px;font:inherit}.feedback-status{min-height:1.4em;color:var(--p);font-weight:800}
.shop-cart{display:grid;gap:14px;padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff}
.shop-cart .title h2,.shop-cart .title p{margin:0}.shop-cart .title p{margin-top:5px;color:var(--muted)}
.cart-lines{display:grid;gap:9px}.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:13px;border-radius:16px;background:var(--soft)}
.cart-line>div:first-child{display:grid;gap:4px}.cart-line small{color:var(--muted)}.cart-quantity{display:flex;align-items:center;gap:8px}.cart-quantity button,.cart-remove{padding:7px 10px}
.cart-total{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line);font-size:20px}.cart-empty{margin:0;padding:18px;text-align:center;color:var(--muted)}
.premium-buy.disabled{pointer-events:none;opacity:.45}.one-time-product button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:700px){.cart-line{grid-template-columns:minmax(0,1fr) auto}.cart-line>div:first-child{grid-column:1/-1}.cart-line>.cart-remove{justify-self:end}}
.page-guide{width:min(520px,calc(100vw - 28px));padding:0;border:0;border-radius:24px;box-shadow:0 28px 90px #10182766}
.page-guide::backdrop{background:#10182788}
.page-guide form{display:grid;gap:13px;padding:25px}
.page-guide h2,.page-guide p{margin:0}.page-guide small{color:var(--p);font-weight:800}.page-guide button{width:100%;margin-top:5px}
.relation{border:1px solid var(--line);background:#fffaf3!important;color:var(--ink)!important}
.relation h2,.relation p,.relation small,.relation summary,.relation-stage,.relation-tags span{color:var(--ink)!important}
.relation-tags span{background:#f2ebe2}
.inline-guide,.room-editor-guide{padding:14px 16px;border:1px solid color-mix(in srgb,var(--p) 28%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--p) 7%,#fff)}
.inline-guide b,.room-editor-guide h3{margin:0}.inline-guide ol{margin:8px 0 0;padding-left:22px;line-height:1.7}
.place-edit-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;padding:11px 12px;border-radius:14px;background:var(--soft)}
.place-edit-heading span{display:grid;gap:3px}.place-edit-heading small{color:var(--muted)}.place-edit-heading .danger{flex:0 0 auto;padding:8px 11px}
.place-layer-tools{display:flex;align-items:center;gap:7px;margin-left:auto}.place-layer-tools small{margin-right:2px;white-space:nowrap}.place-layer-tools button{min-height:38px;padding:8px 11px}.place-layer-tools button:disabled{cursor:not-allowed;opacity:.42}
.home[data-home-card] .room-tools,.home[data-home-card] .room>.furniture{display:none!important}
.mobile-room-editors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:20px;background:#f6f4f1}
.room-editor-guide{grid-column:1/-1}.room-editor-guide p{margin:5px 0 0;color:var(--muted)}
.mobile-room-editors details{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.mobile-room-editors summary{display:flex;align-items:center;gap:11px;padding:12px;cursor:pointer;font-weight:800}
.mobile-room-editors summary>span:last-child{display:grid;gap:3px;min-width:0}.mobile-room-editors summary small{color:var(--muted);font-size:11px}
.room-editor-thumb{flex:0 0 62px;width:62px;height:46px;border-radius:10px;background:#e6e8eb center/cover no-repeat}
.mobile-room-editor-body{display:grid;gap:11px;padding:0 12px 13px}.mobile-room-editor-body label{display:grid;gap:5px}.mobile-room-editor-body input{width:100%;min-width:0}
.room-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}.room-editor-heading .danger{padding:7px 10px;flex:0 0 auto}
.mobile-room-image-actions,.mobile-room-furniture{display:flex;flex-wrap:wrap;gap:7px}.mobile-room-image-actions button,.mobile-room-furniture button{flex:1 1 auto;min-width:100px;padding:9px}
.mobile-room-furniture button.on{color:#fff;background:var(--grad);border-color:transparent}.room-editor-note{margin:3px 0 0!important;color:var(--muted);font-size:11px}
@media(max-width:600px){
  .home[data-home-card] .room-name{max-width:calc(100% - 12px);width:auto;pointer-events:none}
  .mobile-room-editors{grid-template-columns:1fr;margin:14px 0;padding:12px}
  .room-editor-thumb{flex-basis:54px;width:54px;height:42px}
  .place-edit-heading{align-items:stretch;flex-direction:column}.place-edit-heading .danger{width:100%}.place-layer-tools{display:grid;grid-template-columns:1fr 1fr;margin-left:0}.place-layer-tools small{grid-column:1/-1}.place-layer-tools button{width:100%}
}

/* 사이트 하단 사업자·정책 정보 */
.site-footer{width:min(1500px,calc(100% - 72px));margin:52px auto 28px;padding:28px 0 20px;box-sizing:border-box;border-top:1px solid #e1ddd7;color:#8793a3;font-size:12px;line-height:1.75}
.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{text-decoration:underline;color:#4f5e70}
.site-business-info strong{display:block;margin-bottom:14px;color:#536174;font-size:13px}
.site-business-info p{margin:0}
.site-business-info i{display:inline-block;width:1px;height:10px;margin:0 8px;background:#cdd3db;vertical-align:-1px}
.site-business-info p>a:last-child{margin-left:7px;text-decoration:underline;text-underline-offset:2px}
.site-policy-links{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:27px;color:#536174}
.site-policy-links a:first-child{font-weight:800;color:#344154}
@media(max-width:700px){
  .site-footer{width:calc(100% - 32px);margin-top:34px;padding:22px 0 28px;font-size:10px}
  .site-business-info strong{margin-bottom:10px;font-size:12px}
  .site-business-info p{line-height:1.85}
  .site-policy-links{gap:8px 18px;margin-top:20px}
}
.maintenance-mode{min-height:100vh;background:linear-gradient(145deg,#f8f4ec,#e9f2ef)}
.maintenance-mode .site-footer,.maintenance-mode #image-picker{display:none!important}
.maintenance-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.maintenance-screen section{width:min(680px,100%);padding:48px 36px;border:1px solid #d8cbbd;border-radius:32px;background:#fff;text-align:center;box-shadow:0 24px 70px #4333241a}
.maintenance-screen section>span{display:block;font-size:58px}.maintenance-screen section>p:first-of-type{margin:18px 0 8px;color:#887565;font-size:13px;font-weight:900;letter-spacing:.12em}
.maintenance-screen h1{margin:0 0 18px;font-size:clamp(30px,6vw,52px)}.maintenance-screen p{line-height:1.7}.maintenance-screen small{display:block;margin:18px 0;color:#74675d}.maintenance-screen button{margin-top:12px}
.preview-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:6px 10px;border-radius:999px;background:#fff1bf;color:#6c4b00;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:inset 0 0 0 1px #e8c95d}
.preview-notice{padding:18px 20px;border:1px solid #e4c354;border-radius:19px;background:#fff8d9;color:#5d4211}.preview-notice b{font-size:20px}.preview-notice p{margin:7px 0 0;line-height:1.7}

/* 현재 장면 카드 가독성 */
.scene h3{line-height:1.45;margin:10px 0 12px;word-break:keep-all}
.scene p{line-height:1.75;margin:0 0 15px;word-break:keep-all}
.scene>b{display:block;line-height:1.55;margin-top:4px}
.view-aggression-action .field-warning{
  display:block;
  margin-top:8px;
  padding:10px 12px;
  border:1px solid #d59b55;
  border-radius:12px;
  background:#fff7e9;
  color:#7b431d;
  line-height:1.55;
}
.personality-extra{margin-top:24px}
.character-traits-pane{display:grid;gap:22px}
.traits-pane-heading{display:grid;gap:7px}.traits-pane-heading h2,.traits-pane-heading p{margin:0}
.traits-pane-heading p,.physical-appearance-settings>p,.physical-appearance-settings>small,.profile-attraction-settings>p,.profile-attraction-settings>small{color:var(--muted);line-height:1.6}
.physical-appearance-settings{display:grid;gap:14px;border:2px solid color-mix(in srgb,var(--p) 18%,var(--line));background:color-mix(in srgb,var(--p) 3%,var(--panel))}
.profile-attraction-settings{display:grid;gap:14px;margin-top:24px;padding:22px 0 0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.physical-appearance-settings>h2,.physical-appearance-settings>p,.profile-attraction-settings>h2,.profile-attraction-settings>p{margin:0}
.physical-appearance-settings .profile-tag-actions{background:var(--panel)}
.profile-attraction-settings .profile-tag-actions{background:#fbf8f3}
.physical-appearance-settings fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.physical-appearance-settings legend{padding:0 7px;font-weight:900}
.physical-appearance-settings fieldset .chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;border:0}
.physical-appearance-settings fieldset button.on{color:#fff;border-color:transparent;background:var(--grad)}
.body-option-group{margin:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.body-option-group>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:11px 14px;cursor:pointer;list-style:none}
.body-option-group>summary::-webkit-details-marker{display:none}
.body-option-group>summary>span{display:grid;gap:3px;min-width:0}.body-option-group>summary b{font-weight:900}.body-option-group>summary small{color:var(--muted)}
.body-option-group>summary>i{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);border-radius:50%;font-style:normal;font-size:20px;transition:transform .2s ease}
.body-option-group[open]>summary>i{transform:rotate(45deg)}
.physical-appearance-settings .body-option-group>.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:14px;border:0;border-top:1px solid var(--line)}
.physical-appearance-settings .body-option-group button.on{color:#fff;border-color:transparent;background:var(--grad)}
.representation-warning.compact{margin-top:2px}
.personality-type-choice{margin-bottom:20px;border-width:2px;background:color-mix(in srgb,var(--p) 5%,#fff)}
.personality-type-choice>div{gap:9px}
.character-trait-settings{display:grid;gap:14px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.character-trait-heading{display:grid;gap:7px}
.character-trait-settings h2,.character-trait-settings h3,.character-trait-settings p{margin:0}
.character-trait-heading p{color:var(--muted);line-height:1.6}
.character-trait-settings .personality-choice{margin:0}
.character-trait-settings label{display:grid;gap:7px}
.character-trait-settings textarea{width:100%;box-sizing:border-box;resize:vertical}
.character-trait-settings small{color:var(--muted);line-height:1.55}
.trait-note-field{margin-top:3px}
.trait-note-switch{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:10px!important;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.trait-note-switch input{width:20px!important;height:20px;min-height:0;margin:0}
.health-accessibility-settings{margin-top:26px;border:2px solid color-mix(in srgb,var(--p) 22%,var(--line));background:color-mix(in srgb,var(--p) 3%,#fff)}
.health-accessibility-settings>h2,.health-accessibility-settings>p{margin:0}
.representation-warning{padding:15px 17px;border:1px solid #d59b55;border-radius:16px;background:#fff8ec;color:#603b22}
.representation-warning b{display:block;margin-bottom:5px}
.representation-warning p{margin:0;line-height:1.65}
.health-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.health-field-grid label,.health-accessibility-settings>label{display:grid;gap:7px;color:var(--muted)}
.health-accessibility-settings fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.health-accessibility-settings legend{padding:0 7px;font-weight:900}
.health-accessibility-settings fieldset .chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;border:0}
.health-accessibility-settings fieldset button.on{color:#fff;border-color:transparent;background:var(--grad)}
.health-accessibility-settings textarea{width:100%;box-sizing:border-box;resize:vertical;border:1px solid var(--line);border-radius:15px;background:#f5f7fb;padding:13px;font:inherit}
.health-accessibility-settings>small{color:var(--muted);line-height:1.6}
@media(max-width:700px){.health-field-grid{grid-template-columns:1fr}.health-accessibility-settings,.physical-appearance-settings,.profile-attraction-settings{padding:14px}.representation-warning{padding:13px}}
.eye-color-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.eye-color-pair>label{min-width:0}
.physical-trait-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:15px;border:1px solid var(--line);border-radius:18px;background:#f8fafc}
.physical-trait-groups>div:first-child{grid-column:1/-1;display:grid;gap:4px}.physical-trait-groups h3{margin:0}.physical-trait-groups small{color:var(--muted);line-height:1.5}
.physical-appearance-settings .physical-trait-group{min-width:0}.physical-appearance-settings .physical-trait-group .chips{align-content:flex-start}
.personality-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.personality-detail-grid>.personality-choice{display:grid;align-content:start;gap:10px;min-width:0;margin:0;padding:14px;border:1px solid var(--line);border-radius:17px;background:#f8fafc}
.personality-detail-grid>.personality-choice>span{display:grid;gap:4px}.personality-detail-grid>.personality-choice b{color:var(--ink)}.personality-detail-grid>.personality-choice small{color:var(--muted);line-height:1.45}
.mobile-character-dashboard{display:none}
.mobile-character-editor-dialog,.mobile-character-reorder-dialog{width:min(680px,calc(100vw - 18px));max-height:calc(100dvh - 18px);padding:0;overflow:hidden;border:0;border-radius:26px;background:#f7f3ed;box-shadow:0 30px 100px #0b111abf}
.mobile-character-editor-dialog::backdrop,.mobile-character-reorder-dialog::backdrop{background:#080d14d9;backdrop-filter:blur(7px)}
.mobile-character-editor-dialog .mobile-character-editor-shell,.mobile-character-reorder-dialog form{max-height:calc(100dvh - 18px);padding:0;overflow:auto}
.mobile-editor-head{position:sticky;top:0;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#151d29,#263142);color:#fff;box-shadow:0 8px 24px #0a101b33}
.mobile-editor-head>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1px 10px;min-width:0}.mobile-editor-head .avatar,.mobile-editor-head .sprite{grid-row:1/3;width:48px;height:48px}.mobile-editor-head small{font-size:9px;letter-spacing:.12em;color:#ffffff9c}.mobile-editor-head b{overflow:hidden;font-size:18px;text-overflow:ellipsis;white-space:nowrap}
.mobile-editor-head>button{width:42px;height:42px;padding:0;border-color:#ffffff26;background:#ffffff12;color:#fff;font-size:24px}
.mobile-character-editor-body{padding:18px}.mobile-character-editor-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;padding:14px 18px max(18px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}.mobile-character-editor-actions .danger{grid-column:1/-1}
.mobile-character-reorder-dialog form>p{padding:0 18px}.mobile-character-reorder-dialog form>div:not(.mobile-editor-head){display:grid;gap:8px;padding:12px 18px}.mobile-character-reorder-dialog form>.primary{width:calc(100% - 36px);margin:8px 18px 18px}
.mobile-character-reorder-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff}.mobile-character-reorder-row .avatar,.mobile-character-reorder-row .sprite{width:48px;height:48px}.mobile-character-reorder-row>span{display:flex;gap:6px}.mobile-character-reorder-row button{width:42px;padding:0}
.character-view-fields{contain:layout style}
.character-view-fields label{content-visibility:auto;contain-intrinsic-size:110px}

/* 여러 집·생활 거점 */
.home-page>.title{align-items:flex-start;gap:18px}.home-page>.title h1,.home-page>.title p{margin:0}.home-page>.title p{margin-top:7px;color:var(--muted);line-height:1.55}
.home-top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.home-tabs button{display:grid;gap:3px;min-width:190px;text-align:left}.home-tabs button small{font-size:11px;color:inherit;opacity:.82}
.home-identity-editor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:10px;margin:14px 0;padding:15px;border:1px solid var(--line);border-radius:18px;background:#faf8f5}
.home-identity-editor label{display:grid;gap:6px;min-width:0}.home-identity-editor .danger{white-space:nowrap}
.resident-editor{display:grid;gap:13px}.resident-editor>.title h3,.resident-editor>.title small{margin:0}.resident-editor>.title small{display:block;margin-top:5px;color:var(--muted)}
.resident-editor>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.resident-setting{display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:17px;background:#fff}
.resident-setting>button{width:100%;justify-content:flex-start;text-align:left}.resident-setting>button span{display:grid;gap:2px}.resident-setting>button small{color:var(--muted)}
.resident-setting.on{border-color:color-mix(in srgb,var(--p) 45%,var(--line));background:color-mix(in srgb,var(--p) 4%,#fff)}
.residence-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:10px;border-top:1px solid var(--line)}
.residence-fields label,.residence-fields fieldset{display:grid;gap:5px;min-width:0;margin:0}.residence-fields input,.residence-fields select{width:100%;min-width:0}
.residence-fields fieldset{padding:9px;border:1px solid var(--line);border-radius:13px;background:#fff}.residence-fields legend{padding:0 5px;font-size:12px;font-weight:800}
.residence-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.resident-editor .residence-days button{display:grid;place-items:center;min-width:0;padding:7px 2px}
.residence-fields>[data-residence-primary]{align-self:end;justify-content:center}.residence-fields>[data-residence-primary].on{color:#fff;background:var(--grad);border-color:transparent}
.body-pane .health-accessibility-settings{margin-top:0}
@media(max-width:850px){.home-identity-editor{grid-template-columns:1fr 1fr}.home-identity-editor .danger{grid-column:1/-1}.resident-editor>div{grid-template-columns:1fr}}
@media(max-width:600px){.home-page>.title{display:grid}.home-top-actions{justify-content:stretch}.home-top-actions button{flex:1}.home-identity-editor,.residence-fields{grid-template-columns:1fr}.home-identity-editor .danger{grid-column:auto}.resident-setting{padding:8px}.residence-days{gap:2px}}

.native-app body{padding-top:env(safe-area-inset-top)}
#native-network-banner{
  position:sticky;
  top:0;
  z-index:10000;
  padding:12px 18px;
  background:#3b3029;
  color:#fff;
  text-align:center;
  font:600 14px/1.5 system-ui,sans-serif;
}

/* 첫 실행 안내와 방 단위 편집 */
.onboarding-dialog,.setup-coach-dialog,.room-image-dialog,.room-illustration-dialog,.room-editor-dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:26px;box-shadow:0 28px 90px #10182766}
.onboarding-dialog::backdrop,.setup-coach-dialog::backdrop,.room-image-dialog::backdrop,.room-illustration-dialog::backdrop,.room-editor-dialog::backdrop{background:#10182799;backdrop-filter:blur(3px)}
.onboarding-dialog form{display:grid;min-height:420px;padding:30px}.onboarding-dialog section{display:grid;align-content:center;gap:16px;text-align:center}.onboarding-dialog h1,.onboarding-dialog p{margin:0}.onboarding-dialog p{color:var(--muted);line-height:1.75}.onboarding-progress{display:flex;justify-content:center;gap:7px}.onboarding-progress i{width:26px;height:5px;border-radius:999px;background:#d8dce2}.onboarding-progress i.on{background:var(--p)}.onboarding-name{display:grid;gap:7px;text-align:left}.onboarding-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.onboarding-back{justify-self:start;margin-top:auto;padding:8px 10px}
.setup-coach-dialog form{display:grid;gap:13px;padding:26px}.setup-coach-dialog h2,.setup-coach-dialog p{margin:0}.setup-coach-dialog p{color:var(--muted);line-height:1.7}.setup-coach-dialog form>div{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.room-image-dialog form,.room-illustration-dialog form,.room-editor-dialog form{display:grid;gap:19px;padding:22px}.room-image-dialog .title h2,.room-image-dialog .title small,.room-editor-dialog .title h2,.room-editor-dialog .title small{margin:0}.room-image-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.room-image-choice button{display:grid;place-items:center;gap:7px;min-height:150px;padding:18px;font-size:28px}.room-image-choice b{font-size:16px}.room-image-choice small{color:var(--muted);font-size:11px}
.room-illustration-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.room-illustration-grid button{height:220px;padding:12px;background:center/cover no-repeat;display:flex;align-items:flex-end}.room-illustration-grid span{padding:7px 10px;border-radius:10px;background:#fffffff0}
.room-editor-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.room-editor-fields label{display:grid;gap:6px}.room-editor-photo{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:14px;text-align:left}.room-editor-photo span{display:grid;place-items:center;width:100px;height:72px;border-radius:12px;background:#e8ebee center/cover no-repeat;font-size:28px}.room-editor-furniture-wrap{margin-top:24px}.room-editor-furniture-wrap>p{margin-bottom:14px!important}.room-editor-furniture{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.room-editor-furniture button{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:1px 8px;min-width:0;min-height:58px;padding:9px 11px;text-align:left}.room-editor-furniture-icon{grid-row:1/3;display:grid;place-items:center;font-size:25px}.room-editor-furniture button b,.room-editor-furniture button small{min-width:0}.room-editor-furniture button small{color:var(--muted);font-size:9px}.room-editor-furniture button.on{border-color:var(--p);background:color-mix(in srgb,var(--p) 11%,#fff);color:var(--text)}.room-edit-target{cursor:pointer;outline:0}.room-edit-target:focus{box-shadow:inset 0 0 0 3px var(--p)}.room-edit-hint{position:absolute;right:8px;bottom:8px;z-index:7;padding:4px 7px;border-radius:8px;background:#18202fd9;color:#fff;font-size:10px}.room-empty-image{position:absolute;inset:50% auto auto 50%;z-index:8;transform:translate(-50%,-50%);display:grid;place-items:center;gap:2px;min-width:120px;padding:10px;background:#fffffff2}.room-empty-image span{font-size:24px;line-height:1}

/* 앱과 작은 화면의 정보 밀도 */
@media(max-width:600px){
  .room-editor-furniture{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-furniture-art{font-size:clamp(25px,8vw,40px)}
  header{padding:6px 8px!important;gap:5px!important}.brand{min-width:0!important;gap:7px!important}.logo{width:38px!important;height:38px!important}.brand h1{font-size:21px!important}.preview-badge{padding:4px 7px;font-size:9px}#save-state{font-size:10px!important}
  header nav{gap:5px!important;padding:3px 0!important}header nav button{min-height:36px!important;padding:6px 10px!important;border-radius:12px!important;font-size:14px!important;white-space:nowrap}
  main{padding:5px!important}.roster{gap:6px!important;padding:3px 1px 7px!important}.roster-card{min-width:142px!important;width:142px!important;gap:6px!important;padding:6px 7px!important;border-radius:14px!important}.roster-card .avatar{width:34px!important;height:34px!important}.roster-card .sprite{width:39px!important;height:39px!important}.roster-card>.roster-info b{font-size:14px!important}.roster-card>.roster-info small{max-width:86px!important;font-size:9px!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
  .world-hud{gap:6px!important;margin:0 0 6px!important}.world-hud>div{padding:6px 8px!important;border-radius:12px!important;font-size:10px!important;line-height:1.25}.world-hud small{font-size:8px!important}.world-hud b{font-size:12px!important}
  .sleep-gate{top:5px!important;width:calc(100% - 10px)!important;padding:7px 8px!important;background:#172033fa!important;backdrop-filter:none!important}.sleep-gate h2{font-size:13px!important}.sleep-gate button{padding:6px 8px!important;font-size:10px!important}
  .onboarding-dialog form{min-height:min(480px,calc(100dvh - 24px));padding:22px 18px}.onboarding-dialog h1{font-size:29px}.onboarding-actions,.room-image-choice,.room-editor-fields{grid-template-columns:1fr}.room-image-choice button{grid-template-columns:auto 1fr;justify-items:start;min-height:76px;font-size:24px}.room-image-choice button small{grid-column:2}.room-illustration-grid button{height:155px}.room-editor-dialog form{padding:16px}.room-editor-photo{grid-template-columns:82px minmax(0,1fr)}.room-editor-photo span{width:82px;height:62px}
  .room-empty-image{min-width:98px;padding:7px;font-size:11px}.room-empty-image span{font-size:19px}.room-edit-hint{font-size:8px;padding:3px 5px}
}

/* 설치형 모바일 앱 전용 게임형 홈과 화면 이동 */
.native-sub-header,.native-observe-home,.native-game-menu{display:none}
.tab-icon{display:none}
.town-map-scroll{min-width:0;overflow:auto;border-radius:27px;overscroll-behavior:contain}
.town-map-scroll>.world{width:100%;min-width:0;height:auto;aspect-ratio:1672/941}
.native-app body>header{display:none!important}
.native-app .site-footer{display:none!important}
.native-app .native-sub-header{
  position:sticky;
  top:0;
  z-index:90;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:60px;
  padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
  border-bottom:1px solid #ffffff2e;
  background:color-mix(in srgb,var(--p) 88%,#172033);
  color:#fff;
  box-shadow:0 8px 24px #1720332b;
}
.native-app .native-sub-header button{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border-color:#ffffff40;
  background:#ffffff18;
  color:#fff;
  font-size:34px;
  line-height:1;
}
.native-app .native-sub-header b{font-size:20px}
.native-app .native-sub-header span{font-size:11px;opacity:.72}
.native-app[data-active-tab="observe"] main{
  width:100%;
  max-width:none;
  min-height:calc(100dvh - env(safe-area-inset-top));
  margin:0;
  padding:0!important;
  overflow:hidden;
}
.native-app[data-active-tab="observe"] .standard-observe-view{display:none}
.native-app a[href*="tosspayments"]{display:none!important}
.native-app[data-active-tab="observe"] .native-observe-home{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto minmax(150px,1fr) auto auto auto;
  gap:10px;
  width:100%;
  min-height:calc(100dvh - env(safe-area-inset-top));
  padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
  overflow:hidden;
  color:#fff;
  background:#18202d;
}
.native-app .native-observe-backdrop,.native-app .native-observe-shade{position:absolute;inset:-24px;z-index:-2}
.native-app .native-observe-backdrop{
  background-position:center;
  background-size:cover;
  filter:blur(18px) saturate(.82);
  transform:scale(1.08);
}
.native-app .native-observe-shade{
  z-index:-1;
  background:linear-gradient(180deg,#101722a8 0%,#10172245 35%,#1017229c 70%,#101722f2 100%);
}
.native-app .native-observe-top{display:flex;align-items:center;justify-content:space-between;gap:12px;text-shadow:0 2px 8px #000}
.native-app .native-observe-top>span{display:grid}.native-app .native-observe-top b{font-size:22px}.native-app .native-observe-top small{opacity:.78}.native-app .native-observe-top time{font-weight:900}
.native-app .native-character-stage{
  position:relative;
  align-self:center;
  justify-self:center;
  display:grid;
  place-items:end center;
  width:min(38vw,156px);
  height:min(24dvh,194px);
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
  animation:native-character-float 3.2s ease-in-out infinite;
}
.native-app .native-character-stage .native-main-character{
  position:relative;
  z-index:2;
  width:100%!important;
  height:100%!important;
  border:0;
  border-radius:24px;
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 18px 12px #0008);
}
.native-app .native-character-stage .avatar.native-main-character{object-fit:cover;background:var(--native-own)}
.native-app .native-character-stage span.avatar.native-main-character{
  width:min(44vw,180px)!important;
  height:min(44vw,180px)!important;
  border:4px solid #ffffffd9;
  border-radius:50%;
  font-size:64px;
  box-shadow:0 18px 36px #0007,inset 0 1px 0 #ffffff55;
}
.native-app .native-character-stage i{
  position:absolute;
  left:12%;
  right:12%;
  bottom:-6px;
  height:24px;
  border-radius:50%;
  background:#05090e99;
  filter:blur(8px);
  animation:native-shadow-pulse 3.2s ease-in-out infinite;
}
@keyframes native-character-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-11px)}}
@keyframes native-shadow-pulse{0%,100%{opacity:.72;transform:scaleX(1)}50%{opacity:.38;transform:scaleX(.78)}}
.native-app .native-character-picker{
  display:flex;
  gap:7px;
  width:100%;
  overflow-x:auto;
  padding:3px 0;
  scrollbar-width:none;
}
.native-app .native-character-picker::-webkit-scrollbar{display:none}
.native-app .native-character-picker button{
  flex:0 0 58px;
  display:grid;
  place-items:center;
  gap:1px;
  min-width:58px;
  padding:4px;
  border-color:#ffffff30;
  background:#12192399;
  color:#fff;
  border-radius:16px;
}
.native-app .native-character-picker button.on{border-color:#fff;background:color-mix(in srgb,var(--native-own) 72%,#172033)}
.native-app .native-character-picker .avatar,.native-app .native-character-picker .sprite{width:38px;height:38px}
.native-app .native-character-picker small{max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.native-app .native-status-card,.native-app .native-log-card{
  border:1px solid #ffffff2e;
  border-radius:21px;
  background:#111822d6;
  box-shadow:0 16px 34px #0005;
  backdrop-filter:blur(12px);
}
.native-app .native-status-card{padding:14px 16px}
.native-app .native-status-card>small{color:#ffffffb5;font-weight:900;letter-spacing:.06em}
.native-app .native-status-card h1{margin:4px 0 6px;font-size:21px;line-height:1.35;word-break:keep-all}
.native-app .native-status-card p{display:-webkit-box;margin:0 0 8px;overflow:hidden;color:#ffffffdc;font-size:12px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.native-app .native-status-card b{font-size:11px;color:#fff}
.native-app .native-log-card{padding:12px 14px}
.native-app .native-log-card>div{display:flex;align-items:center;justify-content:space-between}
.native-app .native-log-card>div button{padding:5px 8px;border-color:#ffffff30;background:#ffffff12;color:#fff;font-size:10px}
.native-app .native-log-card ol{display:grid;gap:6px;max-height:118px;margin:9px 0 0;padding:0;overflow-y:auto;list-style:none}
.native-app .native-log-card li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:7px;padding-top:6px;border-top:1px solid #ffffff1f}
.native-app .native-log-card time{color:#ffffffa0;font-size:.94rem}.native-app .native-log-card li span{display:grid;min-width:0}.native-app .native-log-card li b{font-size:1.02rem;line-height:1.38}.native-app .native-log-card li small{overflow:hidden;color:#ffffffbd;font-size:.9rem;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
/* 관찰 화면은 사이트와 앱에서 같은 게임 HUD 구조를 쓴다. 메뉴 위치를
   화면 밖 fixed 버튼으로 흩뿌리지 않고 하나의 그리드가 직접 소유한다. */
.game-observe-hud{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template:"top top top" clamp(96px,12dvh,132px) "left stage right" minmax(250px,1fr) "moment moment moment" auto "dock dock dock" auto/clamp(82px,9vw,112px) minmax(0,1fr) clamp(82px,9vw,112px);
  gap:10px clamp(8px,1.5vw,18px);
  width:min(1320px,100%);
  min-height:min(790px,calc(100dvh - 150px));
  margin:0 auto;
  padding:24px 28px 18px;
  overflow:hidden;
  border:1px solid #ffffff45;
  border-radius:32px;
  background:#171d27;
  color:#fff;
  box-shadow:0 24px 68px #1017223d;
}
.game-observe-hud>.native-observe-backdrop,.game-observe-hud>.native-observe-shade{position:absolute;inset:0;z-index:-2}
.game-observe-hud>.native-observe-backdrop{background-position:center;background-size:cover;filter:saturate(.92);transform:none}
.game-observe-hud>.native-observe-shade{z-index:-1;background:linear-gradient(180deg,#0b11199c 0%,#0d131c38 32%,#0d131c7d 64%,#0b1119e8 100%)}
.game-hud-top{position:relative;grid-area:top;z-index:15;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-width:0;text-shadow:0 2px 9px #000}
.game-hud-top::before{content:"";position:absolute;z-index:-1;top:-24px;right:-28px;bottom:0;left:-28px;background:#654b3de8;clip-path:polygon(0 0,100% 0,100% 70%,52% 70%,48% 100%,0 100%)}
.game-hud-top>time{padding:12px 4px;color:#fff;font-size:clamp(20px,2.1vw,32px);font-weight:900;white-space:nowrap}
.game-hud-date{position:absolute;top:48px;right:4px;color:#ffffffd9;font-size:12px;font-weight:750;white-space:nowrap}
.relation-dialog .relation-stay-together{align-items:flex-start;gap:10px}.relation-dialog .relation-stay-together>span{display:grid;gap:3px}.relation-dialog .relation-stay-together small{color:var(--muted);line-height:1.45}
.game-hud-profile{position:relative;min-width:0}
.game-hud-profile>summary{list-style:none}
.game-hud-profile>summary::-webkit-details-marker{display:none}
.game-hud-profile-toggle{display:flex;align-items:center;gap:13px;min-width:0;padding:0;border:0;background:transparent;color:inherit;box-shadow:none;text-align:left}
.game-hud-profile-toggle :is(.avatar,.sprite){flex:0 0 auto;width:76px;height:76px;border:3px solid #ffffffe0;border-radius:50%;background:transparent;box-shadow:0 10px 24px #0007}
.game-hud-profile-toggle .game-hud-current-profile{object-fit:cover!important}
.game-hud-profile-toggle>span{display:grid;min-width:0}
.game-hud-profile-toggle b{overflow:hidden;color:#fff;font-size:clamp(24px,2.8vw,40px);line-height:1.05;text-overflow:ellipsis;white-space:nowrap}
.game-hud-profile-toggle small{margin-top:5px;color:#ffffffc4;font-size:clamp(13px,1.35vw,19px);font-weight:750}
.game-hud-roster-drawer{position:absolute;top:calc(100% + 8px);left:0;z-index:32;display:grid;gap:12px;width:min(520px,calc(100vw - 32px));max-height:min(58dvh,520px);padding:14px;overflow:auto;border:1px solid #ffffff4d;border-radius:20px;background:#151c27f2;color:#fff;box-shadow:0 20px 60px #0009;transform-origin:top left;animation:game-hud-roster-slide .18s ease-out both}
@keyframes game-hud-roster-slide{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.game-hud-roster-kicker{color:#ffffffb8;font-weight:850;letter-spacing:.02em}
.family-tree{padding:16px;border:1px solid #cfb98b;border-radius:16px;background:#f8ecd4}.family-tree-members{display:flex;flex-wrap:wrap;gap:8px}.family-tree-members>span{padding:8px 12px;background:#fffdf5;border:1px solid #ceb789;border-radius:12px}.family-tree p{border-left:2px solid #bc9c69;padding-left:12px;line-height:1.7}
.family-archive-editor{display:grid;gap:12px;margin-top:24px}.family-archive-editor label{display:grid;gap:6px;min-width:0}.family-archive-editor input,.family-archive-editor textarea{box-sizing:border-box;width:100%;min-width:0;padding:10px;border:1px solid #bfa780;border-radius:12px;background:#fffdf5;color:#493727;font:inherit}.family-heritage-item{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;margin:8px 0;border:1px solid #cab287;border-radius:14px}.family-heritage-item [data-h-label],.family-heritage-item [data-h-notes]{grid-column:1/-1}
.family-name-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.family-save-actions{display:flex;flex-wrap:wrap;gap:8px}
.family-workshop{width:min(92vw,640px);max-height:88dvh;padding:24px;border:2px solid #aa8d61;border-radius:24px;background:#fff8e9;color:#493727;overflow:auto}.family-workshop header{display:flex;align-items:center;justify-content:space-between;gap:12px}.family-workshop select{width:100%;min-width:0;min-height:44px;border:1px solid #bfa780;border-radius:12px;background:#fffdf5;color:#493727;padding:8px}.family-role-sentence{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;margin-top:18px}.family-role-sentence [data-role]{grid-column:1/-1}.family-blood{display:flex;align-items:center;gap:10px;margin:16px 0}.family-blood input{position:static;width:20px;height:20px;margin:0;accent-color:#805a38}.family-scene{padding:18px;background:#f2e5c9;border-radius:16px}.family-preview-note{font-size:13px;line-height:1.6}.family-expansion-art{display:grid;place-items:center;background:#eee0bc;border-radius:24px;font-size:80px;color:#846440;min-height:200px}.family-expansion-art span{font-size:52px}
.game-hud-town-jump{display:grid;gap:8px;padding-top:10px;border-top:1px solid #ffffff24}
.game-hud-town-jump select{width:100%;min-height:44px;padding:10px 36px 10px 14px;border:1px solid #a78e66;border-radius:14px;background:#fff8e8;color:#493727;font:inherit;font-weight:700;box-shadow:0 3px 0 #4c342533}
.official-blood-choice{display:flex!important;align-items:center;gap:10px;padding:12px 0}.official-blood-choice[hidden]{display:none!important}.official-blood-choice input{position:static!important;flex:0 0 20px;width:20px!important;height:20px!important;margin:0;accent-color:#785538}.official-blood-choice span{min-width:0}
.game-hud-roster-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:14px;max-height:52dvh;padding:4px;overflow:auto;scrollbar-width:thin}
.game-hud-roster-options button{display:grid;place-items:center;gap:7px;min-width:0;padding:5px 2px;border:0!important;border-radius:0!important;background:transparent!important;color:#fff;box-shadow:none!important}
.game-hud-roster-options button :is(.avatar,.sprite){width:66px;height:66px;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;object-fit:cover!important}
.game-hud-roster-options button small{max-width:76px;overflow:hidden;color:#fff;font-size:12px;font-weight:850;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 5px #000}
.game-hud-roster-options button.on :is(.avatar,.sprite){filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px var(--picker-theme,var(--p)))}
.game-hud-side{z-index:8;align-self:center;display:grid;align-content:center;gap:18px;min-width:0}
.game-hud-side-left{grid-area:left}.game-hud-side-right{grid-area:right}
.game-hud-side button{display:grid;place-items:center;gap:4px;min-width:0;padding:6px 2px;border:0!important;border-radius:0!important;background:transparent!important;color:#fff;text-shadow:0 2px 6px #000,0 1px 2px #000;box-shadow:none!important}
.game-hud-side button>span{display:grid;place-items:center;width:58px;height:58px;font-size:43px;line-height:1}
.game-hud-side button>small{font-size:14px;font-weight:900;line-height:1.15;white-space:nowrap}
.game-hud-stage{grid-area:stage;z-index:4;display:grid;place-items:center;min-width:0;min-height:0}
.game-observe-hud .native-character-stage{position:relative;display:grid;place-items:end center;width:min(34vw,320px);height:min(39vh,360px);overflow:visible;scale:var(--home-visual-scale,1)}
.game-observe-hud .native-character-stage .native-main-character{position:relative;z-index:2;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 18px 12px #0008)}
.game-observe-hud .native-character-stage>i{position:absolute;left:12%;right:12%;bottom:-4px;height:24px;border-radius:50%;background:#05090e88;filter:blur(8px)}
.game-hud-moment{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;grid-area:moment;z-index:12;justify-self:center;width:min(780px,calc(100% - 36px));padding:16px 20px;overflow:visible;border:1px solid #d9c6b6;border-radius:24px;background:linear-gradient(145deg,#fffaf3f5,#f2e7dcf1);color:#2f251f;box-shadow:0 15px 34px #0005}
.game-hud-moment-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.game-hud-moment-head>small{color:#77685d;font-weight:900;letter-spacing:.05em}
.game-hud-moment h1{margin:4px 0 5px;color:#2f251f;font-size:clamp(19px,2.2vw,28px);line-height:1.3}
.game-hud-moment p{margin:0 0 8px;color:#75675d;font-size:14px;line-height:1.55}
.game-hud-moment>b{color:#40352e;font-size:12px}
.game-hud-location{display:flex;align-items:center;gap:8px;min-width:0;color:#40352e;font-size:12px}
.game-hud-location img,.game-hud-location i{flex:0 0 auto;width:28px;height:28px;border:0;background:transparent;box-shadow:none;object-fit:contain;font-style:normal}
.game-hud-location i.is-moving{display:grid;place-items:center;animation:scene-moving-mark 1s steps(2,end) infinite}
.game-hud-location b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes scene-moving-mark{0%,100%{transform:translateX(-2px) translateY(1px)}50%{transform:translateX(3px) translateY(-2px)}}
.game-hud-dock{grid-area:dock;z-index:12;justify-self:center;display:grid;grid-template-columns:repeat(5,minmax(64px,108px));gap:8px;width:min(620px,100%);padding:9px 12px;border:0;border-radius:0;background:transparent;box-shadow:none}
.game-hud-dock button{display:grid;place-items:center;align-content:center;gap:3px;min-width:0;min-height:68px;padding:4px;border:0!important;border-radius:0!important;background:transparent!important;color:#fff;box-shadow:none!important;text-shadow:0 2px 6px #000,0 1px 2px #000}
.game-hud-dock button.on{color:#fff;filter:drop-shadow(0 0 8px var(--native-own))}
.game-hud-dock button>span{font-size:31px;line-height:1}.game-hud-dock button>small{font-size:11px;font-weight:900;white-space:nowrap}
.game-hud-dock :is(.game-hud-mailbox-button,.game-hud-town-button) img{object-fit:contain;filter:drop-shadow(0 3px 2px #0008)}
.game-hud-dock .game-hud-mailbox-button img{width:62px;height:66px}.game-hud-dock .game-hud-town-button img{width:72px;height:62px}
.game-observe-hud :is(.game-hud-profile-toggle,.game-hud-side button,.game-hud-dock button){appearance:none;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
.game-observe-hud :is(.game-hud-side button,.game-hud-dock button)>span{border:0!important;background:none!important;box-shadow:none!important}
.game-observe-empty-copy{grid-area:stage;z-index:4;align-self:center;justify-self:center;max-width:520px;padding:28px;border-radius:26px;background:#101722d9;text-align:center;box-shadow:0 18px 42px #0007}
.game-observe-empty-copy>span{font-size:54px}.game-observe-empty-copy h1{margin:10px 0 6px;color:#fff}.game-observe-empty-copy p{color:#ffffffc8}
.game-observe-empty .game-hud-top{display:none}

html.native-app[data-active-tab="observe"] .game-observe-hud{width:100%;height:100%;min-height:0;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden;border:0;border-radius:0;box-shadow:none;touch-action:pan-y}
html.native-app[data-active-tab="observe"] .game-observe-hud .native-character-stage{width:min(46vw,205px);height:min(31dvh,250px)}
html.native-app[data-active-tab="observe"] .game-observe-hud .native-character-stage.has-scene-companion,
html.native-app[data-active-tab="observe"] .game-observe-hud .native-character-stage.has-scene-lineup{width:min(62vw,270px);height:min(31dvh,250px)}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .game-observe-hud{grid-template:"top top top" clamp(82px,13dvh,104px) "left stage right" minmax(180px,1fr) "moment moment moment" auto "dock dock dock" auto/clamp(58px,17vw,70px) minmax(0,1fr) clamp(58px,17vw,70px);gap:5px 3px;min-height:calc(100dvh - 74px);padding:12px 8px 8px;border-radius:0}
  .game-hud-top::before{top:-12px;right:-8px;left:-8px;clip-path:polygon(0 0,100% 0,100% 68%,54% 68%,49% 100%,0 100%)}
  .game-hud-top>time{padding:8px 2px;font-size:20px}
  .game-hud-profile-toggle{gap:8px}.game-hud-profile-toggle :is(.avatar,.sprite){width:58px;height:58px}.game-hud-profile-toggle b{font-size:25px}.game-hud-profile-toggle small{font-size:12px}
  .game-hud-side{gap:12px}.game-hud-side button>span{width:46px;height:46px;font-size:35px}.game-hud-side button>small{font-size:10px}
  .game-observe-hud .native-character-stage{width:min(45vw,175px);height:min(25dvh,210px)}
  .game-hud-moment{width:calc(100% - 10px);padding:12px 14px;border-radius:20px}.game-hud-moment h1{font-size:18px}.game-hud-moment p{font-size:12px}
  .game-hud-dock{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;width:100%;padding:6px}.game-hud-dock button{min-height:58px}.game-hud-dock button>span{font-size:25px}.game-hud-dock button>small{font-size:9px}.game-hud-dock .game-hud-mailbox-button img{width:48px;height:52px}.game-hud-dock .game-hud-town-button img{width:58px;height:50px}
}
@media(max-width:380px),(max-height:720px){
  .game-observe-hud{grid-template-rows:78px minmax(150px,1fr) auto auto}
  .game-hud-profile-toggle :is(.avatar,.sprite){width:52px;height:52px}.game-hud-profile-toggle b{font-size:22px}
  .game-hud-side{gap:8px}.game-hud-side button>span{width:40px;height:40px;font-size:31px}
  .game-hud-moment p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .game-hud-dock button{min-height:52px}
}
.native-app .native-observe-empty{place-items:center;text-align:center}.native-app .native-observe-empty>div{padding:24px;border-radius:24px;background:#111822d6}.native-app .native-observe-empty span{font-size:48px}

/* 앱 안의 편집 화면은 작은 화면에서도 입력칸을 두 열로 유지한다. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .native-app main{padding:10px!important}
  .native-app .fields,
  .native-app .profile-license .fields,
  .native-app .health-field-grid,
  .native-app .character-view-fields,
  .native-app .relation-pair-fields,
  .native-app .place-config,
  .native-app .room-editor-fields,
  .native-app .home-identity-editor,
  .native-app .residence-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .native-app .fields label,.native-app .health-field-grid label,.native-app .character-view-fields label{min-width:0}
  .native-app input,.native-app select{min-width:0;min-height:48px;padding:9px 10px;font-size:13px}
  .native-app .town-tabs{position:sticky;top:60px;z-index:70;display:flex;flex-wrap:nowrap;overflow-x:auto;padding:8px 0;background:var(--bg)}
  .native-app .town-tabs button{flex:0 0 auto;padding:9px 11px}
  .native-app .town-edit{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important}
  .native-app .town-map-scroll{
    width:calc(100% + 20px);
    height:calc(100dvh - 138px);
    min-height:520px;
    margin-left:-10px;
    overflow:auto;
    border-radius:0;
    background:#d9e9df;
    touch-action:pan-x pan-y;
  }
  .native-app .town-map-scroll>.world{
    width:max(1200px,calc((100dvh - 138px) * 1.776));
    min-width:1200px;
    height:max(676px,calc(100dvh - 138px));
    aspect-ratio:auto;
  }
  .native-app .town-edit>.form{width:100%;min-width:0;margin-top:12px}
}

/* 모바일 웹은 기존의 넉넉한 메뉴 크기를 유지한다. */
@media(max-width:600px){
  html:not(.native-app) header{padding:9px!important;gap:10px!important}
  html:not(.native-app) .logo{width:50px!important;height:50px!important}
  html:not(.native-app) .brand h1{font-size:25px!important}
  html:not(.native-app) header nav{gap:8px!important;padding:5px 0!important}
  html:not(.native-app) header nav button{min-height:44px!important;padding:10px 14px!important;font-size:16px!important}
  html:not(.native-app) main{padding:8px!important}
  html:not(.native-app) .roster{gap:8px!important;padding:5px 3px 12px!important}
  html:not(.native-app) .roster-card{width:auto!important;min-width:210px!important;padding:9px 11px!important}
  html:not(.native-app) .roster-card .avatar{width:42px!important;height:42px!important}
  html:not(.native-app) .roster-card .sprite{width:48px!important;height:48px!important}
  html:not(.native-app) .roster-card>.roster-info b{font-size:16px!important}
  html:not(.native-app) .roster-card>.roster-info small{max-width:135px!important;font-size:11px!important}
  html:not(.native-app) .char-sort-row .char-row{min-height:86px;padding:10px 12px}
  html:not(.native-app) .char-row .avatar,html:not(.native-app) .char-row .sprite{width:56px;height:56px}
}

/* 모바일 홈: 장소 사진을 선명하게 두고 캐릭터만 또렷하게 떠오르게 한다. */
.native-app .native-observe-backdrop{
  inset:0;
  filter:none;
  transform:none;
  background-position:center;
  background-size:cover;
}
.native-app .native-observe-shade{
  inset:0;
  background:linear-gradient(180deg,#0d142052 0%,#0d142015 38%,#0d14206e 66%,#0d1420e8 100%);
}
.native-app .native-character-stage::before{
  display:none;
  content:none;
}

/* 새 모바일 마을 화면의 데스크톱 기본값 */
.mobile-town-shell{display:contents}
.mobile-town-hud,.mobile-town-tools,.mobile-town-switcher,.mobile-town-character-card,.mobile-town-sheet-head{display:none}

/* 모바일 하위 페이지도 홈과 같은 앱 카드 문법으로 정리 */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]):not([data-active-tab="relationship"]) body{
    background:linear-gradient(180deg,color-mix(in srgb,var(--p) 72%,#111a27) 0 150px,#f4efe8 360px);
  }
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]):not([data-active-tab="relationship"]) main{
    min-height:calc(100dvh - 60px);
    padding:12px 10px max(24px,env(safe-area-inset-bottom))!important;
    background:transparent;
  }
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]) main>.panel,
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]) .editor>.panel,
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]) .editor>.form{
    border-color:#ffffffb8;
    border-radius:24px;
    box-shadow:0 16px 36px #111a2726;
  }
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]):not([data-active-tab="catalog"]) button{
    min-height:44px;
    border-radius:14px;
  }
  .native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="character"]) .title h1{
    font-size:clamp(25px,8vw,34px);
  }
}

/* 모바일 마을: 세로 화면 전체를 지도에 쓰고 좌우로만 이동한다. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="town"],
  html.native-app[data-active-tab="town"] body{
    width:100%;
    height:100%;
    overflow:hidden!important;
    overscroll-behavior:none;
    background:#17212b;
  }
  .native-app[data-active-tab="town"] .native-sub-header{
    position:fixed;
    top:env(safe-area-inset-top);
    left:0;
    right:0;
    z-index:240;
    border:0;
    background:linear-gradient(180deg,#101722d9,#10172200);
    box-shadow:none;
  }
  .native-app[data-active-tab="town"] main{
    width:100vw;
    height:100dvh;
    min-height:0;
    padding:0!important;
    overflow:hidden!important;
  }
  .native-app[data-active-tab="town"] .native-sub-header{display:none!important}
  .native-app[data-active-tab="town"] .mobile-town-shell{
    position:fixed;
    inset:0;
    z-index:1;
    display:block;
    width:100vw;
    height:100dvh;
    overflow:hidden;
    background:#17212b;
  }
  .native-app[data-active-tab="town"] .town-tabs{display:none!important}
  .native-app[data-active-tab="town"] .town-edit{
    display:block!important;
    width:100vw;
    height:100dvh;
    margin:0;
    overflow:hidden!important;
  }
  .native-app[data-active-tab="town"] .town-map-scroll{
    position:absolute;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:0;
    margin:0;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:0;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scrollbar-width:none;
  }
  .native-app[data-active-tab="town"] .town-map-scroll::-webkit-scrollbar{display:none}
  .native-app[data-active-tab="town"] .town-map-scroll>.world{
    width:100vw;
    min-width:100vw;
    height:100dvh;
    min-height:100dvh;
    aspect-ratio:auto;
    touch-action:none;
  }
  .native-app[data-active-tab="town"] .town-map-scroll .world-bg{object-fit:cover}
  .native-app[data-active-tab="town"] .town-native-header{position:fixed;z-index:210;left:0;right:0;top:0;width:100%;height:78px;overflow:visible;color:#fff5dd;pointer-events:none}
  .native-app[data-active-tab="town"] .town-native-header::before{position:absolute;z-index:-2;content:"";left:-2px;right:-2px;top:0;height:78px;background:var(--home-ui-wood-top) center/cover no-repeat}
  .native-app[data-active-tab="town"] .town-native-header::after{position:absolute;z-index:-1;content:"";left:-2px;right:-2px;top:-11px;height:34px;background:var(--home-ui-wood-strip) center bottom/cover no-repeat}
  .native-app[data-active-tab="town"] .town-native-back{position:absolute;z-index:4;left:21px;top:44px;width:61px;height:61px;min-width:0;min-height:0;margin:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:auto}
  .native-app[data-active-tab="town"] .town-native-back img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #0004)}
  /* 관찰 화면의 캐릭터 이름을 기준으로 집·마을 제목의 글자 시작점과
     크기를 맞춘다. 앞쪽 아이콘 폭만큼 제목 묶음만 왼쪽에 둔다. */
  .native-app[data-active-tab="town"] .town-native-title{position:absolute;left:max(86px,calc(24.27vw - 40px));right:156px;top:calc(4.577dvh - 3px);display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:9px;height:31px;min-width:0;padding:0;border:0;background:transparent!important;box-shadow:none!important;text-align:left;pointer-events:auto}
  .native-app[data-active-tab="town"] .town-native-title>img{display:block;width:31px;height:31px;object-fit:contain;filter:drop-shadow(0 1px 1px #0005)}
  .native-app[data-active-tab="town"] .town-native-title>.town-native-name{align-self:center;overflow:hidden;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;font-family:var(--home-ui-font),sans-serif!important;font-size:clamp(18px,5.05vw,23px)!important;font-weight:400!important;line-height:25px!important;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 3px #0008}
  .native-app[data-active-tab="town"] .town-native-context{position:absolute;left:24.27vw;right:156px;top:44px;display:grid;gap:8px;justify-items:start;min-width:0;pointer-events:auto}
  .native-app[data-active-tab="town"] .town-native-community{display:block;width:100%;height:31px;min-width:0;padding:0;border:0;background:transparent!important;box-shadow:none!important;text-align:left}
  .native-app[data-active-tab="town"] .town-native-community>img{display:none}
  .native-app[data-active-tab="town"] .town-native-community>span{overflow:hidden;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;font-family:var(--home-ui-font),sans-serif!important;font-size:clamp(18px,5.05vw,23px)!important;font-weight:400!important;line-height:25px!important;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 3px #0008}
  .native-app[data-active-tab="town"] .town-native-town-pill{--town-pill-height:3.45dvh;--town-pill-cap:calc(var(--town-pill-height)*.484);display:grid;grid-template-columns:var(--town-pill-cap) minmax(0,auto) var(--town-pill-cap);align-items:stretch;width:max-content;max-width:46vw;height:var(--town-pill-height);max-height:34px;min-height:0;position:static;top:auto;left:auto;margin:0;padding:0;border:0;background:transparent!important;box-shadow:none!important}
  .native-app[data-active-tab="town"] .town-native-town-pill::before{content:"";background:var(--home-ui-pill-left) right center/auto 100% no-repeat}.native-app[data-active-tab="town"] .town-native-town-pill::after{content:"";background:var(--home-ui-pill-right) left center/auto 100% no-repeat}.native-app[data-active-tab="town"] .town-native-town-pill>span{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;margin:0 -1px;padding:0 1.2vw;overflow:hidden;background:var(--home-ui-pill-middle) center/100% 100% repeat-x;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:400 clamp(10px,3.3vw,15px)/1 var(--home-ui-font),sans-serif;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 1px #2a160d}
  .native-app[data-active-tab="town"] .town-native-status{position:absolute;right:9px;top:48px;display:block;max-width:146px;height:25px;overflow:hidden;background:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.55px #211710;paint-order:stroke fill;font-family:"KCCHanbit",var(--ui-font),sans-serif!important;font-size:12px!important;font-weight:400!important;line-height:25px!important;text-align:right;text-overflow:ellipsis;text-shadow:0 1px 1px #0008;white-space:nowrap;pointer-events:none}
  .native-app[data-active-tab="town"] .town-native-header>.town-native-menu{position:absolute;left:auto!important;right:5px;top:84px;display:grid;width:114px!important;gap:4px;pointer-events:auto}
  .native-app[data-active-tab="town"] .town-native-header .home-native-pill{--home-pill-height:40px;--home-pill-cap:calc(var(--home-pill-height)*.484);position:relative;display:grid;grid-template-columns:var(--home-pill-cap) minmax(0,1fr) var(--home-pill-cap);align-items:stretch;width:114px!important;height:var(--home-pill-height)!important;min-width:0!important;min-height:var(--home-pill-height)!important;margin:0;padding:0;overflow:visible;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:auto}
  .native-app[data-active-tab="town"] .town-native-header .home-native-pill::before{content:"";display:block;background:var(--home-ui-pill-left) right center/auto 100% no-repeat}
  .native-app[data-active-tab="town"] .town-native-header .home-native-pill::after{content:"";display:block;background:var(--home-ui-pill-right) left center/auto 100% no-repeat}
  .native-app[data-active-tab="town"] .town-native-header .home-native-pill>span{display:grid;place-items:center;min-width:0;margin:0 -1px;padding:0;background:var(--home-ui-pill-middle) center/100% 100% repeat-x!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:400 15px/1 var(--home-ui-font),sans-serif;white-space:nowrap;text-shadow:0 1px 1px #2a160d}
  .native-app[data-active-tab="town"] .town-native-header .home-native-pill,
  .native-app[data-active-tab="town"] .town-native-header .home-native-pill.on{outline:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
  .native-app[data-active-tab="town"] .mobile-town-hud{
    position:fixed;
    top:calc(env(safe-area-inset-top) + 64px);
    left:12px;
    right:12px;
    z-index:210;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    pointer-events:none;
  }
  .native-app[data-active-tab="town"] .mobile-town-hud>span{
    display:grid;
    min-width:0;
    padding:8px 12px;
    border:1px solid #ffffff35;
    border-radius:16px;
    background:#111923b8;
    color:#fff;
    box-shadow:0 9px 24px #0004;
    backdrop-filter:blur(9px);
  }
  .native-app[data-active-tab="town"] .mobile-town-hud small{color:#ffffffa8;font-size:9px}
  .native-app[data-active-tab="town"] .mobile-town-hud b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .native-app[data-active-tab="town"] .mobile-town-hud-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    pointer-events:auto;
  }
  .native-app[data-active-tab="town"] .mobile-town-hud button{
    min-height:44px;
    padding:9px 13px;
    border-color:#ffffff42;
    background:#111923d9;
    color:#fff;
    box-shadow:0 9px 24px #0004;
    pointer-events:auto;
  }
  .native-app[data-active-tab="town"] .mobile-town-hud button.on{background:var(--grad)}
  .native-app[data-active-tab="town"] .mobile-town-hold-guide{
    position:fixed;z-index:205;left:12px;top:calc(env(safe-area-inset-top) + 120px);max-width:min(74vw,320px);margin:0;padding:6px 10px;border-radius:12px;
    background:#111923a8;color:#fff;-webkit-text-fill-color:#fff;font-size:10px;line-height:1.3;box-shadow:0 6px 16px #0003;backdrop-filter:blur(6px);pointer-events:none
  }
  .native-app[data-active-tab="town"] .town-edit .place.is-hold-pending{filter:brightness(1.08) drop-shadow(0 0 6px #fff8)}
  .native-app[data-active-tab="town"] .mobile-town-tools{
    position:fixed;
    top:calc(env(safe-area-inset-top) + 122px);
    right:12px;
    z-index:215;
    display:grid;
    gap:7px;
  }
  .native-app[data-active-tab="town"] .mobile-town-tools button{
    min-height:40px;
    padding:8px 11px;
    border-color:#ffffff3b;
    background:#111923dd;
    color:#fff;
    box-shadow:0 8px 20px #0004;
  }
  .native-app[data-active-tab="town"] .mobile-town-switcher{
    position:fixed;
    left:50%;
    bottom:max(12px,env(safe-area-inset-bottom));
    z-index:205;
    display:flex;
    gap:6px;
    max-width:calc(100vw - 28px);
    padding:6px;
    overflow-x:auto;
    transform:translateX(-50%);
    border:1px solid #ffffff2e;
    border-radius:18px;
    background:#111923d6;
    box-shadow:0 10px 28px #0006;
    backdrop-filter:blur(10px);
    scrollbar-width:none;
  }
  .native-app[data-active-tab="town"] .mobile-town-switcher button{
    flex:0 0 auto;
    min-height:36px;
    padding:7px 11px;
    border-color:transparent;
    background:transparent;
    color:#ffffffbd;
    font-size:11px;
  }
  .native-app[data-active-tab="town"] .mobile-town-switcher button.on{background:#fff;color:#17212b}
  .native-app[data-active-tab="town"] .mobile-town-character-card{
    position:fixed;
    left:12px;
    right:12px;
    bottom:72px;
    z-index:200;
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:center;
    gap:9px;
    min-height:70px;
    padding:8px 11px;
    border:1px solid #ffffff35;
    border-radius:20px;
    background:#111923d8;
    color:#fff;
    text-align:left;
    box-shadow:0 12px 30px #0006;
    backdrop-filter:blur(10px);
  }
  .native-app[data-active-tab="town"] .mobile-town-character-card .avatar,
  .native-app[data-active-tab="town"] .mobile-town-character-card .sprite{width:48px;height:48px}
  .native-app[data-active-tab="town"] .mobile-town-character-card>span{display:grid;min-width:0}
  .native-app[data-active-tab="town"] .mobile-town-character-card small{color:#ffffff96;font-size:9px}
  .native-app[data-active-tab="town"] .mobile-town-character-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  .native-app[data-active-tab="town"] .mobile-town-character-card em{overflow:hidden;color:#ffffffb5;font-size:10px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
  .native-app[data-active-tab="town"] .mobile-town-shell:not(.buildings-editing):not(.decorations-editing) .town-map-scroll .place{touch-action:pan-x;cursor:default}
  .native-app[data-active-tab="town"] .mobile-town-shell:is(.buildings-editing,.decorations-editing) .town-map-scroll .place{
    cursor:grab;
    filter:drop-shadow(0 0 8px #fff);
  }
  .native-app[data-active-tab="town"] .map-art-button>.building-preset-image,
  .native-app[data-active-tab="town"] .map-art-button>.town-decoration-emoji{transform:scaleX(var(--place-flip,1))}
  .native-app[data-active-tab="town"] .town-decoration{width:52px;height:52px;min-height:52px;padding:3px;border:0;background:transparent;box-shadow:none}
  .native-app[data-active-tab="town"] .town-decoration-emoji{display:block;font-size:42px;line-height:1;filter:drop-shadow(0 3px 3px #0005)}
  .native-app[data-active-tab="town"] .mobile-town-shell:is(.buildings-editing,.decorations-editing) .town-map-scroll>.world::after{content:"";position:absolute;inset:0;z-index:2;background-image:linear-gradient(#5f748052 1px,transparent 1px),linear-gradient(90deg,#5f748052 1px,transparent 1px);background-size:4% 4%;pointer-events:none}
  .native-app[data-active-tab="town"] .mobile-town-shell:is(.town-editing,.buildings-editing,.decorations-editing) :is(.person,.town-traveler,.map-character,.mobile-town-character-card){display:none!important}
  .native-app[data-active-tab="town"] .mobile-town-shell.buildings-editing .town-map-scroll :is([data-place],[data-home-map]),
  .native-app[data-active-tab="town"] .mobile-town-shell.decorations-editing .town-map-scroll [data-town-decoration]{cursor:grab;filter:drop-shadow(0 0 5px #fff9)}
  .native-app[data-active-tab="town"] .mobile-town-shell.decorations-editing .town-map-scroll :is([data-place],[data-home-map],[data-town-decoration]){pointer-events:auto;cursor:grab;filter:drop-shadow(0 0 5px #fff9)}
  .native-app[data-active-tab="town"] .mobile-town-shell.buildings-editing .town-map-scroll [data-town-decoration]{pointer-events:none;filter:none}
  .native-app[data-active-tab="town"] .mobile-town-shell:is(.buildings-editing,.decorations-editing) .placement-selected{outline:3px dashed #fff!important;outline-offset:9px;filter:drop-shadow(0 0 10px #17212b)!important}
  .native-app[data-active-tab="town"] .mobile-town-shell:is(.buildings-editing,.decorations-editing) .map-place-label{color:#000}
  .native-app[data-active-tab="town"] .town-editor-panel{display:none!important}
  .native-app[data-active-tab="town"] .mobile-town-shell.sheet-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:220;
    background:transparent;
    pointer-events:none;
  }
  .native-app[data-active-tab="town"] .mobile-town-shell.sheet-open .town-editor-panel{
    position:fixed;
    left:14px;
    right:14px;
    bottom:0;
    z-index:230;
    display:block!important;
    width:auto;
    max-height:51dvh;
    margin:0;
    padding:18px 16px max(18px,env(safe-area-inset-bottom));
    overflow-y:auto;
    border:0;
    border-radius:22px 22px 0 0;
    background:#fffdf9d9;
    box-shadow:0 -12px 35px #34251a40;
    backdrop-filter:blur(6px);
    overscroll-behavior:contain;
  }
  html.native-app[data-active-tab="town"] body.is-building-size-preview .mobile-town-shell.sheet-open::after{background:transparent!important;backdrop-filter:none!important;pointer-events:none!important}
  html.native-app[data-active-tab="town"] body.is-building-size-preview .mobile-town-shell.sheet-open .town-editor-panel{overflow:visible!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important}
  html.native-app[data-active-tab="town"] body.is-building-size-preview .mobile-town-shell.sheet-open .town-editor-panel *{visibility:hidden!important}
  html.native-app[data-active-tab="town"] body.is-building-size-preview .mobile-town-shell.sheet-open .town-editor-panel label:has([data-place-field="imageScale"]),
  html.native-app[data-active-tab="town"] body.is-building-size-preview .mobile-town-shell.sheet-open .town-editor-panel label:has([data-place-field="imageScale"]) *{visibility:visible!important}
  html.native-app[data-active-tab="town"] body.is-building-size-preview .mobile-town-shell.sheet-open .town-editor-panel label:has([data-place-field="imageScale"]){position:fixed!important;z-index:260!important;left:50%!important;bottom:max(22px,env(safe-area-inset-bottom))!important;display:grid!important;gap:8px!important;width:min(86vw,360px)!important;padding:12px 16px!important;border:1px solid #ffffff99!important;border-radius:18px!important;background:#111923d9!important;color:#fff!important;transform:translateX(-50%)!important;box-shadow:0 12px 30px #0007!important;pointer-events:auto!important}
  html.native-app[data-active-tab="town"] body.is-building-size-preview label:has([data-place-field="imageScale"])::after{content:var(--live-building-scale,"100%")!important;position:absolute!important;right:16px!important;top:12px!important;color:#fff!important;font-size:12px!important;font-weight:800!important}
  .native-app[data-active-tab="town"] .mobile-town-sheet-head{
    position:sticky;top:-18px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-18px -16px 16px;padding:13px 16px 11px;border-bottom:1px solid #cbbda9;background:#fffdf9ed;backdrop-filter:blur(8px)
  }
  .native-app[data-active-tab="town"] .mobile-town-sheet-head>span{display:grid}
  .native-app[data-active-tab="town"] .mobile-town-sheet-head small{color:var(--muted);font-size:9px}
  .native-app[data-active-tab="town"] .mobile-town-sheet-head b{font-size:20px}
  .native-app[data-active-tab="town"] .mobile-town-sheet-head button{width:42px;height:42px;padding:0;font-size:25px}
  .native-app[data-active-tab="town"] .mobile-town-shell.world-panel .place-editor{display:none}
  .native-app[data-active-tab="town"] .mobile-town-shell.place-panel .town-general-editor{display:none}
  .native-app[data-active-tab="town"] .mobile-town-shell.place-panel .place-editor details:not(.mobile-selected){display:none}
  .native-app[data-active-tab="town"] .mobile-town-shell.place-panel .place-editor{margin:0}
  .native-app[data-active-tab="town"] .mobile-town-shell.place-panel .place-editor details.mobile-selected,
  .native-app[data-active-tab="town"] .mobile-town-shell.home-panel .place-editor details.mobile-selected{display:block!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .native-app[data-active-tab="town"] .mobile-town-shell.place-panel .place-editor details.mobile-selected>summary{display:none}
  .native-app[data-active-tab="town"] .town-general-editor{display:grid;gap:12px}
  .native-app[data-active-tab="town"] .town-general-editor>label{display:grid;gap:6px}
  .native-app[data-active-tab="town"] .town-building-editor-card{display:grid;gap:14px;color:#17120f;font-family:"KCCHanbit",sans-serif}
  .native-app[data-active-tab="town"] .town-building-editor-card :is(label,section){min-width:0}
  .native-app[data-active-tab="town"] .town-building-editor-card label,.native-app[data-active-tab="town"] .town-building-editor-card h4{display:grid;gap:7px;margin:0;color:#17120f;-webkit-text-fill-color:#17120f;font:700 16px/1 "KCCHanbit",sans-serif}
  .native-app[data-active-tab="town"] .town-building-editor-card :is(input,select,button,.audience-open-button,.town-stock-field summary){width:100%;min-width:0;min-height:44px;margin:0;padding:9px 12px;border:0;border-radius:11px;background:#fff;color:#17120f;-webkit-text-fill-color:#17120f;font:700 15px/1.15 "KCCHanbit",sans-serif;box-shadow:none}
  .native-app[data-active-tab="town"] .town-building-name input{font-size:16px}
  .native-app[data-active-tab="town"] .town-building-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;align-items:start}
  .native-app[data-active-tab="town"] .town-building-name,.native-app[data-active-tab="town"] .town-audience-field,.native-app[data-active-tab="town"] .town-stock-field{grid-column:1/-1}
  .native-app[data-active-tab="town"] .town-building-action>span{display:flex;gap:6px}.native-app[data-active-tab="town"] .town-building-action>span button:first-child{flex:1}.native-app[data-active-tab="town"] .town-building-action>span button:last-child{width:auto}
  .native-app[data-active-tab="town"] .town-home-editor-help{margin:0;color:#615449;font:400 14px/1.45 "KCCHanbit",sans-serif}
  .native-app[data-active-tab="town"] .town-open-home-details{background:#5c4234!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important}
  .native-app[data-active-tab="town"] .town-audience-field .audience-open-button{display:grid;gap:2px;text-align:left}.native-app[data-active-tab="town"] .town-audience-field .audience-open-button small{overflow:hidden;color:#62584c;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
  .native-app[data-active-tab="town"] .town-stock-field>details{position:relative}.native-app[data-active-tab="town"] .town-stock-field>details>summary{display:flex;align-items:center;list-style:none;cursor:pointer}.native-app[data-active-tab="town"] .town-stock-field>details>summary::-webkit-details-marker{display:none}
  .native-app[data-active-tab="town"] .town-stock-field .stock-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:230px;margin-top:8px;padding:8px;overflow-y:auto;border-radius:12px;background:#fffaf0}
  .native-app[data-active-tab="town"] .town-stock-field .stock-list button{min-height:50px;height:auto;font-size:13px;white-space:normal}.native-app[data-active-tab="town"] .town-stock-field .stock-list button.on{background:var(--p);color:#fff!important;-webkit-text-fill-color:#fff!important}
  .native-app[data-active-tab="town"] .town-building-advanced{border-top:1px solid #cbbda9;padding-top:10px}.native-app[data-active-tab="town"] .town-building-advanced>summary{min-height:42px;padding:10px 0;font:700 15px/1 "KCCHanbit",sans-serif;cursor:pointer}.native-app[data-active-tab="town"] .town-building-advanced>div{display:grid;gap:12px;padding-top:8px}
  .native-app[data-active-tab="town"] .town-building-delete{margin-top:2px!important;background:#7b2929!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  .native-app[data-active-tab="town"] .town-decoration-catalog{display:grid;gap:4px;margin:0;color:#fff5dd}
  .native-app[data-active-tab="town"] .town-decoration-theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
  .native-app[data-active-tab="town"] .town-decoration-collapse{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:2px solid #2a170f;border-radius:50%;background:#5c4234;color:#fff5dd;font-size:25px;line-height:1;box-shadow:0 2px 3px #0007;transition:transform .18s ease}
  .native-app[data-active-tab="town"] .town-decoration-theme-button{min-width:164px;min-height:32px;padding:5px 18px;border:3px double #2a170f;border-radius:999px;background:#5c4234;color:#fff5dd;-webkit-text-fill-color:#fff5dd;font:400 13px/1 "KCCHanbit",sans-serif;box-shadow:0 2px 3px #0007}
  .native-app[data-active-tab="town"] .town-decoration-catalog-body{display:grid;gap:5px;overflow:hidden;transition:max-height .18s ease,opacity .18s ease;max-height:150px;opacity:1}
  .native-app[data-active-tab="town"] .town-decoration-catalog.collapsed .town-decoration-catalog-body{max-height:0;opacity:0;pointer-events:none}.native-app[data-active-tab="town"] .town-decoration-catalog.collapsed .town-decoration-collapse{transform:rotate(180deg)}
  .native-app[data-active-tab="town"] .town-decoration-catalog-body>nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.native-app[data-active-tab="town"] .town-decoration-catalog-body>nav button{flex:0 0 auto;min-height:28px;padding:5px 10px;border:0;border-radius:999px;background:transparent;color:#17120f;-webkit-text-fill-color:#17120f;font-size:12px;box-shadow:none}.native-app[data-active-tab="town"] .town-decoration-catalog-body>nav button.on{background:#5c4234;color:#fff5dd;-webkit-text-fill-color:#fff5dd}
  .native-app[data-active-tab="town"] .town-decoration-results{display:flex;gap:8px;padding-bottom:3px;overflow-x:auto;scrollbar-width:thin}.native-app[data-active-tab="town"] .town-decoration-results button{flex:0 0 74px;display:grid;place-items:center;gap:2px;min-height:66px;padding:6px;border:0;border-radius:0;background:transparent;color:#fff5dd;-webkit-text-fill-color:#fff5dd;font-size:12px;box-shadow:none}.native-app[data-active-tab="town"] .town-decoration-results button[hidden]{display:none!important}.native-app[data-active-tab="town"] .town-decoration-results button>span{font-size:28px;filter:drop-shadow(0 2px 2px #0008)}.native-app[data-active-tab="town"] .town-decoration-results button>small{font-size:11px;-webkit-text-stroke:.45px #17110d;paint-order:stroke fill;text-shadow:0 1px 1px #0008}
  .native-app[data-active-tab="town"] .mobile-town-shell.decorations-panel .town-editor-panel{left:0;right:0;bottom:0;max-height:178px;padding:7px 14px max(8px,env(safe-area-inset-bottom));overflow:hidden;border-radius:0;background:#9a765d var(--home-ui-wood-top) center/cover no-repeat;box-shadow:0 -3px 8px #21150e8c;backdrop-filter:none}
  .native-app[data-active-tab="town"] .mobile-town-shell.decorations-panel .mobile-town-sheet-head{display:none}
  .native-app[data-active-tab="town"] .mobile-town-shell.decorations-panel .town-decoration-editor{padding-top:0}
  .native-app[data-active-tab="town"] .mobile-town-shell.decorations-panel .town-placement-toolbar{bottom:188px}
  .native-app[data-active-tab="town"] .town-switch-dialog{width:min(88vw,420px);max-height:72dvh;padding:0;overflow:hidden;border:1px solid #8a705e;border-radius:22px;background:#fffaf1;color:#241810;box-shadow:0 20px 60px #1d130d99}
  .native-app[data-active-tab="town"] .town-switch-dialog::backdrop{background:#1d130d99;backdrop-filter:blur(4px)}
  .native-app[data-active-tab="town"] .town-switch-dialog .town-switch-add{border-style:dashed;background:#fff8e8}.native-app[data-active-tab="town"] .town-switch-dialog .town-switch-add>i{display:grid;place-items:center;border-style:dashed;border-radius:50%;color:#5c4234;font-size:25px;font-style:normal}
  .native-app[data-active-tab="town"] .town-switch-dialog>form{display:grid;max-height:72dvh}.native-app[data-active-tab="town"] .town-switch-dialog header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border-bottom:1px solid #d6c8b8}.native-app[data-active-tab="town"] .town-switch-dialog header>span{display:flex!important;min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:2px}.native-app[data-active-tab="town"] .town-switch-dialog header small{display:block;font-size:9px;line-height:1;letter-spacing:.14em}.native-app[data-active-tab="town"] .town-switch-dialog header b{display:block;font-size:22px;line-height:1.15}.native-app[data-active-tab="town"] .town-switch-dialog header button{flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:50%;font-size:23px}.native-app[data-active-tab="town"] .town-switch-dialog form>div{display:grid;gap:8px;padding:12px;overflow:auto}.native-app[data-active-tab="town"] .town-switch-dialog form>div>button{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:62px;padding:9px 12px;border:1px solid #dacdbc;border-radius:14px;background:#fff;text-align:left}.native-app[data-active-tab="town"] .town-switch-dialog form>div>button>i{display:block;width:38px;height:38px;border:1px solid #8b7969;background:#f1efe9}.native-app[data-active-tab="town"] .town-switch-dialog form>div>button>span{display:flex!important;min-width:0;flex-direction:column;align-items:flex-start;gap:2px}.native-app[data-active-tab="town"] .town-switch-dialog form>div>button b{font-size:17px;line-height:1.1}.native-app[data-active-tab="town"] .town-switch-dialog form>div>button small{color:#716356;font-size:11px;line-height:1.1}.native-app[data-active-tab="town"] .town-switch-dialog form>div>button.on{border-color:#5c4234;background:#eee3d4}
  .native-app[data-active-tab="town"] .town-info-card{display:grid;gap:12px}.native-app[data-active-tab="town"] .town-info-card>img{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:14px}.native-app[data-active-tab="town"] .town-info-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.native-app[data-active-tab="town"] .town-info-card dl>div{display:grid;gap:3px;padding:10px;border-radius:12px;background:#fff}.native-app[data-active-tab="town"] .town-info-card dt{color:#76685c;font-size:11px}.native-app[data-active-tab="town"] .town-info-card dd{margin:0;font-size:15px;font-weight:700}.native-app[data-active-tab="town"] .town-info-card p{margin:0;padding:11px;border-radius:12px;background:#fff;line-height:1.5}.native-app[data-active-tab="town"] .town-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.native-app[data-active-tab="town"] .town-info-grid>label{display:grid;gap:5px}.native-app[data-active-tab="town"] .town-photo-actions{display:flex;gap:5px}.native-app[data-active-tab="town"] .town-photo-actions button:first-child{flex:1}
}

/* 마을 정보 SVG의 숲·지도 구성을 실제 편집 화면으로 사용한다. */
html[data-active-tab="town"] .town-information-screen{position:fixed!important;z-index:999!important;inset:0!important;display:block!important;width:100vw!important;height:100dvh!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;background:#756b4e!important;color:#18130f!important;font-family:"KCCHanbit",var(--ui-font),sans-serif!important;transform:none!important;overscroll-behavior:contain;isolation:isolate}
html[data-active-tab="town"] .mobile-town-shell.world-panel{z-index:300!important;overflow:visible!important}
html[data-active-tab="town"] .mobile-town-shell.world-panel .town-edit{overflow:visible!important}
html[data-active-tab="town"] .town-information-screen::before{position:fixed;z-index:-1;inset:0;content:"";background:linear-gradient(180deg,#fff0 0 90px,#eef2c566 190px,#f1e4bd73 100%);pointer-events:none}
html[data-active-tab="town"] .town-information-backdrop{position:fixed;z-index:-2;inset:-16px;display:block;width:calc(100% + 32px);height:calc(100% + 32px);object-fit:cover;object-position:center;filter:blur(12px) brightness(.86);pointer-events:none}
html[data-active-tab="town"] .town-information-head{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;width:min(100%,1100px);height:116px;margin:0 auto;padding:30px 27px 8px;border:0!important;background:transparent!important;box-shadow:none!important;box-sizing:border-box}
html[data-active-tab="town"] body #app main .town-information-screen .town-information-head{border:0!important;background:transparent!important;box-shadow:none!important}
html[data-active-tab="town"] .town-information-back{display:grid!important;place-items:center!important;width:66px!important;min-width:66px!important;height:66px!important;min-height:66px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important}
html[data-active-tab="town"] .town-information-back img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #0005)}
html[data-active-tab="town"] .town-information-head>b{max-width:65%;overflow:hidden;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2px #17110d;paint-order:stroke fill;font:400 clamp(26px,8vw,38px)/1 "KCCHanbit",sans-serif;text-align:right;text-overflow:ellipsis;text-shadow:0 3px 3px #0008;white-space:nowrap}
html[data-active-tab="town"] .town-information-content{position:relative;z-index:2;width:min(100%,1100px);margin:0 auto;padding:7px 25px max(34px,env(safe-area-inset-bottom));box-sizing:border-box}
html[data-active-tab="town"] .town-information-hero{position:relative!important;display:block!important;width:100%!important;height:249px!important;margin:0!important;padding:0!important;overflow:hidden!important;border:8px solid #fff!important;border-radius:31px!important;background:#eef0d5!important;box-shadow:0 8px 6px #33231361!important}
html[data-active-tab="town"] body #app main .town-information-screen .town-information-hero{border-color:#fff!important}
html[data-active-tab="town"] .town-information-hero>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 54%}
html[data-active-tab="town"] .town-information-hero>span{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:#201710b8;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:11px;opacity:0;transition:opacity .18s}
html[data-active-tab="town"] .town-information-hero:is(:hover,:focus-visible)>span{opacity:1}
html[data-active-tab="town"] .town-information-form{display:grid;gap:18px;margin-top:52px;padding:0 26px 30px}
html[data-active-tab="town"] .town-information-form label{display:grid;align-content:start;gap:7px;min-width:0;margin:0;color:#17120f!important;-webkit-text-fill-color:#17120f!important}
html[data-active-tab="town"] .town-information-form .town-information-browser{grid-template-columns:44px minmax(0,1fr);align-items:center;padding:9px 12px;border-radius:16px;background:#f8efd2c7;box-shadow:0 5px 12px #31221635}
html[data-active-tab="town"] .town-information-browser>img{display:block;width:40px;height:40px;object-fit:contain}.town-information-browser>select{font-size:18px!important}
html[data-active-tab="town"] .town-information-form label>b{color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.8px #17110d;paint-order:stroke fill;font:700 16px/1 "KCCHanbit",sans-serif;text-shadow:0 2px 1px #0006}
html[data-active-tab="town"] .town-information-form :is(input,select,textarea){width:100%!important;min-width:0!important;margin:0!important;border:0!important;border-radius:12px!important;background:#fff!important;color:#17120f!important;-webkit-text-fill-color:#17120f!important;font:700 15px/1.25 "KCCHanbit",sans-serif!important;box-shadow:0 4px 7px #2d211d40!important;color-scheme:light!important;box-sizing:border-box!important}
html[data-color-mode][data-active-tab="town"] body #app main .town-information-screen .town-information-form :is(input,select,textarea){border-color:transparent!important;background:#fff!important;color:#17120f!important;-webkit-text-fill-color:#17120f!important;color-scheme:light!important}
html[data-active-tab="town"] .town-information-form :is(input,select){height:43px!important;min-height:43px!important;padding:8px 12px!important}html[data-active-tab="town"] .town-information-form textarea{min-height:96px!important;padding:12px!important;resize:vertical}
html[data-active-tab="town"] .town-information-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px 42px}
html[data-active-tab="town"] .town-information-description{grid-column:1/-1}html[data-active-tab="town"] .town-information-save{justify-self:center;width:min(240px,100%)!important;min-height:46px!important;border:3px double #241810!important;border-radius:999px!important;background:#60483b!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:700 16px/1 "KCCHanbit",sans-serif!important;box-shadow:0 4px 6px #2d211d59!important}
html[data-active-tab="town"] .town-transport-field{display:grid;gap:10px;margin:0;padding:13px;border:1px solid #fff9;border-radius:16px;background:#f8efd2a8}html[data-active-tab="town"] .town-transport-field legend{padding:0 6px;color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:1.6px #17110d;paint-order:stroke fill;font-weight:800}html[data-active-tab="town"] .town-transport-field>div{display:flex;flex-wrap:wrap;gap:7px}html[data-active-tab="town"] .town-transport-field>div button{min-height:34px;padding:7px 10px;border:1px solid #8e7968;border-radius:999px;background:#fff;color:#33271f;font:700 12px var(--ui-font)}html[data-active-tab="town"] .town-transport-field>div button.on{border-color:#3c2a21;background:#684b39;color:#fff}html[data-active-tab="town"] .town-transport-field>label{grid-template-columns:22px minmax(0,1fr);align-items:center;padding-top:4px}html[data-active-tab="town"] .town-transport-field>label input{width:19px!important;height:19px!important;min-height:19px!important;padding:0!important}html[data-active-tab="town"] .town-transport-field>label span{display:grid;gap:2px}html[data-active-tab="town"] .town-transport-field>label span>b{font-size:14px}html[data-active-tab="town"] .town-transport-field>label small{color:#594b40;font-size:11px;line-height:1.35}
html[data-active-tab="town"] .town-climate-dlc-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:#49392fd9;color:#fff9e6;font-size:12px;line-height:1.45}html[data-active-tab="town"] .town-climate-dlc-note b{white-space:nowrap}
html[data-active-tab="town"] .town-illustration-dialog{z-index:1200;width:min(920px,calc(100vw - 24px));max-height:min(86dvh,820px);padding:0;overflow:hidden;border:1px solid #7b6555;border-radius:24px;background:#fffaf0;color:#2b211a;box-shadow:0 24px 80px #1a100bb3}html[data-active-tab="town"] .town-illustration-dialog::backdrop{background:#1d130da6;backdrop-filter:blur(4px)}html[data-active-tab="town"] .town-illustration-dialog>form{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:86dvh}html[data-active-tab="town"] .town-illustration-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #d8c8b7}html[data-active-tab="town"] .town-illustration-dialog header span{display:grid;gap:3px}html[data-active-tab="town"] .town-illustration-dialog header small{font-size:9px;letter-spacing:.14em}html[data-active-tab="town"] .town-illustration-dialog header b{font-size:23px}html[data-active-tab="town"] .town-illustration-dialog header p{margin:2px 0 0;color:#6b5a4d;font-size:12px;line-height:1.4}html[data-active-tab="town"] .town-illustration-dialog header button{flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:50%;font-size:22px}html[data-active-tab="town"] .town-illustration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:15px;overflow:auto}html[data-active-tab="town"] .town-illustration-card{display:grid;gap:6px;min-width:0;padding:8px;border:2px solid transparent;border-radius:17px;background:#f2e8d9;color:#30231b;text-align:left}html[data-active-tab="town"] .town-illustration-card.on{border-color:#684b39;background:#e3d1b9}html[data-active-tab="town"] .town-illustration-card>span{position:relative;display:grid;place-items:center;height:126px;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#c7d6b1,#ebd9b0)}html[data-active-tab="town"] .town-illustration-card img{width:100%;height:100%;object-fit:cover}html[data-active-tab="town"] .town-illustration-card i{font-size:40px;font-style:normal}html[data-active-tab="town"] .town-illustration-card em{position:absolute;top:7px;left:7px;padding:4px 7px;border-radius:999px;background:#60483b;color:#fff;font-size:9px;font-style:normal}html[data-active-tab="town"] .town-illustration-card>b{padding:0 3px;font-size:15px}html[data-active-tab="town"] .town-illustration-card>small{padding:0 3px;color:#746357;font-size:10px}html[data-active-tab="town"] .town-illustration-card.is-locked{opacity:.72}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html[data-active-tab="town"] .town-information-content{padding-right:25px;padding-left:25px}
  html[data-active-tab="town"] .town-information-grid{gap:18px 42px}
  html[data-active-tab="town"] .town-illustration-grid{grid-template-columns:1fr}html[data-active-tab="town"] .town-illustration-card>span{height:150px}
}

@media(min-width:721px){
  html[data-active-tab="town"] .town-information-head{height:126px;padding:28px 44px 10px}
  html[data-active-tab="town"] .town-information-head>b{font-size:40px}
  html[data-active-tab="town"] .town-information-content{display:grid;grid-template-columns:minmax(310px,.95fr) minmax(390px,1.05fr);align-items:start;gap:54px;padding:18px 5vw 50px}
  html[data-active-tab="town"] .town-information-hero{position:sticky!important;top:22px!important;height:min(58vw,560px)!important}
  html[data-active-tab="town"] .town-information-form{margin:0;padding:22px 26px 32px;border-radius:28px;background:#f8efd2b8;box-shadow:0 12px 32px #44351f33;backdrop-filter:blur(4px)}
  html[data-active-tab="town"] .town-information-form label>b{font-size:18px}
  body.is-building-size-preview .town-edit>aside.panel.form{background:transparent!important;border-color:transparent!important;box-shadow:none!important;pointer-events:none!important}
  body.is-building-size-preview .town-edit>aside.panel.form *{visibility:hidden!important}
  body.is-building-size-preview .town-edit>aside.panel.form label:has([data-place-field="imageScale"]),
  body.is-building-size-preview .town-edit>aside.panel.form label:has([data-place-field="imageScale"]) *{visibility:visible!important}
  body.is-building-size-preview .town-edit>aside.panel.form label:has([data-place-field="imageScale"]){position:fixed!important;z-index:260!important;left:50%!important;bottom:28px!important;display:grid!important;gap:8px!important;width:min(460px,80vw)!important;padding:14px 18px!important;border-radius:18px!important;background:#111923df!important;color:#fff!important;transform:translateX(-50%)!important;box-shadow:0 12px 30px #0007!important;pointer-events:auto!important}
}

.native-app .native-status-card p{
  display:block!important;
  overflow:visible!important;
  white-space:normal!important;
  -webkit-line-clamp:unset!important;
  line-clamp:unset!important;
}
.native-app[data-active-tab="observe"] .native-observe-home{overflow-x:hidden;overflow-y:auto}

/* 순환 관계 룰렛과 공식 관계 팝업 */
.official-relation-dialog{
  width:min(940px,calc(100vw - 20px));
  max-height:calc(100dvh - 20px);
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:26px;
  background:#fffdf9;
  box-shadow:0 30px 100px #0009;
}
.official-relation-dialog::backdrop{background:#09111bd4;backdrop-filter:blur(6px)}
.official-relation-dialog>form{display:grid;gap:14px;max-height:calc(100dvh - 20px);padding:20px;overflow:auto}
.official-relation-dialog .relationship-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;padding:0}
.official-relation-dialog-close{width:100%}

/* 방 크기에 따라 4칸 격자에 자동으로 맞추는 집 배치 */
.rooms{
  display:grid;
  grid-template-columns:repeat(var(--room-cols,4),minmax(0,1fr));
  grid-template-rows:repeat(var(--room-rows,3),minmax(88px,1fr));
  grid-auto-flow:dense;
  min-height:560px;
}
.rooms>.room{
  grid-column:var(--room-x,1)/span var(--room-w,1);
  grid-row:var(--room-y,1)/span var(--room-h,1);
  min-width:0;
  min-height:0;
}

/* PC 집 화면도 모바일 집처럼 세로형 평면도로 보여 준다. 방 개수와
   크기 가중치로 계산된 percentage layout을 그대로 써서 빈칸 없이
   자동 분할하고, 사용자가 올린 방 사진은 각 칸을 꽉 채운다. */
@media(min-width:721px){
  html:not(.native-app)[data-active-tab="home"] .home-grid{width:100%;max-width:920px}
  html:not(.native-app)[data-active-tab="home"] .home{padding:24px}
  html:not(.native-app)[data-active-tab="home"] .rooms,
  html:not(.native-app)[data-active-tab="home"] .rooms.has-extra{
    position:relative;
    display:block;
    width:min(100%,720px);
    min-width:0;
    min-height:900px;
    aspect-ratio:4/5;
    margin:18px auto 0;
    padding:5px;
    overflow:hidden;
    border-radius:28px;
    background:#5c4234;
    box-sizing:border-box;
  }
  html:not(.native-app)[data-active-tab="home"] .rooms>.room{
    position:absolute;
    left:calc(var(--mobile-room-x) + 5px);
    top:calc(var(--mobile-room-y) + 5px);
    width:calc(var(--mobile-room-w) - 10px);
    height:calc(var(--mobile-room-h) - 10px);
    min-width:0;
    min-height:0;
    margin:0;
    padding:12px;
    overflow:hidden;
    border:4px solid #5c4234;
    border-radius:18px;
    background-position:center,var(--room-floor-position,center top);
    background-size:100% 100%,var(--room-floor-size,260px);
    background-repeat:no-repeat,var(--room-floor-repeat,repeat);
    box-sizing:border-box;
  }
}
.relationship-exit-button{width:100%;margin-top:18px;background:var(--panel)}
.synced-avatar-fallback{display:inline-grid;place-items:center}
.room-heading{position:relative;z-index:9;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;pointer-events:none}
.room-heading>span{display:grid;justify-items:start;gap:1px;min-width:0}
.room-heading b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-heading .room-edit-hint{
  position:static;
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  color:#453d36;
  background:transparent;
  font-size:10px;
  font-weight:700;
  line-height:1.15;
  box-shadow:none;
}
.room-drag-handle,.room-resize-handle{
  position:relative;
  z-index:12;
  display:grid;
  place-items:center;
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  border-color:#ffffffa8;
  border-radius:12px;
  color:#fff;
  background:#172033c9;
  font-size:18px;
  touch-action:none;
  pointer-events:auto;
  cursor:grab;
}
.room-resize-handle{position:absolute;right:4px;bottom:4px;z-index:13;cursor:nwse-resize}
.home:not(.is-editing) :is(.room-drag-handle,.room-resize-handle,.room-edit-hint){display:none}
.home.is-editing .rooms:has(.room-dragging)::before{
  content:"";
  position:absolute;
  inset:2px;
  z-index:30;
  pointer-events:none;
  background-image:linear-gradient(to right,#ffffff2c 1px,transparent 1px),linear-gradient(to bottom,#ffffff2c 1px,transparent 1px);
  background-size:calc(100% / 12) calc(100% / 16);
}
.home.is-editing .rooms>.room{z-index:auto;box-shadow:none;filter:none}
.home.is-editing .rooms>.room.room-dragging{z-index:20}
.room-dragging{z-index:20;opacity:1;filter:none}
.room-drop-target{outline:none;filter:none;box-shadow:none}
.home-floor-tabs{display:flex;gap:8px;margin:10px 0;overflow-x:auto;scrollbar-width:thin}
.home-floor-tabs button{display:grid;min-width:82px;padding:9px 14px;border-radius:14px;font-weight:900}
.home-floor-tabs button small{font-size:10px;font-weight:600;color:var(--muted)}
.home-floor-tabs button.on{color:#fff;background:var(--grad);border-color:transparent}
.home-floor-tabs button.on small{color:#fff}
.empty-floor-room{position:absolute;inset:20%;display:grid;place-items:center;border:2px dashed var(--line);background:var(--panel);font-weight:900}
.home-feature-close,.home-feature-menu{display:none}

/* 취향 사전 이미지는 원본 비율과 투명 배경을 보존한다. */
.catalog-illustration-field{grid-column:1/-1}
.catalog-illustration-picker{
  display:grid;
  grid-template-columns:minmax(72px,120px) minmax(0,1fr);
  align-items:center;
  gap:2px 12px;
  min-height:104px;
  margin-top:7px;
  padding:10px;
  text-align:left;
}
.catalog-illustration-picker img{
  grid-row:1/3;
  width:100%;
  height:88px;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  filter:drop-shadow(0 7px 8px #20273538);
}
img.catalog-app-icon{object-fit:contain;border-radius:0;background:transparent;filter:drop-shadow(0 7px 8px #20273538)}
.catalog-illustration-picker small{color:var(--muted)}
.catalog-illustration-placeholder{grid-row:1/3;display:grid;place-items:center;width:100%;height:84px;font-size:32px}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app,html.native-app body{
    width:100%;
    max-width:100vw;
    margin:0;
    overflow-x:hidden;
  }
  html.native-app main,html.native-app .native-sub-header{
    width:100vw;
    max-width:100vw;
    box-sizing:border-box;
  }
  html.native-app[data-active-tab="character"] main{margin:0!important;padding:0!important;overflow-x:hidden!important}
  html.native-app[data-active-tab="character"] .character-editor{width:100vw!important;max-width:100vw!important;margin:0!important}
  html.native-app[data-active-tab="character"] .mobile-character-dashboard{width:100%;max-width:100vw;box-sizing:border-box}
  html.native-app[data-active-tab="character"] .mobile-character-strip{width:100%;max-width:100%;box-sizing:border-box}
  html.native-app[data-active-tab="character"] .mobile-character-editor-dialog{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    margin:auto;
  }

  .official-relation-dialog>form{padding:14px}
  .official-relation-dialog .relationship-card-grid{grid-template-columns:1fr}

  html.native-app[data-active-tab="home"] main{
    width:100vw;
    max-width:100vw;
    margin:0!important;
    padding:0 0 calc(74px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
  }
  html.native-app[data-active-tab="home"] .home-page,
  html.native-app[data-active-tab="home"] .home-grid,
  html.native-app[data-active-tab="home"] .home{
    width:100%;
    max-width:100vw;
    box-sizing:border-box;
  }
  html.native-app[data-active-tab="home"] .home-page>.title{padding:10px 10px 0}
  html.native-app[data-active-tab="home"] .home-tabs{padding-inline:8px}
  html.native-app[data-active-tab="home"] .home-grid{display:block}
  html.native-app[data-active-tab="home"] .home{
    margin:0;
    padding:10px 8px 80px;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  html.native-app[data-active-tab="home"] .rooms{
    width:100%;
    height:clamp(520px,calc(100dvh - 235px),760px);
    min-height:520px;
    padding:5px;
    gap:5px;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(var(--room-rows,3),minmax(0,1fr))!important;
    border-radius:20px;
    overflow:hidden;
  }
  html.native-app[data-active-tab="home"] .rooms>.room{padding:7px;border-width:3px;border-radius:14px}
  html.native-app[data-active-tab="home"] .room-heading b{font-size:clamp(11px,3.2vw,15px)}
  html.native-app[data-active-tab="home"] .room-heading .room-edit-hint{font-size:8px}
  html.native-app[data-active-tab="home"] :is(.room-drag-handle,.room-resize-handle){width:28px;min-width:28px;height:28px;min-height:28px;font-size:15px}
  html.native-app[data-active-tab="home"] .home-person{max-width:86%}
  html.native-app[data-active-tab="home"] .home-person .avatar,
  html.native-app[data-active-tab="home"] .home-person:not(.is-seated) .sprite{width:42px;height:42px}
  html.native-app[data-active-tab="home"] .home-person-status{max-width:108px;padding:5px 7px}
  html.native-app[data-active-tab="home"] .home-person small{font-size:8px}

  html.native-app[data-active-tab="home"] .home-feature-menu{
    position:fixed;
    left:7px;
    right:7px;
    bottom:max(7px,env(safe-area-inset-bottom));
    z-index:680;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    padding:6px;
    border:1px solid #ffffff35;
    border-radius:18px;
    background:#101923e8;
    box-shadow:0 12px 32px #0007;
    backdrop-filter:blur(12px);
  }
  html.native-app[data-active-tab="home"] .home-feature-menu button{
    min-width:0;
    min-height:47px;
    padding:5px 2px;
    border:0;
    color:#fff;
    background:transparent;
    font-size:8px;
    line-height:1.2;
    word-break:keep-all;
  }
}
/* Panel visibility is navigation state, not a phone-only layout preference. */
  html.native-app[data-active-tab="home"] .home-feature-panel{display:none!important}
  html.native-app[data-active-tab="home"] .home-feature-panel.open{
    position:fixed;
    inset:calc(env(safe-area-inset-top) + 66px) 7px calc(env(safe-area-inset-bottom) + 66px);
    z-index:700;
    display:block!important;
    margin:0;
    padding:18px 12px;
    overflow:auto;
    border:1px solid #ffffff8a;
    border-radius:24px;
    background:#fffdf9f7;
    color:#312b26;
    box-shadow:0 28px 80px #0009;
    backdrop-filter:blur(12px);
    overscroll-behavior:contain;
  }
  html.native-app[data-active-tab="home"] .home-feature-panel.open>.panel{padding:0;border:0;background:transparent;box-shadow:none}
  html.native-app[data-active-tab="home"] .home-feature-close{
    position:sticky;
    top:0;
    z-index:8;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin:0 0 8px auto;
    padding:0;
    border-radius:14px;
    font-size:24px;
  }

/* 모바일·태블릿 앱 셸: 바깥 문서는 기기 크기에 고정하고 각 화면만 내부에서 동작한다. */
/* House chooser is shared by phone and tablet layouts. */
  html.native-app[data-active-tab="home"] .home-native-switcher{position:absolute;z-index:12;left:91px;top:78px;display:grid;width:min(230px,calc(100vw - 105px));max-height:min(62dvh,530px);gap:5px;padding:12px;overflow:auto;border:1px solid #624735;border-radius:15px;background:#fffdf7ed;box-shadow:0 13px 35px #2a160d66;backdrop-filter:blur(7px);pointer-events:auto}
  html.native-app[data-active-tab="home"] .home-native-switcher[hidden]{display:none!important}
  html.native-app[data-active-tab="home"] .home-native-switcher-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}
  html.native-app[data-active-tab="home"] .home-native-switcher-row>[data-home-select]{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 7px;min-height:47px;padding:5px 8px;border:1px solid #aa927f;border-radius:11px;background:#fffaf1;color:#32241d;text-align:left;box-shadow:none}
  html.native-app[data-active-tab="home"] .home-native-switcher-row>[data-home-select]>span{grid-row:1/3;font-size:21px}.home-native-switcher-row>[data-home-select]>b{overflow-wrap:anywhere}.home-native-switcher-row>[data-home-select]>small{font-size:10px;color:#756357}
  html.native-app[data-active-tab="home"] .home-native-switcher-row>[data-home-select].on{border-color:var(--home-own);box-shadow:inset 0 0 0 1px var(--home-own)}
  html.native-app[data-active-tab="home"] .home-native-switcher-row>.home-native-empty-delete{align-self:stretch;width:58px!important;min-width:58px!important;min-height:47px!important;padding:4px!important;border-radius:11px!important;font-size:10px!important;line-height:1.2!important}
  html.native-app[data-active-tab="home"] .home-native-switcher .home-native-add-home{display:block;width:100%;min-height:38px;text-align:center}
@media(max-width:1200px),(orientation:portrait){
  html.native-app,
  html.native-app body{
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  html.native-app #app{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100dvh;
    min-width:0;
    min-height:0;
    overflow:hidden;
  }
  html.native-app .native-sub-header{
    position:relative;
    top:auto;
    flex:0 0 60px;
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  html.native-app main,
  html.native-app:not([data-active-tab="observe"]):not([data-active-tab="town"]) main{
    flex:1 1 auto;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box;
  }
  html.native-app main>*{min-width:0;box-sizing:border-box}
  html.native-app:not([data-active-tab="welcome"]):not([data-active-tab="observe"]):not([data-active-tab="town"]):not([data-active-tab="home"]):not([data-active-tab="character"]):not([data-active-tab="relationship"]) main>*{
    width:100%;
    height:100%;
    max-height:100%;
    overflow:auto;
    overscroll-behavior:contain;
  }

  /* 캐릭터: 100vw 중첩을 없애 오른쪽/왼쪽 어느 쪽도 잘리지 않는다. */
  html.native-app[data-active-tab="character"] main{padding:0!important}
  html.native-app[data-active-tab="character"] .character-editor,
  html.native-app[data-active-tab="character"] .character-editor>.form{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box;
  }
  html.native-app[data-active-tab="character"] .mobile-character-dashboard{
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;box-sizing:border-box
  }
  html.native-app[data-active-tab="character"] .character-editor>.form{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
  }
  html.native-app[data-active-tab="character"] .mobile-character-dashboard{
    grid-template-rows:auto auto auto minmax(0,1fr);
    align-content:start;
    gap:12px;
    padding:12px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  html.native-app[data-active-tab="character"] .mobile-character-top,
  html.native-app[data-active-tab="character"] .mobile-character-strip,
  html.native-app[data-active-tab="character"] .mobile-character-heading,
  html.native-app[data-active-tab="character"] .mobile-character-pane-grid{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  html.native-app[data-active-tab="character"] .mobile-character-heading{padding:12px}
  html.native-app[data-active-tab="character"] .mobile-character-heading .avatar,
  html.native-app[data-active-tab="character"] .mobile-character-heading .sprite{width:68px;height:68px}
  html.native-app[data-active-tab="character"] .mobile-character-pane-grid{gap:8px}
  html.native-app[data-active-tab="character"] .mobile-character-pane-grid button{min-width:0;min-height:54px;padding:9px 48px}
  html.native-app[data-active-tab="character"] .mobile-character-pane-grid button:first-child{min-height:54px}
  html.native-app[data-active-tab="character"] .mobile-character-editor-dialog{
    width:calc(100% - 12px)!important;
    max-width:calc(100% - 12px)!important;
  }

  /* 집: 첨부 UI의 412×917 좌표계를 유지하고 y=78 아래를 실제 집 장면으로 사용한다. */
  html.native-app[data-active-tab="home"] #app>main{padding:0!important;background:#c4c4c4!important}
  html.native-app[data-active-tab="home"] .home-page{
    position:relative;display:block;width:100%!important;height:100%!important;min-height:0;overflow:hidden;color:#30251e;background:#c4c4c4!important
  }
  html.native-app[data-active-tab="home"] .home-grid,
  html.native-app[data-active-tab="home"] .home{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box;
  }
  html.native-app[data-active-tab="home"] .home{
    position:relative;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html.native-app[data-active-tab="home"] .home>.title,
  html.native-app[data-active-tab="home"] .home-identity-editor,
  html.native-app[data-active-tab="home"] .home-photo-editor,
  html.native-app[data-active-tab="home"] .resident-editor,
  html.native-app[data-active-tab="home"] .sleep-room-editor,
  html.native-app[data-active-tab="home"] .clean{display:none!important}
  html.native-app[data-active-tab="home"] .home-native-hud{position:absolute;z-index:720;inset:0;overflow:visible;pointer-events:none;font-family:var(--home-ui-font),sans-serif}
  html.native-app[data-active-tab="home"] .home-native-header{position:absolute;z-index:20;left:0;right:auto;top:0;width:100%;min-width:100%;height:78px;overflow:visible;pointer-events:none}
  html.native-app[data-active-tab="home"] .home-native-header::before{position:absolute;z-index:-2;content:"";left:-2px;right:-2px;top:0;height:78px;background:var(--home-ui-wood-top) center/cover no-repeat}
  html.native-app[data-active-tab="home"] .home-native-header::after{position:absolute;z-index:-1;content:"";left:-2px;right:-2px;top:-11px;height:34px;background:var(--home-ui-wood-strip) center bottom/cover no-repeat}
  html.native-app[data-active-tab="home"] .home-native-back{position:absolute;z-index:30;left:21px;top:44px;width:61px;height:61px;min-width:0;min-height:0;margin:0;padding:0;border:0!important;border-radius:0!important;appearance:none!important;-webkit-appearance:none!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;pointer-events:auto}
  html.native-app[data-active-tab="home"] .home-native-back img{display:block;width:100%;height:100%;padding:0!important;border:0!important;border-radius:0!important;object-fit:contain;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 2px 2px #0004)}
html.native-app[data-active-tab="home"] .home-native-meta{position:absolute;left:max(86px,calc(24.27vw - 40px));right:12px;top:calc(4.577dvh - 3px);display:block;min-width:0;pointer-events:none}
  html.native-app[data-active-tab="home"] body #app .home-native-context{position:fixed;right:3.155vw;top:5.45dvh;bottom:auto;width:120px;overflow:hidden;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.55px #211710;paint-order:stroke fill;font-family:var(--home-ui-font),sans-serif!important;font-size:9px!important;font-weight:400!important;line-height:13px!important;text-align:right;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 #211710,1px 0 0 #211710,-1px 0 0 #211710,0 -1px 0 #211710,0 2px 2px #0008}
  html.native-app[data-active-tab="home"] .home-native-house-icon{position:relative;grid-row:2;display:grid;place-items:center;width:33px;height:35px;overflow:visible;background:transparent!important}
  html.native-app[data-active-tab="home"] .home-native-house-icon img{display:block;width:33px;height:33px;padding:0!important;border:0!important;border-radius:0!important;object-fit:contain;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 2px 2px #0007)}
  html.native-app[data-active-tab="home"] .home-native-house-name{position:relative;grid-row:2;align-self:end;display:flex;align-items:center;gap:9px;width:100%!important;min-width:0!important;height:31px!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden;border:0!important;border-radius:0!important;appearance:none!important;-webkit-appearance:none!important;background:none!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;font:400 clamp(18px,5.05vw,23px)/25px var(--home-ui-font),sans-serif;font-family:var(--home-ui-font),sans-serif!important;font-size:clamp(18px,5.05vw,23px)!important;line-height:25px!important;text-align:left;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 3px #0008;pointer-events:auto}
  html.native-app[data-active-tab="home"] .home-native-house-name>img{display:block;width:31px!important;height:31px!important;flex:0 0 31px;object-fit:contain!important;filter:drop-shadow(0 1px 1px #0005)}
  html.native-app[data-active-tab="home"] .home-native-house-name>span{min-width:0;overflow:hidden;color:inherit!important;-webkit-text-fill-color:inherit!important;font:inherit!important;text-overflow:ellipsis;white-space:nowrap}
  html.native-app[data-active-tab="home"] .home-native-house-name::before,html.native-app[data-active-tab="home"] .home-native-house-name::after{display:none!important;content:none!important}
  html.native-app[data-active-tab="home"] .home-native-header>.home-native-info-link{position:absolute;right:9px;top:46px;display:block;width:auto!important;min-width:0!important;height:25px!important;min-height:0!important;margin:0;padding:0;border:0!important;border-radius:0!important;appearance:none!important;-webkit-appearance:none!important;background:none!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.7px #211710;paint-order:stroke fill;font:400 12px/25px var(--home-ui-font),sans-serif;font-family:var(--home-ui-font),sans-serif!important;font-size:12px!important;line-height:25px!important;text-align:right;white-space:nowrap;text-shadow:0 1px 0 #211710,1px 0 0 #211710,-1px 0 0 #211710,0 -1px 0 #211710,0 2px 2px #0008;pointer-events:auto}
  html.native-app[data-active-tab="home"] .home-native-pill{--home-pill-height:36px;--home-pill-cap:calc(var(--home-pill-height)*.484);position:absolute;display:grid;grid-template-columns:var(--home-pill-cap) minmax(0,1fr) var(--home-pill-cap);align-items:stretch;width:96px!important;height:var(--home-pill-height)!important;min-width:0!important;min-height:var(--home-pill-height)!important;max-height:var(--home-pill-height)!important;margin:0;padding:0;overflow:visible;border:0!important;border-radius:0!important;appearance:none!important;-webkit-appearance:none!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent;pointer-events:auto}
  html.native-app[data-active-tab="home"] .home-native-pill::before{content:"";display:block;background:var(--home-ui-pill-left) right center/auto 100% no-repeat}
  html.native-app[data-active-tab="home"] .home-native-pill::after{content:"";display:block;background:var(--home-ui-pill-right) left center/auto 100% no-repeat}
  html.native-app[data-active-tab="home"] .home-native-pill>span{display:grid;place-items:center;min-width:0;overflow:visible;margin:0 -1px;padding:0 1px;background:var(--home-ui-pill-middle) center/100% 100% repeat-x!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:400 13px/1 var(--home-ui-font),sans-serif;white-space:nowrap;text-align:center;text-shadow:0 1px 1px #2a160d}
  html.native-app[data-active-tab="home"] .home-native-side{position:absolute;z-index:8;right:8px;top:85px;display:grid;gap:7px;width:88px;pointer-events:none}
  html.native-app[data-active-tab="home"] .home-native-side .home-native-pill{--home-pill-height:32px;--home-pill-cap:calc(var(--home-pill-height)*.484);position:relative;inset:auto;width:100%!important}
  html.native-app[data-active-tab="home"] .home-native-side .home-native-pill>span{font-size:12px;line-height:1.1;white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
  html.native-app[data-active-tab="home"] .home-native-side .home-native-pill.on{filter:brightness(1.08)}
html[lang="en"].native-app[data-active-tab="home"] .home-native-side .home-native-pill>span{font-size:10px;white-space:normal}
  html.native-app[data-active-tab="home"] .home-native-ui-toggle{--home-pill-height:32px;left:7px;bottom:max(21px,env(safe-area-inset-bottom));width:71px!important}
  html.native-app[data-active-tab="home"] .home-native-ui-toggle>span{font-size:9px}
  html[lang="en"].native-app[data-active-tab="home"] .home-native-ui-toggle{width:78px!important}
  html[lang="en"].native-app[data-active-tab="home"] .home-native-ui-toggle>span{font-size:7px}

  html.native-app[data-active-tab="home"] .home-native-elevator{position:absolute;z-index:9;right:7px;top:52%;display:grid;grid-template-rows:34px auto 34px;place-items:center;width:42px;overflow:hidden;border:2px solid #4d372a;border-radius:18px;background:#fff9eee8;box-shadow:0 5px 16px #0006;transform:translateY(-50%);pointer-events:auto}
  html.native-app[data-active-tab="home"] .home-native-elevator button{display:grid;width:100%;height:34px;min-width:0;min-height:0;margin:0;padding:0;place-items:center;border:0!important;border-radius:0!important;background:#664b3a!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:900 15px/1 sans-serif;box-shadow:none!important}
  html.native-app[data-active-tab="home"] .home-native-elevator button:disabled{opacity:.35}
  html.native-app[data-active-tab="home"] .home-native-elevator b{display:grid;width:100%;min-height:27px;place-items:center;color:#463126!important;-webkit-text-fill-color:#463126!important;font:400 10px/1 var(--home-ui-font),sans-serif;white-space:nowrap}
  html.native-app[data-active-tab="home"] .home-native-page.home-ui-hidden :is(.home-native-switcher,.home-native-side,.home-native-elevator,.home-native-edit-tools){opacity:0;visibility:hidden;pointer-events:none}
  html.native-app[data-active-tab="home"] .home-native-page.home-ui-hidden .home-native-ui-toggle{opacity:1;background-color:transparent!important;background-image:none!important;box-shadow:none!important}
  html.native-app[data-active-tab="home"] .rooms,
  html.native-app[data-active-tab="home"] .rooms.has-extra{
    position:absolute;
    left:0;right:0;top:78px;bottom:0;
    display:block!important;
    width:100%!important;
    height:calc(100% - 78px)!important;
    aspect-ratio:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    container-type:size;
    border-radius:0!important;
    background:#5c4234;
    box-sizing:border-box;
  }
  html.native-app[data-active-tab="home"] .rooms>.room{
    position:absolute!important;
    left:var(--mobile-room-x)!important;
    top:var(--mobile-room-y)!important;
    width:var(--mobile-room-w)!important;
    height:var(--mobile-room-h)!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:6px!important;
    overflow:visible!important;
    border:2px solid #5c4234!important;
    border-radius:13px!important;
    background-position:center,var(--room-floor-position,center top)!important;
    background-size:100% 100%,var(--room-floor-size,260px)!important;
    background-repeat:no-repeat,var(--room-floor-repeat,repeat)!important;
    box-shadow:none!important;
    filter:none!important;
    box-sizing:border-box;
    container-type:size;
  }
  html.native-app[data-active-tab="home"] .room-heading{max-width:calc(100% - 2px)}
  html.native-app[data-active-tab="home"] .room-heading>span{padding:3px 5px;border-radius:8px;background:transparent!important;color:#fff!important}
  html.native-app[data-active-tab="home"] .room-heading b,
  html.native-app[data-active-tab="home"] .room-heading.room-title-dark b{display:-webkit-box;max-width:100%;overflow:hidden;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:clamp(9px,3.2vw,14px);line-height:1.12;white-space:normal;text-overflow:clip;text-shadow:0 2px 6px #000,0 1px 2px #000!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  html.native-app[data-active-tab="home"] .room-heading .room-edit-hint{color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:7px;text-shadow:0 2px 6px #000,0 1px 2px #000!important}
  html.native-app[data-active-tab="home"] .room-people{left:4px;right:4px;bottom:4px;max-height:none}
  html.native-app[data-active-tab="home"] .home-person{max-width:min(92%,160px)}
  html.native-app[data-active-tab="home"] .home-person .avatar,
  html.native-app[data-active-tab="home"] .home-person:not(.is-seated) .sprite{width:38px;height:38px}
  html.native-app[data-active-tab="home"] .home-person-visual :is(.avatar,.sprite){padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important}
  html.native-app[data-active-tab="home"] .home-person-visual :is(span.avatar,span.sprite){color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.6px #211710;text-shadow:0 2px 4px #0008!important}
  html.native-app[data-active-tab="home"] .home-person-status{max-width:108px;padding:5px 7px;border-radius:11px;background:#fffdf3e8!important;box-shadow:0 3px 9px #0003!important;text-align:center}
  html.native-app[data-active-tab="home"] .home-person-status small{display:-webkit-box!important;max-width:96px;overflow:hidden;color:#554940!important;-webkit-text-fill-color:#554940!important;font-size:8px;line-height:1.25;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  html.native-app[data-active-tab="home"] .home-person-status b{color:#2f2924!important;-webkit-text-fill-color:#2f2924!important}
  html.native-app[data-active-tab="home"] button.room-furniture-item,
  html[data-color-mode].native-app[data-active-tab="home"] body #app main button.room-furniture-item{appearance:none!important;-webkit-appearance:none!important;border:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important}
  html.native-app[data-active-tab="home"] .room-furniture-art{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  html.native-app[data-active-tab="home"] .home-interaction-card{max-width:min(96%,176px)}
  html.native-app[data-active-tab="home"] .home-interaction-status{max-width:100px!important;padding:5px 7px!important}
  html.native-app[data-active-tab="home"] .room-pets{inset:0;display:block;max-width:none;transform:none;overflow:visible;pointer-events:none}
  html.native-app[data-active-tab="home"] .room-pet.home-pet-roaming{position:absolute;left:var(--pet-x);top:var(--pet-y);z-index:3;max-width:132px;pointer-events:auto;transform:translate(-50%,-50%);will-change:transform;animation:home-pet-roam var(--pet-roam-duration,14s) linear var(--pet-roam-delay,0s) infinite alternate both}
  html.native-app[data-active-tab="home"] .room-pet img,
  html.native-app[data-active-tab="home"] .room-pet-emoji{width:34px;height:34px;font-size:23px}
  html.native-app[data-active-tab="home"] .room-pet-status{min-width:54px;max-width:82px;padding:3px 5px!important}
  html.native-app[data-active-tab="home"] .room-pet-status small{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important}
  html.native-app[data-active-tab="home"] .home-feature-panel.open{
    z-index:760;inset:82px 8px max(48px,env(safe-area-inset-bottom));
  }
  html.native-app[data-active-tab="home"] .home-info-panel{font-size:12px}
  html.native-app[data-active-tab="home"] .home-info-panel .title h2{font-size:18px}
  html.native-app[data-active-tab="home"] .home-info-panel dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
  html.native-app[data-active-tab="home"] .home-info-panel dl>div{padding:10px;border-radius:12px;background:#f3ece3}
  html.native-app[data-active-tab="home"] .home-info-panel dt{font-size:9px;color:#79685a}.home-info-panel dd{margin:3px 0 0;font-size:11px;font-weight:900;overflow-wrap:anywhere}
  html.native-app[data-active-tab="home"] .home-info-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
  html.native-app[data-active-tab="home"] .car-card{width:100%;min-width:0;text-align:left;color:inherit}
  html.native-app[data-active-tab="home"] .car-card>span{display:grid;gap:3px;flex:1}
  html.native-app[data-active-tab="home"] .car-card em{color:var(--muted);font-size:9px;font-style:normal}

  /* 관찰 홈도 캐릭터별 글 길이 때문에 body가 늘어나지 않게 한다. */
  html.native-app[data-active-tab="observe"] main,
  html.native-app[data-active-tab="observe"] .native-observe-home{width:100%;height:100%;min-height:0;overflow:hidden!important}
  html.native-app[data-active-tab="observe"] .native-status-card{max-height:34dvh;overflow:auto;overscroll-behavior:contain}
}

.home-occupant-sheet,
.home-car-dialog{
  width:min(560px,calc(100vw - 16px));
  max-height:min(78dvh,680px);
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:25px;
  background:#fffdf9;
  color:#2f2924;
  box-shadow:0 28px 90px #0009;
}
.home-occupant-sheet::backdrop,
.home-car-dialog::backdrop{background:#08111bcc;backdrop-filter:blur(5px)}
.home-occupant-sheet form{display:grid;gap:15px;padding:8px 18px max(18px,env(safe-area-inset-bottom))}
.home-sheet-grip{width:58px!important;min-height:5px!important;height:5px!important;margin:3px auto 2px;padding:0!important;border:0!important;border-radius:99px!important;background:#c9c3bc!important}
.home-occupant-sheet-content{display:flex;align-items:center;gap:14px;min-width:0}
.home-occupant-visual{display:grid;place-items:center;flex:0 0 80px;width:80px;height:80px;border-radius:23px;background:#eef1f4}
.home-occupant-visual .avatar,.home-occupant-visual .sprite,.home-occupant-visual img{width:72px;height:72px;object-fit:contain}
.home-occupant-visual .room-pet-emoji{font-size:50px}
.home-occupant-sheet-content>span{display:grid;gap:4px;min-width:0}.home-occupant-sheet-content small{color:var(--muted)}.home-occupant-sheet-content h2,.home-occupant-sheet-content p{margin:0}.home-occupant-sheet-content b{font-size:17px}.home-occupant-sheet-content p{line-height:1.62}
.home-car-dialog form{display:grid;gap:14px;max-height:min(78dvh,680px);overflow:auto}
.home-car-preview{display:grid;place-items:center;min-height:150px;margin:0 18px;border-radius:20px;background:#eef1f4;font-size:64px}
.home-car-preview img{width:100%;height:210px;object-fit:cover;border-radius:20px}
.home-car-dialog .fields{padding:0 18px}.home-car-dialog .image-actions,.home-car-dialog .crop-actions{padding-inline:18px}.home-car-dialog .crop-actions{padding-bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .home-occupant-sheet,
  .home-car-dialog{
    position:fixed;
    inset:auto 6px max(6px,env(safe-area-inset-bottom));
    width:calc(100% - 12px);
    max-width:none;
    margin:0;
    border-radius:25px 25px 18px 18px;
  }
}

/* 캐릭터 공통 관리 도구 */
.character-main-tools{
  margin:0 0 18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--own) 8%,#fff),color-mix(in srgb,var(--own-secondary) 9%,#fff));
  overflow:hidden;
}
.character-main-tools>summary{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:2px 12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
}
.character-main-tools>summary::-webkit-details-marker{display:none}
.character-main-tools>summary>span{grid-row:1/3;display:grid;place-items:center}
.character-main-tools>summary .avatar,.character-main-tools>summary .sprite{width:48px;height:48px;object-fit:contain}
.character-main-tools>summary>b{font-size:17px}.character-main-tools>summary>small{color:var(--muted)}
.character-main-tools-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:16px;padding:0 16px 16px}
.character-main-media{display:flex;align-items:center;gap:13px;padding:13px;border-radius:17px;background:#ffffffb8}
.character-main-media>span{display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;border-radius:19px;background:#eef2f5}
.character-main-media .avatar,.character-main-media .sprite{width:70px;height:70px;object-fit:contain}
.character-main-media>div{display:grid;gap:8px;min-width:0}
.character-main-media .image-actions{display:flex;flex-wrap:wrap;gap:6px}
.character-main-colors{display:grid;gap:10px}
.character-theme-palette{display:grid;gap:7px}
.character-theme-palette>div{display:grid;grid-template-columns:repeat(10,24px);gap:6px}
.character-theme-palette .theme-swatch{width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;background:var(--swatch)!important;background-image:none!important;box-shadow:0 0 0 1px #8d8a86}
.theme-swatch.selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--swatch) 55%,#202630)}
.character-main-file-actions{display:grid;align-content:end;gap:8px}
.character-manage-pane{display:grid;gap:16px}
.character-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.character-manage-grid>section{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--own) 6%,#fff)}
.character-manage-grid>section>span{display:grid;place-items:center;flex:0 0 82px;width:82px;height:82px;border-radius:18px;background:#edf1f4;overflow:hidden}
.character-manage-grid>section>span img,.character-manage-grid>section>span .avatar,.character-manage-grid>section>span .sprite{width:100%;height:100%;object-fit:contain}
.character-manage-grid>section>div{display:grid;gap:7px}.character-manage-grid h3,.character-manage-grid p{margin:0}
.character-manage-theme,.character-manage-files{display:grid!important;align-content:start!important}
.character-manage-theme{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}
.theme-color-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.theme-color-group{display:grid;align-content:start;gap:9px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--own) 4%,var(--panel))}
.theme-color-group h4{margin:0}
.theme-color-group>*{min-width:0;max-width:100%;box-sizing:border-box}
.theme-custom-color{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;margin:0}
.theme-custom-color input[type="color"]{width:48px;height:38px;padding:2px;border-radius:10px}
.theme-custom-color input[type="text"]{width:100%;min-width:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.theme-gradient-toggle{display:flex!important;align-items:center;gap:9px;min-width:0}.theme-gradient-toggle input{flex:0 0 20px;width:20px;height:20px}.theme-gradient-toggle span{min-width:0}
.mailbox-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;width:100%;max-width:920px;min-width:0;margin:0 auto;padding:clamp(22px,4vw,48px);overflow-x:hidden}
.mailbox-heading{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.mailbox-heading>span{display:grid;place-items:center;width:76px;height:76px;border:0;background:transparent;font-size:34px}.mailbox-heading>span img{width:100%;height:100%;object-fit:contain}.mailbox-heading>div{flex:1;min-width:190px}.mailbox-heading h1,.mailbox-heading p{margin:2px 0}.mailbox-heading small{color:var(--muted);font-weight:900;letter-spacing:.12em}.mail-delete-all-button{margin-left:auto;border-color:#9c5b51;color:#873f37;background:color-mix(in srgb,#b35b50 8%,var(--panel))}
.character-mail-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px;border:1px solid color-mix(in srgb,var(--character-own) 38%,var(--line));border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--character-own) 10%,var(--panel)),var(--panel));box-shadow:0 14px 32px #17203314}.character-mail-card :is(.avatar,.sprite),.mailbox-empty-icon{width:72px;height:72px}.character-mail-card h2,.character-mail-card p{margin:3px 0}.character-mail-card small{color:var(--character-own);font-weight:900}.character-mail-card.is-empty{opacity:.8}.character-mail-card>button,.mail-card-actions{min-width:118px}.mail-card-actions{display:grid;gap:7px}.mail-card-actions button{width:100%}.mail-card-actions .mail-delete-button{border-color:#a96d64;color:#873f37;background:transparent}
.mailbox-home-call{box-sizing:border-box;display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:15px;width:100%;max-width:100%;min-width:0;padding:18px;border:1px solid color-mix(in srgb,var(--character-own) 28%,var(--line));border-radius:22px;background:color-mix(in srgb,var(--character-own) 6%,var(--panel))}.mailbox-home-call>img{width:74px;height:74px;object-fit:contain}.mailbox-home-call>span{min-width:0}.mailbox-home-call h2,.mailbox-home-call p{margin:3px 0;overflow-wrap:anywhere}.mailbox-home-call>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;min-width:0}.mailbox-home-call button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.mailbox-gift{box-sizing:border-box;display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:15px;width:100%;min-width:0;padding:18px;border:1px solid color-mix(in srgb,var(--character-own) 28%,var(--line));border-radius:22px;background:color-mix(in srgb,var(--character-own) 6%,var(--panel))}.mailbox-gift>img{width:74px;height:74px;object-fit:contain}.mailbox-gift>span{min-width:0}.mailbox-gift h2,.mailbox-gift p{margin:3px 0;overflow-wrap:anywhere}.mailbox-gift>.fields{grid-column:2/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:0;padding:0}.mailbox-gift>.primary{grid-column:3;min-width:120px}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){.mailbox-shell{padding:18px}.mailbox-heading>span{width:60px;height:60px}.mail-delete-all-button{width:100%;margin-left:0}.character-mail-card{grid-template-columns:auto minmax(0,1fr);padding:17px}.character-mail-card :is(.avatar,.sprite),.mailbox-empty-icon{width:56px;height:56px}.character-mail-card>button,.mail-card-actions{grid-column:1/-1;width:100%}.mail-card-actions{grid-template-columns:minmax(0,1fr) auto}.mail-card-actions .mail-delete-button{width:auto;min-width:72px}.mailbox-home-call,.mailbox-gift{grid-template-columns:60px minmax(0,1fr);padding:15px}.mailbox-home-call>img,.mailbox-gift>img{width:60px;height:60px}.mailbox-home-call>div{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%}.mailbox-home-call button{width:100%;min-width:0;padding:10px 7px}.mailbox-gift>.fields{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}.mailbox-gift>.primary{grid-column:1/-1;width:100%}}
.notification-update-option{display:flex!important;width:auto!important;min-width:0!important;align-items:flex-start!important;gap:10px!important;margin:12px 0;padding:11px 12px!important;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--p) 6%,#fff)}.notification-update-option input{flex:0 0 20px!important;width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;margin:0!important;padding:0!important}.notification-update-option span{display:grid;flex:1 1 auto;min-width:0;gap:3px}.notification-update-option b,.notification-update-option small{min-width:0;overflow-wrap:anywhere}.notification-update-option small{color:var(--muted)}
.routine-day-presets{display:flex!important;flex-wrap:wrap;gap:7px;margin-bottom:10px}.routine-day-presets button{min-height:36px;padding:7px 12px}
.routine-dialog{z-index:1000;max-width:calc(100vw - 18px);max-height:calc(100dvh - 18px);overflow:hidden}.routine-dialog form{max-height:calc(100dvh - 18px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.routine-dialog form>div:last-child{position:sticky;z-index:3;bottom:-26px;margin:4px -26px -26px;padding:12px 26px 18px;border-top:1px solid var(--line);background:var(--panel)}
.routine-day-picker{min-width:0;padding:12px}.routine-day-pills{display:grid;grid-template-columns:repeat(7,minmax(34px,1fr));gap:6px}.routine-day-pills label{display:block!important;min-width:0}.routine-day-pills input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none}.routine-day-pills span{display:grid;place-items:center;min-height:38px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-weight:800}.routine-day-pills input:checked+span{border-color:var(--p);background:color-mix(in srgb,var(--p) 16%,var(--panel));box-shadow:inset 0 0 0 1px var(--p)}
.routine-title-actions,.routine-view-tabs{display:flex;flex-wrap:wrap;gap:7px}.routine-view-tabs button{min-height:40px;padding:8px 14px}.routine-view-tabs button.on{border-color:var(--p);background:color-mix(in srgb,var(--p) 15%,var(--panel));font-weight:900}.monthly-heading{display:grid;grid-template-columns:42px minmax(0,1fr) auto 42px;align-items:center;gap:8px}.monthly-heading h2{margin:0;text-align:center}.monthly-heading button{min-width:42px;height:42px;padding:0}.monthly-heading .routine-month-today{width:auto;min-width:54px;padding:0 12px;border-radius:999px;background:var(--soft);font-weight:850}.monthly-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;min-width:0}.monthly-day{min-width:0;min-height:118px;padding:8px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.monthly-day.is-empty{opacity:.35}.monthly-day.is-today{border:3px solid #d6aa24;background:#fff8cf;box-shadow:0 0 0 2px #fff inset}.monthly-day.is-today>h3 b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d6aa24;color:#251a0b}.monthly-day>h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}.monthly-day>h3 small{font-size:10px}.monthly-day .routine-block{margin:5px 0;padding:7px}.monthly-day .routine-block small{display:none}.monthly-empty{font-size:10px;opacity:.65}.calendar-special{display:block;width:100%;margin:4px 0;padding:5px 6px;border:0;border-radius:8px;background:color-mix(in srgb,var(--p) 12%,var(--panel));color:var(--text);font-size:10px;font-weight:850;line-height:1.25;text-align:left}.calendar-special.birthday{background:#fff1c9}.calendar-special.anniversary{background:#f8e3e9}
.monthly-view{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-width:0;min-height:0;overflow:hidden}
.monthly-heading{position:relative;z-index:2;padding:2px 4px 6px;background:inherit}
.home-edit-toolbar{display:none}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  /* 편집 세부 도구는 기본 집 메뉴와 섞이지 않는 별도의 하단 도구막대다. */
  html.native-app[data-active-tab="home"] .home.is-editing{padding:0!important}
  html.native-app[data-active-tab="home"] .home-edit-toolbar.home-native-edit-tools{
    position:absolute;z-index:731;top:auto;right:auto;left:50%;bottom:max(65px,calc(env(safe-area-inset-bottom) + 50px));display:grid;grid-template-columns:repeat(4,82px);gap:4px;width:max-content;height:auto;padding:6px;border:1px solid #fff8e08c;border-radius:15px;background:#2d2119a6!important;box-shadow:0 8px 24px #0007;backdrop-filter:none;transform:translateX(-50%)
  }
  html.native-app[data-active-tab="home"] .home-edit-toolbar.home-native-edit-tools .home-native-pill{--home-pill-height:38px;position:relative;inset:auto;width:82px!important}
  html.native-app[data-active-tab="home"] .home-edit-toolbar.home-native-edit-tools .home-native-pill>span{padding-inline:2px;font-size:11px;line-height:1.05;white-space:normal;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important}
  html[lang="en"].native-app[data-active-tab="home"] .home-edit-toolbar.home-native-edit-tools .home-native-pill>span{font-size:9px}
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open .home-identity-editor,
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open.home-settings-panel{
    display:grid!important;
  }
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open.home-settings-panel{
    position:fixed;
    grid-template-rows:auto auto;
    align-content:start;
    gap:10px;
    padding:54px 12px 18px!important;
    overflow:auto!important;
  }
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open.home-settings-panel>.home-feature-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
  }
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open.home-settings-panel .home-identity-editor{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start;
    gap:9px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
  }
  html.native-app[data-active-tab="home"] .home-settings-panel .home-notes-field,
  html.native-app[data-active-tab="home"] .home-settings-panel .danger{grid-column:1/-1}
  html.native-app[data-active-tab="home"] .home-settings-panel .home-photo-editor{display:flex!important;margin:0}
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open.resident-editor,
  html.native-app[data-active-tab="home"] .home-edit-feature-panel.open.sleep-room-editor{
    display:grid!important;
    align-content:start;
    gap:12px;
  }
  /* Home journals own their scrolling content in home-editor-ui.css. */

  /* 캐릭터: 공통 파일·사진·테마 도구를 캐릭터 선택 화면 안에 배치 */
  html.native-app[data-active-tab="character"] .character-editor>.panel.form{
    display:flex!important;
    flex-direction:column;
    min-height:0;
  }
  html.native-app[data-active-tab="character"] .mobile-character-dashboard{order:1}
  html.native-app[data-active-tab="character"] .mobile-character-pane-grid button:first-child{grid-column:auto;min-height:54px}
  html.native-app[data-active-tab="character"] .character-manage-grid{grid-template-columns:1fr}
  html.native-app[data-active-tab="character"] [data-mobile-character-editor-dialog="manage"] .mobile-character-editor-body{background:linear-gradient(155deg,#0f1a28,#182637)!important;color:#fff!important}
  html.native-app[data-active-tab="character"] .character-manage-grid>section{background:#ffffff0b;border-color:#ffffff22;color:#fff}
  html.native-app[data-active-tab="character"] .character-manage-grid>section>span{background:#ffffff12}
  html.native-app[data-active-tab="character"] .character-manage-theme{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  html.native-app[data-active-tab="character"] .theme-color-groups{grid-template-columns:1fr}
  html.native-app[data-active-tab="character"] .theme-color-group{width:100%;padding:11px}
  html.native-app[data-active-tab="character"] .character-theme-palette>div{grid-template-columns:repeat(5,minmax(34px,1fr));gap:8px}
  html.native-app[data-active-tab="character"] .theme-custom-color{grid-template-columns:48px minmax(0,1fr)}
  html.native-app[data-active-tab="character"] .theme-custom-color input{color:#fff;background:#ffffff0d;border-color:#ffffff2a}
  html.native-app[data-active-tab="character"] .character-manage-pane .image-actions button,
  html.native-app[data-active-tab="character"] .character-manage-files button{border-color:#ffffff28;background:#ffffff12;color:#fff}
  html.native-app[data-active-tab="character"] .character-manage-files button.danger{color:#ffb7c7}
  html.native-app[data-active-tab="character"] .character-main-tools{
    order:2;
    width:calc(100% - 28px);
    margin:12px 14px 0;
    border-color:#ffffff20;
    background:#ffffff0b;
    color:#fff;
  }
  html.native-app[data-active-tab="character"] .character-main-tools>summary{padding:9px 12px}
  html.native-app[data-active-tab="character"] .character-main-tools>summary>small{color:#b8c3cf}
  html.native-app[data-active-tab="character"] .character-main-tools[open]>.character-main-tools-body{
    position:fixed;
    z-index:130;
    inset:max(8px,env(safe-area-inset-top)) 7px max(8px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:1fr;
    align-content:start;
    gap:12px;
    padding:58px 14px 18px;
    border:1px solid #ffffff2a;
    border-radius:25px;
    background:#101b29f7;
    color:#fff;
    overflow:auto;
    box-shadow:0 25px 80px #000a;
  }
  html.native-app[data-active-tab="character"] .character-main-tools[open]>.character-main-tools-body::before{
    content:"캐릭터 사진 · 아이콘 · 테마 · 파일";
    position:absolute;
    top:19px;
    left:20px;
    right:54px;
    font-size:17px;
    font-weight:800;
  }
  html.native-app[data-active-tab="character"] .character-main-tools[open]>summary{
    position:fixed;
    z-index:131;
    top:calc(max(8px,env(safe-area-inset-top)) + 10px);
    right:17px;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid #ffffff2b;
    border-radius:12px;
    background:#ffffff12;
    overflow:hidden;
  }
  html.native-app[data-active-tab="character"] .character-main-tools[open]>summary::after{content:"×";display:grid;place-items:center;width:100%;height:100%;font-size:25px}
  html.native-app[data-active-tab="character"] .character-main-tools[open]>summary>*{display:none}
  html.native-app[data-active-tab="character"] .character-main-media{background:#ffffff10}
  html.native-app[data-active-tab="character"] .character-main-colors{padding:12px;border-radius:17px;background:#ffffff0a}
  html.native-app[data-active-tab="character"] .character-theme-palette>div{grid-template-columns:repeat(10,minmax(20px,1fr))}
  html.native-app[data-active-tab="character"] .theme-swatch{width:100%!important;min-width:0!important;aspect-ratio:1;height:auto!important}
  html.native-app[data-active-tab="character"] .character-main-file-actions{grid-template-columns:1fr 1fr}
  html.native-app[data-active-tab="character"] .desktop-character-editor{order:3}

  /* 취향 사전·루틴·상점·설정도 홈과 같은 앱 화면으로 */
  html.native-app[data-active-tab="catalog"] main,
  html.native-app[data-active-tab="shop"] main,
  html.native-app[data-active-tab="settings"] main{
    padding:0!important;
    background:linear-gradient(155deg,#0e1927,#162334 62%,#0e1927);
    color:#fff;
    overflow:hidden!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-shell,
  html.native-app[data-active-tab="routine"] .routine-shell,
  html.native-app[data-active-tab="shop"] .shop-store,
  html.native-app[data-active-tab="settings"] .settings-shell{
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:14px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    box-shadow:none;
    overflow:auto;
    box-sizing:border-box;
  }
  html.native-app[data-active-tab="catalog"] .catalog-kind,
  html.native-app[data-active-tab="settings"] .setting-card,
  html.native-app[data-active-tab="settings"] .sync-panel,
  html.native-app[data-active-tab="settings"] .feedback-card,
  html.native-app[data-active-tab="shop"] .shop-cart,
  html.native-app[data-active-tab="shop"] .shop-coming{
    border-color:#ffffff1c;
    background:#ffffff0b;
    color:#fff;
  }
  html.native-app[data-active-tab="catalog"] .catalog-dex-card{
    border-color:#ffffff18;
    background:#ffffff0b;
    color:#fff;
  }
  html.native-app[data-active-tab="catalog"] .catalog-dex-card summary{min-height:112px;padding:9px}
  html.native-app[data-active-tab="catalog"] .catalog-app-icon{width:62px;height:62px}
  html.native-app[data-active-tab="catalog"] .catalog-detail{background:#f7f9fc;color:#2f2924}
  html.native-app[data-active-tab="catalog"] .catalog-dex-grid{gap:9px}

  html.native-app[data-active-tab="routine"] .routine-shell{
    --routine-paper:#efe3d4;--routine-brown:#624737;--routine-ink:#2d2019;
    position:relative;display:grid;grid-template-rows:auto auto auto minmax(320px,1fr);gap:10px;width:100%;height:100%;padding:14px 12px 12px;
    overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;background:linear-gradient(#ffffff14,#ffffff14),#c6c2bd!important;color:var(--routine-ink)!important;font-family:"KCCHanbit",var(--ui-font)!important
  }
  html.native-app[data-active-tab="routine"] main{padding:0!important;overflow:hidden!important;background:#c6c2bd!important;color:var(--routine-ink)!important}
  html.native-app[data-active-tab="routine"] .native-sub-header{display:none!important}
  html.native-app[data-active-tab="routine"] .routine-screen-head{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;min-height:62px}
  html.native-app[data-active-tab="routine"] .routine-back-button{width:58px;height:58px;padding:0;border:0;background:transparent url("./assets/home-ui/back.webp") center/contain no-repeat!important;box-shadow:none!important}
  html.native-app[data-active-tab="routine"] .routine-back-button img{display:none!important}
  html.native-app[data-active-tab="routine"] .routine-character-switcher{position:relative;z-index:10}
  html.native-app[data-active-tab="routine"] .routine-character-switcher>summary{list-style:none;min-width:138px;padding:10px 17px;border:2px solid #1d1510;border-radius:999px;background:var(--routine-brown);color:#fff0ca;font-size:17px;text-align:center;box-shadow:0 3px 0 #2b1d15}
  html.native-app[data-active-tab="routine"] .routine-character-switcher>summary::-webkit-details-marker{display:none}
  html.native-app[data-active-tab="routine"] .routine-character-switcher[open] .routine-toolbar{display:grid}
  html.native-app[data-active-tab="routine"] .routine-toolbar{position:absolute;top:calc(100% + 8px);right:0;display:none;grid-template-columns:repeat(3,minmax(72px,1fr));gap:7px;width:min(330px,88vw);margin:0;padding:10px;border:2px solid #2c1d16;border-radius:18px;background:#f9efe2f5;box-shadow:0 14px 35px #2e1f1a55}
  html.native-app[data-active-tab="routine"] .routine-toolbar button{display:grid;justify-items:center;gap:3px;min-width:0;min-height:74px;padding:6px;border:1px solid #7b604d;background:#fffaf2;color:#35261e}
  html.native-app[data-active-tab="routine"] .routine-toolbar .avatar,
  html.native-app[data-active-tab="routine"] .routine-toolbar .sprite{width:42px;height:42px}
  html.native-app[data-active-tab="routine"] .routine-toolbar button>span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  html.native-app[data-active-tab="routine"] .routine-toolbar button.on{outline:3px solid #ad835d;background:#ead5bc}
  html.native-app[data-active-tab="routine"] .routine-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:58px;padding:7px 10px;border:3px solid #34241b;border-radius:18px 18px 5px 5px;background:var(--routine-paper);box-shadow:0 4px 0 #5b4132}
  html.native-app[data-active-tab="routine"] .routine-title-row>span{display:flex;align-items:center;gap:8px;min-width:0}
  html.native-app[data-active-tab="routine"] .routine-title-row>span>img{width:48px;height:48px;object-fit:contain}
  html.native-app[data-active-tab="routine"] .routine-title-row h1{margin:0;font-size:27px;font-weight:400;white-space:nowrap}
  html.native-app[data-active-tab="routine"] .routine-title-actions{display:flex;gap:5px;min-width:0}
  html.native-app[data-active-tab="routine"] .routine-title-actions button{min-height:38px!important;padding:7px 11px!important;border:2px solid #261a13!important;border-radius:999px!important;background:#6a4b39!important;background-image:none!important;color:#fff0c9!important;-webkit-text-fill-color:#fff0c9!important;font-size:13px!important;white-space:nowrap!important;box-shadow:0 2px 0 #2d1f18!important}
  html.native-app[data-active-tab="routine"] .routine-view-tabs{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;gap:0;margin:0 12px -12px;z-index:2}
  html.native-app[data-active-tab="routine"] .routine-view-tabs button{min-height:38px;padding:5px 12px;border:2px solid #38271e;border-bottom:0;border-radius:13px 13px 0 0;background:#8c6a53;color:#fae9c4;font-size:16px}
  html.native-app[data-active-tab="routine"] .routine-view-tabs button.on{background:var(--routine-paper);color:#302119;transform:translateY(2px)}
  html.native-app[data-active-tab="routine"] .weekly-scroll{min-height:0;overflow:hidden;padding:0}
  html.native-app[data-active-tab="routine"] .weekly-table{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;min-width:0;width:100%;height:100%;padding:8px 7px 10px;
    overflow:hidden;border:3px solid #34241b;border-radius:7px 7px 18px 18px;background:var(--routine-paper)!important;box-shadow:0 5px 0 #5b4132
  }
  html.native-app[data-active-tab="routine"] .routine-day{
    position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;height:100%;padding:0 2px 4px;
    overflow:hidden;border:0;border-right:1px solid #755a48;border-radius:0;background:transparent;color:var(--routine-ink)
  }
  html.native-app[data-active-tab="routine"] .routine-day:last-child{border-right:0}
  html.native-app[data-active-tab="routine"] .routine-day h3{position:static;z-index:2;margin:0 -2px 4px;padding:7px 1px;border-bottom:2px solid #4d372a;background:#785844;color:#fff1ca;text-align:center;font-size:14px;font-weight:400}
  html.native-app[data-active-tab="routine"] .routine-day-items{min-height:0;overflow-y:auto;scrollbar-width:none}
  html.native-app[data-active-tab="routine"] .routine-day-empty{position:absolute;top:49%;left:50%;width:48px;translate:-50% -50%;color:#856f5f;font-size:8px;text-align:center}
  html.native-app[data-active-tab="routine"] .routine-day-add{align-self:end;width:100%;min-height:30px;padding:0;border:1px dashed #8c735f;border-radius:6px;background:#fff9ef;color:#624737;font-size:18px;line-height:1}
  html.native-app[data-active-tab="routine"] .routine-block{position:relative;display:block;margin:3px 0;padding:0;border:1px solid #715342;border-left:3px solid #9e4230;border-radius:6px;background:#fffaf2;color:#38271f;box-shadow:0 2px 0 #7b60452e}
  html.native-app[data-active-tab="routine"] .routine-block-main{display:grid;gap:1px;width:100%;min-width:0;padding:5px 2px 7px;border:0!important;background:transparent!important;color:inherit!important;text-align:left;box-shadow:none!important}
  html.native-app[data-active-tab="routine"] .routine-block b{font-size:8px;letter-spacing:-.04em}
  html.native-app[data-active-tab="routine"] .routine-block strong{overflow:hidden;font-size:10px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  html.native-app[data-active-tab="routine"] .routine-block small{display:none}
  html.native-app[data-active-tab="routine"] .routine-block-delete{position:absolute;top:-5px;right:-4px;width:17px;height:17px;min-height:0;padding:0;border:1px solid #4a201a!important;border-radius:50%;background:#a82a1c!important;color:#fff!important;font:13px/1 sans-serif!important;box-shadow:none!important}
  html.native-app[data-active-tab="routine"] .monthly-view{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;padding:8px;border:3px solid #34241b;border-radius:7px 7px 18px 18px;background:var(--routine-paper);box-shadow:0 5px 0 #5b4132}
  html.native-app[data-active-tab="routine"] .monthly-heading{display:flex;align-items:center;justify-content:center;gap:15px;min-height:44px;color:var(--routine-ink);background:transparent}
  html.native-app[data-active-tab="routine"] .monthly-heading h2{margin:0;font-size:21px;font-weight:400}
  html.native-app[data-active-tab="routine"] .monthly-heading button:not(.routine-month-today){width:34px;height:34px;padding:0;border:0;background:transparent url("./assets/home-ui/back.webp") center/contain no-repeat;box-shadow:none}
  html.native-app[data-active-tab="routine"] .monthly-heading .routine-month-today{width:auto;height:32px;padding:0 13px;border:1px solid #b4976f;border-radius:999px;background:#fff7e7;color:var(--routine-ink);font-size:13px;font-weight:700;box-shadow:0 2px 0 #9b7d55}
  html.native-app[data-active-tab="routine"] .monthly-heading button:last-child{transform:scaleX(-1)}
  html.native-app[data-active-tab="routine"] .monthly-heading img{width:100%;height:100%;object-fit:contain}
  html.native-app[data-active-tab="routine"] .monthly-weekdays{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #6e5442;background:#785844;color:#fff1ca;text-align:center}
  html.native-app[data-active-tab="routine"] .monthly-weekdays b{padding:5px 0;border-right:1px solid #bea88e;font-size:11px;font-weight:400}
  html.native-app[data-active-tab="routine"] .monthly-calendar{display:grid;grid-template-columns:repeat(7,1fr);height:100%;min-height:0;overflow:auto;grid-auto-rows:minmax(72px,1fr);border-left:1px solid #6e5442;border-top:1px solid #6e5442}
  html.native-app[data-active-tab="routine"] .monthly-day{min-width:0;min-height:72px;padding:3px;overflow:hidden;border:0;border-right:1px solid #6e5442;border-bottom:1px solid #6e5442;border-radius:0;background:#fffaf1;color:var(--routine-ink)}
  html.native-app[data-active-tab="routine"] .monthly-day.is-empty{background:#e0d0bd}
  html.native-app[data-active-tab="routine"] .monthly-day>h3{display:flex;justify-content:space-between;margin:0 0 3px;font-size:10px}
  html.native-app[data-active-tab="routine"] .monthly-day>h3 small{display:none}
  html.native-app[data-active-tab="routine"] .monthly-empty{display:none}
  html.native-app[data-active-tab="routine"] .calendar-special{display:block;width:100%;min-height:0;margin:1px 0;padding:2px;border:0;border-radius:3px;background:#f2c9a6;color:#4b2419;font-size:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .routine-sheet-backdrop{
    position:fixed;z-index:2200;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0;background:#111a;opacity:0;
    transition:opacity .24s ease;overscroll-behavior:contain
  }
  .routine-sheet-backdrop.is-open{opacity:1}
  .routine-sheet-backdrop.is-closing{opacity:0;pointer-events:none}
  .routine-bottom-sheet{
    position:relative;width:min(100%,560px);max-height:min(91dvh,820px);padding:12px 18px max(20px,env(safe-area-inset-bottom));overflow-y:auto;
    color:#261d18;background:#f7f1e5;box-shadow:0 -18px 48px #160e0a66;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.72,.24,1);
    clip-path:polygon(0 .7%,4% .25%,9% .75%,15% .2%,22% .65%,29% .2%,36% .7%,44% .25%,51% .65%,59% .2%,66% .7%,74% .2%,82% .7%,90% .18%,96% .65%,100% .25%,100% 100%,0 100%);
    font-family:"KCCHanbit",var(--ui-font)
  }
  .routine-sheet-backdrop.is-open .routine-bottom-sheet{transform:translateY(0)}
  .routine-sheet-backdrop.is-closing .routine-bottom-sheet{transform:translateY(105%)}
  .routine-sheet-handle{position:sticky;z-index:3;top:0;width:48px;height:5px;margin:2px auto 12px;border-radius:999px;background:#b5ada3}
  .routine-bottom-sheet form{display:grid;grid-template-columns:1fr 1fr;gap:11px 10px;padding:0 2px 4px}
  .routine-bottom-sheet h2{grid-column:1/-1;margin:0 0 5px;text-align:center;font-size:25px;font-weight:400}
  .routine-bottom-sheet label,.routine-bottom-sheet fieldset{min-width:0;margin:0}
  .routine-bottom-sheet>form>label{display:grid;gap:5px;font-size:13px}
  .routine-bottom-sheet>form>label:has(textarea),.routine-bottom-sheet>form>.group-members,.routine-bottom-sheet>form>.routine-day-picker,.routine-bottom-sheet>form>.routine-group-shortcuts{grid-column:1/-1}
  .routine-bottom-sheet :is(input,select,textarea){width:100%;min-height:44px;border:0;border-radius:8px;background:#d8d8d8;color:#241d19;box-shadow:inset 0 1px 2px #0001}
  .routine-bottom-sheet textarea{min-height:76px;resize:vertical}
  .routine-bottom-sheet fieldset{padding:10px;border:1px solid #9f9488;border-radius:12px;background:#fffaf180}
  .routine-bottom-sheet legend{padding:0 6px}
  .routine-day-presets,.routine-day-pills,.routine-group-shortcuts>div{display:flex;flex-wrap:wrap;gap:6px}
  .routine-day-presets button,.routine-group-shortcuts button{min-height:34px;padding:5px 10px;border:1px solid #735a49;background:#fffaf3;color:#35261e}
  .routine-group-shortcuts{display:grid;gap:5px}
  .routine-group-shortcuts button.on{background:#6d4f3d;color:#fff3d2}
  .routine-day-pills{margin:8px 0}
  .routine-day-pills label{flex:1;min-width:34px}
  .routine-day-pills input{position:absolute;opacity:0;pointer-events:none}
  .routine-day-pills span{display:grid;place-items:center;min-height:36px;border:1px solid #816958;border-radius:9px;background:#fffaf3}
  .routine-day-pills input:checked+span{background:#a9493c;color:#fff}
  .routine-bottom-sheet .group-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .routine-bottom-sheet .group-members legend{grid-column:1/-1}
  .routine-bottom-sheet .group-members label{display:flex;align-items:center;gap:7px;padding:8px;border-radius:8px;background:#eee5d8}
  .routine-bottom-sheet .group-members input{width:20px;min-height:20px}
  .anniversary-date-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .anniversary-date-fields legend{grid-column:1/-1}
  .anniversary-date-fields label{display:grid;gap:4px}
  .routine-sheet-actions{position:sticky;bottom:-4px;grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding:10px 0 0;background:linear-gradient(transparent,#f7f1e5 20%)}
  .routine-sheet-actions button{min-width:84px;min-height:46px}
  body:has(.routine-sheet-backdrop){overflow:hidden!important}

  html.native-app[data-active-tab="shop"] .shop-store{gap:12px}
  html.native-app[data-active-tab="shop"] .shop-store>.title p{display:none}
  html.native-app[data-active-tab="shop"] .shop-product-grid{grid-template-columns:1fr 1fr;gap:9px}
  html.native-app[data-active-tab="shop"] .premium-product{min-height:0;padding:13px;border-radius:18px}
  html.native-app[data-active-tab="shop"] .premium-product-heading{grid-template-columns:38px minmax(0,1fr);gap:7px}
  html.native-app[data-active-tab="shop"] .premium-product-heading>span{width:38px;height:38px;border-radius:11px;font-size:8px}
  html.native-app[data-active-tab="shop"] .premium-product h2{font-size:15px}
  html.native-app[data-active-tab="shop"] .premium-product-heading>b{grid-column:1/-1;font-size:15px}
  html.native-app[data-active-tab="shop"] .premium-product>p{font-size:11px;line-height:1.45}
  html.native-app[data-active-tab="shop"] .premium-buy{min-height:36px;padding:8px;font-size:11px}

  html.native-app[data-active-tab="settings"] .settings-shell{display:grid;gap:9px}
  html.native-app[data-active-tab="settings"] .settings-shell>h1{margin:0}
  html.native-app[data-active-tab="settings"] .setting-card,
  html.native-app[data-active-tab="settings"] .sync-panel{margin:0;padding:13px;border-radius:17px}
  html.native-app[data-active-tab="settings"] .setting-card h2,
  html.native-app[data-active-tab="settings"] .sync-panel h2{font-size:16px}
  html.native-app[data-active-tab="settings"] .setting-card p,
  html.native-app[data-active-tab="settings"] .sync-panel p{margin:0;font-size:12px}
  html.native-app[data-active-tab="settings"] .setting-card small,
  html.native-app[data-active-tab="settings"] .sync-panel small{color:#aeb9c5}
}

/* Character groups are separate from official relationship groups. */
.character-group-manager{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--panel) 88%,transparent)}
.character-group-manager>.title{align-items:flex-end}.character-group-manager>.title span{display:grid;gap:3px;min-width:0}.character-group-manager>.title h2,.character-group-manager>.title p{margin:0}
.character-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
.character-group-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.character-group-avatars{display:flex;align-items:center;min-width:42px}.character-group-card .avatar,.character-group-card .sprite{width:34px;height:34px;margin-right:-8px;border:2px solid var(--panel)}
.character-group-copy{display:grid;min-width:0}.character-group-copy b{overflow-wrap:anywhere}.character-group-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-group-actions{display:flex;justify-content:flex-end;gap:6px}.character-group-actions button{padding:7px 9px;white-space:nowrap}
.character-group-dialog{width:min(520px,calc(100vw - 24px))}.character-group-dialog form{display:grid;gap:13px}.character-group-dialog .group-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.character-group-dialog .group-members label{display:flex;align-items:center;gap:7px}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .character-group-manager{gap:10px;padding:12px;border-radius:18px}
  .character-group-manager>.title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
  .character-group-manager>.title small{font-size:10px;letter-spacing:.04em}
  .character-group-manager>.title h2{font-size:clamp(24px,7.2vw,30px);line-height:1.16}
  .character-group-manager>.title p{font-size:13px;line-height:1.48;word-break:keep-all}
  .character-group-manager>.title>button{align-self:end;width:88px;min-height:56px;padding:8px 7px;font-size:13px;line-height:1.25;white-space:normal}
  .character-group-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .character-group-card{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"avatars copy" "actions actions";gap:6px 10px;padding:10px 11px}
  .character-group-avatars{grid-area:avatars;max-width:112px;padding-right:6px}
  .character-group-copy{grid-area:copy;align-self:center}
  .character-group-copy b{font-size:18px;line-height:1.25;word-break:keep-all}
  .character-group-copy small{font-size:13px;line-height:1.35}
  .character-group-actions{grid-area:actions}
  .character-group-actions button{min-width:68px;min-height:36px;padding:6px 10px;font-size:13px}
}

@media(min-width:721px){
  .routine-sheet-backdrop{position:fixed;z-index:2200;inset:0;display:flex;align-items:flex-end;justify-content:center;background:#111a;opacity:0;transition:opacity .24s ease}
  .routine-sheet-backdrop.is-open{opacity:1}.routine-sheet-backdrop.is-closing{opacity:0}
  .routine-bottom-sheet{width:min(560px,calc(100vw - 40px));max-height:88vh;padding:18px;overflow:auto;background:#f7f1e5;color:#261d18;box-shadow:0 -18px 48px #160e0a66;transform:translateY(105%);transition:transform .28s ease}
  .routine-sheet-backdrop.is-open .routine-bottom-sheet{transform:none}.routine-sheet-backdrop.is-closing .routine-bottom-sheet{transform:translateY(105%)}
  .routine-bottom-sheet form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.routine-bottom-sheet h2,.routine-bottom-sheet fieldset,.routine-bottom-sheet label:has(textarea),.routine-group-shortcuts,.routine-sheet-actions{grid-column:1/-1}.routine-sheet-actions{display:flex;justify-content:flex-end;gap:8px}.routine-sheet-handle{width:50px;height:5px;margin:0 auto 12px;border-radius:999px;background:#aaa}
}

/* 집 방 안의 주민은 작은 지도 점이 아니라 한눈에 알아볼 수 있는 생활 아이콘으로 표시한다. */
.room-empty-image{display:none!important}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="home"] .home-person:not(.is-seated) .avatar{
    width:54px!important;
    height:54px!important;
    flex:0 0 54px!important;
  }
  html.native-app[data-active-tab="home"] .home-person:not(.is-seated) .sprite{
    width:62px!important;
    height:62px!important;
    flex:0 0 62px!important;
  }
  html.native-app[data-active-tab="home"] .home-person-status{
    max-width:112px!important;
    padding:5px 8px!important;
    font-size:11px!important;
  }
  html.native-app[data-active-tab="home"] .room-pet img,
  html.native-app[data-active-tab="home"] .room-pet-emoji{
    width:50px!important;
    height:50px!important;
    font-size:34px!important;
  }
  html.native-app[data-active-tab="home"] .room-pet-status{
    min-width:62px!important;
    max-width:94px!important;
    padding:4px 7px!important;
  }
  html.native-app[data-active-tab="home"] .room-pet-status b{font-size:11px!important}
}

/* 모바일 홈 장면 연출: 실제 현재 장면의 동반자·반려 존재·감정 상태에만 반응한다. */
.native-app .native-scene-atmosphere{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  transition:background .45s ease,opacity .45s ease;
}
.native-app .native-observe-top,
.native-app .native-character-stage,
.native-app .native-character-picker,
.native-app .native-status-card,
.native-app .native-log-card{position:relative;z-index:2}
.native-app .native-character-stage.has-scene-companion{width:min(62vw,250px)}
.native-app .native-character-stage.has-scene-companion .native-main-character{
  position:absolute!important;
  left:2%!important;
  bottom:4%!important;
  width:58%!important;
  height:78%!important;
  object-fit:contain!important;
}
.native-app .native-character-stage.has-scene-companion span.avatar.native-main-character{
  display:grid!important;
  place-items:center!important;
  width:min(34vw,142px)!important;
  height:min(34vw,142px)!important;
  left:4%!important;
  bottom:10%!important;
}
.native-app .native-scene-companion{
  position:absolute;
  right:1%;
  bottom:5%;
  z-index:3;
  display:grid;
  place-items:center;
  width:58%;
  height:78%;
  color:#fff;
  text-shadow:0 2px 7px #000;
}
.native-app .native-scene-companion .avatar,
.native-app .native-scene-companion .sprite{
  width:100%!important;
  height:100%!important;
  border:0;
  border-radius:24px;
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 18px 12px #0008);
}
.native-app .native-scene-companion .avatar:not(img){
  display:grid;
  place-items:center;
  width:min(34vw,142px)!important;
  height:min(34vw,142px)!important;
  border:4px solid #ffffffd9;
  border-radius:50%;
  font-size:54px;
}
.native-app .native-scene-companion small{
  position:absolute;
  bottom:-2px;
  max-width:92%;
  padding:4px 9px;
  overflow:hidden;
  border:1px solid #ffffff38;
  border-radius:99px;
  background:#0c1420b8;
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.native-app .native-character-stage.has-scene-lineup .native-main-character{visibility:hidden!important}
.native-app .native-scene-lineup{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  height:100%;
  padding:0 2% 4%;
  box-sizing:border-box;
}
.native-app .native-scene-lineup-person{
  position:relative;
  display:grid;
  flex:0 1 calc(96% / var(--scene-count));
  place-items:end center;
  min-width:0;
  height:84%;
  margin-left:calc((var(--scene-count) - 1) * -2.5%);
  filter:drop-shadow(0 18px 12px #0008);
}
.native-app .native-scene-lineup-person:first-child{margin-left:0}
.native-app .native-scene-lineup-person.is-current{z-index:2;translate:0 -3%}
.native-app .native-scene-lineup-person .avatar,
.native-app .native-scene-lineup-person .sprite{
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  object-fit:contain!important;
  background:transparent!important;
}
.native-app .native-scene-lineup-person span.avatar{
  align-self:center;
  width:min(30vw,130px)!important;
  height:min(30vw,130px)!important;
  border:3px solid #ffffffd9!important;
  border-radius:50%!important;
}
.native-app .native-scene-lineup-person small{
  position:absolute;
  bottom:0;
  max-width:90%;
  padding:3px 8px;
  overflow:hidden;
  border:1px solid #ffffff38;
  border-radius:99px;
  background:#0c1420bd;
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-overflow:ellipsis;
  text-shadow:0 2px 7px #000;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.native-app .scene-tone-date-romantic .native-scene-lineup-person{animation:native-date-sway 2.7s ease-in-out infinite}
.native-app .scene-tone-date-romantic .native-scene-lineup-person:nth-child(even){animation-delay:-1.35s}
.native-app .scene-tone-date-broken .native-scene-lineup-person:first-child{animation:native-pull-away-left 3s ease-in-out infinite}
.native-app .scene-tone-date-broken .native-scene-lineup-person:last-child{animation:native-pull-away-right 3s ease-in-out infinite}
.native-app .scene-tone-fight-fire .native-scene-lineup-person:nth-child(odd),
.native-app .scene-tone-fight-ice .native-scene-lineup-person:nth-child(odd){animation:native-fight-left .82s ease-in-out infinite}
.native-app .scene-tone-fight-fire .native-scene-lineup-person:nth-child(even),
.native-app .scene-tone-fight-ice .native-scene-lineup-person:nth-child(even){animation:native-fight-right .82s ease-in-out infinite}
.native-app :is(.scene-tone-crush-mutual,.scene-tone-crush-one-sided) .native-scene-effects i{
  animation:native-heart-rise var(--fx-duration,4s) ease-in var(--fx-delay,0s) infinite;
}
.native-app .scene-tone-crush-mutual .native-scene-lineup-person:nth-child(odd){animation:native-crush-left 4.8s cubic-bezier(.4,0,.2,1) infinite;animation-delay:0s!important}
.native-app .scene-tone-crush-mutual .native-scene-lineup-person:nth-child(even){animation:native-crush-right 4.8s cubic-bezier(.4,0,.2,1) infinite;animation-delay:0s!important}
.native-app .scene-tone-crush-one-sided .native-scene-lineup-person.is-current{animation:native-crush-hesitate 4.2s ease-in-out infinite}
.native-app .scene-tone-crush-one-sided .native-scene-lineup-person:not(.is-current){animation:native-social-bob 4.6s -.7s ease-in-out infinite}
.native-app .scene-action-fear .native-scene-lineup-person.is-current,
.native-app .scene-action-fear .native-main-character{animation:native-fear-tremble 1.25s ease-in-out infinite}
.native-app .native-scene-action-prop{
  position:absolute;
  left:55%;
  top:54%;
  z-index:13;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  font-size:clamp(30px,9vw,52px);
  filter:drop-shadow(0 9px 9px #0008);
  pointer-events:none;
  transform-origin:50% 85%;
}
.native-app :is(.native-scene-action-prop,.native-person-action-prop) img{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  object-fit:cover;
  background:transparent;
}
.native-app .native-scene-action-prop.catalog-food-photo{
  left:78%;top:76%;width:68px;height:68px;padding:0;border:0;
  border-radius:50%;background:transparent;box-shadow:0 9px 20px #0006;overflow:hidden;
}
.native-app .native-person-action-prop.catalog-food-photo{
  left:72%;top:70%;width:44px;height:44px;padding:0;border:0;
  border-radius:50%;background:transparent;box-shadow:0 7px 14px #0005;overflow:hidden;
}
.native-app :is(.native-scene-action-prop,.native-person-action-prop).catalog-food-photo img{
  border-radius:50%;object-fit:cover;background:transparent;
}
.native-app .native-person-action-prop{
  position:absolute;
  left:57%;
  top:47%;
  z-index:8;
  display:grid;
  place-items:center;
  width:clamp(26px,7vw,38px);
  height:clamp(26px,7vw,38px);
  font-size:clamp(22px,6vw,34px);
  filter:drop-shadow(0 7px 7px #0009);
  pointer-events:none;
  transform-origin:50% 85%;
}
.native-app .home-person .native-person-action-prop:not(.catalog-food-photo){
  width:27px;
  height:27px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  font-size:23px;
}
.native-app .home-person .native-person-action-prop:not(.catalog-food-photo) img{
  width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;object-fit:contain;
}
.native-app .scene-action-sweeping .native-scene-action-prop,
.native-app .scene-action-sweeping .native-person-action-prop{animation:native-prop-sweep 1.8s ease-in-out infinite}
.native-app .scene-action-sweeping .native-character-stage:not(.has-scene-lineup) .native-main-character{animation:native-cleaning-step 1.8s ease-in-out infinite}
.native-app :is(.scene-action-dishwashing,.scene-action-wiping,.scene-action-organizing,.scene-action-spice-organizing,.scene-action-accessory-organizing) :is(.native-scene-action-prop,.native-person-action-prop){animation:native-prop-work 2.1s ease-in-out infinite}
.native-app .scene-action-gaming .native-scene-action-prop{left:51%;top:61%;animation:native-prop-game 1.25s ease-in-out infinite}
.native-app .scene-action-gaming .native-person-action-prop{animation:native-prop-game 1.25s ease-in-out infinite}
.native-app .scene-action-gaming .native-character-stage:not(.has-scene-lineup) .native-main-character{animation:native-game-focus 2.5s ease-in-out infinite}
.native-app .scene-action-eating .native-scene-action-prop{left:57%;top:58%;animation:native-prop-eat 1.7s ease-in-out infinite}
.native-app .scene-action-eating .native-person-action-prop{animation:native-prop-eat 1.7s ease-in-out infinite}
.native-app .scene-action-eating .native-character-stage:not(.has-scene-lineup) .native-main-character{animation:native-eating-pause 3.4s ease-in-out infinite}
@keyframes native-crush-left{0%,18%,100%{translate:-7px 2px;rotate:-1deg}34%{translate:2px -4px;rotate:1deg}41%{translate:4px -5px;rotate:1deg}45%{translate:-13px -9px;rotate:-5deg;scale:1.04}54%{translate:-9px -2px;rotate:-2deg;scale:1}72%{translate:-3px -3px;rotate:0}}
@keyframes native-crush-right{0%,18%,100%{translate:7px 1px;rotate:1deg}34%{translate:-2px -4px;rotate:-1deg}41%{translate:-4px -5px;rotate:-1deg}45%{translate:13px -9px;rotate:5deg;scale:1.04}54%{translate:9px -2px;rotate:2deg;scale:1}72%{translate:3px -3px;rotate:0}}
@keyframes native-crush-hesitate{0%,100%{translate:-8px 2px}38%{translate:1px -4px}52%{translate:-3px -2px}70%{translate:2px -3px}}
@keyframes native-fear-tremble{0%,100%{translate:-5px 2px;rotate:-1deg}25%{translate:-8px 0;rotate:1deg}50%{translate:-4px -2px;rotate:-1deg}75%{translate:-9px 1px;rotate:1deg}}
@keyframes native-prop-sweep{0%,100%{translate:-14px 5px;rotate:-22deg}50%{translate:14px -2px;rotate:24deg}}
@keyframes native-cleaning-step{0%,100%{translate:-4px 1px}50%{translate:5px -3px}}
@keyframes native-prop-work{0%,100%{translate:-3px 3px;rotate:-4deg}50%{translate:4px -5px;rotate:5deg}}
@keyframes native-prop-game{0%,100%{translate:-4px 1px;rotate:-3deg}50%{translate:3px -2px;rotate:3deg}}
@keyframes native-game-focus{0%,100%{translate:0 2px}50%{translate:0 -4px;scale:1.015}}
@keyframes native-prop-eat{0%,25%,100%{translate:5px 8px;rotate:10deg}55%,72%{translate:-8px -14px;rotate:-12deg}}
@keyframes native-eating-pause{0%,100%{translate:0 2px}45%,65%{translate:0 -3px}}

/* Action props describe the actual object being handled, not the generic act
   of tidying. Coffee, beans, and controllers each have their own motion. */
.native-app :is(.scene-action-coffee-drinking,.scene-action-coffee-brewing,.scene-action-beans-organizing) :is(.native-scene-action-prop,.native-person-action-prop){filter:drop-shadow(0 7px 7px #0009)}
:is(.native-app,.home) :is(.scene-action-coffee-drinking,.scene-action-drinking) :is(.native-scene-action-prop,.native-person-action-prop){animation:native-prop-coffee-sip 2.25s ease-in-out infinite}
:is(.native-app,.home) :is(.scene-action-coffee-brewing,.scene-action-drink-preparing) :is(.native-scene-action-prop,.native-person-action-prop){animation:native-prop-coffee-brew 1.8s ease-in-out infinite}
.native-app .scene-action-beans-organizing :is(.native-scene-action-prop,.native-person-action-prop){animation:native-prop-beans-sort 1.45s ease-in-out infinite}
.native-app .scene-action-gaming :is(.native-scene-action-prop,.native-person-action-prop){animation:native-prop-game-buttons .48s steps(2,end) infinite}
.native-app .scene-action-assistive-check :is(.native-scene-action-prop,.native-person-action-prop){animation:native-prop-gear-check 2.1s ease-in-out infinite}
.native-app .scene-action-coffee-drinking .native-character-stage:not(.has-scene-lineup) .native-main-character{animation:native-eating-pause 3.4s ease-in-out infinite}
.native-app .scene-action-washing-up :is(.native-scene-action-prop,.native-person-action-prop){
  color:#dffaff;
  text-shadow:-15px 12px 0 #bdefff,14px -10px 0 #fff,22px 13px 0 #9de4f5;
  animation:native-soap-bubbles 1.85s ease-in-out infinite;
}
.native-app .scene-action-washing-up :is(.native-scene-action-prop,.native-person-action-prop)::before,
.native-app .scene-action-washing-up :is(.native-scene-action-prop,.native-person-action-prop)::after{
  content:"○";position:absolute;color:#eaffff;font-size:.68em;font-weight:900;opacity:.85;
  text-shadow:0 2px 5px #46a8bc80;
}
.native-app .scene-action-washing-up :is(.native-scene-action-prop,.native-person-action-prop)::before{left:-18px;top:21px;animation:native-soap-orbit 1.35s ease-in-out infinite}
.native-app .scene-action-washing-up :is(.native-scene-action-prop,.native-person-action-prop)::after{right:-15px;top:-7px;animation:native-soap-orbit 1.6s -.7s ease-in-out infinite reverse}
.native-app .scene-action-washing-up .native-character-stage:not(.has-scene-lineup) .native-main-character{animation:native-wash-bob 1.85s ease-in-out infinite}
@keyframes native-prop-coffee-sip{0%,24%,100%{translate:7px 9px;rotate:7deg}48%,68%{translate:-9px -15px;rotate:-9deg}76%{translate:-5px -11px;rotate:-4deg}}
@keyframes native-prop-coffee-brew{0%,100%{translate:-6px 4px;rotate:-7deg}45%{translate:5px -4px;rotate:6deg}62%{translate:2px -7px;rotate:2deg}}
@keyframes native-prop-beans-sort{0%,100%{translate:-10px 3px;rotate:-5deg}50%{translate:10px -3px;rotate:5deg}}
@keyframes native-prop-game-buttons{0%{translate:-4px 1px;rotate:-3deg;scale:1}50%{translate:4px -2px;rotate:3deg;scale:1.07}100%{translate:-2px 0;rotate:-1deg;scale:1}}
@keyframes native-prop-gear-check{0%,100%{translate:-5px 4px;rotate:-18deg;scale:1}50%{translate:5px -5px;rotate:72deg;scale:1.08}}
@keyframes native-soap-bubbles{0%,100%{translate:-7px 8px;rotate:-7deg;scale:.92}48%{translate:7px -10px;rotate:7deg;scale:1.08}72%{translate:-2px -15px;rotate:-2deg;scale:1}}
@keyframes native-soap-orbit{0%,100%{translate:0 8px;scale:.72;opacity:.35}55%{translate:5px -15px;scale:1.08;opacity:1}}
@keyframes native-wash-bob{0%,100%{translate:-2px 3px;rotate:-1deg}50%{translate:3px -3px;rotate:1deg}}
.native-app .native-pet-orbit{
  --pet-radius:clamp(78px,24vw,126px);
  position:absolute;
  left:50%;
  top:48%;
  z-index:6;
  width:0;
  height:0;
  pointer-events:none;
  animation:native-pet-circle 6.8s linear infinite;
}
.native-app .native-scene-pet{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  animation:native-pet-counter 6.8s linear infinite,native-pet-hop 1.1s ease-in-out infinite;
  filter:drop-shadow(0 10px 9px #0009);
}
.native-app .native-scene-pet img,
.native-app .native-scene-pet>span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  object-fit:contain;
  background:transparent;
  font-size:42px;
}
.native-app .native-scene-pet img.photo{border:3px solid #fff;border-radius:50%;object-fit:cover}
.native-app .native-scene-pet small{
  position:absolute;
  top:54px;
  padding:2px 7px;
  border-radius:99px;
  background:#0b1420c9;
  color:#fff;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
@keyframes native-pet-circle{
  from{transform:rotate(0deg) translateX(var(--pet-radius))}
  to{transform:rotate(360deg) translateX(var(--pet-radius))}
}
@keyframes native-pet-counter{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@keyframes native-pet-hop{0%,100%{margin-top:4px}50%{margin-top:-8px}}

.native-app .native-scene-effects{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.native-app .native-scene-effects i{
  position:absolute;
  left:var(--fx-x);
  bottom:32%;
  color:#ff83b7;
  font-size:clamp(18px,5vw,32px);
  font-style:normal;
  text-shadow:0 3px 12px #8d174e88;
  animation-delay:var(--fx-delay);
  animation-duration:var(--fx-duration);
}
.native-app .scene-tone-date-romantic .native-scene-atmosphere{
  background:
    radial-gradient(circle at 30% 40%,#ff8fb34d,transparent 31%),
    radial-gradient(circle at 70% 34%,#ffbedb40,transparent 29%),
    linear-gradient(180deg,transparent 30%,#9f1c5942 100%);
}
.native-app .scene-tone-date-romantic .native-scene-effects i{animation-name:native-heart-rise;animation-timing-function:ease-in;animation-iteration-count:infinite}
.native-app .scene-tone-date-romantic .native-main-character,
.native-app .scene-tone-date-romantic .native-scene-companion{animation:native-date-sway 2.7s ease-in-out infinite}
.native-app .scene-tone-date-romantic .native-scene-companion{animation-delay:-1.35s}
.native-app .scene-tone-date-broken .native-observe-backdrop{filter:saturate(.62) brightness(.74)}
.native-app .scene-tone-date-broken .native-scene-atmosphere{
  background:linear-gradient(135deg,#321c3599,#19263555 48%,#0b1420b8);
}
.native-app .scene-tone-date-broken .native-scene-effects i{animation-name:native-broken-heart;animation-timing-function:ease-in;animation-iteration-count:infinite}
.native-app .scene-tone-date-broken .native-main-character{animation:native-pull-away-left 3s ease-in-out infinite}
.native-app .scene-tone-date-broken .native-scene-companion{animation:native-pull-away-right 3s ease-in-out infinite}
.native-app .scene-tone-sad .native-observe-backdrop{filter:saturate(.38) brightness(.66)}
.native-app .scene-tone-sad .native-scene-atmosphere{
  background:linear-gradient(180deg,#31445e94,#15202c55 45%,#08111dcc);
}
.native-app .scene-tone-sad .native-scene-effects i{
  width:3px;
  height:22px;
  overflow:hidden;
  color:#a9d4ffbb;
  border-radius:99px;
  background:#a9d4ffb8;
  animation:native-rain-fall 1.6s linear infinite;
}
.native-app .scene-tone-fight-fire .native-scene-atmosphere{
  background:
    radial-gradient(ellipse at 50% 100%,#ffb000a8,transparent 37%),
    linear-gradient(180deg,#72131355,#b31c15a6 72%,#ff6a00b8);
  animation:native-fire-pulse .72s ease-in-out infinite alternate;
}
.native-app .scene-tone-fight-ice .native-observe-backdrop{filter:saturate(.34) contrast(1.08) brightness(.72)}
.native-app .scene-tone-fight-ice .native-scene-atmosphere{
  background:
    repeating-linear-gradient(112deg,transparent 0 17%,#d9f5ff1f 17.5% 18%,transparent 18.5% 31%),
    linear-gradient(180deg,#7fe4ff36,#153b6299 66%,#081b35d6);
}
.native-app .scene-tone-fight-fire .native-scene-effects i,
.native-app .scene-tone-fight-ice .native-scene-effects i{animation:native-fight-spark 1.1s ease-out infinite}
.native-app .scene-tone-fight-fire .native-main-character,
.native-app .scene-tone-fight-ice .native-main-character{animation:native-fight-left .82s ease-in-out infinite}
.native-app .scene-tone-fight-fire .native-scene-companion,
.native-app .scene-tone-fight-ice .native-scene-companion{animation:native-fight-right .82s ease-in-out infinite}
@keyframes native-heart-rise{
  0%{opacity:0;transform:translate(-50%,18px) scale(.55) rotate(-8deg)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-42dvh) scale(1.18) rotate(12deg)}
}
@keyframes native-date-sway{0%,100%{translate:0 2px;rotate:-1deg}50%{translate:4px -5px;rotate:1deg}}
@keyframes native-broken-heart{
  0%{opacity:0;transform:translate(-50%,-35px) scale(.8)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + 12px),32dvh) rotate(24deg) scale(1.08)}
}
@keyframes native-pull-away-left{0%,100%{translate:0 0}50%{translate:-9px 2px}}
@keyframes native-pull-away-right{0%,100%{translate:0 0}50%{translate:9px -1px}}
@keyframes native-rain-fall{from{opacity:0;transform:translateY(-26dvh) rotate(12deg)}20%{opacity:1}to{opacity:0;transform:translateY(72dvh) rotate(12deg)}}
@keyframes native-fire-pulse{from{filter:saturate(.95) brightness(.92)}to{filter:saturate(1.25) brightness(1.12)}}
@keyframes native-fight-spark{
  0%{opacity:0;transform:translate(-50%,0) scale(.4) rotate(0)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + 18px),-22dvh) scale(1.25) rotate(145deg)}
}
@keyframes native-fight-left{0%,100%{translate:-3px 0;rotate:-1deg}45%{translate:10px -2px;rotate:2deg}55%{translate:5px 1px;rotate:-2deg}}
@keyframes native-fight-right{0%,100%{translate:3px 0;rotate:1deg}45%{translate:-10px 1px;rotate:-2deg}55%{translate:-5px -2px;rotate:2deg}}
@media(prefers-reduced-motion:reduce){
  .native-app .native-pet-orbit,
  .native-app .native-scene-pet,
  .native-app .native-scene-effects i,
  .native-app .scene-tone-date-romantic .native-main-character,
  .native-app .scene-tone-date-romantic .native-scene-companion,
  .native-app .scene-tone-date-broken .native-main-character,
  .native-app .scene-tone-date-broken .native-scene-companion,
  .native-app .scene-tone-fight-fire .native-main-character,
  .native-app .scene-tone-fight-fire .native-scene-companion,
  .native-app .scene-tone-fight-ice .native-main-character,
  .native-app .scene-tone-fight-ice .native-scene-companion,
  .native-app .native-scene-lineup-person{animation:none!important}
}

/* 공통 장면·모바일 가독성 보완 */
.relation-member-order-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.relation-member-order-list>span{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:14px;background:#fff}
.relation-member-order-list .relation-mini-avatar{width:28px;height:28px}
.relation-member-order-list button{min-width:32px;padding:4px 7px}
.mobile-character-heading .mobile-character-export{margin-left:auto;padding:9px 11px;border-color:#ffffff36;background:#ffffff12;color:#fff;font-size:10px;white-space:nowrap}

.home-occupant-popover{
  position:fixed;
  z-index:500;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(55px,calc(env(safe-area-inset-bottom) + 48px));
  width:min(360px,calc(100vw - 16px));
  max-height:min(430px,62dvh);
  padding:36px 12px 12px;
  overflow:auto;
  border:1px solid #ffffff42;
  border-radius:20px;
  background:#101923;
  color:#fff;
  box-shadow:0 18px 44px #0007;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .18s ease,transform .18s ease;
  backdrop-filter:blur(10px);
}
.home-occupant-popover.show{opacity:1;transform:none}
.home-occupant-dismiss-layer{
  position:fixed!important;inset:0!important;z-index:499!important;width:100%!important;height:100%!important;
  min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;cursor:default!important
}
.home-occupant-popover .home-occupant-visual{border-radius:0;background:transparent;overflow:visible}
.home-occupant-popover .home-occupant-visual :is(.sprite,.room-pet-icon,.room-pet-emoji){border-radius:0;background:transparent;object-fit:contain}
.home-occupant-popover .home-occupant-visual :is(.avatar,.room-pet-photo){border-radius:50%;background:transparent;object-fit:cover}
.home-occupant-popover small,.home-occupant-popover p{color:#d8e0e8}
.home-occupant-popover-close{position:absolute;right:6px;top:6px;width:26px!important;height:26px!important;min-height:0!important;padding:0!important;border-color:#ffffff2b!important;background:#ffffff0d!important;color:#fff!important;font-size:12px!important}
.home-occupant-command{display:grid;gap:8px;min-width:0;margin-top:8px;padding-top:8px;border-top:1px solid #ffffff25}
.home-occupant-command h3,.home-occupant-command h4{margin:0;font-size:11px}
.direct-category-tabs,.direct-action-grid,.direct-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0}
.direct-category-tabs button,.direct-action-grid button,.direct-topic-grid button,.direct-submit{display:flex;align-items:center;justify-content:space-between;gap:5px;width:100%;min-width:0!important;min-height:36px!important;padding:7px 9px!important;border:1px solid #ffffff35!important;border-radius:10px!important;background:#ffffff12!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:10px!important;line-height:1.2!important;box-shadow:none!important;white-space:normal!important;overflow-wrap:anywhere}
.direct-category-tabs button[aria-expanded="true"],.direct-action-grid button[aria-pressed="true"],.direct-topic-grid button[aria-pressed="true"]{border-color:#f4d87a!important;background:#f4d87a2b!important;font-weight:900}
.direct-action-popup{display:grid;gap:8px;min-width:0;padding:9px;border:1px solid #ffffff2e;border-radius:13px;background:#06101a70}
.direct-action-popup[hidden],.direct-gossip-subject[hidden]{display:none!important}
.direct-social-popup>input{display:block;width:100%;min-width:0;min-height:38px;box-sizing:border-box;padding:8px 10px;border:1px solid #ffffff35;border-radius:10px;background:#ffffff12;color:#fff;font:inherit;font-size:11px}
.direct-person-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;max-height:none;overflow:visible;overscroll-behavior:contain}
.direct-person-choice{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;justify-content:stretch!important;gap:6px!important;width:100%!important;min-width:0!important;min-height:44px!important;padding:5px!important;border:1px solid #ffffff35!important;border-radius:10px!important;background:#ffffff12!important;box-shadow:none!important}
.direct-person-choice[aria-pressed="true"]{border-color:#f4d87a!important;background:#f4d87a2b!important}
.direct-person-choice :is(img,span){display:grid;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;place-items:center;overflow:hidden;border-radius:50%;background:#eadfce;object-fit:cover;font-size:14px!important}
.direct-person-choice img.direct-person-icon{border-radius:8px;background:transparent;object-fit:contain}
.direct-person-choice b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:9px!important;white-space:nowrap}
.direct-gossip-subject{display:grid;gap:7px;min-width:0}.direct-submit{justify-content:center!important;margin-top:2px;background:#7b5a3f!important;font-weight:900}.direct-empty{margin:0;font-size:10px}
html[data-color-mode="light"] .home-occupant-command{border-top-color:#3b2d241f}
html[data-color-mode="light"] :is(.direct-category-tabs button,.direct-action-grid button,.direct-topic-grid button,.direct-submit,.direct-person-choice){border-color:#cfc2b4!important;background:#f1e8de!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"] .direct-action-popup{border-color:#d8cab9;background:#f8f1e8}html[data-color-mode="light"] .direct-social-popup>input{border-color:#cfc2b4;background:#fff;color:#302a25}
html[data-color-mode="light"] .direct-submit{background:#715139!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
@media(max-width:390px){.direct-person-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.catalog-app-icon.catalog-user-photo{border-radius:50%!important;object-fit:cover!important}
.catalog-app-icon.catalog-app-art{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;object-fit:contain!important}
.room-pet{border:0!important;background:transparent!important;box-shadow:none!important}
.room-pet .room-pet-icon{border-radius:0!important;background:transparent!important;object-fit:contain!important}
.room-pet .room-pet-photo{border-radius:50%!important;background:transparent!important;object-fit:cover!important}

.native-app .native-scene-companion{
  right:calc(2% + (var(--companion-count) - 1 - var(--companion-index)) * 20%);
  width:calc(58% - (var(--companion-count) - 1) * 8%);
}
.native-app .native-scene-companion:nth-of-type(n+3){right:-4%}
.native-app .native-scene-effects i{top:var(--fx-y);bottom:auto}
.native-app .scene-tone-date-overwhelmed .native-observe-backdrop{filter:saturate(.82) brightness(.75)}
.native-app .scene-tone-date-overwhelmed .native-scene-atmosphere{
  background:
    radial-gradient(circle at 26% 35%,#ff91bd3d,transparent 29%),
    linear-gradient(150deg,#4d213b66,#1425359a 70%);
}
.native-app .scene-tone-date-overwhelmed .native-scene-effects i{animation-name:native-heart-rise;animation-timing-function:ease-in;animation-iteration-count:infinite;opacity:.72}
.native-app .native-sweat-effect{
  position:absolute;
  left:58%;
  top:24%;
  z-index:8;
  font-size:clamp(28px,9vw,54px);
  filter:drop-shadow(0 5px 8px #0007);
  animation:native-sweat-drop 1.4s ease-in-out infinite;
}
@keyframes native-sweat-drop{0%,100%{opacity:.55;transform:translateY(-4px) rotate(-8deg)}50%{opacity:1;transform:translateY(8px) rotate(5deg)}}

.native-app .native-character-sweat{
  position:absolute;
  z-index:10;
  top:-18px;
  right:7%;
  font-size:clamp(25px,8vw,48px);
  line-height:1;
  filter:drop-shadow(0 5px 8px #0008);
  animation:native-sweat-drop 1.4s ease-in-out infinite;
}
.native-app .native-conversation-bubbles{
  position:absolute;
  inset:6% 1% auto;
  z-index:9;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.native-app .native-conversation-bubbles i{
  position:absolute;
  display:grid;
  place-items:center;
  min-width:45px;
  height:32px;
  padding:0 10px;
  border:2px solid #162335;
  border-radius:18px;
  background:#fff;
  color:#162335;
  font-size:18px;
  font-style:normal;
  font-weight:900;
  box-shadow:0 8px 18px #0006;
  opacity:0;
}
.native-app .native-conversation-bubbles i::after{
  content:"";
  position:absolute;
  bottom:-7px;
  width:12px;
  height:12px;
  border-right:2px solid #162335;
  border-bottom:2px solid #162335;
  background:#fff;
  transform:rotate(45deg);
}
.native-app .native-conversation-bubbles i:nth-child(1){left:7%;animation:native-chat-left 3.8s ease-in-out infinite}
.native-app .native-conversation-bubbles i:nth-child(2){right:7%;animation:native-chat-right 3.8s 1.15s ease-in-out infinite}
.native-app .native-conversation-bubbles i:nth-child(3){left:25%;top:45px;animation:native-chat-left 3.8s 2.3s ease-in-out infinite}
@keyframes native-chat-left{0%,18%,100%{opacity:0;transform:translate(-10px,8px) scale(.82)}28%,62%{opacity:1;transform:none}76%{opacity:0;transform:translateY(-7px)}}
@keyframes native-chat-right{0%,18%,100%{opacity:0;transform:translate(10px,8px) scale(.82)}28%,62%{opacity:1;transform:none}76%{opacity:0;transform:translateY(-7px)}}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .relationship-map-dialog{width:calc(100vw - 12px)!important;max-width:none!important}
  .relationship-map-dialog form{height:calc(100dvh - 12px);max-height:none!important;overflow:auto}
  .relationship-map-dialog .relationship-map-scroll{width:100%;overflow:hidden}
  .relationship-map-dialog .relationship-map-canvas{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    aspect-ratio:1/1;
  }
  .relationship-map-canvas svg text{font-size:30px!important}
  .relationship-map-canvas svg .map-relation{font-size:30px!important}
  .relationship-map-canvas svg .map-stage{font-size:23px!important}
  .relationship-map-canvas svg .map-heart{font-size:38px!important}
  .native-app[data-active-tab="observe"] .native-observe-home{
    grid-template-rows:minmax(190px,1fr) auto auto;
  }
  .native-app .native-observe-top{
    position:absolute!important;
    top:max(12px,env(safe-area-inset-top))!important;
    left:88px;
    right:88px;
  }
  html.native-app[data-active-tab="catalog"] .catalog-shell,
  html.native-app[data-active-tab="shop"] .shop-store{background:linear-gradient(155deg,#0d1826,#172638 58%,#101b28)!important}
  html.native-app[data-active-tab="catalog"] .catalog-shell>.title h1,
  html.native-app[data-active-tab="catalog"] .catalog-shell>.title p,
  html.native-app[data-active-tab="catalog"] .catalog-kind>.title h2,
  html.native-app[data-active-tab="catalog"] .catalog-dex-card summary>b{color:#fff!important}
  html.native-app[data-active-tab="catalog"] .catalog-dex-card summary>small{color:#bac7d4!important}
  html.native-app[data-active-tab="catalog"] .catalog-dex-card{background:#1b2939!important}
  html.native-app[data-active-tab="catalog"] .catalog-shell button:not(.catalog-tile){
    color:#142033!important;
    background:#f8fafc!important;
    border-color:#d9e1ea!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-shell>.title button{
    color:#fff!important;
    background:linear-gradient(135deg,var(--native-own,#176b60),#67d2b4)!important;
    border-color:#ffffff45!important;
  }
  html.native-app[data-active-tab="shop"] .shop-store>.title h1{color:#fff}
  html.native-app[data-active-tab="shop"] .premium-product{
    border:1px solid #ffffff24;
    background:linear-gradient(145deg,#26384a,#384d61 58%,#536c80)!important;
    color:#fff!important;
  }
  html.native-app[data-active-tab="shop"] .shop-cart,
  html.native-app[data-active-tab="shop"] .shop-coming{background:#172536!important;color:#fff!important}
  html.native-app[data-active-tab="shop"] .shop-cart p,
  html.native-app[data-active-tab="shop"] .shop-coming p{color:#c6d0da!important}
  .home-occupant-popover{left:12px;right:12px;width:auto}
}

/* 첫 실행·화면별 튜토리얼 */
.onboarding-dialog{
  color:#f7fbff;
  background:
    radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--p) 42%,transparent),transparent 38%),
    linear-gradient(155deg,#101c2b,#19283a 62%,#0d1723);
}
.onboarding-dialog form{position:relative;min-height:530px;padding:28px 32px;background:transparent}
.onboarding-dialog section{max-width:560px;width:100%;margin:auto}
.onboarding-dialog section>small{color:#9fb4c9;font-weight:800;letter-spacing:.15em}
.onboarding-dialog h1{font-size:clamp(31px,5vw,48px);line-height:1.2}
.onboarding-dialog p{color:#c4ced9!important}
.onboarding-dialog p b{color:#fff}
.onboarding-dialog button:not(.primary){border-color:#ffffff2b;background:#ffffff0d;color:#fff}
.onboarding-dialog input{border-color:#ffffff2b;background:#ffffff12;color:#fff}
.onboarding-dialog input::placeholder{color:#9daaba}
.onboarding-hero-icon{
  display:grid;
  place-items:center;
  width:128px;
  height:72px;
  margin:0 auto 2px;
  border:1px solid #ffffff38;
  border-radius:25px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--p) 55%,#ffffff24),#ffffff0b);
  box-shadow:0 18px 44px #0005,inset 0 1px #ffffff50;
  font-size:16px;
  font-weight:900;
  letter-spacing:.04em;
}
.onboarding-safe-note{display:grid;gap:5px;padding:14px;border:1px solid #70d8bd45;border-radius:17px;background:#176b6030;text-align:left}
.onboarding-safe-note span{color:#bcd2cf;font-size:12px}
.onboarding-route{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:6px}
.onboarding-route>span{display:grid;place-items:center;gap:6px;min-height:82px;padding:8px;border:1px solid #ffffff1f;border-radius:16px;background:#ffffff0b;font-size:12px}
.onboarding-route>span>b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--p)}
.onboarding-route>i{color:#8ca0b4;font-style:normal}

.setup-coach-dialog{
  color:#f7fbff;
  background:linear-gradient(155deg,#101c2b,#1a2939);
}
.setup-coach-dialog form{padding:28px}
.setup-coach-dialog small{color:#9fb4c9;font-weight:800;letter-spacing:.1em}
.setup-coach-dialog p,.setup-coach-dialog li{color:#c4ced9}
.setup-coach-dialog ol{display:grid;gap:7px;margin:0;padding:13px 13px 13px 34px;border:1px solid #ffffff1c;border-radius:17px;background:#ffffff09}
.setup-coach-dialog button:not(.primary){border-color:#ffffff2b;background:#ffffff0d;color:#fff}
.setup-coach-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:19px;background:color-mix(in srgb,var(--p) 55%,#ffffff18);font-size:29px}

.page-guide{
  position:fixed;
  inset:auto 18px 18px auto;
  width:min(440px,calc(100vw - 36px));
  max-height:calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto;
  max-width:none;
  margin:0;
  border:1px solid #ffffff2b;
  border-radius:22px;
  color:#fff;
  background:#101b29f5;
  box-shadow:0 24px 70px #0008;
  backdrop-filter:blur(16px);
}
.page-guide::backdrop{background:transparent}
.page-guide form{gap:10px;padding:16px}
.page-guide p{color:#c0cbd7;line-height:1.62}
.page-guide-heading{display:grid;grid-template-columns:46px minmax(0,1fr) 36px;align-items:center;gap:10px}
.page-guide-heading>span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:color-mix(in srgb,var(--p) 45%,#ffffff12);font-size:23px}
.page-guide-heading>div{display:grid;gap:1px}.page-guide-heading h2{font-size:19px}.page-guide-heading small{color:#9fb4c9}
.page-guide-heading>button{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0!important;border-color:#ffffff24;background:#ffffff0c;color:#fff;font-size:22px}
.page-guide form>.primary{min-height:40px;margin:0}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .onboarding-dialog{
    inset:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    max-height:none;
    margin:0;
    border-radius:24px;
  }
  .onboarding-dialog form{height:100%;min-height:0;padding:19px 17px}
  .onboarding-dialog section{gap:12px}
  .onboarding-dialog h1{font-size:clamp(28px,8.7vw,38px)}
  .onboarding-dialog p{font-size:13px;line-height:1.62}
  .onboarding-hero-icon{width:110px;height:58px;border-radius:18px;font-size:14px}
  .onboarding-route{gap:3px}.onboarding-route>span{min-height:68px;padding:5px;font-size:9px}.onboarding-route>i{font-size:10px}
  .setup-coach-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:24px}
  .setup-coach-dialog form{padding:20px 17px}
  .page-guide{
    inset:auto 7px calc(74px + env(safe-area-inset-bottom)) 7px;
    width:auto;
    border-radius:20px;
  }
  .page-guide form{padding:13px}.page-guide p{font-size:12px}.page-guide-heading h2{font-size:17px}
}

/* 2026-08-07 Safari·화면 여백·PC 앱 셸 보정 */
.settings-business-footer{
  display:grid;
  gap:12px;
  margin-top:12px;
  padding:24px 4px 8px;
  border-top:1px solid currentColor;
  color:#8190a2;
  font-size:12px;
  line-height:1.8;
}
.settings-business-footer>b{color:#d8e1eb;font-size:14px}
.settings-business-footer p{margin:0}
.settings-business-footer i{display:inline-block;width:1px;height:10px;margin:0 9px;background:currentColor;opacity:.45;vertical-align:-1px}
.settings-business-footer a{color:inherit;text-decoration:none}
.settings-business-footer a:hover{text-decoration:underline}
html[data-active-tab="settings"] body>.site-footer{display:none}
.settings-business-footer nav{display:flex;flex-wrap:wrap;gap:9px 28px}
.settings-business-footer nav a:first-child{color:#f2f6fa;font-weight:800}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app,
  html.native-app body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden!important;
  }
  html.native-app body{padding-left:0!important;padding-right:0!important}
  html.native-app main{
    width:100%;
    max-width:none;
    min-width:0;
    margin:0!important;
  }
  html.native-app[data-active-tab="character"],
  html.native-app[data-active-tab="character"] body,
  html.native-app[data-active-tab="character"] main{
    background:#101925!important;
  }
  html.native-app[data-active-tab="character"] main{padding:0!important}
  html.native-app[data-active-tab="character"] .character-editor{
    width:100%!important;
    max-width:none!important;
    min-width:0;
    margin:0!important;
  }
  html.native-app[data-active-tab="character"] .character-editor>.form{
    width:100%;
    min-width:0;
    margin:0!important;
  }
  html.native-app[data-active-tab="character"] .mobile-character-dashboard{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
  html.native-app .native-status-card,
  html.native-app .native-log-card{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .onboarding-dialog[open]{
    position:fixed;
    z-index:5000;
    display:block;
    box-sizing:border-box;
    overflow:auto;
    box-shadow:0 30px 100px #000b;
  }
  .onboarding-dialog[open] form{
    display:grid;
    min-height:100%;
    box-sizing:border-box;
  }
  .settings-business-footer{padding:20px 2px max(16px,env(safe-area-inset-bottom));font-size:10px}
  .settings-business-footer nav{gap:8px 16px}
}

@media(min-width:721px){
  body{
    background:
      radial-gradient(circle at 82% 2%,color-mix(in srgb,var(--p) 28%,transparent),transparent 32%),
      linear-gradient(150deg,#0e1825,#162537 58%,#0d1723);
    background-attachment:fixed;
  }
  header{
    height:92px;
    border-color:#ffffff14;
    color:#f5f8fb;
    background:linear-gradient(135deg,#101a28f5,#1d2e40f5);
    box-shadow:0 12px 35px #0003;
    backdrop-filter:blur(18px);
  }
  header .brand small,header #save-state{color:#aab8c6}
  header nav button{
    border-color:#ffffff18;
    color:#dbe4ed;
    background:#ffffff09;
  }
  header nav button:hover{background:#ffffff13}
  header nav button.on{
    border-color:#ffffff3d;
    background:linear-gradient(135deg,var(--p),var(--s));
    box-shadow:0 10px 24px #0004,inset 0 1px #ffffff38;
  }
  main{
    width:100%;
    max-width:1680px;
    min-height:calc(100dvh - 92px);
    padding:26px clamp(20px,3vw,48px) 42px;
  }
  main>.panel,
  main>.catalog-shell,
  main>.home-page,
  main>.mobile-town-shell{
    box-shadow:0 24px 70px #0003;
  }
  .settings-shell,.routine-shell,.shop-store,.catalog-shell,.relationship-page{
    border-color:#ffffff18;
    border-radius:30px;
  }
  .settings-business-footer{color:#7d8997}
  .settings-business-footer>b,.settings-business-footer nav a:first-child{color:#39485a}
}

/* 앱형 보조 페이지: 바깥 여백 없이 같은 어두운 화면을 사용한다. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app:is(
    [data-active-tab="catalog"],
    [data-active-tab="shop"],
    [data-active-tab="settings"]
  ),
  html.native-app:is(
    [data-active-tab="catalog"],
    [data-active-tab="shop"],
    [data-active-tab="settings"]
  ) body,
  html.native-app:is(
    [data-active-tab="catalog"],
    [data-active-tab="shop"],
    [data-active-tab="settings"]
  ) main{
    background:
      radial-gradient(circle at 82% 7%,color-mix(in srgb,var(--p) 25%,transparent),transparent 34%),
      linear-gradient(155deg,#0d1825,#172638 58%,#0d1723)!important;
    color:#f5f8fb!important;
  }
  html.native-app:is(
    [data-active-tab="catalog"],
    [data-active-tab="routine"],
    [data-active-tab="shop"],
    [data-active-tab="settings"]
  ) main{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-shell,
  html.native-app[data-active-tab="shop"] .shop-store,
  html.native-app[data-active-tab="settings"] .settings-shell{
    width:100%!important;
    max-width:none!important;
    min-height:100%!important;
    margin:0!important;
    padding:14px max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#f5f8fb!important;
    box-shadow:none!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-shell :is(h1,h2,h3,b,label,legend),
  html.native-app[data-active-tab="shop"] .shop-store :is(h1,h2,h3,b,strong,label),
  html.native-app[data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend){
    color:#f7fafc!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-shell :is(p,small),
  html.native-app[data-active-tab="shop"] .shop-store :is(p,small),
  html.native-app[data-active-tab="settings"] .settings-shell :is(p,small){
    color:#b9c5d1!important;
  }

  html.native-app[data-active-tab="catalog"] .catalog-kind,
  html.native-app[data-active-tab="catalog"] .catalog-dex-card,
  html.native-app[data-active-tab="settings"] .setting-card,
  html.native-app[data-active-tab="settings"] .sync-panel,
  html.native-app[data-active-tab="settings"] .feedback-card,
  html.native-app[data-active-tab="shop"] .premium-product,
  html.native-app[data-active-tab="shop"] .shop-cart,
  html.native-app[data-active-tab="shop"] .shop-coming,
  html.native-app[data-active-tab="shop"] .preview-notice{
    border:1px solid #ffffff1f!important;
    background:linear-gradient(145deg,#1a2939e8,#223448e8)!important;
    color:#f7fafc!important;
    box-shadow:0 14px 30px #0002!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-section{
    padding:15px!important;
    border-radius:20px!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-dex-card summary{
    color:#fff!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-dex-card summary small{
    color:#aebccb!important;
  }
  html.native-app[data-active-tab="catalog"] .catalog-kind > .title button,
  html.native-app[data-active-tab="catalog"] .catalog-section > .title button{
    border-color:#ffffff2b!important;
    background:#ffffff10!important;
    color:#f8fafc!important;
    -webkit-text-fill-color:#f8fafc!important;
  }

  html.native-app[data-active-tab="shop"] .shop-store{gap:11px!important}
  html.native-app[data-active-tab="shop"] .premium-product-heading>span{
    border:1px solid #ffffff2b!important;
    background:#ffffff12!important;
    color:#fff!important;
  }
  html.native-app[data-active-tab="shop"] .premium-current,
  html.native-app[data-active-tab="shop"] .cart-line{
    background:#ffffff0b!important;
    color:#fff!important;
  }
  html.native-app[data-active-tab="shop"] .cart-total{
    border-color:#ffffff20!important;
    color:#fff!important;
  }
  html.native-app[data-active-tab="shop"] :is(.premium-buy,.cart-quantity button,.cart-remove){
    border-color:#ffffff28!important;
  }
  html.native-app[data-active-tab="shop"] .premium-buy:not(.primary):not(.disabled),
  html.native-app[data-active-tab="shop"] .cart-quantity button,
  html.native-app[data-active-tab="shop"] .cart-remove{
    background:#ffffff10!important;
    color:#fff!important;
  }

  html.native-app[data-active-tab="settings"] .settings-shell{
    display:grid!important;
    gap:10px!important;
  }
  html.native-app[data-active-tab="settings"] .setting-card,
  html.native-app[data-active-tab="settings"] .sync-panel{
    margin:0!important;
    padding:15px!important;
    border-radius:20px!important;
  }
  html.native-app[data-active-tab="settings"] .settings-shell :is(input,select,textarea){
    border:1px solid #d8e0e8!important;
    background:#f6f8fb!important;
    color:#172231!important;
    -webkit-text-fill-color:#172231!important;
  }
  html.native-app[data-active-tab="settings"] .settings-shell :is(input,textarea)::placeholder{
    color:#687585!important;
    -webkit-text-fill-color:#687585!important;
    opacity:1;
  }
  html.native-app[data-active-tab="settings"] .feedback-category-grid span{
    border-color:#ffffff25!important;
    background:#ffffff0d!important;
    color:#e7edf4!important;
  }
  html.native-app[data-active-tab="settings"] .feedback-category-grid input:checked+span{
    border-color:transparent!important;
    background:linear-gradient(135deg,var(--p),var(--s))!important;
    color:#fff!important;
  }
  html.native-app[data-active-tab="settings"] .sync-actions button:not(.primary),
  html.native-app[data-active-tab="settings"] [data-guide-reset],
  html.native-app[data-active-tab="settings"] [data-reset]{
    border-color:#ffffff28!important;
    background:#ffffff10!important;
    color:#f7fafc!important;
  }
  html.native-app[data-active-tab="settings"] .settings-business-footer{
    color:#aab7c5!important;
    border-color:#ffffff20!important;
  }
  html.native-app[data-active-tab="settings"] .settings-business-footer>b,
  html.native-app[data-active-tab="settings"] .settings-business-footer nav a:first-child{
    color:#fff!important;
  }
}

/* 2026-08-10q: compact feedback choices and unmistakable button labels. */
html[data-active-tab="settings"] .feedback-email-types,
html.native-app[data-active-tab="settings"] .feedback-email-types{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))!important;
  gap:10px!important;
  width:100%;
}
html[data-active-tab="settings"] .feedback-card a.feedback-email-type,
html.native-app[data-active-tab="settings"] .feedback-card a.feedback-email-type{
  display:flex!important;
  width:100%!important;
  min-width:0;
  min-height:50px;
  margin:0!important;
  padding:12px 14px!important;
  background:linear-gradient(135deg,var(--p),var(--s))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 2px #0007;
  overflow-wrap:anywhere;
}
html[data-active-tab="settings"] .feedback-card a.feedback-email-type:visited,
html[data-active-tab="settings"] .feedback-card a.feedback-email-type:hover,
html[data-active-tab="settings"] .feedback-card a.feedback-email-type:focus{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
@media(max-width:390px){
  html[data-active-tab="settings"] .feedback-email-types,
  html.native-app[data-active-tab="settings"] .feedback-email-types{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html[data-active-tab="settings"] .feedback-card a.feedback-email-type{font-size:.88em}
}

/* 화면 모드와 모바일 관찰 폭은 파일 뒤에서 최종 적용한다. */
html[data-color-mode="dark"][data-active-tab="settings"],
html[data-color-mode="dark"][data-active-tab="settings"] body,
html[data-color-mode="dark"][data-active-tab="settings"] main:not(.web-drawer-content){
  background:linear-gradient(155deg,#0d1825,#172638 58%,#0d1723)!important;
  color:#f5f8fb!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell{background:transparent!important;color:#f5f8fb!important}
html[data-color-mode="dark"][data-active-tab="settings"] :is(.setting-card,.sync-panel,.feedback-card){
  border:1px solid #ffffff20!important;
  background:linear-gradient(145deg,#18283a,#22374b)!important;
  color:#f7fafc!important;
}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend){color:#f7fafc!important;-webkit-text-fill-color:#f7fafc!important}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(p,small){color:#bdc9d5!important;-webkit-text-fill-color:#bdc9d5!important}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(input,select,textarea){background:#f7f9fc!important;color:#172231!important;-webkit-text-fill-color:#172231!important}
html[data-color-mode="light"],
html[data-color-mode="light"] body{background:#f5f1ea!important;color:#302a25!important}
html[data-color-mode="light"] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header),
html[data-color-mode="light"].native-app .native-sub-header{border-color:#d9d0c7!important;background:color-mix(in srgb,var(--p) 18%,#fff)!important;color:#2f2924!important}
html[data-color-mode="light"].native-app:is([data-active-tab="catalog"],[data-active-tab="shop"],[data-active-tab="settings"],[data-active-tab="character"],[data-active-tab="relationship"]),
html[data-color-mode="light"].native-app:is([data-active-tab="catalog"],[data-active-tab="shop"],[data-active-tab="settings"],[data-active-tab="character"],[data-active-tab="relationship"]) body,
html[data-color-mode="light"].native-app:is([data-active-tab="catalog"],[data-active-tab="shop"],[data-active-tab="settings"],[data-active-tab="character"],[data-active-tab="relationship"]) main:not(.web-drawer-content){
  background:#f5f1ea!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell,
html[data-color-mode="light"][data-active-tab="catalog"] .catalog-shell,
html[data-color-mode="light"][data-active-tab="shop"] .shop-store{background:transparent!important;color:#302a25!important}
html[data-color-mode="light"][data-active-tab="settings"] :is(.setting-card,.sync-panel,.feedback-card),
html[data-color-mode="light"][data-active-tab="catalog"] :is(.catalog-kind,.catalog-dex-card),
html[data-color-mode="light"][data-active-tab="shop"] :is(.premium-product,.shop-cart,.shop-coming,.preview-notice){
  border-color:#ddd3c9!important;
  background:#fffdf9!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend,p,small),
html[data-color-mode="light"][data-active-tab="catalog"] .catalog-shell :is(h1,h2,h3,b,label,p,small),
html[data-color-mode="light"][data-active-tab="shop"] .shop-store :is(h1,h2,h3,b,strong,label,p,small){color:#302a25!important;-webkit-text-fill-color:#302a25!important}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .relationship-map-dialog .relationship-map-canvas svg text{font-size:11px!important;stroke-width:4px!important}
  .relationship-map-dialog .relationship-map-canvas svg .map-relation{font-size:11px!important}
  .relationship-map-dialog .relationship-map-canvas svg .map-stage{font-size:8px!important}
  .relationship-map-dialog .relationship-map-canvas svg .map-heart{font-size:18px!important;stroke-width:3px!important}
}

/* 파일 끝에서 앱 공통 다크 규칙보다 화이트 모드가 반드시 우선하도록 한다. */
html[data-color-mode="light"].native-app[data-active-tab="shop"] :is(.premium-product,.shop-cart,.shop-coming,.preview-notice){
  border-color:#d9d0c7!important;
  background:#fffdf9!important;
  color:#302a25!important;
  box-shadow:0 12px 28px #392e241a!important;
}
html[data-color-mode="light"].native-app[data-active-tab="shop"] .shop-store :is(h1,h2,h3,b,strong,p,small,span,label){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html[data-color-mode="light"].native-app[data-active-tab="shop"] .premium-product-heading>span{
  border-color:#d8cec5!important;
  background:#eee6dd!important;
  color:#49392f!important;
  -webkit-text-fill-color:#49392f!important;
}
html[data-color-mode="light"].native-app[data-active-tab="shop"] :is(.premium-current,.cart-line,.cart-total){
  border-color:#ded5cc!important;
  background:#f3ede6!important;
  color:#302a25!important;
}
html[data-color-mode="light"].native-app[data-active-tab="shop"] :is(.premium-buy,.cart-quantity button,.cart-remove){
  border-color:#cfc5bb!important;
  background:#f4ece4!important;
  color:#3b3029!important;
  -webkit-text-fill-color:#3b3029!important;
}
html[data-color-mode="light"].native-app[data-active-tab="shop"] .premium-buy.primary{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--p),var(--s))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* 2026-08-08: 관찰 화면 밀도, 클릭 단서, 수면 장면 */
.native-app .native-observe-clock{display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}
.native-app .native-scene-refresh{
  position:static!important;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  min-height:31px;
  padding:0;
  border-color:#ffffff26;
  border-radius:50%;
  background:#10172278;
  color:#ffffffd9;
  font-size:18px;
  line-height:1;
  box-shadow:0 5px 14px #0003;
  transform:none!important;
  backdrop-filter:blur(9px);
}
.native-app .native-scene-refresh:hover,.native-app .native-scene-refresh:focus-visible{border-color:#ffffff80;background:#101722c9;color:#fff}
.native-app .native-status-card{overflow:hidden!important}
.native-app .native-status-card h1,
.native-app .native-status-card p{
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
.native-app .native-status-card h1{max-height:4.15em;overflow-y:auto}
.native-app .native-status-card p{
  max-height:6.25em;
  overflow-y:auto!important;
  padding-right:5px;
}
.native-app .native-log-card{position:relative;cursor:pointer;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.native-app .native-log-card:hover,.native-app .native-log-card:focus-visible{border-color:#ffffff68;background:#111b28e8;outline:none;transform:translateY(-1px)}
.native-app .native-log-open-hint{display:inline;margin-left:5px;color:#ffffff91;font-size:9px;font-weight:500}
.native-app .native-log-card>div>span{display:flex;gap:5px}
.native-app .scene-tone-sleep .native-character-stage{animation:native-sleep-breathe 4.6s ease-in-out infinite}
.native-app .scene-tone-sleep .native-character-stage .native-main-character{transform-origin:50% 82%;animation:native-sleep-head 4.6s ease-in-out infinite}
.native-app .scene-tone-sleep .native-character-stage>i{animation:native-sleep-shadow 4.6s ease-in-out infinite}
.native-character-sleep-mark{
  position:absolute;
  right:-4px;
  top:-12px;
  z-index:9;
  color:#e8e2ff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1px;
  text-shadow:0 2px 7px #312c60;
  animation:room-sleep-z 2.8s ease-in-out infinite;
}
.native-character-sleep-mark.is-main{right:4%;top:5%;font-size:16px}
.home-person.is-sleeping .home-person-visual{animation:room-sleep-breathe 4.8s ease-in-out infinite}
.home-person .room-sleep-mark{position:absolute;right:-5px;top:-12px;z-index:8;color:#e8e2ff;font-size:13px;font-style:normal;font-weight:900;text-shadow:0 2px 7px #312c60;animation:room-sleep-z 2.8s ease-in-out infinite}
@keyframes native-sleep-breathe{0%,100%{transform:translateY(3px) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes native-sleep-head{0%,100%{scale:1;rotate:-1deg}50%{scale:1.018;rotate:1deg}}
@keyframes native-sleep-shadow{0%,100%{opacity:.58;transform:scaleX(.92)}50%{opacity:.38;transform:scaleX(.82)}}
@keyframes native-sleep-z{0%{opacity:0;translate:0 10px;scale:.72}28%,70%{opacity:.9}100%{opacity:0;translate:8px -24px;scale:1.1}}
@keyframes room-sleep-breathe{0%,100%{translate:0 1px}50%{translate:0 -3px}}
@keyframes room-sleep-z{0%,100%{opacity:.25;translate:0 3px}50%{opacity:1;translate:4px -5px}}

/* 다크 모드 팝업은 제목과 같은 어두운 면, 화이트 모드는 밝은 면을 사용한다. */
html[data-color-mode="dark"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog),
html[data-color-mode="dark"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog)>form{
  border-color:#ffffff20!important;
  background:#101a28!important;
  color:#f4f7fb!important;
}
html[data-color-mode="dark"] dialog::backdrop{background:#050a12c9!important;backdrop-filter:blur(5px)}
html[data-color-mode="dark"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(.relationship-map-dialog-head,.title,.modal-head,.dialog-head){border-color:#ffffff1f!important;background:#101a28f2!important;color:#f4f7fb!important}
html[data-color-mode="dark"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(h1,h2,h3,h4,b,strong,label,legend){color:#f7fafc!important;-webkit-text-fill-color:#f7fafc!important}
html[data-color-mode="dark"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(p,small){color:#bdc9d6!important;-webkit-text-fill-color:#bdc9d6!important}
html[data-color-mode="dark"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(input,select,textarea,button){border-color:#ffffff24!important;background:#182638!important;color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
html[data-color-mode="dark"] dialog button.primary{border-color:transparent!important;background:linear-gradient(135deg,var(--p),var(--s))!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.view-copy-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.view-copy-actions button{min-width:0;min-height:44px;white-space:normal}
html[data-color-mode="dark"] dialog :is(.relation,.empty-mini,.room-editor-photo,.room-image-choice button,.relationship-color-legend span){border-color:#ffffff1b!important;background:#172536!important;color:#f4f7fb!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-canvas{border:1px solid #ffffff1d!important;background:radial-gradient(circle at center,#25374a 0 32%,#101a28 100%)!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-canvas svg text{paint-order:stroke;fill:#f8fafc!important;stroke:#101a28!important}
html[data-color-mode="dark"] .official-relation-dialog .relation{background:linear-gradient(145deg,#172536,#203449)!important}
html[data-color-mode="light"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog),
html[data-color-mode="light"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog)>form{border-color:#d9d0c7!important;background:#fffdf9!important;color:#302a25!important}
html[data-color-mode="light"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(.relationship-map-dialog-head,.title,.modal-head,.dialog-head){border-color:#ddd3c9!important;background:#fffdf9f2!important;color:#302a25!important}
html[data-color-mode="light"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(h1,h2,h3,h4,b,strong,label,legend){color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(p,small){color:#6f6258!important;-webkit-text-fill-color:#6f6258!important}
html[data-color-mode="light"] dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) :is(input,select,textarea,button){border-color:#d8cec5!important;background:#fff!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}

/* 넓은 화면에서도 선택한 화면 모드가 헤더·패널·입력창까지 끊기지 않게 한다. */
@media(min-width:721px){
  html[data-color-mode="dark"],html[data-color-mode="dark"] body,html[data-color-mode="dark"] main:not(.web-drawer-content){background:#0d1723!important;color:#f4f7fb!important}
  html[data-color-mode="dark"] header{border-color:#ffffff1d!important;background:#101b29f2!important;color:#f4f7fb!important}
  html[data-color-mode="dark"] :is(.panel,.form,.detail,.life-log,.home,.relationship-page,.routine-shell,.catalog-shell,.shop-store,.settings-shell){border-color:#ffffff1c!important;background:#142131!important;color:#f4f7fb!important}
  html[data-color-mode="dark"] :is(.panel,.form,.detail,.life-log,.home,.relationship-page,.routine-shell,.catalog-shell,.shop-store,.settings-shell) :is(h1,h2,h3,h4,b,strong,label,legend){color:#f6f9fc!important;-webkit-text-fill-color:#f6f9fc!important}
  html[data-color-mode="dark"] :is(.panel,.form,.detail,.life-log,.home,.relationship-page,.routine-shell,.catalog-shell,.shop-store,.settings-shell) :is(p,small,time){color:#b9c5d1!important;-webkit-text-fill-color:#b9c5d1!important}
  html[data-color-mode="dark"] :is(input,select,textarea),html[data-color-mode="dark"] button:not(.meeting-walker):not(.meeting-pair *):not(.town-traveler):not(.game-hud-button):not(.game-hud-profile-toggle){border-color:#ffffff22;background:#1b2a3c;color:#f4f7fb}
  html[data-color-mode="light"],html[data-color-mode="light"] body,html[data-color-mode="light"] main:not(.web-drawer-content){background:#f5f1ea!important;color:#302a25!important}
  html[data-color-mode="light"] header{border-color:#d9d0c7!important;background:#fffdf9f2!important;color:#302a25!important}
  html[data-color-mode="light"] :is(.panel,.form,.detail,.life-log,.home,.relationship-page,.routine-shell,.catalog-shell,.shop-store,.settings-shell){border-color:#ddd3c9!important;background:#fffdf9!important;color:#302a25!important}
  html[data-color-mode="light"] :is(input,select,textarea){border-color:#d9d0c7;background:#f8f6f2;color:#302a25}
  html[data-color-mode="dark"] :is(.world-hud>div,.detail .scene){
    border-color:#ffffff20!important;
    background:#1a2a3d!important;
    color:#f5f8fb!important;
  }
  html[data-color-mode="dark"] .detail .scene :is(h3,b){color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
  html[data-color-mode="dark"] .detail .scene :is(p,small){color:#bdc9d5!important;-webkit-text-fill-color:#bdc9d5!important}
  html[data-color-mode="light"] :is(.world-hud>div,.detail .scene){
    border-color:#ddd3c9!important;
    background:#fffdf9!important;
    color:#302a25!important;
  }
  html[data-color-mode="light"] header nav button{
    border-color:#ddd3c9!important;
    background:#fffdf9!important;
    color:#40372f!important;
    -webkit-text-fill-color:#40372f!important;
  }
  html[data-color-mode="light"] header nav button.on{
    border-color:transparent!important;
    background:linear-gradient(135deg,var(--p),var(--s))!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
}

/* 밝은 화면에서는 설정 미리보기와 저장 공간도 실제 종이색 카드로 읽힌다. */
html[data-color-mode="light"][data-active-tab="settings"] :is(.font-preview,.storage-meter){
  border-color:#ddd3c9!important;
  background:#fffdf9!important;
  color:#302a25!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .font-preview :is(b,span),
html[data-color-mode="light"][data-active-tab="settings"] .storage-meter :is(h3,b,small){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}

/* 2026-08-08c: Safari 터치, 장면 비동기 움직임, 모드별 편집면 보강 */
.native-app .native-game-menu{pointer-events:none!important}
.native-app .native-game-menu button{
  z-index:90!important;
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.native-app .native-scene-effects,
.native-app .native-scene-atmosphere,
.native-app .native-conversation-bubbles{pointer-events:none!important}

.native-app .native-character-stage{
  left:auto!important;
  margin-left:0!important;
}
.native-app .native-scene-lineup{padding-right:5%!important;padding-left:5%!important;translate:0 8px}
.native-app .native-scene-lineup-person{animation-delay:calc(var(--scene-delay,0s) * -1)}
.native-app .native-scene-lineup-person.is-current{z-index:2}
.native-app .native-scene-effects i{
  opacity:0;
  animation-delay:var(--fx-delay)!important;
  animation-duration:var(--fx-duration)!important;
  animation-fill-mode:both!important;
}
.native-app .native-conversation-bubbles{inset:7% 5% auto!important;gap:12px;align-items:flex-start}
.native-app .native-conversation-bubbles i{
  width:auto!important;
  max-width:42%;
  min-height:34px;
  padding:8px 13px!important;
  border-radius:18px!important;
  font-size:clamp(10px,2.8vw,14px)!important;
  line-height:1.25!important;
  white-space:nowrap;
}
.native-app .native-conversation-bubbles i:nth-child(2){margin-top:38px;animation-delay:.55s!important}
.native-app .native-conversation-bubbles i:nth-child(3){margin-top:8px;animation-delay:1.15s!important}

.relationship-pair-icons{display:flex;align-items:center;justify-content:center;gap:8px}
.relationship-pair-icons>span{display:grid;place-items:center;gap:3px;min-width:72px}
.relationship-pair-icons>span>small{font-size:8px;opacity:.72;white-space:nowrap}
.relationship-pair-icons>span>b{font-size:11px;color:inherit}
.relationship-pair-icons>i{font-size:20px;font-style:normal;opacity:.74}
.relationship-direction-help{font-size:9px!important;letter-spacing:.06em;text-transform:uppercase}

.catalog-image-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.catalog-image-actions>button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 10px;min-height:92px;padding:12px;text-align:left}
.catalog-image-actions img,.catalog-image-actions .catalog-illustration-placeholder{grid-row:1/3;width:62px;height:62px;object-fit:contain;border-radius:0;background:transparent}
.catalog-image-actions .catalog-photo-picker img{border-radius:50%;object-fit:cover}
.catalog-image-actions small{font-size:9px}

html[data-color-mode="dark"] dialog :is(
  .character-view-fields:not(.relationship-all-fields),.body-profile-form,.catalog-detail,.catalog-image-actions,
  .relation-pair-fields,.room-editor-fields,.home-identity-editor,.setting-card,
  .sync-panel,.font-preview,.storage-meter,.character-view-dialog-context,
  .catalog-illustration-grid,.official-relation-dialog-body,.relationship-map-dialog-body,
  fieldset,.chips
){border-color:#ffffff1c!important;background:#142131!important;color:#f4f7fb!important}
html[data-color-mode="dark"] dialog :is(.catalog-detail,.body-profile-form,.character-view-fields:not(.relationship-all-fields),.relation-pair-fields) label,
html[data-color-mode="dark"] dialog :is(.catalog-detail,.body-profile-form,.character-view-fields:not(.relationship-all-fields),.relation-pair-fields) span{
  color:#eaf0f6!important;-webkit-text-fill-color:#eaf0f6!important;
}
html[data-color-mode="dark"] :is(
  .catalog-dex-card,.catalog-detail,.catalog-kind,.routine-day,.weekly-table,
  .setting-card,.sync-panel,.font-preview,.storage-meter,.relation,
  .character-view-fields:not(.relationship-all-fields),.body-profile-form,.home-identity-editor,.room-editor-fields
){border-color:#ffffff1c!important;background:#142131!important;color:#f4f7fb!important}
html[data-color-mode="dark"] :is(.catalog-dex-card,.catalog-detail,.catalog-kind,.routine-day,.setting-card,.sync-panel,.relation) :is(h1,h2,h3,h4,b,strong,label,legend){color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
html[data-color-mode="dark"] :is(.catalog-dex-card,.catalog-detail,.catalog-kind,.routine-day,.setting-card,.sync-panel,.relation) :is(p,small,span){color:#bdc9d5!important;-webkit-text-fill-color:#bdc9d5!important}

html[data-color-mode="light"] dialog :is(
  .character-view-fields:not(.relationship-all-fields),.body-profile-form,.catalog-detail,.catalog-image-actions,
  .relation-pair-fields,.room-editor-fields,.home-identity-editor,.setting-card,
  .sync-panel,.font-preview,.storage-meter,.character-view-dialog-context,
  .catalog-illustration-grid,.official-relation-dialog-body,.relationship-map-dialog-body,
  fieldset,.chips
){border-color:#ddd3c9!important;background:#fffdf9!important;color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-game-menu button{
  border-color:#d9d1c8!important;
  background:#fffdf0e8!important;
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
  box-shadow:0 10px 24px #362d241f!important;
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-game-menu button>small,
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-game-menu button>span{color:#302a25!important;-webkit-text-fill-color:#302a25!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .catalog-image-actions{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .native-app .native-scene-lineup-person{animation:none!important}
}

@media(prefers-reduced-motion:reduce){
  .native-app .scene-tone-sleep .native-character-stage,
  .native-app .scene-tone-sleep .native-character-stage .native-main-character,
  .home-person-visual,.home-person.is-sleeping .home-person-visual,.home-person .room-sleep-mark,.native-character-sleep-mark{animation:none!important}
}

/* 2026-08-08d: 관계 선택은 본문 문장 안의 두 이름으로만 조작한다. */

/* 홈 메뉴는 테마와 무관하게 배경판 없이 흰 아이콘으로 보이되 터치 영역은 유지한다. */
html.native-app[data-active-tab="observe"] .native-game-menu button{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  padding:3px!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  text-shadow:0 2px 8px #000,0 1px 2px #000;
}
html.native-app[data-active-tab="observe"] .native-game-menu button>span{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid #ffffff8f;
  border-radius:50%;
  background:#0d162128;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 6px 16px #0005,inset 0 1px 0 #ffffff45;
  font-size:1.85rem;
}
html.native-app[data-active-tab="observe"] .native-game-menu button>small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:.95rem;
  line-height:1.15;
  font-weight:900;
}

/* 대화 기호는 서로 다른 높이와 좌우에 고정해 겹치지 않게 한다. */
.native-app .native-conversation-bubbles{
  inset:4% 2% auto!important;
  display:block!important;
  width:96%!important;
  height:92px!important;
}
.native-app .native-conversation-bubbles i{
  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0!important;
  font-size:20px!important;
  line-height:1!important;
}
.native-app .native-conversation-bubbles i:nth-child(1){left:0!important;right:auto!important;top:0!important;animation-delay:0s!important}
.native-app .native-conversation-bubbles i:nth-child(2){left:auto!important;right:0!important;top:47px!important;animation-delay:.8s!important}

/* PC 라이트 모드에서도 취향 사전의 추가 동작이 배경에 묻히지 않는다. */
html[data-color-mode="light"] .catalog-kind>.title button,
html[data-color-mode="light"] .catalog-section>.title button{
  border-color:#b9aa9c!important;
  background:#ede2d5!important;
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
  font-weight:900!important;
}

/* 최종 화면 규칙: 이 아래는 화면별로 한 번씩만 정의한다. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.relationship-direction-sentence{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;font-size:clamp(17px,3vw,24px);font-weight:900;text-align:center}
.relationship-direction-sentence label{display:inline-flex;align-items:center;gap:2px}
.relationship-direction-sentence select{width:auto;max-width:10em;min-height:40px;padding:7px 28px 7px 10px;border-radius:12px;font:inherit;font-size:.9em}
.relationship-direction-sentence strong{font:inherit}
.relationship-selected-pair{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 5px}
.relationship-selected-pair :is(.avatar,.sprite){width:132px;height:132px;filter:drop-shadow(0 8px 12px #0004)}
.relationship-selected-pair i{font-style:normal;font-size:23px;opacity:.72}
.catalog-shell button[data-catalog-save]{min-width:132px;min-height:56px;padding:13px 22px!important;border-color:color-mix(in srgb,var(--catalog-theme) 72%,#fff)!important;background:linear-gradient(135deg,var(--catalog-theme),var(--catalog-theme-secondary))!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:1.05rem!important;font-weight:900!important;box-shadow:0 9px 22px color-mix(in srgb,var(--catalog-theme) 32%,transparent)!important}
html[data-color-mode="dark"] .relationship-direction-sentence select{border-color:#ffffff29;background:#172536;color:#f6f9fc;-webkit-text-fill-color:#f6f9fc;color-scheme:dark}
html[data-color-mode="light"] .relationship-direction-sentence select{border-color:#d8cec5;background:#fffdf9;color:#302a25;-webkit-text-fill-color:#302a25;color-scheme:light}
.room-heading>span{padding:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.room-heading b,.room-heading .room-edit-hint{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 6px #000,0 1px 2px #000}
html:not(.native-app) .room-heading.room-title-dark b,html:not(.native-app) .room-heading.room-title-dark .room-edit-hint{color:#211d19!important;-webkit-text-fill-color:#211d19!important;text-shadow:0 1px 3px #fff,0 0 6px #fff}

html[data-color-mode="light"].native-app[data-active-tab="home"] :is(body,main,.home-page,.home-grid,.home){background:#f5f1ea!important;color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-top-actions button,
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-edit-toolbar:not(.home-native-edit-tools) button{border-color:#d7cdc3!important;background:#fffdf9!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-tabs button{border-color:#ffffff8a!important;background-image:linear-gradient(#121b25a8,#121b25a8),var(--home-photo),var(--home-grad)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-tabs button.on{border-color:#fff!important;box-shadow:0 7px 18px #3f332a52,inset 0 1px #ffffff66!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-feature-menu{border-color:#d7cdc3!important;background:#fffdf9f2!important;box-shadow:0 10px 28px #45372c2b!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-feature-menu button{color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-feature-menu button.on{background:#e8ded4!important;color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="home"] .home-feature-panel.open{border-color:#d8cec5!important;background:#fffdf9f7!important;color:#302a25!important}
html[data-color-mode="light"] .home-occupant-popover{border-color:#d8cec5!important;background:#fffdf9!important;color:#302a25!important;box-shadow:0 18px 44px #3b2d242d!important}
html[data-color-mode="light"] .home-occupant-popover :is(h2,b,p,small){color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"] .home-occupant-popover-close{border-color:#d8cec5!important;background:#f0e8df!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}

html[data-color-mode="light"].native-app[data-active-tab="relationship"] :is(body,main,.relationship-page:not(.relationship-redesign),.character-view-editor:not(.relationship-stage),.relationship-pair-magnet,.relationship-pair-core){background:#f5f1ea!important;color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="relationship"] .relationship-pair-magnet{border-color:#ddd3c9!important}
html[data-color-mode="light"].native-app[data-active-tab="relationship"] .relationship-pair-core :is(small,span,strong,label){color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="relationship"] .relationship-pair-core>em{border:1px solid #ddd3c9!important;background:#fffdf9!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="relationship"] .relationship-pair-core>button{border-color:#d8cec5!important;background:#fffdf9!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"].native-app[data-active-tab="relationship"] .relationship-pair-core>button.primary{border-color:transparent!important;background:linear-gradient(135deg,var(--relationship-own),var(--relationship-own-secondary))!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

html[data-color-mode="dark"] :is(.physical-appearance-settings,.physical-appearance-settings fieldset,.physical-appearance-settings .profile-tag-actions,.profile-attraction-settings,.profile-attraction-settings .profile-tag-actions,.health-accessibility-settings,.personality-detail-grid>.personality-choice){
  border-color:#ffffff20!important;
  background:#172536!important;
  color:#f5f8fb!important;
}
html[data-color-mode="dark"] :is(.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings,.personality-detail-grid>.personality-choice) :is(h2,h3,h4,b,strong,label,legend){color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
html[data-color-mode="dark"] :is(.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings,.personality-detail-grid>.personality-choice) :is(p,small,span){color:#bdc9d5!important;-webkit-text-fill-color:#bdc9d5!important}
html[data-color-mode="dark"] .physical-appearance-settings button:not(.on){border-color:#ffffff24!important;background:#223348!important;color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}

html[data-color-mode="dark"] .relationship-map-dialog :is(form,.relationship-map-dialog-body,.relationship-map-scroll){border-color:#ffffff20!important;background:#101a28!important;color:#f5f8fb!important}
html[data-color-mode="dark"] .relationship-map-dialog :is(.relationship-map,.relationship-map-canvas){border-color:#ffffff24!important;background:radial-gradient(circle at center,#26384c 0 32%,#101a28 100%)!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-filter{border-color:#ffffff20!important;background:#172536!important;color:#fff!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-filter :is(b,legend){color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-character-list button{border-color:#ffffff18!important;background:#223348!important;color:#d7e0e8!important;-webkit-text-fill-color:#d7e0e8!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-character-list button.on{border-color:#f0cf9e!important;background:#31455d!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-map-node b{background:#172536!important;color:#f5f8fb!important;box-shadow:0 4px 14px #0007!important}
html[data-color-mode="dark"] .relationship-map-dialog .relationship-color-legend span{border-color:#ffffff1f!important;background:#172536!important;color:#f5f8fb!important}
html[data-color-mode="dark"] .relationship-map-dialog svg .map-official rect{fill:transparent!important;stroke:none!important}
html[data-color-mode="dark"] .relationship-map-dialog svg .map-official text{fill:#f5f8fb!important;paint-order:stroke;stroke:#101a28!important;stroke-width:5px;stroke-linejoin:round}

/* 프로필 편집 안의 선택 묶음도 현재 화면 모드를 그대로 따른다. */
html[data-color-mode="dark"] :is(.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) :is(fieldset,.profile-multi-choice,.physical-trait-group,.body-option-group,.representation-warning,.profile-tag-actions,.eye-color-pair){
  border-color:#ffffff20!important;background:#172536!important;color:#f5f8fb!important
}
html[data-color-mode="dark"] :is(.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) :is(input,select,textarea){
  border-color:#ffffff2e!important;background:#223348!important;color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important;color-scheme:dark
}
html[data-color-mode="dark"] :is(.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) :is(fieldset,.profile-multi-choice,.physical-trait-group,.representation-warning) :is(p,small,span,legend,label){
  color:#d3dce6!important;-webkit-text-fill-color:#d3dce6!important
}
html[data-color-mode="dark"] .profile-license>.check{
  border-color:#ffffff20!important;background:#172536!important;color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important
}

/* 선택한 인물의 두 테마색이 밝은 화면에서도 카드와 선택선에 남도록 한다. */
html[data-color-mode="light"].native-app[data-active-tab="observe"] :is(.native-status-card,.native-log-card){
  border-color:color-mix(in srgb,var(--native-own) 45%,#d8cec5)!important;
  box-shadow:0 16px 34px color-mix(in srgb,var(--native-own) 14%,transparent)!important
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button.on{
  outline:0!important;background:transparent!important
}
html[data-color-mode="light"].native-app[data-active-tab="character"] .mobile-character-dashboard{
  background:#f5ecd3!important
}

/* 밝은 화면에서도 관찰 메뉴는 배경 없는 흰 아이콘을 유지한다. */
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-game-menu button{
  border-color:transparent!important;background:transparent!important;box-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important
}
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-game-menu button :is(span,small){color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 5px #000,0 1px 2px #000!important}
html.native-app .native-sub-header button{color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="light"].native-app .native-sub-header button{border-color:#8d837a66!important;background:#ffffff66!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important;text-shadow:none!important}

html[data-color-mode="light"] .mobile-editor-head{border-bottom:1px solid #d8cec5!important;background:linear-gradient(135deg,#fffdf9,#e9ded3)!important;color:#302a25!important;box-shadow:0 8px 24px #49392b22!important}
html[data-color-mode="light"] .mobile-editor-head :is(b,small){color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"] .mobile-editor-head>button{border-color:#cfc4ba!important;background:#fffaf4!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"] :is(.catalog-kind>.title,.catalog-section>.title) button{border-color:#c7baae!important;background:#3e3731!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="dark"] :is(.catalog-kind>.title,.catalog-section>.title) button,
html[data-color-mode="dark"] button[data-add-catalog]{border-color:#ffffff38!important;background:#24364a!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="light"] button[data-add-catalog]{border-color:#3e3731!important;background:#3e3731!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 7px 16px #3128202b!important}

html[data-color-mode="light"].native-app[data-active-tab="character"] .mobile-character-top>div:last-child button{border-color:#3e3731!important;background:#3e3731!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 7px 16px #3128202b!important}
html[data-color-mode="dark"].native-app[data-active-tab="character"] .mobile-character-top>div:last-child button{border-color:#ffffff38!important;background:#24364a!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

html[data-color-mode="light"][data-active-tab="settings"] .settings-shell{background:#f5f1ea!important;color:#302a25!important}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){border-color:#d8cec5!important;background:#fffdf9!important;color:#302a25!important}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend,p,small,a){color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell :is(button,input,select,textarea){border-color:#d2c6ba!important;background:#f1e9e0!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell button.primary{border-color:transparent!important;background:#176b60!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell textarea::placeholder{color:#75695f!important;-webkit-text-fill-color:#75695f!important}
html[data-color-mode="light"][data-active-tab="settings"] .color-mode-options button:not(.on){border-color:#d2c6ba!important;background:#f1e9e0!important;color:#302a25!important;-webkit-text-fill-color:#302a25!important}
html[data-color-mode="light"][data-active-tab="settings"] .color-mode-options button.on{border-color:#176b60!important;background:linear-gradient(135deg,#176b60,#4c8179)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){border-color:#ffffff24!important;background:#172536!important;color:#f5f8fb!important}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(h1,h2,h3,b,strong,label,legend,p,small,a){color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell :is(button,input,select,textarea){border-color:#ffffff2e!important;background:#223348!important;color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important;color-scheme:dark}
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell button.primary,
html[data-color-mode="dark"][data-active-tab="settings"] .color-mode-options button.on{border-color:transparent!important;background:linear-gradient(135deg,#176b60,#3b8175)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-shell .sync-actions button:not(.primary),
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-shell [data-guide-reset],
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-shell [data-reset]{
  border-color:#d2c6ba!important;
  background:#f1e9e0!important;
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-business-footer,
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-business-footer :is(b,p,a){
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-business-footer nav a:first-child{
  color:#302a25!important;
  -webkit-text-fill-color:#302a25!important;
}
html.native-app[data-color-mode="light"][data-active-tab="settings"] .settings-business-footer{border-color:#d8cec5!important}

/* Relationship canvas: settings use calm paper; the main view gets its own
   layered scrapbook background without the former checker pattern. */
.relationship-redesign,.relationship-fullscreen-dialog,.relation-editor-dialog.relationship-fullscreen-dialog{--relationship-paper:#e7dcc4;--relationship-paper-light:#fffaf0;--relationship-ink:#251c18;--relationship-pink:#ff75b4;background-color:var(--relationship-paper-light)!important;background-image:none!important;color:var(--relationship-ink)!important}
.relationship-redesign{position:relative;display:block!important;width:min(100%,412px);height:100%;min-height:0;margin:0 auto!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.relationship-stage{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;overflow:hidden;background-color:#fff8eb!important;background-image:radial-gradient(circle at 18% 35%,color-mix(in srgb,var(--relationship-left) 16%,transparent),transparent 30%),radial-gradient(circle at 82% 43%,color-mix(in srgb,var(--relationship-right) 16%,transparent),transparent 31%),linear-gradient(115deg,transparent 0 48%,#8f735018 49% 50%,transparent 51%),linear-gradient(#fffaf2,#f1e4cc)!important;box-sizing:border-box;isolation:isolate}
.relationship-back-button{display:grid!important;place-items:center!important;width:62px!important;min-width:62px!important;height:62px!important;min-height:62px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important}
.relationship-back-button img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #0003)}
.relationship-stage>.relationship-back-button{position:absolute;top:43px;left:18px;z-index:30}
.relationship-choice-row{position:absolute;z-index:20;top:130px;left:18px;right:18px;display:grid;grid-template-columns:78px minmax(0,1fr) 78px;align-items:start;height:92px}
.relationship-character-selector{position:relative;width:78px;height:92px}
.relationship-character-selected{position:relative!important;display:block!important;width:78px!important;height:92px!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important}
.relationship-character-selected>span{position:absolute;left:5px;top:0;display:grid;place-items:center;width:68px;height:68px;background:transparent}
.relationship-character-selected>span :is(.avatar,.sprite){display:block!important;width:68px!important;height:68px!important;max-width:68px!important;max-height:68px!important;border:0!important;box-shadow:none!important;object-fit:contain!important;filter:drop-shadow(0 4px 3px #0003)}.relationship-character-selected>span img{border-radius:0!important;background:transparent!important}
.relationship-character-selected>b{--relationship-selected-cap:10px;position:absolute;z-index:3;left:5px;top:61px;display:grid;grid-template-columns:var(--relationship-selected-cap) minmax(0,1fr) var(--relationship-selected-cap);width:68px;height:22px;margin:0;padding:0;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:400 11px/1 "KCCHanbit",sans-serif!important;text-shadow:none!important}
.relationship-character-selected>b::before,.relationship-character-selected>b::after{display:block;content:"";height:22px;background-size:auto 100%!important;background-repeat:no-repeat!important}
.relationship-character-selected>b::before{background-image:url("./assets/home-ui/pill-left.webp")!important;background-position:right center!important}
.relationship-character-selected>b::after{background-image:url("./assets/home-ui/pill-right.webp")!important;background-position:left center!important}
.relationship-character-selected>b>i{display:none}.relationship-character-selected>b>em{display:grid;place-items:center;min-width:0;margin:0 -1px;background:url("./assets/home-ui/pill-middle.webp") center/100% 100% repeat-x!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:inherit!important;font-style:normal!important;white-space:nowrap}
.relationship-character-roster{position:absolute;z-index:80;top:72px;left:-1px;display:grid;width:80px;height:min(520px,70dvh);padding:8px 8px 52px;overflow:hidden;border:1px solid #fff8;border-radius:0 0 28px 28px;background:#fffdf1e8;box-shadow:0 12px 28px #32221742;box-sizing:border-box;backdrop-filter:blur(5px)}
.selector-target .relationship-character-roster{right:-1px;left:auto}.relationship-character-roster[hidden]{display:none!important}
.relationship-character-roster>div{display:grid;align-content:start;gap:5px;overflow-y:auto;scrollbar-width:none}.relationship-character-roster>div::-webkit-scrollbar{display:none}
.relationship-character-roster-entry{display:grid!important;grid-template-rows:48px auto!important;justify-items:center!important;gap:2px!important;width:62px!important;min-height:72px!important;margin:0!important;padding:0 0 3px!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#2c211b!important;-webkit-text-fill-color:#2c211b!important}
.relationship-character-roster-entry :is(.avatar,.sprite){width:48px!important;height:48px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;object-fit:contain!important}.relationship-character-roster-entry small{display:block;max-width:62px;overflow:hidden;font:400 9px/12px "KCCHanbit",sans-serif;text-align:center;text-overflow:ellipsis;white-space:nowrap}.relationship-character-roster-entry.on small{font-weight:900;color:var(--relationship-own)!important}
.relationship-character-roster-close{position:absolute;right:8px;bottom:8px;display:grid!important;place-items:center!important;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#fff8ee!important;color:#5f402f!important;-webkit-text-fill-color:#5f402f!important;font:700 25px/1 sans-serif!important;box-shadow:0 2px 6px #0003!important}
.relationship-choice-arrow{position:relative;height:31px;margin:20px 7px 0;border-top:2px dashed var(--relationship-own);border-radius:50% 50% 0 0;transform:rotate(1deg)}
.relationship-choice-arrow::after{content:"";position:absolute;right:-1px;top:-5px;width:8px;height:8px;border-right:2px solid var(--relationship-own);border-bottom:2px solid var(--relationship-own);transform:rotate(-45deg)}
.relationship-hero-pair{position:absolute;z-index:5;top:294px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;height:142px;padding:5px 18px;border:2px solid #6e554235;border-radius:70px;background:linear-gradient(90deg,color-mix(in srgb,var(--relationship-left) 12%,#fff8eb),#fff8ebaa 48% 52%,color-mix(in srgb,var(--relationship-right) 12%,#fff8eb));box-shadow:inset 0 0 0 5px #fff9,0 9px 26px #5c412025;contain:layout paint}
.relationship-hero-pair :is(.avatar,.sprite){width:124px!important;height:124px!important;border:0!important;box-shadow:none!important;object-fit:contain!important;filter:drop-shadow(0 8px 4px #0003)}.relationship-hero-pair img{border-radius:0!important;background:transparent!important}
.relationship-stage::after{position:absolute;z-index:1;inset:205px 18px 255px;display:block;content:"";pointer-events:none;opacity:.32;background:radial-gradient(circle at 28% 48%,color-mix(in srgb,var(--relationship-left) 34%,transparent),transparent 38%),radial-gradient(circle at 72% 48%,color-mix(in srgb,var(--relationship-right) 34%,transparent),transparent 38%);animation:relationship-ambient 5.4s ease-in-out infinite}
.relationship-hero-pair::before{position:absolute;z-index:0;inset:-35px -22px;display:grid;place-items:center;content:"";pointer-events:none;color:#ff77b8;font:900 33px/1 sans-serif;opacity:0;transform:scale(.85)}
.relationship-hero-pair>:first-child,.relationship-hero-pair>:last-child{position:relative;z-index:2;will-change:transform}
.relationship-motion-neutral .relationship-hero-pair>:first-child{animation:relationship-float-left 4.8s ease-in-out infinite}.relationship-motion-neutral .relationship-hero-pair>:last-child{animation:relationship-float-right 5.1s ease-in-out infinite}
.relationship-motion-close .relationship-hero-pair>:first-child{animation:relationship-close-left 4.2s ease-in-out infinite}.relationship-motion-close .relationship-hero-pair>:last-child{animation:relationship-close-right 4.2s ease-in-out infinite}
.relationship-motion-stranger .relationship-hero-pair::before{content:"?            ?";opacity:.82;color:#6e625a;animation:relationship-questions 2.8s ease-in-out infinite}.relationship-motion-stranger .relationship-hero-pair>:first-child{animation:relationship-stranger-left 3.4s ease-in-out infinite}.relationship-motion-stranger .relationship-hero-pair>:last-child{animation:relationship-stranger-right 3.4s .18s ease-in-out infinite}
.relationship-motion-wary .relationship-hero-pair::before{content:"…";opacity:.62;color:#8b705e;animation:relationship-wary-mark 3s ease-in-out infinite}.relationship-motion-wary .relationship-hero-pair>:first-child{animation:relationship-wary-left 3.2s ease-in-out infinite}.relationship-motion-wary .relationship-hero-pair>:last-child{animation:relationship-wary-right 3.2s ease-in-out infinite}
.relationship-motion-romantic .relationship-hero-pair::before{content:"♡  ♥  ♡";opacity:.9;animation:relationship-hearts 2.4s ease-in-out infinite}.relationship-motion-romantic .relationship-hero-pair>:first-child{transform-origin:75% 90%;animation:relationship-cuddle-left 2.6s ease-in-out infinite}.relationship-motion-romantic .relationship-hero-pair>:last-child{transform-origin:25% 90%;animation:relationship-cuddle-right 2.6s ease-in-out infinite}
.relationship-motion-crush-forward .relationship-hero-pair::before,.relationship-motion-crush-reverse .relationship-hero-pair::before{content:"♡";opacity:.88;color:#ff66ad;animation:relationship-crush-heart 2.2s ease-in-out infinite}.relationship-motion-crush-forward .relationship-hero-pair::before{justify-content:start;padding-left:28%}.relationship-motion-crush-reverse .relationship-hero-pair::before{justify-content:end;padding-right:28%}.relationship-motion-crush-forward .relationship-hero-pair>:first-child{animation:relationship-crush-left 2.8s ease-in-out infinite}.relationship-motion-crush-forward .relationship-hero-pair>:last-child{animation:relationship-unaware-right 3.8s ease-in-out infinite}.relationship-motion-crush-reverse .relationship-hero-pair>:first-child{animation:relationship-unaware-left 3.8s ease-in-out infinite}.relationship-motion-crush-reverse .relationship-hero-pair>:last-child{animation:relationship-crush-right 2.8s ease-in-out infinite}
.relationship-motion-tense .relationship-hero-pair::before{content:"⚡";opacity:.5;color:#f0a64b;animation:relationship-flash 3.2s steps(2,end) infinite}.relationship-motion-tense .relationship-hero-pair>:first-child{animation:relationship-tense-left 3.6s ease-in-out infinite}.relationship-motion-tense .relationship-hero-pair>:last-child{animation:relationship-tense-right 3.6s ease-in-out infinite}
@keyframes relationship-ambient{0%,100%{opacity:.2;transform:scale(.96)}50%{opacity:.38;transform:scale(1.03)}}
@keyframes relationship-float-left{0%,100%{transform:translate3d(0,2px,0) rotate(-1deg)}50%{transform:translate3d(3px,-5px,0) rotate(1deg)}}
@keyframes relationship-float-right{0%,100%{transform:translate3d(0,-1px,0) rotate(1deg)}50%{transform:translate3d(-3px,5px,0) rotate(-1deg)}}
@keyframes relationship-close-left{0%,100%{transform:translate3d(0,1px,0)}50%{transform:translate3d(8px,-4px,0)}}
@keyframes relationship-close-right{0%,100%{transform:translate3d(0,-1px,0)}50%{transform:translate3d(-8px,4px,0)}}
@keyframes relationship-questions{0%,100%{opacity:.42;transform:translate3d(0,5px,0) scale(.92)}50%{opacity:.92;transform:translate3d(0,-7px,0) scale(1.08)}}
@keyframes relationship-stranger-left{0%,100%{transform:translate3d(-5px,2px,0) rotate(-2deg)}50%{transform:translate3d(0,-3px,0) rotate(1deg)}}
@keyframes relationship-stranger-right{0%,100%{transform:translate3d(5px,-1px,0) rotate(2deg)}50%{transform:translate3d(0,4px,0) rotate(-1deg)}}
@keyframes relationship-wary-mark{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.7;transform:scale(1.08)}}
@keyframes relationship-wary-left{0%,100%{transform:translate3d(-2px,0,0) rotate(-1deg)}50%{transform:translate3d(-8px,-2px,0) rotate(-3deg)}}
@keyframes relationship-wary-right{0%,100%{transform:translate3d(2px,0,0) rotate(1deg)}50%{transform:translate3d(8px,2px,0) rotate(3deg)}}
@keyframes relationship-hearts{0%,100%{opacity:.35;transform:translate3d(0,16px,0) scale(.78)}50%{opacity:1;transform:translate3d(0,-16px,0) scale(1.18)}}
@keyframes relationship-cuddle-left{0%,100%{transform:translate3d(2px,1px,0) rotate(0)}45%,60%{transform:translate3d(18px,-5px,0) rotate(5deg)}}
@keyframes relationship-cuddle-right{0%,100%{transform:translate3d(-2px,-1px,0) rotate(0)}45%,60%{transform:translate3d(-18px,4px,0) rotate(-5deg)}}
@keyframes relationship-crush-heart{0%,100%{opacity:.2;transform:translate3d(0,12px,0) scale(.72)}45%{opacity:1;transform:translate3d(0,-13px,0) scale(1.16)}}
@keyframes relationship-crush-left{0%,100%{transform:translate3d(-3px,2px,0) rotate(-1deg)}50%{transform:translate3d(15px,-6px,0) rotate(4deg)}}
@keyframes relationship-crush-right{0%,100%{transform:translate3d(3px,-1px,0) rotate(1deg)}50%{transform:translate3d(-15px,-5px,0) rotate(-4deg)}}
@keyframes relationship-unaware-left{0%,100%{transform:translate3d(-5px,0,0)}50%{transform:translate3d(-1px,-3px,0) rotate(-1deg)}}
@keyframes relationship-unaware-right{0%,100%{transform:translate3d(5px,0,0)}50%{transform:translate3d(1px,3px,0) rotate(1deg)}}
@keyframes relationship-flash{0%,78%,100%{opacity:.18;transform:scale(.86)}82%,92%{opacity:.72;transform:scale(1.1)}}
@keyframes relationship-tense-left{0%,100%{transform:translate3d(-3px,0,0)}45%{transform:translate3d(1px,-2px,0)}50%{transform:translate3d(-1px,2px,0)}}
@keyframes relationship-tense-right{0%,100%{transform:translate3d(3px,0,0)}45%{transform:translate3d(-1px,2px,0)}50%{transform:translate3d(1px,-2px,0)}}
.relationship-stage .relationship-direction-sentence{position:absolute;z-index:6;top:444px;left:18px;right:18px;display:grid!important;justify-items:center;gap:2px!important;text-align:center;color:#fff!important;-webkit-text-fill-color:#fff!important;font:800 15px/1.08 "KCCHanbit",sans-serif!important;letter-spacing:-.03em;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:0 2px 2px #0007!important}
.relationship-stage .relationship-direction-sentence span{display:block;min-height:20px}.relationship-stage .relationship-direction-sentence span mark{padding:0;background:transparent!important;color:var(--sentence-name)!important;-webkit-text-fill-color:var(--sentence-name)!important;font:inherit!important;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.relationship-stage .relationship-direction-sentence strong{display:block;font:900 25px/1.05 "KCCHanbit",sans-serif!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2.7px #000;paint-order:stroke fill}
.relationship-official-status{position:absolute;z-index:6;top:501px;left:20px;right:20px;font:800 11px/1.2 "KCCHanbit",sans-serif!important;text-align:center;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.8px #000;paint-order:stroke fill}
.relationship-reality-pill{position:absolute;z-index:6;top:535px;left:50%;display:block;width:266px;min-height:43px;padding:11px 14px;border:1px solid #d7cbbb;border-radius:24px;background:#fffefa!important;background-image:linear-gradient(90deg,var(--relationship-left),var(--relationship-right))!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font:900 13px/1.35 "KCCHanbit",sans-serif!important;font-style:normal!important;text-align:center;box-shadow:0 5px 8px #3a2a1e30;box-sizing:border-box;transform:translateX(-50%)}
.relationship-redesign:has(dialog[open]) :is(.relationship-stage::after,.relationship-hero-pair::before,.relationship-hero-pair>:first-child,.relationship-hero-pair>:last-child){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.relationship-stage::after,.relationship-hero-pair::before,.relationship-hero-pair>:first-child,.relationship-hero-pair>:last-child{animation:none!important;will-change:auto!important}}
.relationship-stage-actions{position:absolute;z-index:10;right:55px;bottom:36px;left:55px;display:grid;gap:10px;margin:0}
.relationship-stage-actions .relationship-composite-action{display:grid!important;grid-template-columns:22px minmax(0,1fr) 22px!important;align-items:stretch!important;width:100%!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:#fff3df!important;-webkit-text-fill-color:#fff3df!important;font:400 14px/1 "KCCHanbit",sans-serif!important;box-shadow:none!important;text-shadow:0 2px 1px #0008!important}
.relationship-stage-actions .relationship-composite-action>i{display:none}.relationship-stage-actions .relationship-composite-action::before,.relationship-stage-actions .relationship-composite-action::after{display:block;content:"";height:40px;background-size:auto 100%!important;background-repeat:no-repeat!important}.relationship-stage-actions .relationship-composite-action::before{background-image:url("./assets/home-ui/pill-left.webp")!important;background-position:right center!important}.relationship-stage-actions .relationship-composite-action::after{background-image:url("./assets/home-ui/pill-right.webp")!important;background-position:left center!important}.relationship-stage-actions .relationship-composite-action>span{display:grid;place-items:center;min-width:0;margin:0 -1px;background:url("./assets/home-ui/pill-middle.webp") center/100% 100% repeat-x!important;color:inherit!important;-webkit-text-fill-color:inherit!important;font:inherit!important}
html.native-app[data-active-tab="relationship"] body #app main .relationship-character-selected>b>em{color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important}html.native-app[data-active-tab="relationship"] body #app main .relationship-stage-actions .relationship-composite-action>span{color:#fff3df!important;-webkit-text-fill-color:#fff3df!important}
.relationship-list-add{width:100%!important;min-height:42px!important;padding:5px 14px!important;border:3px solid #1e1713!important;border-radius:50% / 42%!important;background:linear-gradient(180deg,#6b5141,#4f392f)!important;color:#fff3df!important;-webkit-text-fill-color:#fff3df!important;font-size:13px!important;font-weight:900!important;box-shadow:inset 0 0 0 3px #a98972,0 3px 0 #15100d!important;text-shadow:0 2px 1px #0007}
.relationship-fullscreen-dialog,.relation-editor-dialog.relationship-fullscreen-dialog{inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important}
.relationship-fullscreen-dialog::backdrop{background:transparent!important;backdrop-filter:none!important}
.relationship-fullscreen-dialog>form,.relation-editor-dialog.relationship-fullscreen-dialog>form{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:8px!important;width:min(100%,412px)!important;max-width:412px!important;height:100dvh!important;max-height:none!important;margin:0 auto!important;padding:10px 18px max(12px,env(safe-area-inset-bottom))!important;overflow:hidden!important;box-sizing:border-box!important;background-color:#fffaf2!important;background-image:linear-gradient(180deg,#fffdf8,#f1e6d3)!important;background-repeat:no-repeat!important}
.relation-editor-dialog.relationship-fullscreen-dialog{overflow-x:hidden!important;overflow-y:auto!important}
.relation-editor-dialog.relationship-fullscreen-dialog>form{position:relative!important;display:grid!important;grid-template-rows:auto!important;align-content:start!important;gap:14px!important;width:min(100%,540px)!important;max-width:540px!important;height:100%!important;min-height:100%!important;max-height:100%!important;padding:12px 16px max(18px,env(safe-area-inset-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;isolation:isolate}
.relation-editor-dialog.relationship-fullscreen-dialog .relationship-editor-actions{position:sticky;z-index:10;bottom:0;display:grid!important;margin:2px -4px -6px;padding:10px 4px 6px;background:linear-gradient(180deg,transparent,#f1e6d3 30%)}
.relationship-editor-head,.relationship-list-head{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:8px;min-height:68px}
.relation-editor-dialog .official-editor-head{position:sticky;z-index:12;top:-12px;display:grid!important;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:12px;width:auto;height:auto;min-height:76px;margin:-12px -16px 0;padding:12px 16px 8px;background:linear-gradient(180deg,#fffdf8 78%,transparent)}.relation-editor-dialog .official-editor-head>.relationship-back-button{position:static;width:58px!important;height:58px!important}.official-editor-heading{display:grid;gap:2px;min-width:0}.official-editor-heading small{color:#8c755f;font-size:9px;letter-spacing:.12em}.official-editor-heading b{overflow:hidden;color:#2f211a;font:900 22px/1.2 "KCCHanbit",sans-serif;text-overflow:ellipsis;white-space:nowrap}.official-name-field{position:static;z-index:auto;display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;width:100%;height:auto;min-height:54px;padding:8px 12px 8px 16px;border:1px solid #cfbaa0;border-radius:20px;background:#fffaf2!important;box-shadow:0 4px 0 #80654b16;box-sizing:border-box}.official-name-field>span{font:900 12px/1 "KCCHanbit",sans-serif}.official-name-field>input{min-width:0!important;height:38px!important;min-height:38px!important;padding:0 10px!important;border:1px solid #eadcc8!important;border-radius:14px!important;background:#f5ecdf!important;color:#2c211b!important;-webkit-text-fill-color:#2c211b!important;font-size:12px!important;box-shadow:none!important}.official-type-title{position:static;display:grid!important;grid-template-rows:auto 44px;gap:6px;width:auto;height:auto;padding:0;background:transparent!important;box-shadow:none!important;box-sizing:border-box}.official-type-title>span{color:#3b2b23!important;-webkit-text-fill-color:#3b2b23!important;-webkit-text-stroke:0;font:900 12px/1.2 "KCCHanbit",sans-serif}.official-type-title>select{min-width:0!important;height:44px!important;padding:5px 28px 5px 12px!important;border:1px solid #9b8169!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important;color:#2c211b!important;-webkit-text-fill-color:#2c211b!important;font-size:12px!important;font-weight:900!important}
.relationship-editor-head .relationship-back-button,.relationship-list-head .relationship-back-button{width:54px!important;min-width:54px!important;height:54px!important;min-height:54px!important}
.relationship-viewpoint-dialog{overflow:hidden!important}
.relationship-viewpoint-dialog>form{position:relative!important;display:block!important;width:min(100%,412px)!important;height:100dvh!important;min-height:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;isolation:isolate}
.relationship-viewpoint-dialog .relationship-editor-head{position:relative;z-index:5;display:block;width:100%;height:118px;min-height:118px}
.relationship-viewpoint-dialog .relationship-editor-head>.relationship-back-button{position:absolute;top:43px;left:18px;width:62px!important;height:62px!important}
.relationship-viewpoint-dialog .relationship-editor-pair{position:absolute;top:10px;left:110px;right:21px;display:grid;grid-template-columns:78px minmax(0,1fr) 78px;align-items:start;height:104px}
.relationship-viewpoint-dialog .relationship-editor-pair figure{display:grid;grid-template-rows:72px 23px;justify-items:center;width:78px;height:101px;margin:0}.relationship-viewpoint-dialog .relationship-editor-pair figure :is(.avatar,.sprite){width:72px!important;height:72px!important;border:0!important;box-shadow:none!important;object-fit:contain!important;filter:drop-shadow(0 4px 3px #0003)}.relationship-viewpoint-dialog .relationship-editor-pair figure img{border-radius:0!important;background:transparent!important}
.relationship-viewpoint-dialog .relationship-editor-pair figure>b{display:grid;place-items:center;width:78px;height:23px;margin-top:-2px;overflow:hidden;border:2px solid #211915;border-radius:13px;background:#60483b;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:2.1px #000;paint-order:stroke fill;font:400 11px/1 "KCCHanbit",sans-serif!important;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 0 #0005;box-sizing:border-box}
.relationship-viewpoint-dialog .relationship-editor-pair>i{position:relative;height:31px;margin:30px 9px 0;border-top:2px dashed var(--relationship-pink);border-radius:50% 50% 0 0}.relationship-viewpoint-dialog .relationship-editor-pair>i::after{content:"";position:absolute;right:-1px;top:-5px;width:8px;height:8px;border-right:2px solid var(--relationship-pink);border-bottom:2px solid var(--relationship-pink);transform:rotate(-45deg)}
.relationship-all-fields{align-self:start;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 12px!important;min-height:0!important}
.relationship-viewpoint-dialog .relationship-all-fields{position:relative!important;z-index:2;top:auto;right:auto;left:auto;display:grid!important;grid-template-columns:151px 159px!important;gap:22px 18px!important;margin:26px 40px 0!important;padding:0 0 max(28px,env(safe-area-inset-bottom))!important;border:0!important;background:transparent!important;box-shadow:none!important;touch-action:pan-y!important}
.relationship-view-field{display:grid!important;align-content:start!important;gap:2px!important;min-width:0!important;margin:0!important}
.relationship-view-field b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important;line-height:1.15;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.8px #000;paint-order:stroke fill;text-shadow:0 1px 1px #0008}
.relationship-view-field select,.official-relation-fields select{width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;padding:3px 24px 3px 10px!important;border:1px solid #17110e!important;border-radius:18px!important;background:#fff!important;color:#191411!important;-webkit-text-fill-color:#191411!important;font-size:11px!important;font-weight:800!important;box-shadow:none!important;text-overflow:ellipsis}
html[data-color-mode].native-app[data-active-tab="relationship"] .relationship-viewpoint-dialog .relationship-view-field select{height:41px!important;min-height:41px!important;padding:4px 25px 4px 10px!important;border:1px solid #17110e!important;border-radius:11px!important;background:#fff!important;color:#191411!important;-webkit-text-fill-color:#191411!important;color-scheme:light!important;font-size:12px!important;box-shadow:none!important}
.relationship-view-field.view-overall,.relationship-view-field.view-aggressionAction{grid-column:1/-1}
.relationship-editor-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important}.relationship-editor-actions button{min-height:42px!important;padding:7px!important;font-size:12px!important;font-weight:900!important}
.official-member-section{position:static;z-index:auto;display:grid;gap:8px;width:100%;padding:14px;border:1px solid #cfbaa0;border-radius:20px;background:#fffaf2cc;box-shadow:0 4px 0 #80654b12;box-sizing:border-box}.official-member-section>b{display:block;margin:0;color:#3b2b23!important;-webkit-text-fill-color:#3b2b23!important;font:900 12px/1.3 "KCCHanbit",sans-serif;-webkit-text-stroke:0}.official-member-picker{display:flex;align-content:flex-start;flex-wrap:wrap;gap:8px;max-height:188px;padding:12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:1px solid #decdb6;border-radius:16px;background:#f6eddf;box-sizing:border-box}.official-member-picker button{width:auto!important;min-width:52px!important;height:34px!important;min-height:34px!important;padding:4px 12px!important;border:1px solid #b69f84!important;border-radius:18px!important;background:#fff!important;color:#2b211b!important;-webkit-text-fill-color:#2b211b!important;font:800 11px/1 "KCCHanbit",sans-serif!important;box-shadow:0 2px 0 #80654b17!important}.official-member-picker button.on{border-color:#6c503c!important;background:linear-gradient(180deg,#ffe58d,#f0ca58)!important;box-shadow:inset 0 0 0 1px #6c503c,0 3px 0 #8e6d39!important}
.official-relation-fields{position:static!important;z-index:auto;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}.official-relation-fields>[hidden]{display:none!important}.official-relation-fields>label:not(.official-blood-choice),.official-relation-fields>fieldset,.official-relation-fields>section{position:static;display:grid!important;align-content:start;gap:7px;min-width:0;width:auto;height:auto;margin:0;padding:14px;border:1px solid #cfbaa0;border-radius:18px;background:#fffaf2cc;box-shadow:0 4px 0 #80654b12;box-sizing:border-box}.official-relation-fields label>b,.relationship-field-heading{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:start;gap:8px;position:relative}.relationship-field-heading>label{flex:1;min-width:0}.relationship-info{display:contents}.relationship-info>summary{cursor:pointer;list-style:none;font:700 17px/1.3 sans-serif;color:#765638;min-width:28px;min-height:28px;text-align:center}.relationship-info>summary::-webkit-details-marker{display:none}.relationship-info[open]>[data-info-copy]{display:block;grid-column:1/-1;box-sizing:border-box;min-width:0;width:100%;padding:10px;line-height:1.6;background:#fffaf0;color:#49372b;border:1px solid #cbb292;border-radius:12px}
.official-relationship-details{grid-column:1/-1;min-width:0;display:grid;gap:12px;padding:16px;border:1px solid #cfbaa0;border-radius:18px;background:#fffaf2}.official-relationship-details legend{font-weight:900}.official-relationship-details>small{line-height:1.6;color:#685447}.official-relationship-details>.relationship-detail-row{display:grid;gap:6px;min-width:0}.official-relationship-details select{width:100%;min-width:0;white-space:normal}
.official-order-card>b,.official-legal-registration>legend{overflow:visible;color:#3b2b23!important;-webkit-text-fill-color:#3b2b23!important;-webkit-text-stroke:0;font:900 12px/1.25 "KCCHanbit",sans-serif;white-space:normal}.official-stage-field{grid-column:auto}.official-past-toggle{grid-column:1/-1;grid-template-columns:minmax(0,1fr) 22px!important;grid-template-rows:auto auto!important;align-items:center!important}.official-past-toggle>input[type="checkbox"]{grid-column:2;grid-row:1;width:20px!important;height:20px!important;min-height:20px!important;margin:0!important}.official-past-toggle>small{grid-column:1/-1;color:#74655a!important;font-size:10px!important;line-height:1.45!important}.official-tags-field{grid-column:1/-1}.official-tags-field>button{height:44px!important;min-height:44px!important;padding:5px 12px!important;border:1px solid #9b8169!important;border-radius:14px!important;background:#fff!important;color:#191411!important;-webkit-text-fill-color:#191411!important;box-shadow:none!important}.official-order-card{grid-column:1/-1}.official-order-card>small{color:#74655a;font-size:10px;line-height:1.45}.official-order-list{display:grid!important;gap:7px;max-height:292px;padding-right:2px;overflow-y:auto}.official-role-options{grid-column:1/-1;width:100%;font-size:13px}.official-role-options summary{cursor:pointer;padding:7px}.official-role-options label,.official-role-reference,.official-cohabit-home{display:grid;gap:6px}.official-role-options input[type=checkbox]{width:18px;height:18px}.official-cohabit-home{grid-column:1/-1;grid-template-columns:minmax(0,1fr);font-size:13px}.official-order-card[hidden],.official-cohabit-home[hidden],.official-mentor-field[hidden],.official-legal-registration[hidden],.official-parent-role[hidden],.official-kinship[hidden],.official-sibling-link[hidden],.official-fault[hidden]{display:none!important}.official-cohabit-home small{font-size:12px;line-height:1.5}
.official-order-person{display:grid;grid-template-columns:24px 42px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:50px;padding:6px 8px;border:1px solid #decdb6;border-radius:14px;background:#fff}.official-order-person>em{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#6b5141;color:#fff;font-size:11px;font-style:normal;font-weight:900}.official-order-person>span,.official-order-person>span>i{display:grid;place-items:center;width:40px;height:40px}.official-order-person img{width:40px;height:40px;object-fit:contain}.official-order-person>b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.official-order-person>nav{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.official-role-inline{display:grid;gap:4px;width:100px}.official-role-inline select{width:100%;min-width:0;height:34px;font-size:11px;padding:3px}.official-role-inline label{display:flex!important;align-items:center;gap:5px}.official-role-inline input[type=checkbox]{position:static!important;width:16px!important;height:16px!important;min-height:16px!important;margin:0!important}.official-role-inline small{font-size:10px}.official-order-person:has(.official-role-inline)>b{grid-column:3/5}.official-order-person:has(.official-role-inline)>nav{grid-column:2/5}.official-order-person>nav button{display:grid!important;place-items:center;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border:1px solid #a58b72!important;border-radius:11px!important;background:#f6ead7!important;color:#49372d!important;-webkit-text-fill-color:#49372d!important;box-shadow:none!important}.official-order-person>nav button:disabled{opacity:.3}.official-outside-field{grid-column:1/-1}.official-legal-registration{grid-column:1/-1}.official-legal-registration>legend{padding:0 4px}.official-legal-registration>label{display:grid!important;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:9px;min-height:42px;padding:8px 10px;border:1px solid #decdb6;border-radius:13px;background:#fff}.official-legal-registration input{width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;margin:0!important}.official-legal-registration span{color:#352820;font-size:12px;font-weight:800}.official-parent-role,.official-kinship,.official-sibling-link,.official-fault{grid-column:auto}.official-sibling-link,.official-fault{grid-column:1/-1}.official-relation-toggles{position:static;z-index:auto;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:14px;border:1px solid #cfbaa0;border-radius:18px;background:#fffaf2cc;box-shadow:0 4px 0 #80654b12}.official-relation-toggles>label:not(.official-cohabit-home){display:grid!important;grid-template-columns:minmax(0,1fr) 22px;align-items:center!important;gap:8px!important;min-height:44px;padding:9px 10px!important;border:1px solid #decdb6;border-radius:13px;background:#fff!important;box-shadow:none!important;color:#3b2b23!important;-webkit-text-fill-color:#3b2b23!important;font:900 12px/1.2 "KCCHanbit",sans-serif!important;-webkit-text-stroke:0}.official-relation-toggles input{width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;margin:0!important}.official-tag-panel{position:fixed;z-index:50;top:50%;right:max(18px,calc((100vw - 500px)/2));left:max(18px,calc((100vw - 500px)/2));max-height:min(72dvh,560px);padding:16px;overflow:auto;border:2px solid #33241c;border-radius:24px;background:#fffaf0fa;box-shadow:0 18px 48px #2b1a1266;transform:translateY(-50%)}.official-tag-panel[hidden]{display:none!important}.official-tag-panel>div:first-child{display:flex;align-items:center;justify-content:space-between}.official-tag-panel>div:first-child>button{width:38px!important;height:38px!important;min-height:38px!important;padding:0!important}.official-tag-panel>div:last-child{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.official-tag-panel [data-relation-tag]{width:auto!important;min-height:36px!important;padding:7px 10px!important;border-radius:999px!important;background:#fff!important}.official-tag-panel [data-relation-tag].on{background:#60483b!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.official-tag-panel>small{display:block;margin-top:8px;color:#695c54!important;font-size:10px;line-height:1.45}
.official-tag-entry{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.official-tag-entry input{min-width:0!important;height:40px!important;min-height:40px!important;padding:7px 12px!important;border:1px solid #6c584b!important;border-radius:14px!important;background:#fff!important;color:#211915!important;-webkit-text-fill-color:#211915!important}
.official-tag-entry button{width:auto!important;min-width:64px!important;min-height:40px!important;padding:7px 12px!important;border-radius:14px!important}
.official-tag-list{display:flex!important;flex-wrap:wrap;gap:8px;margin-top:12px}
.official-tag-panel .official-tag-list [data-relation-tag]{width:auto!important;min-height:36px!important;padding:7px 10px!important;border-radius:999px!important;background:#60483b!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.official-tag-panel .official-tag-list [data-relation-tag] i{margin-left:4px;font-style:normal}
.relationship-placement-dialog{width:min(92vw,560px)!important;max-width:560px!important;max-height:min(84dvh,720px)!important;margin:auto!important;padding:0!important;border:2px solid #493426!important;border-radius:24px!important;background:#fffaf1!important;color:#2b211b!important;box-shadow:0 22px 60px #1c0d0870!important}
.relationship-placement-dialog::backdrop{background:#2c1a14a8!important;backdrop-filter:blur(3px)}
.relationship-placement-dialog>form{display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;gap:12px!important;max-height:min(84dvh,720px)!important;padding:18px!important;background:linear-gradient(#fffdf7,#eee1ca)!important}
.relationship-placement-dialog header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px}.relationship-placement-dialog header span{display:grid}.relationship-placement-dialog header small{font-size:9px;letter-spacing:.13em}.relationship-placement-dialog header b{font-size:21px}.relationship-placement-dialog header button{display:grid!important;place-items:center!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#5d4335!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:24px!important}
.relationship-placement-dialog>form>p{margin:0;color:#6b5b50!important;-webkit-text-fill-color:#6b5b50!important;font-size:12px;line-height:1.45}.relationship-placement-list{display:grid;gap:10px;min-height:0;overflow-y:auto}.relationship-placement-list>label{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,210px)!important;align-items:center!important;gap:12px!important;padding:10px 12px!important;border:1px solid #bca98f!important;border-radius:16px!important;background:#fffaf3!important}.relationship-placement-list>label>span{display:flex;align-items:center;gap:9px;min-width:0}.relationship-placement-list :is(.avatar,.sprite),.relationship-placement-list>label>span>i{display:grid;width:42px!important;height:42px!important;object-fit:contain}.relationship-placement-list>label b{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.relationship-placement-list select{width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:7px 10px!important;border:1px solid #8b745f!important;border-radius:13px!important;background:#fff!important;color:#2c211b!important;-webkit-text-fill-color:#2c211b!important}.relationship-placement-done{min-height:46px!important;border-radius:15px!important}
@media(max-width:520px){.relationship-placement-dialog{width:calc(100vw - 24px)!important}.relationship-placement-list>label{grid-template-columns:1fr!important}.relationship-placement-list select{height:48px!important}}
html[data-color-mode][data-active-tab="relationship"] .relationship-viewpoint-dialog .relationship-editor-pair figure>b{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:none!important}
.relationship-list-dialog>form{display:block!important;padding:16px clamp(16px,3vw,36px) 32px!important;background:#f3eadc!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important}.relationship-list-head{position:relative;z-index:3;display:grid!important;grid-template-columns:62px minmax(0,1fr)!important;gap:12px;min-height:86px}.relationship-list-head span{display:grid;align-content:center;gap:0}.relationship-list-head h2{margin:0;font-size:22px;color:var(--relationship-ink)!important;-webkit-text-fill-color:var(--relationship-ink)!important}.relationship-list-head small{font-size:8px;letter-spacing:.14em}.relationship-list-head p{margin:1px 0 0;font-size:12px;color:#65564e!important}.relationship-list-tools{display:grid;gap:9px;margin:0 0 15px}.relationship-list-tools>input{width:100%!important;height:47px!important;min-height:47px!important;padding:8px 18px!important;border:1px solid #b9a483!important;border-radius:25px!important;background:#fffaf0d9!important;color:#38271f!important;-webkit-text-fill-color:#38271f!important;color-scheme:light!important;box-shadow:none!important}.relationship-list-tools>nav{display:flex;gap:5px;overflow-x:auto;padding:0 2px 4px;scrollbar-width:none}.relationship-list-tools>nav::-webkit-scrollbar{display:none}.relationship-list-tools>nav button{flex:0 0 auto;width:auto!important;min-width:48px!important;min-height:35px!important;padding:6px 11px!important;border:0!important;border-radius:18px!important;background:#e7dbc6!important;color:#2d211b!important;-webkit-text-fill-color:#2d211b!important;font-weight:900!important;box-shadow:none!important}.relationship-list-tools>nav button.on{background:#69513e!important;color:#fff9ec!important;-webkit-text-fill-color:#fff9ec!important}
.official-relation-dialog .relationship-card-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;align-items:stretch!important;gap:18px!important;min-height:0;padding:0!important;overflow:visible!important}.official-relation-dialog [data-official-card]{display:grid!important;align-content:start!important;gap:10px!important;width:100%!important;min-width:0!important;min-height:240px;margin:0!important;padding:20px!important;overflow:hidden;border:1px solid #cab79a!important;border-radius:20px!important;background:#fffaf0dd!important;box-shadow:0 4px 0 #7e65431a!important;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:180px 240px}.official-relation-dialog [data-official-card][hidden]{display:none!important}.official-relation-dialog .relation-avatars{display:flex;justify-content:flex-start;min-height:76px;gap:8px;padding:10px;border-radius:14px;background:#eadfce}.official-relation-dialog .relation-avatars :is(.avatar,.sprite){width:56px!important;height:56px!important;margin-right:0!important;object-fit:contain}.official-relation-dialog .relation h2{margin:0;font-size:18px;text-align:left}.official-relation-dialog .relation p{margin:0;color:#6d5949!important;font-size:13px;line-height:1.5;text-align:left}.official-relation-dialog .relation-actions{align-self:end;display:grid!important;grid-template-columns:1fr 1fr;gap:7px;width:100%}.official-relation-dialog .relation-actions button{min-height:42px!important;padding:6px!important;border:0!important;border-radius:999px!important;background:#eadfbe!important;color:#1f1713!important;-webkit-text-fill-color:#1f1713!important;font-size:13px!important}.relationship-list-create-card{display:grid!important;place-items:center!important;align-content:center!important;gap:8px!important;min-height:240px!important;padding:16px!important;border:1px solid #cab79a!important;border-radius:20px!important;background:#fffaf0dd!important;color:#1e1713!important;-webkit-text-fill-color:#1e1713!important;box-shadow:0 4px 0 #7e65431a!important;font-weight:900!important}.relationship-list-create-card>b{font-size:22px}.relationship-filter-empty{grid-column:1/-1}
.relationship-group-card-list{display:grid;gap:13px}.relationship-group-list-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:96px;padding:12px 14px;border:1.5px solid #211915;border-radius:28px;background:#fffaf0dd;content-visibility:auto;contain-intrinsic-size:auto 96px}.relationship-group-list-card[hidden]{display:none!important}.relationship-group-list-card .relation-avatars{display:flex;min-width:70px}.relationship-group-list-card .relation-avatars :is(.avatar,.sprite){width:42px!important;height:42px!important;margin-right:-12px!important}.relationship-group-list-card h2,.relationship-group-list-card p{margin:0}.relationship-group-list-card h2{font-size:16px}.relationship-group-list-card p{color:#9b8174!important;font-size:10px}.relationship-group-list-card .relation-actions{display:flex;gap:7px}.relationship-group-list-card .relation-actions button{min-height:36px!important;padding:6px 13px!important;border:0!important;border-radius:999px!important;background:#eadfbe!important;color:#1f1713!important;-webkit-text-fill-color:#1f1713!important}.relationship-group-create-card{display:grid!important;place-items:center!important;min-height:94px!important;border:1.5px solid #211915!important;border-radius:28px!important;background:#fffaf0dd!important;color:#1f1713!important;-webkit-text-fill-color:#1f1713!important;box-shadow:none!important;font-weight:900!important}.relationship-group-create-card>b{margin-right:8px}.relationship-group-filter-empty{grid-column:1/-1}

html[data-color-mode] .official-relation-dialog .relationship-card-grid [data-official-card],html[data-color-mode] .relationship-group-list-dialog .relationship-group-list-card{background:#fffaf0e8!important;color:#1e1713!important;-webkit-text-fill-color:#1e1713!important}
html[data-color-mode] .official-relation-dialog .relationship-card-grid [data-official-card] h2,html[data-color-mode] .relationship-group-list-dialog .relationship-group-list-card h2{color:#1e1713!important;-webkit-text-fill-color:#1e1713!important}

/* Empty relationships still need navigation when the shared header is hidden. */
.relationship-empty{position:relative;display:grid;place-items:center;box-sizing:border-box;width:100%;height:100dvh;min-height:0;padding:100px 24px 32px;overflow:auto;background:#eaddc5 url('./assets/home-design/town.webp') center/cover}
.relationship-empty-back{position:absolute;left:24px;top:24px;width:60px;height:60px;padding:0;border:0;background:none;box-shadow:none}
.relationship-empty-back img{display:block;width:100%;height:100%;object-fit:contain}
.relationship-empty-card{width:min(100%,480px);box-sizing:border-box;padding:36px 28px;border:4px double #b39b73;border-radius:28px;background:#fff8ebf5;box-shadow:0 8px 24px #38281930;text-align:center;color:#392b21}
.relationship-empty-card>img{width:88px;height:88px;object-fit:contain}
.relationship-empty-card h2{margin:20px 0 12px;font-size:clamp(22px,3vw,30px);line-height:1.4}
.relationship-empty-card p{font-size:16px;line-height:1.7;color:#75624e}
.relationship-empty-card button{min-height:48px;margin-top:12px;padding:12px 24px;border:1px solid #987951;border-radius:18px;background:#674d35;color:#fff7e6}
/* 관계 화면은 휴대폰 고정 캔버스를 유지하되, 넓은 화면에서는 두 영역으로 재배치한다. */
@media(min-width:721px){
  html[data-active-tab="relationship"] body>header,html[data-active-tab="relationship"] .native-sub-header{display:none!important}
  html.native-app[data-active-tab="relationship"] main{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important}
  html[data-active-tab="relationship"] .relationship-page.relationship-redesign{width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;background-color:#efe2cb!important;background-image:linear-gradient(90deg,#e5d4b8,#fff9ec 22% 78%,#e5d4b8)!important}
  html[data-active-tab="relationship"] .relationship-stage{width:min(100%,1180px)!important;max-width:1180px!important;height:100dvh!important;margin:0 auto!important;padding:0!important}
  html[data-active-tab="relationship"] .relationship-stage>.relationship-back-button{top:28px;left:3%}
  html[data-active-tab="relationship"] .relationship-choice-row{top:calc(66px + var(--web-rel-offset,0px));right:auto;left:8%;width:38%;height:105px}
  html[data-active-tab="relationship"] .relationship-hero-pair{top:calc(245px + var(--web-rel-offset,0px));right:auto;left:8%;width:38%;height:170px}
  html[data-active-tab="relationship"] .relationship-hero-pair :is(.avatar,.sprite){width:clamp(132px,14vw,178px)!important;height:clamp(132px,14vw,178px)!important}
  html[data-active-tab="relationship"] .relationship-stage::after{inset:165px 49% 170px 2%}
  html[data-active-tab="relationship"] .relationship-direction-sentence{top:calc(450px + var(--web-rel-offset,0px));right:auto;left:3%;width:48%}
  html[data-active-tab="relationship"] .relationship-official-status{top:calc(515px + var(--web-rel-offset,0px));right:auto;left:3%;width:48%}
  html[data-active-tab="relationship"] .relationship-reality-pill{top:calc(558px + var(--web-rel-offset,0px));left:27%;width:min(38%,390px);font-size:15px!important}
  html[data-active-tab="relationship"] .relationship-stage-actions{top:calc(210px + var(--web-rel-offset,0px));right:6%;bottom:auto;left:55%;gap:17px}
  html[data-active-tab="relationship"] .relationship-stage-actions .relationship-composite-action{height:54px!important;min-height:54px!important;font-size:17px!important}
  html[data-active-tab="relationship"] .relationship-stage-actions .relationship-composite-action::before,html[data-active-tab="relationship"] .relationship-stage-actions .relationship-composite-action::after{height:54px}
  html[data-active-tab="relationship"] .relationship-fullscreen-dialog>form{background-image:linear-gradient(180deg,#fffdf8,#f1e6d3)!important;background-repeat:no-repeat!important}
  html[data-active-tab="relationship"] .relationship-list-dialog>form{width:calc(100% - 48px)!important;max-width:1100px!important;padding:18px 28px 40px!important}
  html[data-active-tab="relationship"] .relationship-list-head{min-height:108px}
  html[data-active-tab="relationship"] .relationship-list-tools{grid-template-columns:minmax(220px,1fr) auto;align-items:center;gap:18px}
  html.native-app[data-active-tab="relationship"] .relationship-list-dialog>form{width:calc(100% - 48px)!important;max-width:1600px!important;padding-inline:clamp(28px,4vw,64px)!important}
  html.native-app[data-active-tab="relationship"] .official-relation-dialog .relationship-card-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important}
  html[data-active-tab="relationship"] .official-relation-dialog .relationship-card-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important}
  html[data-active-tab="relationship"] .relationship-group-card-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-active-tab="relationship"] .relationship-group-create-card{grid-column:1/-1}
  html[data-active-tab="relationship"] .relationship-viewpoint-dialog>form{width:min(100%,640px)!important;max-width:640px!important}
  html[data-active-tab="relationship"] .relationship-viewpoint-dialog .relationship-editor-head>.relationship-back-button{left:28px}
  html[data-active-tab="relationship"] .relationship-viewpoint-dialog .relationship-editor-pair{left:190px;right:70px}
  html[data-active-tab="relationship"] .relationship-viewpoint-dialog .relationship-all-fields{right:auto;left:auto;margin-inline:70px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 24px!important}
  html[data-active-tab="relationship"] .relation-editor-dialog>form{width:min(100%,760px)!important;max-width:760px!important}
  html[data-active-tab="relationship"] .relation-editor-dialog .official-relation-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:520px){
  .relationship-group-list-card{grid-template-columns:auto minmax(0,1fr)}
  .relationship-group-list-card .relation-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%}
}


@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="observe"] .native-observe-home{padding-right:10px!important;padding-left:10px!important}
  html.native-app[data-active-tab="observe"] :is(.native-status-card,.native-log-card){justify-self:center!important;width:calc(100% - 36px)!important;max-width:620px!important;margin-inline:auto!important;box-sizing:border-box!important}
  html.native-app[data-active-tab="observe"] .native-character-picker{justify-self:center!important;width:calc(100% - 36px)!important;max-width:620px!important;margin-inline:auto!important;box-sizing:border-box!important}
  html.native-app[data-active-tab="observe"] .native-character-stage{margin-top:12px!important;width:min(34vw,142px)!important;height:min(22dvh,178px)!important}
  html.native-app[data-active-tab="observe"] .native-character-stage.has-scene-companion,
  html.native-app[data-active-tab="observe"] .native-character-stage.has-scene-lineup{width:min(58vw,232px)!important;height:min(23dvh,186px)!important}
  html.native-app[data-active-tab="observe"] .native-character-picker{gap:7px!important;padding:5px 1px!important}
  html.native-app[data-active-tab="observe"] .native-character-picker button{flex:0 0 48px!important;width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:3px!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important}
  html.native-app[data-active-tab="observe"] .native-character-picker button.on{outline:0!important;background:transparent!important}
  html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button{border-color:transparent!important;background:transparent!important;box-shadow:none!important}
  html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button.on{border-color:transparent!important;background:transparent!important;box-shadow:none!important}
  html.native-app[data-active-tab="observe"] .native-character-picker button small{display:none!important}
  html.native-app[data-active-tab="observe"] .native-character-picker :is(.avatar,.sprite){width:42px!important;height:42px!important}

  /* 관계 탭은 SVG처럼 412×917 한 화면을 사용하며 문서 스크롤을 만들지 않는다. */
  html.native-app[data-active-tab="relationship"] main{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior:none;
    touch-action:none;
  }
  html.native-app[data-active-tab="relationship"] .relationship-page{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html.native-app[data-active-tab="relationship"] .character-view-editor{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 20px 9px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html.native-app[data-active-tab="relationship"] .native-sub-header{display:none!important}
  html.native-app[data-active-tab="relationship"] .relationship-stage{touch-action:manipulation}
  html.native-app[data-active-tab="relationship"] :is(.relationship-fullscreen-dialog,.relationship-fullscreen-dialog>form,.relationship-fullscreen-dialog .relationship-all-fields){touch-action:pan-y}
  html.native-app[data-active-tab="relationship"] .relationship-fullscreen-dialog :is(button,input,select,textarea){touch-action:manipulation}

  html.native-app[data-active-tab="home"] .home-feature-menu button{font-size:14px!important;font-weight:800!important}
  .font-setting-grid{grid-template-columns:1fr}
}

/* Observe cards have one canonical compact layout. */
.native-app .native-status-card{max-height:190px!important;padding:10px 14px!important;overflow:hidden!important;transition:max-height .2s ease}
.native-app .native-status-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.native-app .native-status-card-head>small{color:#ffffffb5;font-size:.78rem;font-weight:900;letter-spacing:.06em}
.native-app .native-status-card-head>button{min-height:30px;padding:4px 10px;border:1px solid #ffffff42;border-radius:999px;background:#0d1624a8;color:#fff;font-size:.76rem;font-weight:900}
.native-app .native-status-card h1{display:-webkit-box;max-height:2.7em!important;margin:2px 0 4px!important;overflow:hidden!important;font-size:clamp(1rem,4.5vw,1.22rem)!important;line-height:1.35!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.native-app .native-status-card p{display:-webkit-box!important;max-height:3.1em!important;margin:0 0 8px;overflow:hidden!important;font-size:.9rem!important;line-height:1.55!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;line-clamp:2!important}
.native-app .native-status-card.expanded{max-height:min(48dvh,520px)!important;overflow-y:auto!important;overscroll-behavior:contain}
.native-app .native-status-card.expanded :is(h1,p){display:block!important;max-height:none!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:unset!important}
.native-app .native-log-card{max-height:150px!important;padding:9px 13px!important;overflow:hidden!important}
.native-app .native-log-card ol{max-height:none!important;overflow:hidden!important}
.native-app .native-log-card li:nth-child(n+3){display:none!important}
.native-app .native-log-card>div>b{font-size:1rem!important;line-height:1.25}
.native-app .native-log-card button{font-size:.78rem!important}
.native-app .native-log-card time{font-size:.7rem!important;line-height:1.4!important;opacity:.76}
.native-app .native-log-card li b{font-size:.92rem!important;line-height:1.35!important}
.native-app .native-log-card li small{font-size:.78rem!important;line-height:1.4!important}
.relationship-map-canvas .map-arrows{z-index:1}
.relationship-map-canvas .map-official{position:relative;z-index:4;pointer-events:none}
.relationship-map-canvas .map-official text{paint-order:stroke!important;stroke:var(--surface)!important;stroke-width:10px!important;stroke-linejoin:round!important}
html[data-color-mode][data-active-tab="relationship"] body .relationship-viewpoint-dialog .relationship-editor-pair figure>b{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:none!important}
html.native-platform .site-footer{display:none!important}
select[data-world-bg]{display:none!important}
label:has(>select[data-world-bg])::after{content:"제공받은 기본 마을 손그림";display:block;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:var(--panel);font-weight:800}

/* Light-mode character editor: selected choices must remain unmistakable. */
html[data-color-mode="light"] .mobile-character-editor-dialog :is(.chips,.personality-choice,.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) button.on,
html[data-color-mode="light"] .character-editor :is(.chips,.personality-choice,.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) button.on{
  border-color:var(--character-own,var(--p))!important;
  outline:3px solid color-mix(in srgb,var(--character-own,var(--p)) 24%,transparent)!important;
  outline-offset:1px!important;
  background:linear-gradient(135deg,var(--character-own,var(--p)),var(--character-secondary,var(--character-own,var(--s))))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--character-own,var(--p)) 30%,transparent)!important;
}
html[data-color-mode="light"] .mobile-character-editor-dialog :is(input,select,textarea):focus,
html[data-color-mode="light"] .character-editor :is(input,select,textarea):focus{
  border-color:var(--character-own,var(--p))!important;
  outline:3px solid color-mix(in srgb,var(--character-own,var(--p)) 22%,transparent)!important;
  outline-offset:1px!important;
}

/* Mobile/web-app viewport stays fixed; long pages scroll inside main and
   dialogs instead of exposing an empty body below the game screen. */
html.native-app,html.native-app body{
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;overflow:hidden!important;
}
html.native-app body{padding:0!important}
html.native-app #app{display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;overflow:hidden!important}
html.native-app .native-sub-header{position:relative!important;top:auto!important;flex:0 0 60px!important;width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important}
html.native-app main{flex:1 1 auto!important;width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;overflow-x:hidden!important;overscroll-behavior:contain;box-sizing:border-box!important}
html.native-app main>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
html.native-app[data-active-tab="settings"] .settings-shell{width:100%!important;max-width:none!important;margin:0!important;overflow-x:clip!important;box-sizing:border-box!important}
html.native-app:not([data-active-tab="catalog"]):not([data-active-tab="relationship"]) main{overflow-y:auto!important}
html.native-app[data-active-tab="catalog"] main{overflow-y:hidden!important}
html.native-app[data-active-tab="catalog"] .catalog-shell{width:100%;height:100%;max-height:100%;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain}
html.native-app[data-active-tab="observe"] main{height:100%!important;min-height:0!important;overflow:hidden!important}
html.native-app[data-active-tab="observe"] .native-observe-home{height:100%!important;min-height:0!important;overflow:hidden!important}

/* Character settings use that character's own palette, including the save
   action in the modal. */
.mobile-character-editor-dialog .mobile-character-editor-actions .primary{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--character-own,var(--p)),var(--character-secondary,var(--character-own,var(--s))))!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
.mobile-character-editor-dialog :is(.chips,.personality-choice,.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) button.on,
.character-editor .desktop-character-editor :is(.chips,.personality-choice,.physical-appearance-settings,.profile-attraction-settings,.health-accessibility-settings) button.on{
  border-color:var(--character-own,var(--p))!important;
  outline:3px solid color-mix(in srgb,var(--character-own,var(--p)) 24%,transparent)!important;
  outline-offset:1px!important;
  background:linear-gradient(135deg,var(--character-own,var(--p)),var(--character-secondary,var(--character-own,var(--s))))!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--character-own,var(--p)) 30%,transparent)!important;
}

/* Current scene and daily record pick up the selected overall color theme. */
html[data-color-mode="light"].native-app[data-active-tab="observe"] :is(.native-status-card,.native-log-card){
  border-color:color-mix(in srgb,var(--p) 44%,#d8cec5)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--p) 14%,#fff),color-mix(in srgb,var(--s) 10%,#fff))!important;
  box-shadow:0 16px 34px color-mix(in srgb,var(--p) 18%,transparent)!important;
}
html[data-color-mode="dark"].native-app[data-active-tab="observe"] :is(.native-status-card,.native-log-card){
  border-color:color-mix(in srgb,var(--p) 60%,#ffffff35)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--p) 26%,#101722e8),color-mix(in srgb,var(--s) 18%,#101722e8))!important;
}
html.native-app[data-active-tab="observe"] .native-log-card button{
  border-color:color-mix(in srgb,var(--p) 48%,var(--line))!important;
  background:color-mix(in srgb,var(--p) 12%,var(--panel))!important;
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;
}
.home-name-setting{grid-column:1/-1}
.world-bg{object-fit:cover}

/* 2026-08-10b: mode and theme rules are centralized here so older page-level
   declarations cannot turn light controls white-on-white again. */
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-status-card-head>small{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  opacity:.84!important;
}
html.native-app[data-active-tab="observe"] .native-status-card-head>button{
  border-color:color-mix(in srgb,var(--p) 55%,#fff)!important;
  background:var(--grad)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--p) 28%,transparent)!important;
}

.catalog-shell button[data-catalog-save]{
  border-color:transparent!important;
  background:var(--grad)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--p) 28%,transparent)!important;
}
html.native-app[data-active-tab="catalog"] .catalog-shell>.title button[data-catalog-save]{
  border-color:transparent!important;
  background:var(--grad)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--p) 28%,transparent)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="catalog"] .catalog-shell{
  background:linear-gradient(155deg,color-mix(in srgb,var(--p) 9%,var(--panel)),var(--panel) 48%)!important;
  color:var(--ink)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="catalog"] .catalog-shell :is(h1,h2,h3,b,label,p,small){
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="catalog"] :is(.catalog-kind,.catalog-dex-card){
  border-color:color-mix(in srgb,var(--p) 24%,var(--line))!important;
  background:color-mix(in srgb,var(--p) 5%,var(--panel))!important;
}

html[data-color-mode="light"] .mobile-character-editor-dialog{
  border:1px solid color-mix(in srgb,var(--p) 24%,#d4cbc2)!important;
  background:var(--panel)!important;
  color:var(--ink)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] [data-mobile-character-editor-dialog="manage"] .mobile-character-editor-body{
  background:linear-gradient(155deg,color-mix(in srgb,var(--p) 10%,#fff),var(--panel) 58%)!important;
  color:var(--ink)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] .character-manage-pane :is(h2,h3,p,label,b,small),
html[data-color-mode="light"].native-app[data-active-tab="character"] .character-manage-grid>section{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] .character-manage-grid>section{
  border-color:color-mix(in srgb,var(--p) 24%,var(--line))!important;
  background:color-mix(in srgb,var(--p) 6%,#fff)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] .character-manage-grid>section>span{
  background:color-mix(in srgb,var(--p) 10%,#fff)!important;
}
html[data-color-mode="light"].native-app[data-active-tab="character"] .character-manage-pane :is(.image-actions button,.character-manage-files button,.theme-custom-color input){
  border-color:color-mix(in srgb,var(--p) 30%,var(--line))!important;
  background:var(--panel)!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}

/* A profile photo may substitute for a missing map icon, but it always stays
   a circular edge-to-edge crop. The icon field itself is never overwritten. */
img.profile-photo-fallback{
  padding:0!important;
  border-radius:50%!important;
  clip-path:circle(closest-side at 50% 50%);
  background:transparent!important;
  object-fit:cover!important;
  object-position:center!important;
  overflow:hidden!important;
  filter:none;
}
.place-people-faces img.profile-photo-fallback,
.home-person img.profile-photo-fallback,
.native-scene-lineup-person img.profile-photo-fallback,
.character-manage-grid>section>span img.profile-photo-fallback{
  border-radius:50%!important;
  object-fit:cover!important;
  background:transparent!important;
}

/* Drowsy is different from fully asleep: the head slowly drops, then perks
   back up with a small startled reset. */
.native-app .scene-action-drowsy .native-character-stage:not(.has-scene-lineup) .native-main-character,
.native-app .scene-action-drowsy .native-scene-lineup-person{
  transform-origin:50% 82%;
  animation:native-drowsy-nod 2.7s cubic-bezier(.45,0,.35,1) infinite!important;
}
.native-app .native-character-drowsy-mark{
  position:absolute;z-index:9;right:4%;top:0;color:#fff;font-size:18px;font-weight:900;
  text-shadow:0 2px 6px #000;animation:native-drowsy-z 2.7s ease-in-out infinite;
}
.native-app .native-character-drowsy-mark.is-main{right:7%;top:8%}
@keyframes native-drowsy-nod{
  0%,18%,100%{translate:0 0;rotate:0deg}
  48%{translate:0 9px;rotate:6deg}
  63%{translate:0 11px;rotate:8deg}
  69%{translate:0 -3px;rotate:-2deg}
  78%{translate:0 0;rotate:0deg}
}
@keyframes native-drowsy-z{0%,18%,100%{opacity:0;translate:0 5px}38%,63%{opacity:1;translate:4px -5px}72%{opacity:0;translate:9px -11px}}

/* Overall color themes tint the major editable surfaces as well as buttons. */
html[data-color-mode="light"] :is(.settings-shell,.catalog-shell,.shop-store,.relationship-page:not(.relationship-redesign)){
  background:linear-gradient(155deg,color-mix(in srgb,var(--p) 9%,var(--panel)),var(--panel) 45%)!important;
}
html[data-color-mode="light"] :is(.setting-card,.catalog-kind,.sync-panel){
  border-color:color-mix(in srgb,var(--p) 24%,var(--line))!important;
  background:color-mix(in srgb,var(--p) 5%,var(--panel))!important;
}
html.native-app .native-sub-header{
  border-color:color-mix(in srgb,var(--p) 28%,var(--line))!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 18%,var(--panel)),var(--panel))!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell{
  background:linear-gradient(155deg,color-mix(in srgb,var(--p) 13%,var(--panel)),var(--bg))!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:color-mix(in srgb,var(--p) 28%,var(--line))!important;
  background:color-mix(in srgb,var(--p) 7%,var(--panel))!important;
}
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell button.primary,
html[data-color-mode="light"][data-active-tab="settings"] .color-mode-options button.on,
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell button.primary,
html[data-color-mode="dark"][data-active-tab="settings"] .color-mode-options button.on{
  border-color:transparent!important;
  background:var(--grad)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Keep both four-item menu columns inside narrow Android viewports. */
html.native-app[data-active-tab="observe"] .native-game-menu button{
  width:74px!important;min-width:74px!important;height:62px!important;padding:2px 0!important;
}
html.native-app[data-active-tab="observe"] .native-game-menu .native-menu-left{left:max(2px,env(safe-area-inset-left))!important}
html.native-app[data-active-tab="observe"] .native-game-menu .native-menu-right{right:max(2px,env(safe-area-inset-right))!important}
html.native-app[data-active-tab="observe"] .native-game-menu button>small{
  display:block;width:74px;max-width:74px;font-size:clamp(.72rem,3.4vw,.9rem)!important;
  line-height:1.05!important;white-space:normal!important;text-align:center;word-break:keep-all;
}

@media(prefers-reduced-motion:reduce){
  .native-app .scene-action-drowsy :is(.native-main-character,.native-scene-lineup-person,.native-character-drowsy-mark),
  .native-app .scene-action-washing-up :is(.native-main-character,.native-scene-action-prop,.native-person-action-prop,.native-scene-lineup-person){animation:none!important}
}

/* 데스크톱 관찰 탭도 마을 지도보다 현재 행동 애니메이션을 먼저 보여준다. */
.desktop-observe-scene{
  position:relative;
  width:100%;
  margin:0 0 18px;
  overflow:hidden;
  border:1px solid #ffffff55;
  border-radius:28px;
  box-shadow:0 18px 42px #17202d26;
  color:#fff;
  background:#18202d;
}
.desktop-observe-scene .desktop-scene-canvas{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(330px,1.1fr);
  align-items:center;
  gap:28px;
  min-height:390px;
  padding:38px clamp(32px,5vw,78px);
  overflow:hidden;
}
.desktop-observe-scene .native-observe-backdrop{background-position:center;background-size:cover;filter:blur(15px) saturate(.88);transform:scale(1.08)}
.desktop-observe-scene .native-observe-shade{background:linear-gradient(100deg,#101722ee 0%,#101722ad 43%,#10172248 72%,#101722a8 100%)}
.desktop-observe-scene .native-scene-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none}
.desktop-observe-scene .desktop-scene-copy{position:relative;z-index:5;align-self:center;max-width:620px;text-shadow:0 2px 12px #000}
.desktop-observe-scene .desktop-scene-copy small{display:block;margin-bottom:10px;color:#ffffffc7;font-size:13px;font-weight:900;letter-spacing:.08em}
.desktop-observe-scene .desktop-scene-copy h1{margin:0 0 14px;color:#fff;font-size:clamp(28px,3.2vw,48px);line-height:1.2;-webkit-text-fill-color:#fff}
.desktop-observe-scene .desktop-scene-copy p{margin:0 0 18px;color:#fffffff0;font-size:17px;line-height:1.7;word-break:keep-all}
.desktop-observe-scene .desktop-scene-copy b{display:inline-flex;padding:8px 12px;border:1px solid #ffffff35;border-radius:99px;background:#0d1420a8;color:#fff;font-size:13px;backdrop-filter:blur(8px)}
.desktop-observe-scene .native-character-stage{width:250px!important;height:285px!important;max-width:none!important;max-height:none!important}
.desktop-observe-scene .native-character-stage.has-scene-companion,
.desktop-observe-scene .native-character-stage.has-scene-lineup{width:390px!important;height:300px!important}
.desktop-observe-scene .native-character-stage span.avatar.native-main-character{width:210px!important;height:210px!important}
.desktop-observe-scene .native-scene-lineup-person span.avatar{width:175px!important;height:175px!important}
.desktop-observe-scene .native-scene-action-prop{width:72px;height:72px;font-size:58px}
.desktop-observe-scene .native-person-action-prop{width:58px;height:58px;font-size:48px}
.desktop-observe-scene .native-pet-orbit{--pet-radius:150px}
.desktop-observe-scene .native-scene-effects i{font-size:30px}
@media(max-width:980px){
  .desktop-observe-scene .desktop-scene-canvas{grid-template-columns:1fr;gap:8px;min-height:570px;text-align:center}
  .desktop-observe-scene .desktop-scene-copy{justify-self:center;order:2}
  .desktop-observe-scene .native-character-stage{order:1}
  .desktop-observe-scene .desktop-scene-copy b{justify-content:center}
}

/* 2026-08-10f: desktop action stage, complete town map, character file actions,
   and one consistent dark surface system. */
.desktop-observe-scene.native-app .native-character-stage{
  animation:desktop-observe-float 2.25s ease-in-out infinite!important;
  will-change:transform;
}
.desktop-observe-scene.native-app .native-character-stage>i{
  animation:desktop-observe-shadow 2.25s ease-in-out infinite!important;
}
@keyframes desktop-observe-float{
  0%,100%{transform:translateY(10px) rotate(-1deg)}
  50%{transform:translateY(-13px) rotate(1.2deg)}
}
@keyframes desktop-observe-shadow{
  0%,100%{opacity:.62;transform:scaleX(1)}
  50%{opacity:.28;transform:scaleX(.72)}
}

/* The supplied map is 3000 × 3300. Desktop now keeps that whole portrait
   canvas instead of forcing it into the old landscape crop. */
@media(min-width:721px){
  html:not(.native-app) .standard-observe-view .viewport{
    width:100%;height:auto!important;min-height:0;aspect-ratio:auto!important;overflow:hidden;touch-action:auto;
  }
  html:not(.native-app) .standard-observe-view .viewport>.world,
  html:not(.native-app) .town-map-scroll>.world{
    width:100%!important;height:auto!important;min-width:0!important;aspect-ratio:10/11!important;
  }
  html:not(.native-app) :is(.standard-observe-view .viewport,.town-map-scroll) .world-bg{
    object-fit:contain!important;
  }
}

.character-file-actions{display:flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto}
.desktop-character-editor .character-menu{flex-wrap:wrap;overflow-x:visible}
.character-file-actions button{min-height:38px;padding:8px 11px;white-space:nowrap}
.character-file-actions .primary{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--character-own,var(--p)),var(--character-secondary,var(--character-own,var(--s))))!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
.character-file-actions .danger{border-color:#d24d5e!important;background:#9f2637!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.character-question-dialog{width:min(500px,calc(100vw - 20px));padding:0;border:1px solid color-mix(in srgb,var(--p) 35%,var(--line));border-radius:26px;background:var(--panel);box-shadow:0 24px 70px #21170f45}
.character-question-dialog::backdrop{background:#21170f78;backdrop-filter:blur(2px)}
.character-question-dialog form{display:grid;gap:14px;padding:24px}.character-question-dialog h2,.character-question-dialog p{margin:0}.character-question-dialog h2{font-size:clamp(23px,5vw,31px);line-height:1.35}.character-question-dialog p{color:var(--muted);line-height:1.55}
.character-question-speaker{display:flex;align-items:center;gap:12px}.character-question-speaker>img,.character-question-speaker>span{width:60px;height:60px;object-fit:contain;border-radius:18px;background:color-mix(in srgb,var(--p) 10%,var(--panel))}.character-question-speaker>span{display:grid;place-items:center;font-size:25px;font-weight:900}.character-question-speaker>div{display:grid;gap:2px}.character-question-speaker small{color:var(--muted);font-weight:700}.character-question-speaker b{font-size:19px}
.character-question-options{display:grid;gap:8px}.character-question-options button{min-height:52px;padding:12px 15px;border-color:color-mix(in srgb,var(--p) 36%,var(--line));background:color-mix(in srgb,var(--p) 7%,var(--panel));text-align:left;font-weight:800}.character-question-options button:active{transform:translateY(1px)}.character-question-later{min-height:44px;color:var(--muted)}
.character-delete-dialog{width:min(470px,calc(100vw - 24px));padding:0;border-radius:26px}
.character-delete-dialog>form{display:grid;justify-items:center;gap:10px;padding:28px;text-align:center}
.character-delete-dialog-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#9f2637;color:#fff;font-size:32px;font-weight:900}
.character-delete-dialog h2,.character-delete-dialog p{margin:0}.character-delete-dialog p{max-width:36em;line-height:1.65}
.character-delete-dialog-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin-top:7px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,#9f2637 8%,var(--panel))}
.character-delete-dialog-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:9px;width:100%;margin-top:7px}
.character-delete-dialog-actions button{min-height:48px}
.character-delete-dialog-actions .danger{border-color:#d24d5e!important;background:#9f2637!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

html[data-color-mode="dark"] :is(.character-editor>.form,.desktop-character-editor,.character-menu,.character-manage-pane,.character-manage-grid>section,.home-page .home,.home-identity-editor,.character-view-editor:not(.relationship-stage),.relationship-pair-magnet,.relationship-pair-core){
  border-color:#33465b!important;background:#142337!important;color:#f5f8fb!important;
}
html[data-color-mode="dark"] :is(.character-editor,.home-page,.relationship-page:not(.relationship-redesign),.character-view-editor:not(.relationship-stage)) :is(h1,h2,h3,h4,b,strong,label,legend):not(.character-book-v8 *){color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
html[data-color-mode="dark"] :is(.character-editor,.home-page,.relationship-page:not(.relationship-redesign),.character-view-editor:not(.relationship-stage)) :is(p,small,em):not(.room-edit-hint):not(.character-book-v8 *){color:#c1cfdd!important;-webkit-text-fill-color:#c1cfdd!important}
html[data-color-mode="dark"] :is(.character-editor,.home-page,.relationship-page:not(.relationship-redesign),.character-view-editor:not(.relationship-stage)) :is(input,select,textarea):not(.home-town-picker *):not(.dictionary-shell *):not(.character-book-v8 *),
html[data-color-mode="dark"] :is(.character-editor,.home-page,.relationship-page:not(.relationship-redesign),.character-view-editor:not(.relationship-stage)) button:not(.meeting-walker):not(.meeting-pair *):not(.character-book-v8 *):not(.home-person):not(.room-pet):not(.home-interaction-avatar):not(.theme-swatch):not(.character-draft-back):not(.character-draft-action):not(.character-pane-ribbon):not(.character-pane-add):not(.character-full-tab):not(.character-full-save):not(.character-full-image-slot):not(.character-full-placement-card):not(.character-overview-section-tab):not(.character-overview-next-bookmark):not(.home-native-pill):not(.home-native-back):not(.home-native-info-link):not(.home-native-house-name):not(.room-furniture-item){border-color:#3a5068!important;background:#1c3047!important;color:#f6f9fc!important;-webkit-text-fill-color:#f6f9fc!important;color-scheme:dark}

/* 집 생활 카드는 아이콘과 현재 행동을 짧게 함께 보여 준다. 긴 설명과
   최근 로그는 인물을 눌렀을 때 아래의 비차단 시트에서 확인한다. */
.home-page .home-person .home-person-status{
  min-width:72px!important;max-width:112px!important;margin-top:1px!important;padding:5px 7px!important;
  border:0!important;border-radius:11px!important;background:#fffdf3e8!important;box-shadow:0 3px 9px #0003!important;backdrop-filter:none!important;
  color:#2f2924!important;-webkit-text-fill-color:#2f2924!important;text-shadow:none!important;text-align:center!important
}
.home-page .home-person .home-person-status b{font-size:11px!important;line-height:1.15!important;color:inherit!important;-webkit-text-fill-color:inherit!important;text-shadow:none!important}
.home-page .home-person .home-person-status small{display:-webkit-box!important;max-width:98px!important;margin-top:2px!important;overflow:hidden!important;color:#554940!important;-webkit-text-fill-color:#554940!important;font-size:8px!important;line-height:1.25!important;white-space:normal!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important}
.home-occupant-popover .home-occupant-sheet-content{gap:8px}
.home-occupant-popover .home-occupant-visual{width:52px;height:52px;min-width:52px}
.home-occupant-popover .home-occupant-visual :is(.avatar,.sprite,.room-pet-icon,.room-pet-photo,.room-pet-emoji){width:48px!important;height:48px!important;font-size:32px!important}
.home-occupant-popover :is(h2,b,p,small){margin-top:0!important}
.home-occupant-popover h2{font-size:14px!important;line-height:1.15!important}.home-occupant-popover b{font-size:11px!important;line-height:1.25!important}.home-occupant-popover p{font-size:10px!important;line-height:1.4!important}.home-occupant-popover small{font-size:8px!important}
.occupant-life-panel{display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #aa927044}.occupant-life-panel>header{display:flex;align-items:center;justify-content:space-between;gap:8px}.occupant-life-panel h3{margin:0;font-size:14px}.occupant-crown{display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid #ba985d;border-radius:20px;background:#f3e6ca;color:#6d4b16;font-size:11px}.occupant-crown[aria-pressed="true"]{background:#e9c970}.occupant-crown svg{width:21px;height:18px;fill:#f4c552;stroke:#8f6728;stroke-width:1.5}.occupant-meter-grid{display:grid;gap:8px}.occupant-meter-grid label{display:grid;grid-template-columns:54px minmax(0,1fr) 47px;gap:7px;align-items:center;font-size:12px}.occupant-meter-grid meter{width:100%;height:12px}.occupant-panel-hint{opacity:.8}.occupant-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.occupant-actions button{min-width:0;min-height:38px;padding:8px;border:1px solid #bba78a66;border-radius:12px;background:#f6eddf;color:#443320;font-size:12px;line-height:1.3;overflow-wrap:anywhere}.occupant-actions-more{grid-column:1/-1}.home-occupant-recent{margin-top:7px;padding-top:6px;border-top:1px solid #ffffff25}
.home-occupant-recent h3{margin:0 0 4px;font-size:10px}
.home-occupant-recent ol{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.home-occupant-recent li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px;padding:4px 5px;border-radius:8px;background:#ffffff0c}
.home-occupant-recent time{font-size:8px;opacity:.7}.home-occupant-recent li span{display:grid;gap:1px;min-width:0}.home-occupant-recent li b{font-size:9px!important}.home-occupant-recent li small{display:-webkit-box;font-size:8px!important;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
html[data-color-mode="light"] .home-occupant-recent{border-top-color:#3b2d241f}.home-occupant-recent li{background:#7c665e12}

.furniture-placement-dialog,.bed-assignment-dialog{width:min(680px,calc(100vw - 18px));max-height:calc(100dvh - 18px);padding:0;overflow:hidden}
.furniture-placement-dialog form,.bed-assignment-dialog form{display:grid;gap:13px;max-height:calc(100dvh - 18px);padding:20px;overflow:auto;overscroll-behavior:contain}
.furniture-placement-dialog p,.bed-assignment-dialog p{margin:0;color:var(--muted);line-height:1.55}
.furniture-room-tabs{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:3px}.furniture-room-tabs button{flex:1 1 92px}.furniture-room-tabs button.on{border-color:var(--p);background:color-mix(in srgb,var(--p) 15%,var(--panel));font-weight:900}
.furniture-placement-dialog section{display:grid;gap:8px}.furniture-placement-dialog h3{margin:0;font-size:14px}
.furniture-search{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;min-height:46px;padding:0 12px;border:2px solid #6a4b3c;border-radius:999px;background:#fffaf0;color:#6a4b3c}.furniture-search>span{font-size:22px}.furniture-search input{width:100%;min-width:0;height:42px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#241810;font:700 15px/1.2 inherit;outline:0}.furniture-search-empty{padding:18px;text-align:center}.room-editor-furniture [hidden]{display:none!important}
.furniture-placement-current{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.furniture-placement-current article{display:grid;grid-template-columns:35px minmax(0,1fr);align-items:center;gap:4px 7px;padding:9px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.furniture-placement-current article>span{grid-row:1/3;display:grid;place-items:center;width:35px;height:35px;background:transparent;font-size:28px;line-height:1}.furniture-placement-current article>b,.furniture-placement-current article>small{min-width:0;overflow-wrap:anywhere}.furniture-placement-current article>small{font-size:10px;color:var(--muted)}.furniture-placement-current article>button{grid-column:1/-1;min-height:34px;padding:5px 8px;font-size:10px}
.room-editor-furniture-icon{display:grid;place-items:center;width:42px;height:42px;background:transparent!important;font-size:29px;line-height:1}
.furniture-picker-couple-bed{position:relative!important;display:block!important;width:52px!important;height:48px!important;background:transparent!important}.furniture-picker-couple-bed img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.furniture-picker-couple-bed img:nth-child(1){z-index:1}.furniture-picker-couple-bed img:nth-child(2){z-index:2}.furniture-picker-couple-bed img:nth-child(3){z-index:3}
.furniture-current-section{border-top:1px solid var(--line);padding-top:8px}.furniture-current-section>summary{cursor:pointer;font-size:14px;font-weight:900}
.furniture-placement-done{position:sticky;bottom:0;width:100%}
.bed-assignment-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.bed-assignment-list button{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:7px;text-align:left}.bed-assignment-list img,.bed-assignment-list button>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;object-fit:contain;background:color-mix(in srgb,var(--p) 12%,var(--panel))}.bed-assignment-list button.on{border-color:var(--p);background:color-mix(in srgb,var(--p) 13%,var(--panel))}
html body #app .furniture-edit-toolbar button[hidden]{display:none!important}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){html.native-app[data-active-tab="home"] .home-edit-toolbar{grid-template-columns:repeat(5,minmax(0,1fr))}.furniture-placement-dialog form,.bed-assignment-dialog form{padding:14px}.furniture-placement-current{grid-template-columns:repeat(2,minmax(0,1fr))}.furniture-placement-dialog{inset:16px!important;width:100vw;max-width:none;max-height:min(68dvh,620px);margin:0;border-width:2px 0 0;border-radius:22px 22px 0 0;background:#fffaf1}.furniture-placement-dialog::backdrop{background:#21150e73;backdrop-filter:blur(2px)}.furniture-placement-dialog form{gap:9px;max-height:min(68dvh,620px);padding:12px 12px max(12px,env(safe-area-inset-bottom));overflow:auto}.furniture-placement-dialog .title{position:sticky;top:-12px;z-index:5;margin:-12px -12px 0;padding:12px 14px 8px;background:#fffaf1}.furniture-placement-dialog .title::before{content:"";position:absolute;top:5px;left:50%;width:42px;height:4px;border-radius:999px;background:#b7a897;transform:translateX(-50%)}.furniture-placement-dialog .title small{font-size:9px}.furniture-placement-dialog .title h2{font-size:21px}.furniture-placement-dialog>form>p{display:none}.furniture-room-tabs{flex-wrap:nowrap;overflow-x:auto}.furniture-room-tabs button{flex:0 0 auto;min-width:84px}.furniture-catalog-section{min-height:0}.furniture-placement-dialog .room-editor-furniture{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:235px;overflow-y:auto}.furniture-placement-dialog .room-editor-furniture button{display:grid;grid-template-columns:1fr;grid-template-rows:52px auto auto;place-items:center;gap:2px;min-height:104px;padding:7px 4px;border:1px solid #c9b7a4;border-radius:13px;background:#fff;text-align:center;box-shadow:0 3px 0 #a9947e}.furniture-placement-dialog .room-editor-furniture-icon{grid-row:auto;width:48px;height:48px;font-size:32px}.furniture-placement-dialog .room-editor-furniture b{font-size:12px;line-height:1.15}.furniture-placement-dialog .room-editor-furniture small{font-size:9px}.furniture-placement-dialog .furniture-picker-couple-bed{grid-row:1;width:64px!important;height:52px!important}.furniture-current-section{flex:none}.furniture-placement-done{z-index:4;min-height:44px;border-color:#2a170f!important;background:#5c4234!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important}}
html[data-color-mode="dark"] .character-menu button.on,
html[data-color-mode="dark"] .character-file-actions .primary,
html[data-color-mode="dark"] .relationship-pair-core>button.primary,
html[data-color-mode="dark"] .town-editor-panel button.primary{border-color:transparent!important;background:var(--grad)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-color-mode="dark"] .character-file-actions .danger{border-color:#d24d5e!important;background:#9f2637!important}

html[data-color-mode="dark"] .home-page .clean{border:1px solid #3a5068!important;background:#1c3047!important;color:#f5f8fb!important}
html[data-color-mode="dark"] .home-page .rooms{background:#5c4234!important}
html[data-color-mode="dark"] .home-page .room{border-color:#5c4234!important;box-shadow:none!important;filter:none!important}

html[data-color-mode="dark"] .relationship-pair-magnet{box-shadow:inset 0 0 0 1px #ffffff18!important}
html[data-color-mode="dark"] .relationship-character-rail button.on{background:color-mix(in srgb,var(--view-primary) 38%,#142337)!important;box-shadow:0 9px 20px #0007!important}
html[data-color-mode="dark"] .relationship-pair-core :is(small,span,strong,label,em){color:#f5f8fb!important;-webkit-text-fill-color:#f5f8fb!important}
html[data-color-mode="dark"] .relationship-pair-core>em{border:1px solid #3a5068!important;background:#1c3047!important}

/* 벽은 바닥 위쪽에 얕은 입면으로 세우고, 방마다 2px 검은 외곽선을
   독립적으로 둘러 작은 방에서도 경계가 흐려지지 않게 한다. */
.home-page .room-wall-shell{
  position:absolute;inset:0;z-index:1;display:block;overflow:hidden;
  border:2px solid #000;border-radius:inherit;box-sizing:border-box;
  box-shadow:none;pointer-events:none
}
.home-page .room-wall-shell::before{
  position:absolute;left:0;right:0;top:0;height:clamp(52px,15vw,64px);content:"";
  background-color:#f4f0e8;background-image:var(--room-wall-image);
  background-position:left top;background-repeat:repeat-x;background-size:auto 100%;
  border-bottom:3px solid #5c4234;box-shadow:none
}
.home-page .room.room-custom-floor .room-wall-shell::before{display:none!important;content:none!important}
.home-page .room-heading,.home-page .room-furniture-layer,.home-page .room-people,.home-page .room-pets{position:absolute}
.home-page .room-heading{position:relative}

/* 편집 중에는 거주자와 반려생물을 렌더 결과에서만 감춘다. 시뮬레이션
   상태는 유지되므로 편집을 끝내면 같은 행동과 위치로 곧바로 돌아온다. */
.home-page .home.is-editing :is(.room-people,.room-pets,.home-life-roaming-layer){display:none!important}

/* UI 숨김 상태에서도 나무 상단바는 남지만 뒤로가기까지 포함한 조작 UI는
   사라진다. 다시 표시하는 버튼만 반투명하게 남긴다. */
html.native-app[data-active-tab="home"] .home-native-page.home-ui-hidden .home-native-back{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important
}
html.native-app[data-active-tab="home"] .home-native-page.home-ui-hidden .home-native-ui-toggle{
  opacity:.58!important;filter:saturate(.8)!important
}
html.native-app[data-active-tab="home"] .home-native-page.home-ui-hidden .home-native-ui-toggle:is(:hover,:focus-visible,:active){opacity:.72!important}

/* 태블릿에서도 방 좌표계를 무한히 넓히지 않고 휴대전화 화면과 같은 폭으로
   고정한다. 남는 영역은 방 경계색으로 채워 UI가 늘어나거나 갈라지지 않는다. */
@media(min-width:721px) and (max-width:1200px){
  html[data-active-tab="home"] #app>main{display:grid!important;place-items:stretch center;background:#5c4234!important}
  html[data-active-tab="home"] .home-page{width:min(100vw,680px)!important;max-width:680px!important;margin:0 auto!important}
}

html[data-color-mode="dark"] .town-editor-panel :is(.inline-guide,.town-general-editor>label,.place-photo-tools,.audience-open-button){border-color:#3a5068!important;background:#1a2d42!important;color:#f5f8fb!important}
html[data-color-mode="dark"] .town-editor-panel .place-editor details[open]{background:#182b40!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .mobile-character-heading{flex-wrap:wrap!important}
  .mobile-character-heading>span:not(.avatar):not(.sprite){flex:1 1 calc(100% - 96px)}
  .mobile-character-file-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-left:0}
  .mobile-character-file-actions button{min-width:0;min-height:42px;padding:7px 5px;font-size:10px;white-space:normal;line-height:1.2}
}
@media(min-width:721px) and (max-width:1380px){
  .desktop-character-editor .character-file-actions{width:100%;margin-left:0;justify-content:flex-end}
}

@media(prefers-reduced-motion:reduce){
  .desktop-observe-scene.native-app .native-character-stage,
  .desktop-observe-scene.native-app .native-character-stage>i{animation:none!important}
}

/* Profile photos and transparent icons are separate assets. */
.character-manage-grid>section>span:has(>img.profile-photo-fallback){border-radius:50%;background:transparent}
.character-manage-grid>section>span>img.profile-photo-fallback{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important}
.character-image-empty-preview{display:grid!important;place-items:center!important;align-content:center!important;gap:4px;width:100%;height:100%;padding:8px;text-align:center;color:var(--muted)}
.character-image-empty-preview i{display:grid;place-items:center;width:42px;height:42px;border:1px dashed currentColor;border-radius:50%;font-style:normal;font-size:11px;font-weight:900}
.character-image-empty-preview small{font-size:9px;line-height:1.2}
.character-image-empty-preview.icon i{border-radius:12px;background:#ffffff7d}
html[data-color-mode="dark"] .character-image-empty-preview.icon i{background:#ffffff12}

/* Profile essentials stay discoverable without opening the advanced image pane. */
.character-photo-quick-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;margin:0 0 18px;padding:18px;border:2px solid color-mix(in srgb,var(--character-own,var(--p)) 42%,var(--line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--character-own,var(--p)) 13%,var(--panel)),var(--panel));box-shadow:0 12px 28px color-mix(in srgb,var(--character-own,var(--p)) 14%,transparent)}
.character-photo-quick-card>span{display:grid;place-items:center;width:104px;height:104px;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--character-own,var(--p)) 12%,var(--panel))}
.character-photo-quick-card>span :is(.profile-photo-fallback,.character-image-empty-preview){width:100%;height:100%;border-radius:50%}
.character-photo-quick-card>span .profile-photo-fallback{display:block;object-fit:cover}
.character-photo-quick-card>div>h3{margin:0 0 6px;font-size:20px}.character-photo-quick-card>div>p{margin:0 0 12px;line-height:1.55}.character-photo-quick-card>div>small{display:block;margin-top:9px;opacity:.76}
.character-photo-quick-card .image-actions{display:flex;flex-wrap:wrap;gap:8px}.character-photo-quick-card .image-actions button{min-height:42px}
.character-lifestyle-settings{margin-top:18px}.character-lifestyle-settings>h2{margin-bottom:6px}.character-lifestyle-settings>p{margin-top:0}.lifestyle-profile-fields{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.lifestyle-profile-fields label{display:grid;gap:7px;font-weight:850}.lifestyle-profile-fields select{width:100%;min-height:48px}
html[data-color-mode="dark"] .character-photo-quick-card{border-color:color-mix(in srgb,var(--character-own,var(--p)) 58%,#3a5068);background:linear-gradient(135deg,color-mix(in srgb,var(--character-own,var(--p)) 24%,#142337),#142337)}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){.character-photo-quick-card{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:14px;border-radius:20px}.character-photo-quick-card>span{width:78px;height:78px}.character-photo-quick-card>div>h3{font-size:17px}.lifestyle-profile-fields{grid-template-columns:1fr}}

/* 2026-08-10h: independent profile/SD/LD art, scene display controls, and beta language UI. */
.character-manage-grid>section.character-ld-settings{
  grid-column:1/-1;display:grid;align-items:stretch;gap:16px;
}
.character-ld-settings>div:first-child{display:grid;gap:6px}
.character-ld-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.character-ld-card{display:grid;grid-template-rows:180px auto auto auto;gap:7px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--own) 4%,var(--panel,#fff));text-align:center}
.character-ld-card>div{display:grid;place-items:end center;min-width:0;height:180px;overflow:hidden;border-radius:13px;background:linear-gradient(180deg,color-mix(in srgb,var(--own) 8%,#fff),color-mix(in srgb,var(--own) 16%,#f3f4f6))}
.character-ld-card img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 8px #0003)}
.character-ld-card h4,.character-ld-card small{margin:0}.character-ld-card>small{min-height:2.5em;color:var(--muted)}
.character-ld-card .image-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.character-ld-card .image-actions button{min-width:0;padding:7px 4px;font-size:11px}
.character-ld-card .image-actions button:last-child:nth-child(3){grid-column:1/-1}
.character-image-empty-preview.ld i{border-radius:14px}
.home-visual-options{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
.home-visual-options>label{display:grid;gap:7px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.home-visual-options label>b{color:var(--own)}
.language-setting-card{border-color:color-mix(in srgb,var(--p) 35%,var(--line))!important}
.language-setting-card>label{display:grid;gap:7px;max-width:420px}
.coming-soon-product{background:linear-gradient(135deg,#303642,#566071 60%,#7f8998)!important}
.coming-soon-product .premium-buy:disabled{opacity:.82;cursor:not-allowed}

.home-visual-toggle{position:absolute;z-index:18;display:flex;gap:3px;padding:3px;border:1px solid #ffffff45;border-radius:999px;background:#101722b8;box-shadow:0 8px 22px #0004;backdrop-filter:blur(10px)}
.home-visual-toggle button{min-width:42px;min-height:32px;padding:5px 10px;border:0;border-radius:999px;background:transparent;color:#fff;font:900 12px/1 inherit}
.home-visual-toggle button.on{background:#fff;color:#17202d;box-shadow:0 4px 10px #0003}
.native-observe-home>.home-visual-toggle{top:max(70px,calc(env(safe-area-inset-top) + 62px));left:50%;translate:-50% 0}
.desktop-observe-scene .home-visual-toggle{top:18px;right:20px}
.native-app .native-character-stage{scale:var(--home-visual-scale,1)}
.native-app .native-character-stage .scene-default-silhouette{position:relative;display:block;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;filter:drop-shadow(0 18px 12px #0008)}
.native-app .native-character-stage .scene-default-silhouette::before{content:"";position:absolute;z-index:2;left:22%;top:3%;width:56%;height:34%;border-radius:48% 52% 46% 50%;background:#08090b}
.native-app .native-character-stage .scene-default-silhouette::after{content:"";position:absolute;z-index:1;left:9%;right:9%;top:29%;bottom:1%;border-radius:44% 44% 16% 16%/18% 18% 6% 6%;background:#08090b;clip-path:polygon(27% 0,73% 0,90% 45%,100% 100%,0 100%,10% 45%)}
.native-app .native-character-stage.has-scene-lineup .native-scene-lineup-person .scene-default-silhouette{width:min(30vw,140px)!important;height:min(30vw,170px)!important}
@media(max-width:980px){
  .character-ld-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .desktop-observe-scene .home-visual-toggle{top:14px;right:14px}
}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .character-ld-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-ld-card{grid-template-rows:145px auto auto auto}.character-ld-card>div{height:145px}
  .home-visual-options{grid-template-columns:1fr}
  html[data-color-mode="dark"] .character-ld-card{border-color:#3a5068;background:#1a2d42;color:#f5f8fb}
}
/* 2026-08-10i: 감정은 캐릭터 소품뿐 아니라 장면 전체의 공기로도 보인다. */
.native-app .native-scene-atmosphere{overflow:hidden}
.native-app .native-scene-atmosphere.atmosphere-romance{
  background:radial-gradient(ellipse at 50% 42%,transparent 35%,#df397e35 70%,#bc205f80 100%)!important;
  animation:native-romance-atmosphere 3.8s ease-in-out infinite alternate;
}
.native-app .native-scene-atmosphere.atmosphere-rain{
  background:linear-gradient(180deg,#31445e70,#15202c52 48%,#08111da8)!important;
}
.native-app .native-scene-atmosphere.atmosphere-rain::before{
  content:"";position:absolute;inset:-24% -12%;opacity:.48;
  background:repeating-linear-gradient(103deg,transparent 0 27px,#c8e7fb99 28px 29px,transparent 30px 58px);
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 18px,transparent 18px 51px);mask-image:repeating-linear-gradient(to bottom,#000 0 18px,transparent 18px 51px);
  animation:native-atmosphere-rain 1.05s linear infinite;
}
.native-app .native-scene-atmosphere.atmosphere-rain::after{
  content:"";position:absolute;inset:-18% -8%;opacity:.3;
  background:repeating-linear-gradient(101deg,transparent 0 46px,#e0f3ff8c 47px 48px,transparent 49px 91px);
  -webkit-mask-image:repeating-linear-gradient(to bottom,transparent 0 13px,#000 13px 24px,transparent 24px 65px);mask-image:repeating-linear-gradient(to bottom,transparent 0 13px,#000 13px 24px,transparent 24px 65px);
  animation:native-atmosphere-rain-far 1.42s linear infinite;
}
.native-app .native-scene-atmosphere.atmosphere-shock{
  background:
    radial-gradient(circle at 70% 18%,#93b8d72e,transparent 34%),
    linear-gradient(145deg,#111a2bc7,#31465c70 48%,#0b1220df)!important;
}
.native-app .native-scene-atmosphere.atmosphere-shock::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 62% 14%,#d9edff29,transparent 28%);
  opacity:.48;
}
.native-app .native-scene-atmosphere.atmosphere-shock::after{
  content:"";position:absolute;left:61%;top:3%;width:50px;height:43%;
  background:linear-gradient(165deg,#dcecff,#a7c8e6 62%,#789bbd);
  clip-path:polygon(55% 0,100% 0,65% 39%,92% 39%,18% 100%,41% 54%,10% 54%);
  filter:drop-shadow(0 0 8px #9cc8e966);
  opacity:.22;
}
.native-app .scene-tone-shock .native-scene-effects i{
  color:#bdd7ed;text-shadow:0 0 8px #6ebeff66;
  opacity:.38;animation:native-fight-spark 3.4s ease-out infinite;
}
@keyframes native-romance-atmosphere{from{filter:saturate(.95);opacity:.76}to{filter:saturate(1.22);opacity:1}}
@keyframes native-romance-cloud{from{translate:-8px 5px;scale:.9}to{translate:12px -7px;scale:1.12}}
@keyframes native-atmosphere-rain{from{transform:translate3d(2vw,-18dvh,0)}to{transform:translate3d(-3vw,22dvh,0)}}
@keyframes native-atmosphere-rain-far{from{transform:translate3d(1vw,-13dvh,0)}to{transform:translate3d(-2vw,18dvh,0)}}
@media(prefers-reduced-motion:reduce){
  .native-app .native-scene-atmosphere.atmosphere-romance,
  .native-app .native-scene-atmosphere.atmosphere-romance::after,
  .native-app .native-scene-atmosphere.atmosphere-rain::before,
  .native-app .native-scene-atmosphere.atmosphere-rain::after,
  .native-app .native-scene-atmosphere.atmosphere-shock::before,
  .native-app .native-scene-atmosphere.atmosphere-shock::after{animation:none!important}
  .native-app .native-scene-atmosphere.atmosphere-shock::after{opacity:.18}
}

/* 2026-08-10m: one LD image, readable Japanese settings, and a lighter
   mobile-like desktop observation flow. */
.character-ld-single-grid{grid-template-columns:minmax(220px,380px)!important;justify-content:start}
.character-ld-card.character-ld-single{width:100%;grid-template-rows:minmax(210px,32vh) auto auto auto}
.character-ld-card.character-ld-single>div{height:auto;min-height:210px}
/* 2026-08-10n: readable room labels, centered relationship selectors and
   palette colors that cannot be overwritten by the mobile button theme. */
.relationship-direction-sentence select{
  text-align:center!important;
  text-align-last:center!important;
}
.relationship-direction-sentence select option{text-align:center}
html.native-app[data-active-tab="character"] button.theme-swatch,
html[data-color-mode="light"].native-app[data-active-tab="character"] button.theme-swatch,
html[data-color-mode="dark"].native-app[data-active-tab="character"] button.theme-swatch{
  background-color:var(--swatch)!important;
  background-image:linear-gradient(var(--swatch),var(--swatch))!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  forced-color-adjust:none;
}

/* Cooking is an actual stirring/pan motion with rising steam. */
.native-app .scene-action-cooking :is(.native-scene-action-prop,.native-person-action-prop){
  position:absolute;
  animation:native-cooking-pan 1.35s ease-in-out infinite;
  transform-origin:50% 80%;
  filter:drop-shadow(0 7px 8px #0008);
}
.native-app .scene-action-cooking :is(.native-scene-action-prop,.native-person-action-prop)::before,
.native-app .scene-action-cooking :is(.native-scene-action-prop,.native-person-action-prop)::after{
  content:"~";
  position:absolute;
  left:45%;
  top:-20px;
  color:#fff;
  font-size:.52em;
  font-weight:900;
  opacity:0;
  text-shadow:0 2px 8px #7d8b99;
  animation:native-cooking-steam 1.8s ease-out infinite;
}
.native-app .scene-action-cooking :is(.native-scene-action-prop,.native-person-action-prop)::after{
  left:68%;top:-10px;animation-delay:-.9s;
}
.native-app .scene-action-cooking .native-character-stage:not(.has-scene-lineup) .native-main-character{
  animation:native-cooking-stir 1.35s ease-in-out infinite;
  transform-origin:50% 80%;
}
@keyframes native-cooking-pan{
  0%,100%{translate:-7px 3px;rotate:-6deg}
  50%{translate:8px -2px;rotate:7deg}
}
@keyframes native-cooking-stir{
  0%,100%{translate:-3px 1px;rotate:-1.5deg}
  50%{translate:4px -3px;rotate:1.8deg}
}
@keyframes native-cooking-steam{
  0%{translate:0 8px;scale:.65;opacity:0}
  25%{opacity:.9}
  100%{translate:-6px -28px;scale:1.2;opacity:0}
}

html:not(.native-app) .standard-observe-view{width:min(1480px,100%);margin-inline:auto}
html:not(.native-app) .standard-observe-view>.roster{
  gap:10px;padding:4px 2px 12px;scroll-snap-type:x proximity;
}
html:not(.native-app) .standard-observe-view>.roster .roster-card{
  min-width:218px;min-height:86px;padding:12px 14px;border-radius:20px;scroll-snap-align:start;
}
html:not(.native-app) .standard-observe-view>.roster .roster-card :is(.avatar,.sprite){width:58px;height:58px}
html:not(.native-app) .standard-observe-view>.roster .roster-card b{font-size:18px}
html:not(.native-app) .standard-observe-view>.roster .roster-card small{
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.desktop-observe-lower{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr);align-items:start;gap:18px;margin-top:18px}
.desktop-observe-log{margin:0;min-width:0;position:sticky;top:12px}
.desktop-observe-log .native-log-card{
  display:grid;gap:12px;width:100%;padding:18px 20px;border:1px solid var(--line);
  border-radius:24px;background:var(--panel);box-shadow:0 12px 34px #17202d16;cursor:default;
}
.desktop-observe-log .native-log-card>div{display:flex;align-items:center;justify-content:space-between;gap:16px}
.desktop-observe-log .native-log-card>div>b{font-size:22px}
.desktop-observe-log .native-log-card>div>span{display:flex;gap:8px}
.desktop-observe-log .native-log-card ol{
  display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;list-style:none;
  max-height:min(70vh,720px);overflow:auto;overscroll-behavior:contain;
}
.desktop-observe-log .native-log-card li{
  display:grid;grid-template-columns:55px minmax(0,1fr);gap:10px;padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--log-theme,var(--p)) 36%,var(--line));
  border-left:5px solid var(--log-theme,var(--p));border-radius:15px;
  background:color-mix(in srgb,var(--log-theme,var(--p)) 11%,var(--panel));
}
.desktop-observe-log .native-log-card li time{color:var(--log-theme,var(--p));font-weight:900}
.desktop-observe-log .native-log-card li>span{display:grid;min-width:0}
.desktop-observe-log .native-log-card li small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.desktop-observe-map-only{display:block!important}
.desktop-observe-map-only>section{width:100%;margin-inline:auto}
.desktop-observe-map-only .world-hud{position:sticky;top:8px}
.native-important-thought{position:absolute;z-index:14;left:58%;top:15%;display:grid;place-items:center;gap:3px;min-width:92px;padding:10px 12px;border:3px solid #fff;border-radius:50%;background:#fffffff2;color:#2b2930;box-shadow:0 9px 24px #1116;animation:nativeThoughtFloat 3.2s ease-in-out infinite}
.native-important-thought::after{content:"";position:absolute;left:12%;bottom:-17px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:-12px 12px 0 -4px #fff}
.native-important-thought>.avatar,.native-important-thought>.sprite{width:54px;height:54px;border-radius:50%}
.native-important-thought>i{position:absolute;left:-14px;top:-8px;font-style:normal;font-weight:900;color:#fff;text-shadow:0 2px 5px #222}
.native-important-thought>small{font-weight:850}
@keyframes nativeThoughtFloat{50%{transform:translateY(-10px) rotate(1deg)}}
@media(max-width:1050px){.desktop-observe-lower{grid-template-columns:1fr}.desktop-observe-log{position:static}.desktop-observe-log .native-log-card ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.desktop-observe-log .native-log-card ol{grid-template-columns:1fr}}
/* Village building information */
.building-detail-dialog{
  width:min(980px,calc(100vw - 28px));max-height:min(860px,calc(100dvh - 28px));padding:0;
  border:1px solid color-mix(in srgb,var(--p) 28%,var(--line));border-radius:28px;
  background:var(--panel);color:var(--text);box-shadow:0 30px 90px #09111d70;overflow:hidden;
}
.building-detail-dialog::backdrop{background:#0d1529a8;backdrop-filter:blur(5px)}
.building-detail-dialog form{display:grid;max-height:min(860px,calc(100dvh - 28px));overflow:auto}
.building-detail-dialog header{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 93%,transparent);backdrop-filter:blur(14px);
}
.building-detail-dialog header span{display:grid}.building-detail-dialog header small{letter-spacing:.18em;color:var(--muted)}
.building-detail-dialog header h2{margin:2px 0 0;font-size:clamp(27px,4vw,40px)}
.building-detail-dialog header button{display:grid;place-items:center;width:50px;height:50px;padding:0;border-radius:17px;font-size:30px}
.building-detail-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:22px;padding:22px}
.building-interior-view{position:sticky;top:98px;align-self:start;min-height:520px;border-radius:23px;background:color-mix(in srgb,var(--p) 10%,var(--bg));overflow:hidden}
.building-interior-view>img{display:block;width:100%;height:520px;object-fit:cover}
.building-interior-placeholder{display:grid;place-items:center;align-content:center;gap:8px;min-height:520px;padding:28px;text-align:center}
.building-interior-placeholder>span{font-size:88px;filter:drop-shadow(0 12px 12px #1113)}
.building-interior-placeholder>b{font-size:22px}.building-interior-placeholder small{color:var(--muted)}
.building-detail-info{display:grid;align-content:start;gap:20px;min-width:0}
.building-detail-info dl{display:grid;gap:9px;margin:0;padding:15px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--p) 5%,var(--panel))}
.building-detail-info dl>div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:12px;padding:7px 3px;border-bottom:1px solid var(--line)}
.building-detail-info dl>div:last-child{border-bottom:0}.building-detail-info dt{color:var(--muted);font-weight:750}.building-detail-info dd{margin:0;font-weight:850}
.building-detail-info h3{display:flex;align-items:center;gap:7px;margin:0 0 10px}.building-detail-info h3 small{color:var(--p)}
.building-resident-list{display:grid;gap:9px}.building-resident-card{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--p) 6%,var(--panel))}
.building-resident-card :is(.avatar,.sprite){width:60px;height:60px}.building-resident-card>span{display:grid;min-width:0}.building-resident-card b{font-size:17px}.building-resident-card small{font-weight:800}.building-resident-card em{overflow:hidden;color:var(--muted);font-size:12px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.building-stock-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.building-stock-list li{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}.building-stock-list img{width:30px;height:30px;border-radius:50%;object-fit:cover}.building-stock-list span{font-size:20px}
.building-detail-empty{margin:0;padding:14px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);text-align:center}
.building-detail-close{margin:0 22px 22px;min-height:50px}
.building-home-edit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.building-home-edit-actions>button{flex:1 1 150px}
html[data-color-mode="dark"] .building-detail-dialog{background:#122236;color:#f6f9fc}html[data-color-mode="dark"] .building-detail-dialog header{background:#122236ee}html[data-color-mode="dark"] .building-detail-dialog :is(h2,h3,b,dt,dd){color:#f6f9fc!important;-webkit-text-fill-color:#f6f9fc!important}html[data-color-mode="dark"] .building-detail-dialog :is(small,em,p){color:#c2d0de!important;-webkit-text-fill-color:#c2d0de!important}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .building-detail-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:25px}
  .building-detail-dialog form{max-height:calc(100dvh - 16px)}
  .building-detail-dialog header{padding:15px 17px}.building-detail-dialog header button{width:46px;height:46px}
  .building-detail-layout{grid-template-columns:1fr;gap:16px;padding:14px}
  .building-interior-view{position:static;min-height:235px}.building-interior-view>img{height:260px}.building-interior-placeholder{min-height:235px}.building-interior-placeholder>span{font-size:62px}
  .building-detail-info dl>div{grid-template-columns:92px minmax(0,1fr)}
  .building-detail-close{margin:0 14px 14px}
}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .character-ld-single-grid{grid-template-columns:minmax(0,1fr)!important}
  .character-ld-card.character-ld-single{grid-template-rows:minmax(180px,34vh) auto auto auto}
  html.native-app[data-active-tab="settings"] .settings-shell,
  html.native-app[data-active-tab="settings"] .settings-shell *,
  html.native-app[data-active-tab="settings"] .setting-card,
  html.native-app[data-active-tab="settings"] .sync-panel{
    min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
  html.native-app[data-active-tab="settings"] .settings-shell{
    overflow-x:clip!important;overflow-wrap:anywhere;word-break:normal;
  }
  html.native-app[data-active-tab="settings"] .settings-shell :is(h1,h2,h3,p,small,label,legend,b,span,a,button){
    max-width:100%;overflow-wrap:anywhere;
  }
  html.native-app[data-active-tab="settings"] .settings-shell :is(button,select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="color"])){
    width:100%;white-space:normal;
  }
  html.native-app[data-active-tab="settings"] :is(.color-mode-options,.sync-actions,.feedback-category-grid){
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  }
  html.native-app[data-active-tab="settings"] .color-mode-options button{min-height:62px}
}

@media(prefers-reduced-motion:reduce){
  .native-app .scene-action-cooking :is(.native-main-character,.native-scene-action-prop,.native-person-action-prop,.native-scene-lineup-person)::before,
  .native-app .scene-action-cooking :is(.native-main-character,.native-scene-action-prop,.native-person-action-prop,.native-scene-lineup-person)::after,
  .native-app .scene-action-cooking :is(.native-main-character,.native-scene-action-prop,.native-person-action-prop,.native-scene-lineup-person){
    animation:none!important;
  }
}

/* Keep feedback labels readable after every light/dark settings override. */
html[data-active-tab="settings"] .settings-shell .feedback-card a.feedback-email-type,
html[data-color-mode="light"][data-active-tab="settings"] .settings-shell .feedback-card a.feedback-email-type,
html[data-color-mode="dark"][data-active-tab="settings"] .settings-shell .feedback-card a.feedback-email-type,
html.native-app[data-active-tab="settings"] .settings-shell .feedback-card a.feedback-email-type{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  margin:0!important;
  background:linear-gradient(135deg,var(--p),var(--s))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 2px #0008!important;
}

/* 2026-08-10r: ordered settings, safe user mods, expansion showcase and
   foreign-language relationship dialogs that stay inside the phone. */
.visual-theme-card>h3{margin:20px 0 9px;font-size:1rem;color:var(--ink)}
.visual-theme-options button i{flex:0 0 34px;background:linear-gradient(135deg,var(--theme-a,#222),var(--theme-b,#888))}
.shop-expansion-heading{display:flex;align-items:end;justify-content:space-between;margin:34px 0 12px;padding:0 4px}
.shop-expansion-heading small{letter-spacing:.22em;color:var(--p);font-weight:900}
.shop-expansion-heading h2{margin:0;font-size:clamp(29px,4vw,48px)}
.shop-expansion-showcase{position:relative;display:grid;grid-template-columns:minmax(280px,.78fr) minmax(320px,1.22fr);gap:clamp(20px,4vw,56px);overflow:hidden;padding:clamp(22px,4vw,52px)!important;border:1px solid #e5bf68!important;background:radial-gradient(circle at 12% 15%,#ffe9a033,transparent 28%),linear-gradient(135deg,#17131f,#312344 54%,#5b3427)!important;color:#fff!important;box-shadow:0 25px 70px #21182c55!important}
.shop-expansion-showcase::before,.shop-expansion-showcase::after{content:"";position:absolute;border-radius:50%;filter:blur(3px);pointer-events:none}
.shop-expansion-showcase::before{width:340px;height:340px;right:-100px;top:-130px;background:#da9e3450}
.shop-expansion-showcase::after{width:180px;height:180px;left:34%;bottom:-100px;background:#9d67dc42}
.expansion-art{position:relative;z-index:2;display:grid;place-items:center;min-height:330px;overflow:hidden;border:1px solid #f7d88b80;border-radius:27px;background:linear-gradient(145deg,#fff8dd18,#bd8bff13);box-shadow:inset 0 0 50px #f6cf7724}
.expansion-art img{width:100%;height:100%;min-height:330px;object-fit:contain;padding:28px;filter:drop-shadow(0 20px 28px #0008)}
.expansion-art span{position:absolute;left:12px;right:12px;bottom:12px;padding:9px 12px;border-radius:12px;background:#110f18cc;color:#f6e9c8;font-size:12px;text-align:center;backdrop-filter:blur(8px)}
.expansion-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.expansion-copy>span{padding:7px 11px;border:1px solid #f5d17a66;border-radius:999px;background:#e8bb4c24;color:#ffe6a2;font-weight:850}
.expansion-copy>small{margin-top:22px;letter-spacing:.18em;color:#e8c98a!important;font-weight:800}
.expansion-copy h2{margin:7px 0 14px;font-size:clamp(36px,5.4vw,78px);line-height:1.04;color:#fff!important;text-shadow:0 5px 30px #0009}
.expansion-copy p{max-width:760px;margin:0 0 15px;line-height:1.8;color:#f0eaf6!important;font-size:1.04em}
.expansion-copy ul{display:grid;gap:7px;margin:0 0 24px;padding-left:22px;color:#f5e7c6}
.expansion-copy>div{display:flex;align-items:center;gap:12px}.expansion-copy>div>b{font-size:1.15em;color:#ffe09a}.expansion-copy button{border-color:#f0cd7980;background:#ffffff12;color:#fff}
html[data-active-tab="shop"] .shop-store .shop-expansion-showcase,
html[data-color-mode="light"][data-active-tab="shop"] .shop-store .shop-expansion-showcase,
html[data-color-mode="dark"][data-active-tab="shop"] .shop-store .shop-expansion-showcase{border-color:#e5bf68!important;background:radial-gradient(circle at 12% 15%,#ffe9a033,transparent 28%),linear-gradient(135deg,#17131f,#312344 54%,#5b3427)!important;color:#fff!important}
html[data-active-tab="shop"] .shop-expansion-showcase :is(h2,p,li,small,span),
html[data-color-mode="light"][data-active-tab="shop"] .shop-expansion-showcase :is(h2,p,li,small,span),
html[data-color-mode="dark"][data-active-tab="shop"] .shop-expansion-showcase :is(h2,p,li,small,span){color:#f8f1ff!important;-webkit-text-fill-color:#f8f1ff!important}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>small{color:#e8c98a!important;-webkit-text-fill-color:#e8c98a!important}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>span{color:#ffe6a2!important;-webkit-text-fill-color:#ffe6a2!important}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>div>b{color:#ffe09a!important;-webkit-text-fill-color:#ffe09a!important}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .shop-expansion-showcase{grid-template-columns:minmax(0,1fr);padding:18px!important}.expansion-art{min-height:230px}.expansion-art img{min-height:230px;padding:18px}.expansion-copy h2{font-size:38px}.expansion-copy>div{width:100%;justify-content:space-between}
  dialog.relation-editor-dialog,
  dialog.character-view-dialog{
    width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;max-height:calc(100dvh - 12px)!important;margin:auto!important;overflow:hidden!important;
  }
  dialog.relation-editor-dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) form,
  dialog.character-view-dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) form{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-width:0!important;padding:16px 16px max(84px,calc(24px + env(safe-area-inset-bottom)))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important}
  dialog.relation-editor-dialog form *,
  dialog.character-view-dialog form *{min-width:0;max-width:100%;box-sizing:border-box}
  dialog.relation-editor-dialog :is(select,input,textarea,button),
  dialog.character-view-dialog :is(select,input,textarea,button){width:100%;white-space:normal;overflow-wrap:anywhere}
  dialog.relation-editor-dialog .title,
  dialog.character-view-dialog .title{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  dialog.relation-editor-dialog .title>button,
  dialog.character-view-dialog .title>button{width:48px!important}
  dialog.character-view-dialog .character-view-dialog-direction{display:grid!important;grid-template-columns:52px 20px 52px minmax(0,1fr);align-items:center;gap:5px!important;width:100%}
  dialog.character-view-dialog .character-view-dialog-direction :is(.avatar,.sprite){width:48px!important;height:48px!important}
  dialog.character-view-dialog .character-view-dialog-direction>span{min-width:0!important;overflow-wrap:anywhere}
  dialog.character-view-dialog:not(.plaza-games-dialog):not(.relationship-fullscreen-dialog):not(.mail-letter):not(.direct-command-dialog) .character-view-fields{grid-template-columns:minmax(0,1fr)!important}
}

/* 관계 편집기의 체크박스를 모바일 공통 입력 너비 규칙에서 제외한다. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  dialog.relation-editor-dialog form{gap:13px!important}
  dialog.relation-editor-dialog [hidden]{display:none!important}
  dialog.relation-editor-dialog :is(input[type="checkbox"],input[type="radio"]){
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:20px!important;
    min-height:20px!important;
    padding:0!important;
    margin:0!important;
  }
  dialog.relation-editor-dialog .relation-temporal{
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    padding:13px!important;
  }
  dialog.relation-editor-dialog .relation-temporal>span{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  dialog.relation-editor-dialog .relation-temporal small{
    display:block!important;
    width:auto!important;
    overflow-wrap:break-word!important;
    word-break:keep-all!important;
  }
  dialog.relation-editor-dialog .relation-member-picker>div{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  dialog.relation-editor-dialog .relation-character-chip{
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    width:100%!important;
    min-height:48px!important;
    padding:10px!important;
    border-radius:14px!important;
    overflow-wrap:break-word!important;
    word-break:keep-all!important;
  }
  dialog.relation-editor-dialog .relation-order-control{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:13px!important;
    overflow:visible!important;
  }
  dialog.relation-editor-dialog .relation-member-order-list{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  dialog.relation-editor-dialog .relation-member-order-list>span{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr) 38px 38px!important;
    width:100%!important;
    padding:8px!important;
  }
  dialog.relation-editor-dialog .relation-member-order-list button{
    width:38px!important;
    min-width:38px!important;
    padding:5px!important;
  }
  dialog.relation-editor-dialog .relation-order-control>[data-swap-relation-order]{width:100%!important}
}
@media(max-width:390px){
  dialog.relation-editor-dialog .relation-member-picker>div{grid-template-columns:minmax(0,1fr)!important}
}
.account-deletion-links{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;gap:8px!important;margin-top:8px}
.account-deletion-links a{padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);font-size:12px;font-weight:850;text-decoration:none}

/* Final contrast and global-color authority; keep this after legacy compatibility rules. */
html[data-color-mode][data-active-tab="settings"] .settings-shell button.primary,
html[data-color-mode][data-active-tab="settings"] .color-mode-options button.on,
:is(
  button.primary,header nav .on,.furniture button.on,.character-menu button.on,.town-tabs button.on,
  .favorite-group button.on,.stock-picker button.on,.observe-town-switcher button.on,
  .personality-choice button.on,.routine-toolbar .on,.audience-dialog-list button.on,
  .fashion-extra-fields button.on,.closet-chip-grid button.on,.layout-picker button.on,
  .outfit-item-picker button.on,.native-sub-tabs button.on,.mobile-character-pane-grid button.on,
  .mobile-character-strip button.on
){
  color:var(--on-grad)!important;
  -webkit-text-fill-color:var(--on-grad)!important;
}
.visual-theme-options button i{background:linear-gradient(135deg,var(--theme-a,#20242a),var(--theme-b,#6d747d))!important}
[style*="--own:"]{--own:var(--p)!important;--own-secondary:var(--s)!important}
[style*="--character-own:"]{--character-own:var(--p)!important;--character-secondary:var(--s)!important}
[style*="--relationship-own:"]{--relationship-own:var(--p)!important;--relationship-own-secondary:var(--s)!important}
[style*="--native-own:"]{--native-own:var(--p)!important;--native-own-secondary:var(--s)!important}
[style*="--resident-theme:"]{--resident-theme:var(--p)!important}
[style*="--home-grad:"]{--home-grad:var(--grad)!important}

/* Baroque Salon is intentionally the final visual authority. */
html[data-color-mode][data-visual-theme="baroque"][data-active-tab] body>header,
html[data-color-mode][data-visual-theme="baroque"][data-active-tab] header:not(.plaza-games-dialog header):not(.direct-command-dialog>header){
  border-bottom:1px solid #a77a4f!important;
  background:linear-gradient(180deg,#17191f,#0d0f13)!important;
  box-shadow:0 9px 28px #08090c55,inset 0 -1px #d0a06655!important;
}
html[data-color-mode][data-visual-theme="baroque"][data-active-tab] header .brand :is(h1,small),
html[data-color-mode][data-visual-theme="baroque"][data-active-tab] header .saved{
  color:#f1dfc5!important;-webkit-text-fill-color:#f1dfc5!important;
}
html[data-color-mode][data-visual-theme="baroque"][data-active-tab] header nav button{
  border-color:#6f513a!important;background:#17171b!important;color:#ead9c1!important;-webkit-text-fill-color:#ead9c1!important;
}
html[data-color-mode][data-visual-theme="baroque"][data-active-tab] header nav button.on{
  border-color:#d0a066!important;background:linear-gradient(145deg,#8e344b,#5d2031 55%,#b98552)!important;color:#fff5e8!important;-webkit-text-fill-color:#fff5e8!important;
}
html[data-color-mode][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell{
  border-color:#79573d!important;
  background:radial-gradient(circle at 9% 4%,#d0a06614,transparent 26%),linear-gradient(145deg,#151519,#24191c)!important;
}
html[data-color-mode="dark"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#79573d!important;
  background:radial-gradient(circle at 12% 4%,#d0a06612,transparent 27%),linear-gradient(145deg,#251c1e,#19181b)!important;
  color:#f3e4cd!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell{
  background:radial-gradient(circle at 9% 4%,#fffaf3 0 2%,transparent 24%),linear-gradient(145deg,#e5d1af,#c7a477)!important;
}
html[data-color-mode="light"][data-visual-theme="baroque"][data-active-tab="settings"] .settings-shell :is(.setting-card,.sync-panel,.feedback-card,fieldset){
  border-color:#b58350!important;
  background:linear-gradient(90deg,transparent 0 97%,#8f5e310b 97%),radial-gradient(circle at 15% 8%,#fffaf0 0 2%,transparent 28%),linear-gradient(145deg,#f9eedc,#ead8bb)!important;
  color:#2c1a17!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"]{
  position:relative!important;overflow:hidden!important;min-height:82px!important;
  border:2px solid #b98552!important;
  background:linear-gradient(115deg,#111318 0 24%,#efe0c7 24% 72%,#762f43 72% 100%)!important;
  color:#2c1a17!important;-webkit-text-fill-color:#2c1a17!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] span{
  position:relative;z-index:2;padding:5px 55px 5px 10px;border-radius:10px;background:#efe0c7e8!important;
}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"] :is(b,small){color:#2c1a17!important;-webkit-text-fill-color:#2c1a17!important}
html[data-color-mode][data-visual-theme="baroque"] .visual-theme-options button[data-visual-theme="baroque"]::after{
  content:"❦";position:absolute;z-index:2;right:18px;top:50%;translate:0 -50%;color:#f0c78f;font:700 28px Georgia,serif;text-shadow:0 1px #351724;
}

/* Native observe HUD v4 is the single authority for the Android home screen.
   Percentages reproduce the 412 x 917 Figma frame. Gray boxes in that frame are
   placement guides, never visible icon backgrounds. */
html.native-platform #app>header{display:none!important}
html[data-observe-profile-shield="1"] [data-open-game-hud-roster]{pointer-events:none!important}
html.native-platform[data-active-tab="observe"],
html.native-platform[data-active-tab="observe"] :is(body,#app,main){height:100dvh;min-height:0!important;overflow:hidden!important;overscroll-behavior:none!important}
html.native-platform[data-active-tab="observe"] #app>main{padding:0!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"]{
  --home-ui-font:var(--ui-font);--hud-header-height:78px;--hud-profile-top:4.577dvh;--hud-job-gap:8px;--hud-side-row:10.05dvh;--hud-label-h:3.71dvh;
  position:relative!important;display:block!important;width:100%!important;height:100dvh!important;min-height:0!important;
  margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;touch-action:none!important;font-family:var(--home-ui-font)!important
}
/* 주민이 없는 사용자 마을도 일반 관찰 화면과 같은 HUD v4 좌표계를 쓴다.
   빈 상태 안내만 중앙에 올리고 메뉴와 하단 도크는 기존 규격을 그대로 유지한다. */
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"].game-observe-empty .game-observe-empty-copy{
  position:absolute!important;z-index:40!important;left:50%!important;top:50%!important;display:grid!important;justify-items:center!important;
  width:min(78vw,520px)!important;max-width:calc(100vw - 32px)!important;margin:0!important;padding:clamp(18px,5vw,28px)!important;
  transform:translate(-50%,-50%)!important;border-radius:26px!important;background:#101722e8!important;text-align:center!important;box-shadow:0 18px 42px #0007!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"].game-observe-empty .game-observe-empty-copy>span{font-size:clamp(38px,13vw,54px)!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"].game-observe-empty .game-observe-empty-copy h1{margin:8px 0 5px!important;color:#fff!important;font-size:clamp(22px,6.5vw,34px)!important;line-height:1.2!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"].game-observe-empty .game-observe-empty-copy p{margin:0 0 14px!important;color:#ffffffc8!important;font-size:clamp(13px,3.7vw,17px)!important;line-height:1.55!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"].game-observe-empty .game-observe-empty-copy button{min-height:44px!important;padding:10px 16px!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top{
  position:absolute!important;z-index:40!important;inset:0 0 auto 0!important;display:block!important;width:100%!important;height:var(--hud-header-height)!important;
  padding:0!important;overflow:visible!important;pointer-events:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top::before{
  position:absolute!important;z-index:-1!important;left:-2px!important;right:-2px!important;top:0!important;width:auto!important;height:var(--hud-header-height)!important;content:""!important;
  background-color:transparent!important;background-image:var(--home-ui-wood-top,url("./assets/home-ui/wood-top.webp"))!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;clip-path:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top::after{
  position:absolute!important;z-index:0!important;left:-2px!important;right:-2px!important;top:-11px!important;width:auto!important;height:34px!important;content:""!important;
  background-color:transparent!important;background-image:var(--home-ui-wood-strip,url("./assets/home-ui/wood-strip.webp"))!important;background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!important;pointer-events:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile{
  position:absolute!important;left:1.7vw!important;top:3.38dvh!important;width:min(76vw,360px)!important;height:min(9.6dvh,94px)!important;pointer-events:auto!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-toggle{
  display:grid!important;grid-template-columns:min(18.93vw,88px) minmax(0,1fr)!important;align-items:start!important;gap:3.88vw!important;
  width:100%!important;height:100%!important;min-height:0!important;padding:0!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-frame{
  position:relative!important;display:grid!important;place-items:center!important;width:min(18.93vw,88px)!important;height:min(8.51dvh,88px)!important;
  overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-frame :is(.avatar,.sprite){
  width:min(16.2vw,75px)!important;height:min(7.28dvh,75px)!important;overflow:hidden!important;border:0!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;object-fit:cover!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-ring{
  position:absolute!important;inset:0!important;z-index:2!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;
  object-fit:contain!important;pointer-events:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy{
  position:absolute!important;left:22.57vw!important;top:1.197dvh!important;display:grid!important;align-content:start!important;justify-items:start!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy b{
  max-width:52vw!important;overflow:hidden!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000!important;paint-order:stroke fill!important;font-family:var(--home-ui-font)!important;font-size:clamp(18px,5.05vw,23px)!important;font-weight:400!important;line-height:25px!important;text-overflow:ellipsis!important;
  white-space:nowrap!important;text-shadow:0 2px 3px #0008!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy small{
  --label-cap:calc(3.45dvh * .484);position:absolute!important;z-index:1!important;left:.61vw!important;top:calc(var(--hud-header-height) - var(--hud-profile-top) + var(--hud-job-gap))!important;display:grid!important;grid-template-columns:var(--label-cap) minmax(0,auto) var(--label-cap)!important;align-items:stretch!important;box-sizing:border-box!important;width:max-content!important;max-width:46vw!important;height:3.45dvh!important;max-height:34px!important;margin:0!important;padding:0!important;
  overflow:visible!important;border:0!important;background:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:var(--home-ui-font)!important;font-size:clamp(10px,3.3vw,15px)!important;font-weight:400!important;white-space:nowrap!important;text-shadow:0 1px 2px #2a160d99!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy small::before{
  display:block!important;content:""!important;background:var(--home-ui-pill-left,url("./assets/home-ui/pill-left.webp")) right center/auto 100% no-repeat!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy small::after{
  display:block!important;content:""!important;background:var(--home-ui-pill-right,url("./assets/home-ui/pill-right.webp")) left center/auto 100% no-repeat!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy small>em{
  display:grid!important;place-items:center!important;min-width:0!important;max-width:40vw!important;margin:0 -1px!important;padding:0 1.2vw!important;overflow:hidden!important;background:var(--home-ui-pill-middle,url("./assets/home-ui/pill-middle.webp")) center/100% 100% repeat-x!important;font:inherit!important;font-style:normal!important;text-overflow:ellipsis!important;white-space:nowrap!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top>time{
  position:absolute!important;top:5.45dvh!important;right:3.155vw!important;display:block!important;width:max-content!important;margin:0!important;padding:0!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.1px #000!important;paint-order:stroke fill!important;
  font-family:var(--home-ui-font)!important;font-size:clamp(13px,3.6vw,17px)!important;font-weight:400!important;line-height:17px!important;text-align:right!important;text-shadow:0 2px 3px #0008!important;white-space:nowrap!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-date{
  position:absolute!important;top:3.487dvh!important;right:3.155vw!important;display:block!important;width:max-content!important;margin:0!important;padding:0!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.85px #000!important;paint-order:stroke fill!important;
  font-family:var(--home-ui-font)!important;font-size:10px!important;font-weight:400!important;line-height:12px!important;text-align:right!important;text-shadow:0 2px 3px #2a160dcc!important;white-space:nowrap!important;-webkit-text-size-adjust:none!important;text-size-adjust:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-stage{
  position:absolute!important;z-index:7!important;left:18.45vw!important;right:18.45vw!important;top:13.1dvh!important;height:49.4dvh!important;
  display:grid!important;place-items:center!important;min-height:0!important;padding:0!important;overflow:visible!important;pointer-events:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .native-character-stage{width:min(48vw,220px)!important;height:min(32dvh,280px)!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .native-character-stage:is(.has-scene-companion,.has-scene-lineup){width:min(65vw,300px)!important;height:min(32dvh,280px)!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side{
  position:absolute!important;z-index:25!important;display:grid!important;grid-template-rows:repeat(3,var(--hud-side-row))!important;
  align-content:start!important;gap:0!important;width:16.75vw!important;height:34.35dvh!important;overflow:visible!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-left{left:2.91vw!important;top:12.87dvh!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-right{right:max(10px,env(safe-area-inset-right))!important;top:max(calc(env(safe-area-inset-top) + 126px),calc(5.45dvh + 82px))!important;gap:12px!important;width:44px!important;height:auto!important;grid-template-rows:repeat(4,50px)!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side button,
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button{
  position:relative!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0!important;
  overflow:visible!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side button>span,
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side .game-hud-menu-art{
  position:absolute!important;top:0!important;left:50%!important;display:grid!important;place-items:center!important;
  max-width:none!important;overflow:visible!important;transform:translateX(-50%)!important;border:0!important;background:transparent!important;box-shadow:none!important;
  color:#fff!important;font-size:clamp(31px,10.4vw,45px)!important;line-height:1!important;object-fit:contain!important;filter:drop-shadow(0 3px 3px #0009)!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-left :is(button>span,.game-hud-menu-art){width:15.29vw!important;height:6.87dvh!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-right :is(button>span,.game-hud-menu-art){width:34px!important;height:34px!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] :is(.game-hud-side-left,.game-hud-dock) button>small{
  --label-cap:calc(var(--hud-label-h) * .484);position:absolute!important;z-index:3!important;display:grid!important;grid-template-columns:var(--label-cap) minmax(0,1fr) var(--label-cap)!important;align-items:stretch!important;box-sizing:border-box!important;height:var(--hud-label-h)!important;margin:0!important;padding:0!important;
  overflow:visible!important;border:0!important;background:transparent!important;color:#FFF5DD!important;-webkit-text-fill-color:#FFF5DD!important;
  font-family:var(--home-ui-font)!important;font-size:clamp(9px,2.75vw,12px)!important;font-weight:400!important;line-height:1!important;text-align:center!important;text-overflow:ellipsis!important;
  white-space:nowrap!important;text-shadow:none!important;box-shadow:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] :is(.game-hud-side-left,.game-hud-dock) button>small::before{
  display:block!important;content:""!important;background:var(--home-ui-pill-left,url("./assets/home-ui/pill-left.webp")) right center/auto 100% no-repeat!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] :is(.game-hud-side-left,.game-hud-dock) button>small::after{
  display:block!important;content:""!important;background:var(--home-ui-pill-right,url("./assets/home-ui/pill-right.webp")) left center/auto 100% no-repeat!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] :is(.game-hud-side-left,.game-hud-dock) button>small>span{
  display:grid!important;place-items:center!important;min-width:0!important;margin:0 -1px!important;padding:0 2px!important;overflow:hidden!important;background:var(--home-ui-pill-middle,url("./assets/home-ui/pill-middle.webp")) center/100% 100% repeat-x!important;color:#FFF5DD!important;-webkit-text-fill-color:#FFF5DD!important;text-overflow:ellipsis!important;white-space:nowrap!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side button>small{
  left:50%!important;width:clamp(70px,20.4vw,94px)!important;transform:translateX(-50%)!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-left button>small{top:5.56dvh!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-right button>small{display:block!important;position:absolute!important;top:27px!important;width:76px!important;height:auto!important;font-size:11px!important;line-height:1.15!important;white-space:normal!important;color:white!important;-webkit-text-fill-color:white!important;-webkit-text-stroke:3px #241b15;paint-order:stroke fill;text-shadow:0 1px 2px #241b15;background:none!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment{
  position:absolute!important;z-index:27!important;left:7.04vw!important;top:auto!important;bottom:15.38dvh!important;width:85.19vw!important;height:21.26dvh!important;max-height:none!important;max-width:none!important;
  box-sizing:border-box!important;margin:0!important;padding:2.45dvh 7.28vw 2.1dvh!important;overflow:visible!important;border:1.5px solid #000!important;border-radius:30px!important;
  background:#fff8efed!important;box-shadow:0 5px 18px #2b160d35!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment-head{
  position:absolute!important;left:7.77vw!important;right:3.88vw!important;top:-3dvh!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  height:2.73dvh!important;margin:0!important;font-family:var(--home-ui-font)!important;font-size:clamp(13px,3.9vw,18px)!important;font-weight:400!important;white-space:nowrap!important;pointer-events:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment-head>.game-hud-moment-title{
  pointer-events:auto!important;display:block!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;appearance:none!important;-webkit-appearance:none!important;
  border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-family:var(--home-ui-font)!important;font-size:clamp(18px,5.2vw,24px)!important;font-weight:400!important;line-height:1!important;letter-spacing:0!important;-webkit-text-stroke:1.5px #000!important;paint-order:stroke fill!important;text-shadow:0 2px 3px #000b!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment-head>.game-hud-moment-toggle{
  position:relative!important;top:.72dvh!important;margin-left:auto!important;pointer-events:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;min-width:clamp(64px,17.2vw,90px)!important;height:4.15dvh!important;padding:0 9px 2px!important;
  border:0!important;border-radius:0!important;background-color:transparent!important;background-image:var(--home-ui-red-tape,url("./assets/home-ui/red-tape.webp"))!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;color:#fff3df!important;box-shadow:none!important;
  font:inherit!important;font-size:clamp(12px,3.55vw,16px)!important;line-height:1!important;text-shadow:0 1px 1px #45160f!important;transform:rotate(2.5deg)!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment-toggle>img{
  display:none!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment-toggle>span{position:relative!important;z-index:1!important;color:#fff3df!important;-webkit-text-fill-color:#fff3df!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment-body{
  display:grid!important;grid-template-rows:auto auto auto!important;align-content:start!important;gap:.55dvh!important;height:auto!important;min-height:0!important;overflow:hidden!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment h1{
  display:block!important;margin:0!important;overflow:hidden!important;font-family:var(--home-ui-font)!important;font-size:clamp(16px,4.55vw,21px)!important;font-weight:400!important;line-height:1.25!important;
  text-overflow:ellipsis!important;white-space:nowrap!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment p{
  display:-webkit-box!important;margin:0!important;padding:0 0 .12em!important;overflow:hidden!important;font-family:var(--home-ui-font)!important;font-size:clamp(11px,3.25vw,14px)!important;font-weight:400!important;line-height:1.6!important;
  white-space:normal!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;line-clamp:3!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-location{display:flex!important;align-items:center!important;align-self:start!important;gap:2.2vw!important;min-width:0!important;margin-top:.15dvh!important;font-family:var(--home-ui-font)!important;font-size:clamp(11px,3.25vw,15px)!important;font-weight:400!important;line-height:1.2!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-location :is(img,i){width:6.55vw!important;height:3dvh!important;max-width:30px!important;max-height:30px!important;object-fit:contain!important;object-position:center!important;border:0!important;background:transparent!important;box-shadow:none!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-location>b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.game-observe-hud[data-native-hud-version="4"] .game-hud-character-command{position:static!important;justify-self:end!important;align-self:end!important;z-index:4!important;width:auto!important;min-width:0!important;min-height:28px!important;margin:0!important;padding:5px 10px!important;border:1px solid #765b43!important;border-radius:999px!important;background:#6b4f3d!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:400 clamp(9px,2.7vw,12px)/1.1 var(--home-ui-font),sans-serif!important;box-shadow:0 2px 0 #2c1c14!important;white-space:nowrap!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment.expanded{
  top:auto!important;bottom:15.38dvh!important;height:auto!important;max-height:34dvh!important;overflow:visible!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment.expanded .game-hud-moment-body{display:block!important;height:auto!important;max-height:29dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment.expanded :is(h1,p){display:block!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;-webkit-line-clamp:unset!important;line-clamp:unset!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment.expanded p{margin-top:.75dvh!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment.expanded .game-hud-location{margin-top:1.05dvh!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-roster-options button,
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-roster-options button>span{border:0!important;background:transparent!important;box-shadow:none!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock{
  position:absolute!important;z-index:28!important;left:1.21vw!important;top:86.69dvh!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;
  gap:1.21vw!important;width:97.57vw!important;height:11.45dvh!important;min-height:0!important;margin:0!important;padding:0!important;
  overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important
}
.tablet-observe-map,.home-native-tablet-info{display:none}
.multiplayer-resident-avatar{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:50%;background:#f4ead8;color:#4c382e;font:800 1em/1 var(--ui-font),sans-serif}
.multiplayer-resident-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.multiplayer-map-residents{position:absolute;z-index:20;inset:0;pointer-events:none}
.multiplayer-map-resident{position:absolute;left:var(--resident-x);top:var(--resident-y);display:grid;justify-items:center;gap:2px;width:62px;padding:0;border:0;background:transparent;box-shadow:none;transform:translate(-50%,-50%);pointer-events:auto}
.multiplayer-map-resident>.multiplayer-resident-avatar{width:48px;height:48px;border:3px solid #fff8e9;box-shadow:0 2px 7px #1f160dbb}
.multiplayer-map-resident>small{max-width:76px;padding:2px 7px;border-radius:999px;background:#654b3de8;color:#fff7df;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multiplayer-map-resident.on>.multiplayer-resident-avatar{outline:3px solid #f3d763;outline-offset:2px}
.multiplayer-remote-resident{position:absolute;left:50%;top:42%;display:grid;justify-items:center;gap:10px;width:min(190px,42vw);transform:translate(-50%,-50%)}
.multiplayer-remote-resident>.multiplayer-resident-avatar{width:min(150px,34vw);height:min(150px,34vw);border:5px solid #fff8e9;box-shadow:0 12px 30px #17110d88}
.multiplayer-remote-resident>b{padding:5px 13px;border-radius:999px;background:#654b3de8;color:#fff7df;font-size:16px}
.game-hud-multiplayer-title{position:absolute;left:5vw;top:4.2dvh;display:grid;gap:3px;max-width:62vw;color:#fff4d6}
.game-hud-multiplayer-title>b{font:400 clamp(18px,5.05vw,23px)/1 var(--home-ui-font),sans-serif}
.game-hud-multiplayer-title>small{font-size:clamp(10px,3vw,13px)}
html.native-app .install-app-button{display:none!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button>span,
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button>img{
  position:absolute!important;top:0!important;left:50%!important;display:grid!important;place-items:center!important;width:18.45vw!important;height:8.29dvh!important;
  max-width:none!important;overflow:visible!important;transform:translateX(-50%)!important;border:0!important;background:transparent!important;box-shadow:none!important;
  color:#fff!important;font-size:clamp(27px,8.6vw,38px)!important;line-height:1!important;object-fit:contain!important;filter:drop-shadow(0 3px 3px #0008)!important
}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button>small{top:7.63dvh!important;left:50%!important;width:clamp(62px,18.15vw,84px)!important;max-width:none!important;transform:translateX(-50%)!important}
/* Portrait tablets intentionally use the phone composition. Keep pixel-sized
   caps for controls whose old dvh sizing stretched labels into a single glyph. */
@media(min-width:721px) and (orientation:portrait){
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"]{--hud-side-row:92px;--hud-label-h:34px}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy{left:104px!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy small{top:calc(var(--hud-header-height) - var(--hud-profile-top) + var(--hud-job-gap))!important;height:34px!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-left button>small{top:58px!important}
  html.native-app[data-active-tab="town"] .town-native-context{left:124px!important;right:260px!important;top:calc(3.38dvh + 1.197dvh)!important}
  html.native-app[data-active-tab="town"] .town-native-town-pill{margin:17px 0 0 7px!important}
}
/* Landscape tablet authority: the supplied 1280 × 800 SVG fixes the split at
   x=768. The town map stays on the left and the phone scene owns the right. */
@media(min-width:721px) and (orientation:landscape){
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top::before{height:100%!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top::after{left:calc(-150% - 2px)!important;right:-2px!important;top:0!important;height:2.5dvh!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
  .game-observe-hud[data-native-hud-version="4"] .tablet-observe-map{position:absolute!important;z-index:1!important;left:0!important;right:40%!important;top:2.5dvh!important;bottom:0!important;display:block!important;width:auto!important;height:auto!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#91ad77!important}
  .tablet-observe-world{position:relative!important;width:100%!important;height:100%!important;overflow:hidden!important}
  .tablet-observe-world :is(.place-people-faces,.place-person-face,.town-traveler,.town-traveler-visual){min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;backdrop-filter:none!important}
  .tablet-observe-world .place-person-face :is(.avatar,.sprite){margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;object-fit:contain!important}
  .tablet-observe-world .place-person-face img.profile-photo-fallback{border-radius:50%!important;object-fit:cover!important}
  .tablet-observe-world button.town-decoration{display:grid!important;place-items:center!important;width:clamp(38px,4.2vw,68px)!important;height:clamp(38px,4.2vw,68px)!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:visible!important}
  .tablet-observe-world button.town-decoration :is(.building-preset-image,.town-decoration-emoji){display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;object-fit:contain!important}
  .tablet-observe-world>.world-bg{position:absolute!important;z-index:0!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .tablet-observe-world>.place,
  .tablet-observe-world>.map-place-label,
  .tablet-observe-world>.person{position:absolute!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"]>.native-observe-backdrop,
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"]>.native-observe-shade,
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"]>.native-scene-atmosphere{left:60%!important;right:0!important;top:9.5dvh!important;bottom:0!important;width:40%!important;height:auto!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top{--hud-header-height:9.75dvh;--hud-profile-top:5.5dvh;left:60%!important;right:0!important;width:40%!important;height:9.75dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile{left:1.640625vw!important;top:4dvh!important;width:30%!important;height:9.5dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-toggle{grid-template-columns:5.9375vw minmax(0,1fr)!important;gap:1.40625vw!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-frame{width:5.9375vw!important;height:9.5dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-frame :is(.avatar,.sprite){width:5.15625vw!important;height:8.25dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy{left:7.34375vw!important;top:1.5dvh!important;width:12.5vw!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy b{max-width:12vw!important;font-size:clamp(17px,1.65vw,24px)!important;line-height:1.05!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-profile-copy small{left:0!important;top:calc(var(--hud-header-height) - var(--hud-profile-top) + var(--hud-job-gap))!important;height:2.625dvh!important;--label-cap:calc(2.625dvh * .484);max-width:12vw!important;font-size:clamp(9px,.88vw,13px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-top>time{top:6.875dvh!important;right:2.1875%!important;font-size:clamp(12px,1.25vw,18px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-date{top:4.625dvh!important;right:2.1875%!important;font-size:clamp(8px,.78vw,12px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-stage{left:64.453125%!important;right:auto!important;top:9.5dvh!important;width:34.375%!important;height:88.5dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .native-character-stage,
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .native-character-stage:is(.has-scene-companion,.has-scene-lineup){width:100%!important;height:100%!important;min-height:0!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment{left:64.0625%!important;top:60dvh!important;bottom:auto!important;width:32.578125%!important;height:24.5dvh!important;min-height:0!important;max-height:none!important;padding:3.125dvh 2.421875vw 2.5dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment h1{font-size:clamp(15px,1.5vw,21px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment p{font-size:clamp(10px,.95vw,14px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-character-command{font-size:clamp(8px,.8vw,12px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side{top:auto!important;bottom:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:1fr!important;gap:.546875vw!important;width:18.75%!important;height:13.75dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-left{left:auto!important;right:calc(25% + .546875vw)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side-right{left:auto!important;right:0!important;top:auto!important;bottom:0!important;gap:.546875vw!important;width:25%!important;height:13.75dvh!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:1fr!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side :is(button>span,.game-hud-menu-art){width:4.921875vw!important;height:7.875dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-side button>small{display:grid!important;top:6.125dvh!important;width:5.546875vw!important;height:4dvh!important;font-size:clamp(7px,.68vw,10px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock{left:3.984375%!important;top:auto!important;bottom:0!important;width:31.25%!important;height:15.5dvh!important;gap:.390625vw!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button>span,
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button>img{width:5.9375vw!important;height:9.5dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-dock button>small{top:8.625dvh!important;width:5.546875vw!important;height:4dvh!important;font-size:clamp(7px,.68vw,10px)!important}
  html.native-platform[data-active-tab="observe"] .game-observe-empty[data-native-hud-version="4"] .game-observe-empty-copy{left:80%!important;max-width:26vw!important}

  html.native-app[data-active-tab="home"] :is(body,#app,#app>main,.home-page,.home-grid,.home){width:100%!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
  html.native-app[data-active-tab="home"] .home{position:relative!important;border:0!important;border-radius:0!important;background:#5c4234!important;box-shadow:none!important}
  html.native-app[data-active-tab="home"] .home>.title,
  html.native-app[data-active-tab="home"] .home>.clean{display:none!important}
  html.native-app[data-active-tab="home"] .home-native-hud{position:absolute!important;z-index:720!important;inset:0!important;pointer-events:none!important;font-family:var(--home-ui-font),sans-serif!important}
  html.native-app[data-active-tab="home"] .home-native-header{position:absolute!important;z-index:20!important;left:0!important;right:0!important;top:0!important;width:100%!important;height:78px!important;pointer-events:none!important}
  html.native-app[data-active-tab="home"] .home-native-header::before{position:absolute!important;z-index:-2!important;content:""!important;inset:0 -2px auto!important;height:78px!important;background:var(--home-ui-wood-top) center/cover no-repeat!important}
  html.native-app[data-active-tab="home"] .home-native-header::after{position:absolute!important;z-index:-1!important;content:""!important;left:-2px!important;right:-2px!important;top:-11px!important;height:34px!important;background:var(--home-ui-wood-strip) center bottom/cover no-repeat!important}
  html.native-app[data-active-tab="home"] .home-native-back{position:absolute!important;z-index:30!important;left:22px!important;top:36px!important;width:64px!important;height:64px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:auto!important}
  html.native-app[data-active-tab="home"] .home-native-back img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
html.native-app[data-active-tab="home"] .home-native-meta{position:absolute!important;left:calc(22.57vw - 27px)!important;right:20px!important;top:calc(22.5px + 1.197dvh)!important;display:block!important;min-width:0!important}
  html.native-app[data-active-tab="home"] .home-native-context{position:fixed!important;right:2.1875vw!important;top:6.875dvh!important;bottom:auto!important;color:#fff!important;font-size:11px!important}
  html.native-app[data-active-tab="home"] .home-native-house-icon{grid-row:2!important;width:38px!important;height:38px!important}
  html.native-app[data-active-tab="home"] .home-native-house-icon img{width:38px!important;height:38px!important;object-fit:contain!important}
  html.native-app[data-active-tab="home"] .home-native-house-name{grid-row:2!important;display:flex!important;align-items:center!important;gap:10px!important;height:35px!important;padding:0!important;overflow:hidden!important;border:0!important;background:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000!important;font:400 24px/30px var(--home-ui-font),sans-serif!important;font-size:24px!important;font-weight:400!important;line-height:30px!important;text-align:left!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-shadow:0 2px 3px #0008!important;box-shadow:none!important;pointer-events:auto!important}
  html.native-app[data-active-tab="home"] .home-native-house-name>img{width:35px!important;height:35px!important;flex-basis:35px!important}
  html.native-app[data-active-tab="home"] .home-native-house-name>span{min-width:0!important;overflow:hidden!important;color:inherit!important;-webkit-text-fill-color:inherit!important;font:400 24px/30px var(--home-ui-font),sans-serif!important;font-size:24px!important;font-weight:400!important;line-height:30px!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html.native-app[data-active-tab="home"] .home-native-side{position:absolute!important;z-index:30!important;right:20px!important;top:96px!important;display:grid!important;gap:10px!important;width:148px!important;pointer-events:auto!important}
html.native-app[data-active-tab="home"] .home-native-pill{--home-pill-height:44px;--home-pill-cap:calc(var(--home-pill-height)*.484);display:grid!important;grid-template-columns:var(--home-pill-cap) minmax(0,1fr) var(--home-pill-cap)!important;width:148px!important;height:var(--home-pill-height)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
  html.native-app[data-active-tab="home"] .home-native-pill::before{content:""!important;background:var(--home-ui-pill-left) right center/100% 100% no-repeat!important}
  html.native-app[data-active-tab="home"] .home-native-pill::after{content:""!important;background:var(--home-ui-pill-right) left center/100% 100% no-repeat!important}
  html.native-app[data-active-tab="home"] .home-native-pill>span{display:grid!important;place-items:center!important;margin:0 -1px!important;background:var(--home-ui-pill-middle) center/100% 100% repeat-x!important;color:#fff5dd!important;white-space:nowrap!important;font:400 12px/1 var(--home-ui-font),sans-serif!important}
  html.native-app[data-active-tab="home"] .home-native-ui-toggle{position:absolute!important;left:10px!important;bottom:16px!important;width:86px!important}
  html.native-app[data-active-tab="home"] .home-native-elevator{position:absolute!important;z-index:30!important;right:calc(28% + 10px)!important;top:50%!important;display:grid!important;place-items:center!important;width:54px!important;padding:7px!important;border:2px solid #4d372a!important;border-radius:24px!important;background:#fff9eee8!important;transform:translateY(-50%)!important;pointer-events:auto!important}
  html.native-app[data-active-tab="home"] .home-native-elevator button{width:100%!important;height:35px!important;border:0!important;background:transparent!important}
  html.native-app[data-active-tab="home"] .rooms{position:absolute!important;left:0!important;right:auto!important;top:78px!important;bottom:0!important;display:block!important;width:72%!important;height:calc(100dvh - 78px)!important;aspect-ratio:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#5c4234!important;border-radius:0!important}
  html.native-app[data-active-tab="home"] .rooms>.room{position:absolute!important;left:var(--mobile-room-x)!important;top:var(--mobile-room-y)!important;width:var(--mobile-room-w)!important;height:var(--mobile-room-h)!important;min-width:0!important;min-height:0!important;margin:0!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-info{position:absolute!important;z-index:4!important;right:16px!important;top:320px!important;bottom:110px!important;display:grid!important;grid-template-rows:minmax(100px,1fr) auto!important;width:calc(28% - 32px)!important;overflow:auto!important;border:2px solid #b79d76!important;border-radius:22px!important;background:#eee8dc!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-photo{min-height:0!important;overflow:hidden!important;border-bottom:5px solid #5c4234!important;background:#cbc3b4!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-photo img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-info dl{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start!important;gap:8px 14px!important;margin:0!important;padding:20px!important;overflow:auto!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-info dl>div{display:grid!important;gap:4px!important;min-width:0!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-info dt{font-size:12px!important;font-weight:800!important}
  html.native-app[data-active-tab="home"] .home-native-tablet-info dd{min-width:0!important;margin:0!important;padding:7px 10px!important;overflow:hidden!important;border-radius:999px!important;background:#d8cfbb!important;font-size:13px!important;text-overflow:ellipsis!important;white-space:nowrap!important}

}
/* The full iPad town canvas is landscape-only. Portrait tablets inherit the
   same town screen and navigation sizing as phones. */
@media(min-width:721px) and (orientation:landscape){
  html.native-app[data-active-tab="town"] .native-sub-header{display:none!important}
  html.native-app[data-active-tab="town"] #app>main{width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important}
  html.native-app[data-active-tab="town"] .mobile-town-shell{position:fixed!important;z-index:1!important;inset:0!important;display:block!important;width:100vw!important;height:100dvh!important;overflow:hidden!important;background:#89aa72!important}
  html.native-app[data-active-tab="town"] .town-tabs{display:none!important}
  html.native-app[data-active-tab="town"] .town-edit,
  html.native-app[data-active-tab="town"] .town-map-scroll{position:absolute!important;inset:0!important;display:block!important;width:100vw!important;height:100dvh!important;margin:0!important;overflow:hidden!important;border:0!important;border-radius:0!important}
  html.native-app[data-active-tab="town"] .town-map-scroll>.world{position:relative!important;width:100vw!important;min-width:100vw!important;height:100dvh!important;min-height:100dvh!important;aspect-ratio:auto!important}
  html.native-app[data-active-tab="town"] .town-map-scroll .world-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .mobile-town-shell .town-map-scroll :is(.place-people-faces,.place-person-face,.town-traveler,.town-traveler-visual){margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;backdrop-filter:none!important}
  .mobile-town-shell .town-map-scroll .place-person-face :is(.avatar,.sprite){margin:0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;object-fit:contain!important}
  .mobile-town-shell .town-map-scroll button.town-decoration{display:grid!important;place-items:center!important;width:clamp(40px,5.2vw,72px)!important;height:clamp(40px,5.2vw,72px)!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;overflow:visible!important}
  .mobile-town-shell .town-map-scroll button.town-decoration>.building-preset-image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;object-fit:contain!important}
  .mobile-town-shell .town-map-scroll button.town-decoration>.town-decoration-emoji{display:block!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:clamp(32px,4.5vw,62px)!important;line-height:1!important}
  html.native-app[data-active-tab="town"] .map-place-label{min-width:76px!important;max-width:126px!important;transform:translate(-50%,calc(-100% - 7px))!important;line-height:1.05!important}.native-app[data-active-tab="town"] .map-place-label b{font-size:13px!important}.native-app[data-active-tab="town"] .map-place-label small{font-size:9px!important}
  html.native-app[data-active-tab="town"] .town-native-header{position:fixed!important;z-index:210!important;left:0!important;right:0!important;top:0!important;width:100%!important;height:82px!important;overflow:visible!important;color:#fff5dd!important;pointer-events:none!important}
  html.native-app[data-active-tab="town"] .town-native-header::before{position:absolute!important;z-index:-2!important;content:""!important;left:-2px!important;right:-2px!important;top:0!important;height:82px!important;background:var(--home-ui-wood-top) center/cover no-repeat!important}
  html.native-app[data-active-tab="town"] .town-native-header::after{position:absolute!important;z-index:-1!important;content:""!important;left:-2px!important;right:-2px!important;top:-11px!important;height:34px!important;background:var(--home-ui-wood-strip) center bottom/cover no-repeat!important}
  html.native-app[data-active-tab="town"] .town-native-back{position:absolute!important;z-index:4!important;left:24px!important;top:34px!important;width:66px!important;height:66px!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:auto!important}
  html.native-app[data-active-tab="town"] .town-native-back img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
  html.native-app[data-active-tab="town"] .town-native-title{position:absolute!important;left:calc(22.57vw - 27px)!important;right:260px!important;top:calc(22.5px + 1.197dvh)!important;display:grid!important;grid-template-columns:35px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;height:35px!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important;pointer-events:auto!important}
  html.native-app[data-active-tab="town"] .town-native-title>img{display:block!important;width:35px!important;height:35px!important;object-fit:contain!important;filter:drop-shadow(0 1px 1px #0005)!important}
  html.native-app[data-active-tab="town"] .town-native-title>.town-native-name{align-self:center!important;overflow:hidden!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000!important;paint-order:stroke fill!important;font-family:var(--home-ui-font),sans-serif!important;font-size:24px!important;font-weight:400!important;line-height:30px!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-shadow:0 2px 3px #0008!important}
  html.native-app[data-active-tab="town"] .town-native-context{position:absolute!important;left:106px!important;right:260px!important;top:25px!important;display:grid!important;justify-items:start!important;min-width:0!important;pointer-events:auto!important}
  html.native-app[data-active-tab="town"] .town-native-community{display:block!important;width:100%!important;height:35px!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important}.native-app[data-active-tab="town"] .town-native-community>img{display:none!important}.native-app[data-active-tab="town"] .town-native-community>span{overflow:hidden!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1.2px #000!important;paint-order:stroke fill!important;font:400 24px/30px var(--home-ui-font),sans-serif!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-shadow:0 2px 3px #0008!important}
  html.native-app[data-active-tab="town"] .town-native-town-pill{--town-pill-height:31px!important;--town-pill-cap:calc(var(--town-pill-height)*.484)!important;display:grid!important;grid-template-columns:var(--town-pill-cap) minmax(0,auto) var(--town-pill-cap)!important;width:max-content!important;max-width:29vw!important;height:var(--town-pill-height)!important;min-height:0!important;margin:10px 0 0 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.native-app[data-active-tab="town"] .town-native-town-pill::before{content:""!important;background:var(--home-ui-pill-left) right center/auto 100% no-repeat!important}.native-app[data-active-tab="town"] .town-native-town-pill::after{content:""!important;background:var(--home-ui-pill-right) left center/auto 100% no-repeat!important}.native-app[data-active-tab="town"] .town-native-town-pill>span{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-width:0!important;margin:0 -1px!important;padding:0 7px!important;overflow:hidden!important;background:var(--home-ui-pill-middle) center/100% 100% repeat-x!important;color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;font:400 14px/1 var(--home-ui-font),sans-serif!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html.native-app[data-active-tab="town"] .town-native-status{position:absolute!important;right:18px!important;top:45px!important;display:block!important;max-width:230px!important;height:28px!important;overflow:hidden!important;background:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:.7px #17110d!important;paint-order:stroke fill!important;font-family:"KCCHanbit",var(--ui-font),sans-serif!important;font-size:15px!important;font-weight:400!important;line-height:28px!important;text-align:right!important;text-overflow:ellipsis!important;text-shadow:0 1px 1px #0008!important;white-space:nowrap!important}
  html.native-app[data-active-tab="town"] .town-native-header>.town-native-menu{position:absolute!important;right:13px!important;top:91px!important;display:grid!important;gap:6px!important;width:142px!important;pointer-events:auto!important}
  html.native-app[data-active-tab="town"] .town-native-header .home-native-pill{--home-pill-height:48px;--home-pill-cap:23px;display:grid!important;grid-template-columns:var(--home-pill-cap) minmax(0,1fr) var(--home-pill-cap)!important;width:142px!important;height:var(--home-pill-height)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
  html.native-app[data-active-tab="town"] .town-native-header .home-native-pill::before{content:""!important;background:var(--home-ui-pill-left) right center/auto 100% no-repeat!important}
  html.native-app[data-active-tab="town"] .town-native-header .home-native-pill::after{content:""!important;background:var(--home-ui-pill-right) left center/auto 100% no-repeat!important}
  html.native-app[data-active-tab="town"] .town-native-header .home-native-pill>span{display:grid!important;place-items:center!important;margin:0 -1px!important;background:var(--home-ui-pill-middle) center/100% 100% repeat-x!important;color:#fff5dd!important;font:400 18px/1 var(--home-ui-font),sans-serif!important;white-space:nowrap!important}
  html.native-app[data-active-tab="town"] .town-native-header .home-native-pill,
  html.native-app[data-active-tab="town"] .town-native-header .home-native-pill.on{outline:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
  html.native-app[data-active-tab="town"] .mobile-town-shell:is(.buildings-editing,.decorations-editing) .town-map-scroll>.world::after{position:absolute!important;z-index:2!important;inset:0!important;content:""!important;background-image:linear-gradient(#5f748045 1px,transparent 1px),linear-gradient(90deg,#5f748045 1px,transparent 1px)!important;background-size:2% 3.5%!important;pointer-events:none!important}
  html.native-app[data-active-tab="town"] .mobile-town-shell:is(.town-editing,.buildings-editing,.decorations-editing) :is(.person,.town-traveler,.map-character){display:none!important}
  html.native-app[data-active-tab="town"] .town-editor-panel{position:fixed!important;z-index:230!important;right:18px!important;bottom:18px!important;display:block!important;width:min(390px,36vw)!important;max-height:64dvh!important;margin:0!important;padding:20px!important;overflow:auto!important;border:0!important;border-radius:24px!important;background:#fffdf9e8!important;box-shadow:0 14px 45px #34251a55!important;backdrop-filter:blur(7px)!important}
  html.native-app[data-active-tab="town"] .mobile-town-shell.decorations-panel .town-editor-panel{left:0!important;right:0!important;bottom:0!important;width:auto!important;max-height:196px!important;padding:10px 24px 12px!important;border-radius:0!important;background:#9a765d var(--home-ui-wood-top) center/cover no-repeat!important;box-shadow:0 -3px 8px #21150e8c!important;backdrop-filter:none!important}
  html.native-app[data-active-tab="town"] .mobile-town-shell.decorations-panel .town-placement-toolbar{bottom:218px!important}
  html.native-app[data-active-tab="town"] .town-placement-toolbar{left:50%!important;right:auto!important;bottom:18px!important;width:min(720px,78vw)!important;transform:translateX(-50%)!important}
  html.native-app[data-active-tab="town"] .town-building-screen{position:fixed!important;z-index:230!important;inset:0!important;display:block!important;width:100vw!important;height:100dvh!important;margin:0!important;overflow:hidden!important;background-color:#6f5141!important;background-image:url("./assets/town-ui/building-info-wood.webp")!important;background-position:center top!important;background-size:100% auto!important;background-repeat:repeat-y!important;color:#17120f!important;font-family:"KCCHanbit",sans-serif!important}
  html.native-app[data-active-tab="town"] .town-building-screen-head{position:relative!important;height:118px!important;padding:42px 12vw 12px 150px!important}.native-app[data-active-tab="town"] .town-building-screen-back{position:absolute!important;z-index:2!important;left:24px!important;top:34px!important;width:66px!important;height:66px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.native-app[data-active-tab="town"] .town-building-screen-back img{width:100%!important;height:100%!important;object-fit:contain!important}
  html.native-app[data-active-tab="town"] .town-building-card-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
  html.native-app[data-active-tab="town"] .town-building-paper{height:calc(100dvh - 208px);margin:8px 5vw 12px;padding:16px}
  html.native-app[data-active-tab="town"] .town-building-detail-head{position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;height:100px!important;padding:0 42px 18px 110px!important;color:#fff!important;paint-order:stroke fill!important}.native-app[data-active-tab="town"] .town-building-detail-head>b{font-size:30px!important}.native-app[data-active-tab="town"] .town-building-detail-scroll{display:grid!important;grid-template-columns:minmax(320px,1.05fr) minmax(340px,.95fr)!important;gap:44px!important;height:calc(100dvh - 100px)!important;padding:8px 5vw 34px!important;overflow-y:auto!important}.native-app[data-active-tab="town"] .town-building-hero{position:sticky!important;top:7px!important;height:min(52vw,520px)!important;margin:0!important}.native-app[data-active-tab="town"] .town-building-interior{width:100%!important;height:100%!important;border:0!important;border-radius:29px!important;outline:0!important;box-shadow:0 0 0 7px #fff,0 5px 11px #2b160f70!important;object-fit:cover!important}.native-app[data-active-tab="town"] .town-building-exterior{position:absolute!important;right:-10px!important;bottom:-44px!important;width:190px!important;height:190px!important;object-fit:contain!important}.native-app[data-active-tab="town"] .town-building-detail-form{margin:0!important;padding-bottom:40px!important}.native-app[data-active-tab="town"] .town-building-detail-form>details>summary{display:none!important}
}
html.native-platform[data-active-tab="observe"] .game-observe-empty[data-native-hud-version="4"] .game-hud-top{display:block!important}
html.native-platform[data-active-tab="observe"] .game-observe-empty[data-native-hud-version="4"] .game-hud-empty-top>div{
  position:absolute!important;left:5vw!important;top:4.2dvh!important;display:grid!important;gap:.25dvh!important;max-width:65vw!important;color:#FFF4D6!important;-webkit-text-fill-color:#FFF4D6!important;pointer-events:auto!important
}
html.native-platform[data-active-tab="observe"] .game-observe-empty[data-native-hud-version="4"] .game-hud-empty-top b{font-size:clamp(18px,5.05vw,23px)!important;font-weight:400!important;line-height:1!important}
html.native-platform[data-active-tab="observe"] .game-observe-empty[data-native-hud-version="4"] .game-hud-empty-top small{overflow:hidden!important;font-size:clamp(10px,3vw,13px)!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] :is(.native-scene-lineup-person,.native-scene-companion)>small{
  -webkit-text-stroke:0!important;text-shadow:none!important
}
html.native-app[data-active-tab="observe"] .native-character-picker button,
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button,
html.native-app[data-active-tab="observe"] .native-character-picker button.on,
html[data-color-mode="light"].native-app[data-active-tab="observe"] .native-character-picker button.on{
  border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important
}
html.native-app[data-active-tab="observe"] .native-character-picker button.on :is(.avatar,.sprite){
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px var(--picker-theme,var(--p))) drop-shadow(0 0 16px var(--picker-theme,var(--p)))!important;
  animation:native-picker-aura 2.2s ease-in-out infinite alternate!important
}
@media(max-width:380px),(max-height:720px){
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment{padding:2.1dvh 6.7vw 1.8dvh!important}
  html.native-platform[data-active-tab="observe"] .game-observe-hud[data-native-hud-version="4"] .game-hud-moment:not(.expanded) p{-webkit-line-clamp:4!important;line-clamp:4!important}
}

/* 2026-08-15: final mobile scene, action-prop, and expansion-card authority. */
.native-app .scene-action-washing-up .action-prop-toothbrush{
  text-shadow:none!important;
  filter:drop-shadow(0 7px 7px #0009)!important;
  animation:native-toothbrush-motion 1.25s ease-in-out infinite!important;
}
.native-app .scene-action-washing-up .action-prop-razor{
  text-shadow:none!important;
  filter:drop-shadow(0 7px 7px #0009)!important;
  animation:native-razor-motion 1.4s ease-in-out infinite!important;
}
.native-app .scene-action-washing-up .action-prop-toothbrush::before,
.native-app .scene-action-washing-up .action-prop-toothbrush::after,
.native-app .scene-action-washing-up .action-prop-razor::before,
.native-app .scene-action-washing-up .action-prop-razor::after{display:none!important;content:none!important}
.native-app .scene-action-shoe-care :is(.native-scene-action-prop,.native-person-action-prop){
  text-shadow:none!important;
  animation:native-shoe-care 1.7s ease-in-out infinite!important;
}
@keyframes native-toothbrush-motion{
  0%,100%{translate:-7px 3px;rotate:-10deg}
  50%{translate:7px -3px;rotate:9deg}
}
@keyframes native-razor-motion{
  0%,100%{translate:-5px 4px;rotate:-8deg}
  50%{translate:5px -4px;rotate:7deg}
}
@keyframes native-shoe-care{
  0%,100%{translate:-6px 5px;rotate:-8deg}
  50%{translate:6px -4px;rotate:7deg}
}

/* Expansion copy must stay readable over its artwork in every theme. */
html[data-active-tab="shop"] .shop-store .shop-expansion-showcase,
html.native-app[data-active-tab="shop"] .shop-store .shop-expansion-showcase{
  border-color:#e5bf68!important;
  background:radial-gradient(circle at 12% 15%,#ffe9a033,transparent 28%),linear-gradient(135deg,#17131f,#312344 54%,#5b3427)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy :is(h2,p,li,small,span),
html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy :is(h2,p,li,small,span){
  opacity:1!important;
  color:#f8f1ff!important;
  -webkit-text-fill-color:#f8f1ff!important;
  text-shadow:0 2px 8px #09060db8!important;
}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>span,
html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>span{
  color:#ffe6a2!important;
  -webkit-text-fill-color:#ffe6a2!important;
}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>small,
html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>small{
  color:#e8c98a!important;
  -webkit-text-fill-color:#e8c98a!important;
}
html[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>div>b,
html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>div>b{
  color:#ffe09a!important;
  -webkit-text-fill-color:#ffe09a!important;
}

@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="shop"] .shop-expansion-heading{
    display:flex!important;
    align-items:baseline!important;
    justify-content:flex-start!important;
    gap:12px!important;
    min-width:0!important;
    margin:26px 0 12px!important;
    padding-inline:4px!important;
    overflow:visible!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-heading h2{
    min-width:0!important;
    margin:0!important;
    font-size:clamp(26px,8vw,34px)!important;
    line-height:1!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  html.native-app[data-active-tab="observe"] .native-game-menu button,
  html.native-app[data-active-tab="observe"] .native-game-menu button>span{
    border-color:transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html.native-app[data-active-tab="home"] .home-feature-menu button,
  html.native-app[data-active-tab="home"] .home-feature-menu button.on{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase{
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    width:100%!important;
    min-width:0!important;
    padding:16px!important;
    overflow:hidden!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-art{
    width:100%!important;
    min-width:0!important;
    min-height:210px!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-art img{
    width:100%!important;
    height:210px!important;
    min-height:0!important;
    padding:12px!important;
    object-fit:contain!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy{
    width:100%!important;
    min-width:0!important;
    align-items:flex-start!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy h2{
    max-width:100%!important;
    margin:8px 0 12px!important;
    font-size:clamp(28px,8.5vw,38px)!important;
    line-height:1.12!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy p,
  html.native-app[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy li{
    font-size:14px!important;
    line-height:1.65!important;
  }
}

/* Mobile home menu: preserve only the tappable icon/text, never a white or
   theme-colored button plate.  This selector intentionally outranks legacy
   theme rules that are still needed on the other pages. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="observe"][data-color-mode] body #app main .native-game-menu button,
  html.native-app[data-active-tab="observe"][data-color-mode] body #app main .native-game-menu button>span{
    appearance:none!important;
    -webkit-appearance:none!important;
    border-color:transparent!important;
    outline:0!important;
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
}

/* 2026-08-18 Android stability pass: keep first-run and utility pages light,
   remove expensive full-screen blur, and guarantee phone-sized content. */
.onboarding-hero-icon img{
  display:block;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:8px 28px;
  object-fit:contain;
}
html.native-platform .native-observe-backdrop{
  filter:saturate(.9)!important;
  transform:none!important;
}
html.native-platform :is(.page-guide,.native-status-card,.native-log-card,.home-observe-tools button){
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html.native-platform :is(
  .catalog-dex-card,.setting-card,.settings-complete-group,.relation,
  .character-group-card,.routine-day,.monthly-day,.shop-product-grid>article
){
  content-visibility:auto;
  contain-intrinsic-size:auto 260px;
}
html.native-platform[data-color-mode="light"] .onboarding-dialog{
  border:1px solid var(--theme-border)!important;
  background:
    radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--s) 20%,transparent),transparent 36%),
    linear-gradient(155deg,var(--panel),var(--bg))!important;
  color:var(--ink)!important;
  box-shadow:0 24px 64px color-mix(in srgb,var(--p) 18%,transparent)!important;
}
html.native-platform[data-color-mode="light"] .onboarding-dialog :is(h1,p,p b,section>small,label){
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
html.native-platform[data-color-mode="light"] .onboarding-dialog section>small,
html.native-platform[data-color-mode="light"] .onboarding-dialog p{
  color:var(--muted)!important;
  -webkit-text-fill-color:var(--muted)!important;
}
html.native-platform[data-color-mode="light"] .onboarding-dialog :is(input,button:not(.primary)){
  border-color:var(--theme-border)!important;
  background:var(--theme-surface)!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
html.native-platform[data-color-mode="light"] .onboarding-hero-icon{
  border-color:var(--theme-border)!important;
  background:linear-gradient(145deg,var(--theme-surface-strong),var(--panel))!important;
  color:var(--p)!important;
  box-shadow:0 14px 32px var(--theme-shadow)!important;
}
html.native-platform[data-color-mode="light"] .onboarding-safe-note{
  border-color:var(--theme-border)!important;
  background:var(--theme-surface)!important;
}
html.native-platform[data-color-mode="light"] .onboarding-safe-note span{color:var(--muted)!important}
html.native-platform[data-color-mode="light"] .onboarding-route>span{
  border-color:var(--theme-border)!important;
  background:var(--theme-surface)!important;
}
html.native-platform[data-active-tab="shop"] .native-play-store{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
html.native-platform[data-active-tab="shop"] .native-play-store :is(.shop-product-grid,.premium-product,.shop-coming){
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
html.native-platform[data-active-tab="shop"] .native-play-store .premium-product-heading{
  grid-template-columns:auto minmax(0,1fr)!important;
}
html.native-platform[data-active-tab="shop"] .native-play-store .premium-product-heading>b{
  grid-column:1/-1!important;
  justify-self:start!important;
}
html.native-platform[data-active-tab="shop"] .native-expansion-coming{
  margin-top:18px!important;
  padding:20px!important;
}
html.native-platform[data-active-tab="shop"] .native-expansion-coming small{
  color:var(--p)!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-platform body{overflow-x:hidden!important}
  html.native-platform .onboarding-dialog form{overflow-y:auto!important;overscroll-behavior:contain}
  html.native-platform .onboarding-dialog section{align-content:start!important;padding-top:8px}
  html.native-platform .onboarding-dialog h1{font-size:clamp(25px,7.8vw,34px)!important;line-height:1.22!important}
  html.native-platform .onboarding-dialog p{font-size:13px!important}
  html.native-platform .onboarding-actions{grid-template-columns:minmax(0,1fr)!important}
  html.native-platform[data-active-tab="shop"] .native-play-store{padding:14px 10px 30px!important}
  html.native-platform[data-active-tab="shop"] .native-play-store .shop-product-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* 2026-08-18 first-run welcome: existing village logo, calm white card layout. */
html.native-platform[data-color-mode="light"] .onboarding-dialog:has(.onboarding-first){
  background:#fff!important;
}
.onboarding-dialog .onboarding-first{
  padding:22px 28px 28px!important;
  background:
    radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--s) 28%,transparent),transparent 48%),
    linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--s) 7%,#fff) 100%)!important;
}
.onboarding-dialog .onboarding-welcome{
  align-content:center!important;
  justify-items:center;
  gap:13px!important;
  max-width:520px!important;
  padding-top:0!important;
}
.onboarding-welcome-art{
  width:min(100%,340px);
  height:210px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--p) 15%,#fff);
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 44px color-mix(in srgb,var(--p) 13%,transparent);
}
.onboarding-welcome-art img{
  display:block;
  width:100%;
  height:100%;
  padding:8px 14px 0;
  box-sizing:border-box;
  object-fit:contain;
}
.onboarding-dialog .onboarding-welcome>small{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--p) 9%,#fff);
  color:var(--p)!important;
  -webkit-text-fill-color:var(--p)!important;
  font-size:11px;
  letter-spacing:.08em;
}
.onboarding-dialog .onboarding-welcome h1{
  margin:0;
  color:var(--ink)!important;
  font-size:clamp(30px,5vw,43px)!important;
  line-height:1.2!important;
  letter-spacing:-.04em;
}
.onboarding-dialog .onboarding-welcome h1 em{
  color:var(--p)!important;
  -webkit-text-fill-color:var(--p)!important;
  font-style:normal;
}
.onboarding-dialog .onboarding-welcome p{max-width:410px;margin:0!important}
.onboarding-welcome-points{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}
.onboarding-welcome-points span{
  padding:8px 11px;
  border:1px solid var(--theme-border);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}
.onboarding-welcome-points span::before{content:"·";margin-right:6px;color:var(--p)}
.onboarding-dialog .onboarding-start{
  width:min(100%,390px)!important;
  min-height:54px!important;
  margin-top:3px;
  border-radius:17px!important;
  background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 78%,var(--s)))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--p) 23%,transparent)!important;
}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  .onboarding-dialog .onboarding-first{padding:13px 14px 18px!important}
  .onboarding-dialog .onboarding-welcome{gap:10px!important}
  .onboarding-welcome-art{width:min(100%,290px);height:174px;border-radius:23px}
  .onboarding-dialog .onboarding-welcome h1{font-size:clamp(27px,8vw,34px)!important}
  .onboarding-dialog .onboarding-welcome p br{display:none}
  .onboarding-welcome-points span{padding:7px 9px;font-size:11px}
}

/* Android 상점 전용: 확장팩 설명이 다음 카드 밖으로 밀려 나오지 않게 한다.
   웹 결제/웹 상점 레이아웃에는 적용하지 않는다. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-platform[data-active-tab="shop"] .native-play-store .shop-expansion-showcase{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
    align-content:start!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:16px 16px 22px!important;
    overflow:hidden!important;
  }
  html.native-platform[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:start!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html.native-platform[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy :is(p,ul,li){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
    box-sizing:border-box!important;
  }
  html.native-platform[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy ul{
    margin:0 0 20px!important;
    padding-left:20px!important;
  }
  html.native-platform[data-active-tab="shop"] .shop-expansion-showcase .expansion-copy>div{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:10px!important;
  }
  html.native-platform[data-active-tab="shop"] .native-purchase-restore{
    position:relative!important;
    z-index:3!important;
    margin-top:0!important;
    clear:both!important;
  }
}

/* 캐릭터 카드지갑 허브는 휴대폰·세로 태블릿에서 그대로 쓰고, 가로
   태블릿에서는 왼쪽 캐릭터 목록 옆에 동일한 화면을 축소 없이 둔다. */
@media(max-width:720px),(min-width:721px) and (orientation:portrait),(min-width:721px) and (orientation:landscape){
  html.native-app[data-active-tab="character"] .native-sub-header{display:none!important}
  html.native-app[data-active-tab="character"] :is(body,#app,#app>main){height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
  html.native-app[data-active-tab="character"] #app>main{width:100vw!important;min-height:0!important;margin:0!important;padding:0!important;background:#eee7d7!important}
  html.native-app[data-active-tab="character"] :is(#app,#app>main,.character-editor,.character-editor>.form){min-height:100dvh!important;background:#eee7d7!important}
  html.native-app[data-active-tab="character"] .mobile-character-dashboard[data-character-ui-version="8"]{
    position:relative!important;display:block!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;
    margin:0!important;padding:0!important;overflow:hidden!important;isolation:isolate!important;background:#efe9dc!important;color:#241b17!important
  }
  html.native-app[data-active-tab="character"] .character-slot-count{display:block;position:absolute;top:100%;left:0;right:0;margin:4px 0 0;padding:3px 6px;border-radius:8px;background:#f8ecd9;color:#352519;font-size:13px;line-height:1.3;text-align:center;text-shadow:none;white-space:nowrap}
  html.native-app[data-active-tab="character"] .character-wood-background{
    position:absolute!important;z-index:0!important;left:50%!important;top:50%!important;display:block!important;width:100dvh!important;height:100vw!important;max-width:none!important;max-height:none!important;
    object-fit:cover!important;transform:translate(-50%,-50%) rotate(90deg)!important;background:transparent!important;pointer-events:none!important
  }
  html.native-app[data-active-tab="character"] .mobile-character-dashboard.is-hidden{display:none!important}
  html.native-app[data-active-tab="character"] .mobile-character-dashboard[data-character-ui-version="8"]::before{display:none!important;content:none!important}
  html.native-app[data-active-tab="character"] .mobile-character-dashboard[data-character-ui-version="8"]::after{
    position:absolute!important;z-index:20!important;inset:0!important;display:block!important;content:""!important;pointer-events:none!important;
    background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(190,169,119,0) 0%,rgba(114,98,82,.27) 100%)!important;mix-blend-mode:multiply!important
  }
  html.native-app[data-active-tab="character"] .mobile-character-profile-draft{
    position:absolute!important;z-index:4!important;left:50%!important;top:0!important;display:block!important;width:min(100vw,44.92912dvh)!important;height:56dvh!important;
    margin:0!important;padding:0!important;overflow:visible!important;border:0!important;background:transparent!important;pointer-events:none!important;
    transform:translateX(-50%)!important;container-type:inline-size!important
  }
  html.native-app[data-active-tab="character"] .mobile-character-profile-draft:has(.character-wallet-roster:not([hidden])){z-index:140!important}
  html.native-app[data-active-tab="character"] .mobile-character-dashboard:has(.character-wallet-roster:not([hidden])) .character-draft-actions button{pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-draft-back{
    position:absolute!important;z-index:12!important;left:5.0971cqw!important;top:4.7983dvh!important;width:14.8058cqw!important;height:6.6521dvh!important;padding:0!important;
    border:0!important;background:transparent url("./assets/character-ui/back.webp") center/contain no-repeat!important;box-shadow:none!important;pointer-events:auto!important
  }
  html.native-app[data-active-tab="character"] .character-wallet-art{
    position:absolute!important;z-index:8!important;left:-24.51cqw!important;top:11.18dvh!important;width:135.18cqw!important;height:41.47dvh!important;
    transform:rotate(-9.874deg)!important;transform-origin:0 0!important;background:url("./assets/character-ui/wallet.webp") center/100% 100% no-repeat!important;pointer-events:none!important
  }
  html.native-app[data-active-tab="character"] .character-setting-clip{position:absolute!important;z-index:10!important;left:32.0388cqw!important;top:-6.9793dvh!important;width:23.7864cqw!important;height:14.0676dvh!important;object-fit:fill!important;transform:none!important;background:transparent!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected{
    position:absolute!important;z-index:42!important;left:2.91cqw!important;top:13.632dvh!important;display:block!important;width:19.42cqw!important;height:10.03dvh!important;padding:0!important;
    overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:auto!important
  }
  html.native-app[data-active-tab="character"] body #app main .mobile-character-dashboard[data-character-ui-version="8"] button.character-wallet-selected{
    border:0!important;border-radius:0!important;outline:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important
  }
  html.native-app[data-active-tab="character"] .character-wallet-selected>span{
    position:absolute!important;left:0!important;top:0!important;display:grid!important;place-items:center!important;width:80px!important;height:80px!important;overflow:visible!important;background:transparent!important
  }
  html.native-app[data-active-tab="character"] .character-wallet-selected>span>img{display:block!important;width:80px!important;height:80px!important;max-width:80px!important;max-height:80px!important;background:transparent!important;animation:none!important;transform:none!important;translate:0!important;scale:1!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected>span>img.sprite{object-fit:contain!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected>span>img.avatar{border:0!important;border-radius:0!important;object-fit:cover!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected>span>.avatar:not(img){display:grid!important;place-items:center!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;color:#5a514a!important;font:400 clamp(22px,7cqw,30px)/1 "KCCHanbit",sans-serif!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected>b{
    --selected-cap:calc(2.2901dvh * .484);position:absolute!important;z-index:4!important;left:.8495cqw!important;top:7.6881dvh!important;display:grid!important;grid-template-columns:var(--selected-cap) minmax(0,1fr) var(--selected-cap)!important;align-items:stretch!important;width:17.7184cqw!important;height:2.2901dvh!important;margin:0!important;padding:0!important;
    overflow:visible!important;border:0!important;background:transparent!important;color:#FFF5DD!important;-webkit-text-fill-color:#FFF5DD!important;-webkit-text-stroke:0!important;font:400 clamp(9px,2.7cqw,12px)/1 "KCCHanbit",sans-serif!important;text-shadow:none!important
  }
  html.native-app[data-active-tab="character"] .character-wallet-selected>b::before{display:block!important;content:""!important;background:url("./assets/home-ui/pill-left.webp") right center/auto 100% no-repeat!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected>b::after{display:block!important;content:""!important;background:url("./assets/home-ui/pill-right.webp") left center/auto 100% no-repeat!important}
  html.native-app[data-active-tab="character"] .character-wallet-selected>b>em{display:grid!important;place-items:center!important;min-width:0!important;margin:0 -1px!important;padding:0 1px!important;overflow:hidden!important;background:url("./assets/home-ui/pill-middle.webp") center/100% 100% repeat-x!important;color:#FFF5DD!important;-webkit-text-fill-color:#FFF5DD!important;font:inherit!important;font-style:normal!important;white-space:nowrap!important}
  html.native-app[data-active-tab="character"] .character-registration-card{
    position:absolute!important;z-index:4!important;inset:0!important;width:100cqw!important;height:100dvh!important;background:transparent!important;color:#241b17!important;pointer-events:none!important
  }
  html.native-app[data-active-tab="character"] .character-registration-card::before{display:none!important;content:none!important}
  html.native-app[data-active-tab="character"] .character-registration-paper{
    position:absolute!important;z-index:2!important;left:-5.02447cqw!important;top:17.64329dvh!important;display:block!important;width:100.66456cqw!important;height:28.78124dvh!important;max-width:none!important;max-height:none!important;
    object-fit:fill!important;transform:rotate(-9.87417deg)!important;transform-origin:0 0!important;background:transparent!important;pointer-events:none!important
  }
  html.native-app[data-active-tab="character"] .character-registration-photo{
    position:absolute!important;z-index:1!important;left:7.54612cqw!important;top:21.69575dvh!important;display:grid!important;place-items:center!important;width:32.52427cqw!important;height:19.90840dvh!important;margin:0!important;padding:0!important;overflow:hidden!important;
    transform:rotate(-9.87417deg)!important;transform-origin:0 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer!important;pointer-events:auto!important
  }
  html.native-app[data-active-tab="character"] body #app main button.character-registration-photo{background:#fff!important;background-image:none!important}
  html.native-app[data-active-tab="character"] .character-registration-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-registration-photo span{padding:8px!important;color:#241b17!important;-webkit-text-fill-color:#241b17!important;font:400 clamp(10px,3cqw,15px)/1.55 "KCCHanbit",sans-serif!important;text-align:center!important;word-break:keep-all!important}
  html.native-app[data-active-tab="character"] .character-registration-fields{position:absolute!important;z-index:3!important;inset:0!important;width:100cqw!important;height:100dvh!important;font-family:"KoPubWorldBatangPro",serif!important;pointer-events:none!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-registration-fields h2{position:absolute!important;left:48.24029cqw!important;top:19.11014dvh!important;width:38.03883cqw!important;margin:0!important;color:#241b17!important;-webkit-text-fill-color:#241b17!important;font:400 clamp(13px,4.25cqw,19px)/1.08 "PuradakGentleGothic",sans-serif!important;letter-spacing:-.045em!important;white-space:nowrap!important;transform:rotate(-9.87417deg)!important;transform-origin:0 0!important}
  html[lang="en"].native-app[data-active-tab="character"] .character-registration-fields h2{width:44.5cqw!important;font-size:9px!important;letter-spacing:-.055em!important}
  html[lang="ja"].native-app[data-active-tab="character"] .character-registration-fields h2{font-size:clamp(10px,3.25cqw,15px)!important}
  html.native-app[data-active-tab="character"] .character-registration-fields :is(dl,dl>div){display:contents!important;margin:0!important;padding:0!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-registration-fields :is(dt,dd){position:absolute!important;min-width:0!important;margin:0!important;overflow:hidden!important;transform:rotate(-9.87417deg)!important;transform-origin:0 0!important;color:#241b17!important;-webkit-text-fill-color:#241b17!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html.native-app[data-active-tab="character"] .character-registration-fields dt{font:300 clamp(7px,2.05cqw,9px)/1.1 "KoPubWorldBatangPro",serif!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-registration-fields dt{max-width:none!important;overflow:visible!important;text-overflow:clip!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-registration-fields dd{font:700 clamp(8px,2.45cqw,11px)/1.18 "KoPubWorldBatangPro",serif!important}
  html.native-app[data-active-tab="character"] .character-registration-fields :is(dt,dd){width:max-content!important}
  html.native-app[data-active-tab="character"] .character-registration-field-name dt{left:46.29854cqw!important;top:23.95856dvh!important}
  html.native-app[data-active-tab="character"] .character-registration-field-name dd{left:46.99029cqw!important;top:25.55943dvh!important;max-width:20.15cqw!important}
  html.native-app[data-active-tab="character"] .character-registration-field-age dt{left:68.78884cqw!important;top:22.15104dvh!important}
  html.native-app[data-active-tab="character"] .character-registration-field-age dd{left:69.51456cqw!important;top:23.82443dvh!important;max-width:14.1cqw!important}
  html.native-app[data-active-tab="character"] .character-registration-field-birthday dt{left:47.99757cqw!important;top:28.43948dvh!important}
  html.native-app[data-active-tab="character"] .character-registration-field-birthday dd{left:49.44417cqw!important;top:30.23337dvh!important;max-width:20.1cqw!important}
  html.native-app[data-active-tab="character"] .character-registration-field-gender dt{left:70.69660cqw!important;top:26.66521dvh!important}
  html.native-app[data-active-tab="character"] .character-registration-field-gender dd{left:71.40049cqw!important;top:28.39258dvh!important;max-width:17.1cqw!important}
  html.native-app[data-active-tab="character"] .character-registration-field-job dt{left:49.80097cqw!important;top:32.93457dvh!important}
  html.native-app[data-active-tab="character"] .character-registration-field-job dd{left:50.40777cqw!important;top:34.59760dvh!important;max-width:34cqw!important;font-size:clamp(7.5px,2.25cqw,10.5px)!important;white-space:normal!important}
  html.native-app[data-active-tab="character"] .character-draft-actions{
    position:absolute!important;z-index:100!important;left:50%!important;top:0!important;display:block!important;width:min(100vw,44.92912dvh)!important;height:55dvh!important;margin:0!important;padding:0!important;
    pointer-events:none!important;transform:translateX(-50%)!important;container-type:inline-size!important
  }
  html.native-app[data-active-tab="character"] .character-draft-actions button{
    --draft-button-cap:12.58px;position:absolute!important;display:grid!important;grid-template-columns:var(--draft-button-cap) minmax(0,1fr) var(--draft-button-cap)!important;align-items:stretch!important;min-width:0!important;height:26px!important;min-height:0!important;margin:0!important;padding:0!important;
    transform:rotate(-9.87deg)!important;transform-origin:0 0!important;pointer-events:auto!important;border:0!important;border-radius:0!important;background:transparent!important;
    color:#fff5dd!important;-webkit-text-fill-color:#fff5dd!important;box-shadow:none!important;font:400 clamp(10px,2.9cqw,13px)/1 "KCCHanbit",sans-serif!important;white-space:nowrap!important
  }
  html[lang="en"].native-app[data-active-tab="character"] .character-draft-actions button{font-size:10px!important}
  html.native-app[data-active-tab="character"] .character-draft-actions button::before{display:block!important;content:""!important;background:url("./assets/home-ui/pill-left.webp") right center/auto 100% no-repeat!important}
  html.native-app[data-active-tab="character"] .character-draft-actions button::after{display:block!important;content:""!important;background:url("./assets/home-ui/pill-right.webp") left center/auto 100% no-repeat!important}
  html.native-app[data-active-tab="character"] .character-draft-actions button>span{position:relative!important;z-index:1!important;display:grid!important;place-items:center!important;min-width:0!important;height:26px!important;margin:0 -1px!important;padding:0 4px!important;overflow:hidden!important;background:url("./assets/home-ui/pill-middle.webp") center/100% 100% repeat-x!important;color:#FFF5DD!important;-webkit-text-fill-color:#FFF5DD!important;text-overflow:clip!important;white-space:nowrap!important;text-shadow:0 1px 2px #24150d66!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-draft-actions button>span{color:#FFF5DD!important;-webkit-text-fill-color:#FFF5DD!important}
  html.native-app[data-active-tab="character"] .character-draft-actions button:nth-child(1){left:3.78cqw!important;top:calc(52.08dvh - 2px)!important;width:33.74cqw!important}
  html.native-app[data-active-tab="character"] .character-draft-actions button:nth-child(2){left:41.08cqw!important;top:calc(49.17dvh - 2px)!important;width:26.46cqw!important}
  html.native-app[data-active-tab="character"] .character-draft-actions button:nth-child(3){left:71.21cqw!important;top:calc(46.81dvh - 2px)!important;width:26.46cqw!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster{
    position:absolute!important;z-index:40!important;left:12px!important;top:200px!important;width:80px!important;height:min(calc(100dvh - 212px),calc(184px + (var(--roster-visible,0) * 84px)))!important;box-sizing:border-box!important;margin:0!important;padding:31px 16px 72px!important;overflow:hidden!important;pointer-events:auto!important;
    border:0!important;border-radius:40px!important;background:rgba(255,255,255,.9)!important;box-shadow:0 8px 24px #30211626!important;font-family:"KCCHanbit",sans-serif!important;
    opacity:0!important;transform:translateY(-10px) scale(.96)!important;transform-origin:40px 0!important;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1)!important
  }
  html.native-app[data-active-tab="character"] .character-wallet-roster[hidden]{display:none!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster.is-open{opacity:1!important;transform:translateY(0) scale(1)!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip{display:grid!important;grid-template-columns:48px!important;grid-auto-rows:minmax(81px,auto)!important;align-content:start!important;gap:3px!important;width:48px!important;height:100%!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:none!important;touch-action:pan-y!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip::-webkit-scrollbar{display:none!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip button{position:relative!important;display:grid!important;grid-template-rows:48px auto!important;justify-items:center!important;align-content:start!important;gap:2px!important;width:48px!important;min-height:77px!important;height:auto!important;margin:0!important;padding:0 0 3px!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important}
  html.native-app[data-active-tab="character"] body #app main .mobile-character-dashboard[data-character-ui-version="8"] .character-wallet-roster .mobile-character-strip button.character-roster-entry{
    border:0!important;border-radius:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important
  }
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip button::before,
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip button::after{display:none!important;content:none!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip :is(.avatar,.sprite){display:block!important;width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important;object-fit:contain!important;animation:none!important;transform:none!important;translate:0!important;scale:1!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip img.avatar{object-fit:cover!important}
  html.native-app[data-active-tab="character"] .character-wallet-roster .mobile-character-strip small{display:block!important;width:5em!important;max-width:5em!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:0!important;paint-order:normal!important;font:400 9px/12px "KCCHanbit",sans-serif!important;text-align:center!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-all!important;text-shadow:0 2px 3px #000e,0 4px 7px #0009!important}
  html.native-app[data-active-tab="character"] .character-roster-new>span{display:grid!important;place-items:center!important;width:48px!important;height:48px!important;background:transparent!important;color:#5f402f!important;-webkit-text-fill-color:#5f402f!important;font:400 42px/1 "KCCHanbit",sans-serif!important;text-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-roster-actions{position:absolute!important;left:6px!important;right:6px!important;bottom:14px!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;align-items:center!important;gap:2px!important;padding:0!important}
  html.native-app[data-active-tab="character"] .character-roster-actions button{display:grid!important;place-items:center!important;width:100%!important;height:42px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#5f402f!important;-webkit-text-fill-color:#5f402f!important;font:700 31px/1 sans-serif!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] body #app main .character-roster-actions button{background-color:transparent!important;background-image:none!important;color:#5f402f!important;-webkit-text-fill-color:#5f402f!important}
  html.native-app[data-active-tab="character"] .character-roster-add img{width:100%!important;height:100%!important;object-fit:contain!important}
  html.native-app[data-active-tab="character"] .character-roster-actions button:disabled{opacity:.35!important}
  html.native-app[data-active-tab="character"] .character-setting-choices{position:absolute!important;z-index:2!important;left:50%!important;top:0!important;width:min(100vw,44.92912dvh)!important;height:100dvh!important;overflow:visible!important;pointer-events:none!important;transform:translateX(-50%)!important;container-type:inline-size!important}
  html.native-app[data-active-tab="character"] .character-setting-choices :is(button,img){background:transparent!important}
  html.native-app[data-active-tab="character"] .character-setting-cloth{position:absolute!important;z-index:0!important;left:14.6623cqw!important;top:51.7350dvh!important;display:block!important;width:83.0621cqw!important;height:36.3091dvh!important;overflow:hidden!important;transform:rotate(13.6207deg)!important;transform-origin:0 0!important;background:transparent!important;isolation:isolate!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-setting-cloth>img{position:absolute!important;z-index:0!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
  html.native-app[data-active-tab="character"] .character-setting-cloth::after{position:absolute!important;z-index:1!important;inset:0!important;display:block!important;content:""!important;background:var(--character-accent)!important;-webkit-mask:url("./assets/character-ui/character-cloth-white.webp") center/100% 100% no-repeat!important;mask:url("./assets/character-ui/character-cloth-white.webp") center/100% 100% no-repeat!important;mix-blend-mode:multiply!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-setting-book{position:absolute!important;z-index:2!important;left:-8.9806cqw!important;top:58.6082dvh!important;width:102.4272cqw!important;height:38.6041dvh!important;object-fit:fill!important;transform:rotate(-10.5736deg)!important;transform-origin:0 0!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-setting-tape{position:absolute!important;z-index:5!important;left:66.2621cqw!important;top:49.9455dvh!important;width:7.6387cqw!important;height:5.4944dvh!important;object-fit:fill!important;transform:rotate(-4.10812deg)!important;transform-origin:0 0!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-setting-key{position:absolute!important;z-index:5!important;left:55.2500cqw!important;top:90.8397dvh!important;width:39.3337cqw!important;height:7.8722dvh!important;object-fit:fill!important;transform:rotate(5.26953deg)!important;transform-origin:0 0!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] body #app main .mobile-character-dashboard[data-character-ui-version="8"] button.character-setting-choice{position:absolute!important;z-index:30!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;transform:rotate(-10.5736deg)!important;transform-origin:0 0!important;pointer-events:auto!important;touch-action:manipulation!important}
  html.native-app[data-active-tab="character"] .character-quick-choice{left:8.4951cqw!important;top:61.9411dvh!important;width:42.4757cqw!important;height:21.8103dvh!important}
  html.native-app[data-active-tab="character"] .character-full-choice{left:50.9709cqw!important;top:57.9062dvh!important;width:46.1165cqw!important;height:22.3555dvh!important}
  html.native-app[data-active-tab="character"] .character-setting-choice>span{display:grid!important;gap:5px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:1px #111!important;paint-order:stroke fill!important;font:400 20px/1 "KCCHanbit",sans-serif!important;text-align:center!important;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111,0 2px 3px #111!important;white-space:normal!important;word-break:keep-all!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-setting-choice>span>*{color:#fff!important;-webkit-text-fill-color:#fff!important}
  html.native-app[data-active-tab="character"] .character-setting-choice>span>b{font:inherit!important;font-weight:400!important}
  html.native-app[data-active-tab="character"] .character-quick-choice>span{transform:translate(-5.7cqw,3.25dvh)!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-quick-choice>span>b{padding:8px 12px!important;border:2px solid #8d6740!important;border-radius:15px!important;background:#f4dfac!important;color:#382817!important;-webkit-text-fill-color:#382817!important;-webkit-text-stroke:0!important;text-shadow:none!important;box-shadow:0 3px 0 #8d6740!important}
  .tablet-character-setting-actions [data-open-quick-character-settings]{border:2px solid #a77a38;background:#f4dfac}
  html.native-app[data-active-tab="character"] .character-full-choice>span{transform:translate(-3.6cqw,3dvh)!important}
  html.native-app[data-active-tab="character"] .character-setting-choice small{color:#fff!important;-webkit-text-fill-color:#fff!important;max-width:145px!important;font:400 12px/1.45 "KCCHanbit",sans-serif!important}
  html.native-app[data-active-tab="character"] .character-favorite-preview{position:absolute!important;z-index:6!important;inset:0!important;display:block!important;pointer-events:none!important}
  html.native-app[data-active-tab="character"] .character-favorite-object{position:absolute!important;display:grid!important;place-items:center!important;width:16.9903cqw!important;height:7.6336dvh!important;box-sizing:border-box!important;background:#d9d9d9!important;border:6px solid #fff!important;overflow:hidden!important;box-shadow:0 4px 4px #0004!important;transform-origin:0 0!important}
  html.native-app[data-active-tab="character"] .character-favorite-object:nth-child(1){left:24.9748cqw!important;top:61.7263dvh!important;border-radius:50%!important;transform:rotate(-25.6648deg)!important}
  html.native-app[data-active-tab="character"] .character-favorite-object:nth-child(2){left:19.5135cqw!important;top:81.5390dvh!important;border-radius:18px!important;transform:rotate(12.7923deg)!important}
  html.native-app[data-active-tab="character"] .character-favorite-object:nth-child(3){left:81.3107cqw!important;top:77.1220dvh!important;border-radius:18px!important;transform:rotate(-22.8827deg)!important}
  html.native-app[data-active-tab="character"] .character-favorite-object.has-image{background:transparent!important}
  html.native-app[data-active-tab="character"] .character-favorite-object img{width:100%!important;height:100%!important;object-fit:contain!important;background:transparent!important}
  html.native-app[data-active-tab="character"] .character-favorite-object i{color:#8c8782!important;font-style:normal!important}
  /* Character full settings is owned exclusively by character-book.css. */
  html.native-app[data-active-tab="character"] .character-layout-dialog{
    inset:0!important;width:min(100vw,430px)!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:auto!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#f6efe4!important;color:#2e211b!important;box-shadow:0 24px 80px #120b0799!important
  }
  html.native-app[data-active-tab="character"] .character-layout-dialog::backdrop{background:#1b110c99!important;backdrop-filter:blur(2px)!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog-shell{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#f6efe4!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog-shell>header{position:relative!important;z-index:5!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:72px!important;padding:12px 14px!important;border-bottom:1px solid #cbb9a5!important;background:#fffaf2f2!important;box-shadow:0 4px 15px #3d28151f!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog-shell>header>span{display:grid!important;gap:2px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog-shell>header small{color:#79695d!important;-webkit-text-fill-color:#79695d!important;font-size:9px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog-shell>header b{color:#2e211b!important;-webkit-text-fill-color:#2e211b!important;font-size:20px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog-shell>header button{display:grid!important;place-items:center!important;width:46px!important;height:46px!important;min-height:0!important;padding:0!important;border:1px solid #9f8773!important;border-radius:16px!important;background:#fff7eb!important;color:#2e211b!important;-webkit-text-fill-color:#2e211b!important;font-size:26px!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .character-home-layout-editor{display:grid!important;grid-auto-rows:max-content!important;min-height:0!important;align-content:start!important;gap:10px!important;width:100%!important;height:100%!important;margin:0!important;padding:12px!important;overflow-y:auto!important;border:0!important;border-radius:0!important;background:#f6efe4!important;box-sizing:border-box!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .character-home-layout-heading{display:grid!important;gap:9px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .character-home-layout-heading h3{margin:0!important;color:#2e211b!important;-webkit-text-fill-color:#2e211b!important;font-size:18px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .character-home-layout-heading :is(p,small){margin:0!important;color:#6f6055!important;-webkit-text-fill-color:#6f6055!important;font-size:11px!important;line-height:1.45!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .home-layout-mode-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .home-layout-mode-buttons button{min-height:38px!important;padding:7px!important;font-size:11px!important}
  html.native-app[data-active-tab="character"] .character-layout-dialog .home-layout-preview{width:min(100%,310px)!important;flex:none!important}
  html.native-app[data-active-tab="character"] .settings-complete-group{display:grid!important;gap:12px!important;padding:14px!important;border:1px solid #dfd2c2!important;border-radius:16px!important;background:#fffaf3!important}
}
/* The simple character form is shared by phone and tablet native layouts. */
.character-tablet-settings-entry{display:none}
@media(min-width:721px){html.native-app .character-tablet-settings-entry{display:flex;gap:12px;position:fixed;right:24px;bottom:24px;z-index:50;padding:10px;border:1px solid #c8b18c;border-radius:18px;background:#fff9ee;box-shadow:0 4px 16px #37261d26}html.native-app .character-tablet-settings-entry button{min-height:44px;padding:8px 18px}}
  html.native-app[data-active-tab="character"] .character-quick-settings-dialog{
    inset:16px!important;width:calc(100vw - 32px)!important;max-width:600px!important;height:min(90dvh,840px)!important;max-height:calc(100dvh - 32px)!important;margin:auto!important;padding:0!important;
    overflow:hidden!important;border:1px solid #dac9b1!important;border-radius:24px!important;background:#fff9ee!important;box-shadow:0 16px 48px #25180f4d!important
  }
  html.native-app[data-active-tab="character"] .character-quick-settings-dialog,
  html.native-app[data-active-tab="character"] .character-quick-settings-dialog :is(button,input,select,textarea,label,legend,small,span,b,h1){font-family:var(--ui-font)!important}
  html.native-app[data-active-tab="character"] .character-quick-settings-dialog::backdrop{background:#342c23f5!important;backdrop-filter:none!important}
  html.native-app[data-active-tab="character"] .character-quick-settings-shell{position:relative!important;width:100%!important;height:100%!important;max-height:none!important;padding:0!important;overflow:hidden!important;background:#fff9ee!important}
  html.native-app[data-active-tab="character"] .character-quick-header{position:absolute!important;z-index:6!important;left:0!important;right:0!important;top:0!important;display:grid!important;grid-template-columns:minmax(92px,auto) minmax(0,1fr) minmax(74px,auto)!important;align-items:center!important;gap:8px!important;min-height:72px!important;padding:12px 16px!important;border-bottom:1px solid #dac9b1!important;background:#fff9eef5!important;box-shadow:0 5px 16px #3827191a!important}
  html.native-app[data-active-tab="character"] .character-quick-header h1{min-width:0!important;margin:0!important;color:#2f241e!important;-webkit-text-fill-color:#2f241e!important;font:800 20px/1.1 var(--ui-font)!important;text-align:center!important;white-space:nowrap!important}
  html.native-app[data-active-tab="character"] .character-quick-header button{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-width:0!important;min-height:44px!important;margin:0!important;padding:8px 11px!important;border:1px solid #7c6658!important;border-radius:999px!important;background:#f7f0e5!important;color:#3e3029!important;-webkit-text-fill-color:#3e3029!important;font:700 13px/1 var(--ui-font)!important;box-shadow:none!important;white-space:nowrap!important}
  html.native-app[data-active-tab="character"] .character-quick-header .character-quick-back{justify-self:start!important}
  html.native-app[data-active-tab="character"] .character-quick-header .character-quick-back>span{font-size:20px!important;line-height:1!important}
  html.native-app[data-active-tab="character"] .character-quick-header .character-quick-save{justify-self:end!important;border-color:#49352c!important;background:#49352c!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  html.native-app[data-active-tab="character"] .character-quick-fields{position:absolute!important;z-index:2!important;left:24px!important;right:24px!important;top:88px!important;bottom:20px!important;display:grid!important;grid-template-columns:1fr!important;align-content:start!important;gap:10px!important;padding:0 4px 24px!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  html.native-app[data-active-tab="character"] .character-quick-fields label:not(.character-language-settings label),
  html.native-app[data-active-tab="character"] .character-quick-fields fieldset:not(.character-language-settings){display:grid!important;gap:5px!important;margin:0!important;color:#342923!important;-webkit-text-fill-color:#342923!important;font:700 12px/1.25 var(--ui-font)!important}
  html.native-app[data-active-tab="character"] .character-quick-fields fieldset:not(.character-language-settings){padding:8px!important;border:1px solid #b8a995!important;border-radius:10px!important;background:rgba(255,255,255,.72)!important}
  html.native-app[data-active-tab="character"] .character-quick-fields :is(input,select):not(.character-language-settings *){width:100%!important;min-height:38px!important;padding:7px 9px!important;border:0!important;border-bottom:1px solid #7a6a5e!important;border-radius:0!important;background:#fff9!important;color:#2c231e!important;-webkit-text-fill-color:#2c231e!important;font-size:13px!important}
  html.native-app[data-active-tab="character"] .character-quick-pair{display:grid!important;grid-template-columns:1fr 1.4fr!important;gap:8px!important}
  html.native-app[data-active-tab="character"] .character-quick-icon{justify-self:start!important;display:grid!important;grid-template-columns:58px 1fr!important;align-items:center!important;gap:8px!important;width:auto!important;min-height:58px!important;padding:0!important;border:0!important;background:transparent!important;color:#342923!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] body #app main .character-quick-icon{background-color:transparent!important;background-image:none!important;color:#342923!important;-webkit-text-fill-color:#342923!important}
  html.native-app[data-active-tab="character"] .character-quick-icon :is(img,.avatar,.sprite){width:58px!important;height:58px!important;border:0!important;border-radius:50%!important;object-fit:contain!important;background:#eee8df!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-quick-icon small{font:700 12px/1 var(--ui-font)!important}
  html.native-app[data-active-tab="character"] .character-quick-personality{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
  html.native-app[data-active-tab="character"] .character-quick-personality button{display:inline-flex!important;align-items:center!important;gap:4px!important;min-height:30px!important;padding:5px 8px!important;border:1px solid #a99a88!important;border-radius:999px!important;background:#fff8!important;color:#4b3b32!important;-webkit-text-fill-color:#4b3b32!important;font-size:10px!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-quick-personality button>i{display:none!important;font-style:normal!important}
  html[data-color-mode].native-app[data-active-tab="character"] .character-quick-personality button.on{border-color:var(--character-accent)!important;background:var(--character-accent)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--character-accent) 24%,transparent)!important}
  html.native-app[data-active-tab="character"] .character-quick-personality button.on>i{display:inline!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  html.native-app[data-active-tab="character"] .character-quick-personality button.on>span{color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-color-mode].native-app[data-active-tab="character"] body #app main .character-quick-settings-dialog .character-quick-personality button{border-color:#a99a88!important;background-color:rgba(255,255,255,.72)!important;background-image:none!important;color:#4b3b32!important;-webkit-text-fill-color:#4b3b32!important}
  html[data-color-mode].native-app[data-active-tab="character"] body #app main .character-quick-settings-dialog .character-quick-personality button.on{border-color:var(--character-accent)!important;background-color:var(--character-accent)!important;background-image:linear-gradient(var(--character-accent),var(--character-accent))!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  html.native-app[data-active-tab="character"] .character-quick-actions{position:absolute!important;z-index:4!important;left:24px!important;right:24px!important;bottom:22px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
  html.native-app[data-active-tab="character"] .character-quick-actions button{min-height:44px!important;border:1px solid #59483e!important;border-radius:999px!important;background:#f7f0e5!important;color:#3e3029!important;-webkit-text-fill-color:#3e3029!important;font:700 15px/1 var(--ui-font)!important;box-shadow:none!important}
  html.native-app[data-active-tab="character"] .character-quick-actions .primary{background:#49352c!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
@media(max-width:720px),(min-width:721px) and (orientation:portrait){
  html.native-app[data-active-tab="character"] .character-quick-header{grid-template-columns:84px minmax(0,1fr) 68px!important;padding-inline:10px!important}
  html.native-app[data-active-tab="character"] .character-quick-header .character-quick-back{padding-inline:8px!important}
  html.native-app[data-active-tab="character"] .character-quick-header .character-quick-back>b{font-size:11px!important}
  html.native-app[data-active-tab="character"] .birthday-parts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;min-width:0!important;margin:0!important;padding:9px!important;border:1px solid var(--line)!important;border-radius:12px!important}
  html.native-app[data-active-tab="character"] .birthday-parts legend{padding:0 4px!important;font-weight:800!important}
  html.native-app[data-active-tab="character"] .birthday-parts label{display:grid!important;gap:4px!important}
  html.native-app[data-active-tab="character"] .birthday-parts small{grid-column:1/-1!important}
}

.character-code-dialog{width:min(440px,92vw);max-height:85dvh;overflow:auto;padding:20px;border:2px solid #856c52;border-radius:20px;background:#fff8eb;color:#352a22}.character-code-dialog input{width:100%;box-sizing:border-box;margin:12px 0}.character-code-dialog button{margin:6px;white-space:normal;height:auto;min-height:40px}.character-code-dialog img{display:block;width:120px;height:120px;object-fit:contain}

.is-startled .avatar{animation:privacy-startle .18s ease-in-out 6}.privacy-exclamation{position:absolute;left:50%;top:-24px;color:#ffcf53;font-size:32px;font-weight:bold;text-shadow:1px 2px #522a10;animation:privacy-startle .18s ease-in-out 6}@keyframes privacy-startle{50%{translate:0 -6px;rotate:8deg}}@media(prefers-reduced-motion:reduce){.is-startled .avatar,.privacy-exclamation{animation:none}}


.user-safety-dialog{width:min(90vw,480px);max-height:85dvh;overflow:auto;box-sizing:border-box;padding:22px;background:#fff8ed;color:#493a2e;border:1px solid #ae9980;border-radius:22px}.user-safety-dialog::backdrop{background:#21180faf}.user-safety-dialog header,.safety-block-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.user-safety-dialog h2{font-size:21px;margin:0}.user-safety-dialog p{line-height:1.6}.user-safety-dialog button{min-height:44px;margin:6px 4px;padding:8px 14px;touch-action:pan-y}.user-safety-dialog label{display:grid;gap:8px;margin:12px 0}.user-safety-dialog select,.user-safety-dialog textarea{width:100%;box-sizing:border-box;font:inherit;padding:10px}


.family-name-dialog form{display:grid;gap:12px}.family-name-dialog label{display:grid;gap:6px}.family-name-dialog input,.family-name-dialog select{width:100%;min-width:0;box-sizing:border-box}.family-surname-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.family-name-dialog footer{display:flex;justify-content:flex-end;gap:8px}

.character-discovery-dialog{width:min(430px,calc(100vw - 32px));max-height:90dvh;overflow:auto;box-sizing:border-box;border:2px solid #ad8c64;border-radius:24px;padding:22px;background:#fff8e9;color:#443121;box-shadow:0 14px 60px #24160c66;text-align:center}
.character-discovery-dialog::backdrop{background:#21180f88}.character-discovery-dialog header h2{font-size:18px;margin:0 0 12px}.character-discovery-dialog h3{font-size:17px;line-height:1.5}.discovery-context{font-size:12px;color:#7d674f}.discovery-choices{display:grid;gap:10px;margin:16px 0}.discovery-choices button{padding:13px;border:1px solid #c6ac87;border-radius:14px;background:#fffdf6;color:#43301f;font-size:14px;line-height:1.5;text-align:left}.discovery-choices button:hover{background:#f6e3b9}.character-discovery-dialog>small{display:block;font-size:11px;line-height:1.6}.character-discovery-dialog>button{margin-top:10px;border:0;background:transparent;color:#806647;padding:10px}
.discovery-record-editor{display:grid;gap:14px;text-align:left}.discovery-record-editor fieldset{min-width:0;margin:0;padding:12px;border:1px solid #c9b793;border-radius:14px}.discovery-record-editor legend{font-weight:700}.discovery-record-editor label{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin:8px 0}.discovery-record-editor input:not([type=checkbox]),.discovery-record-editor select,.discovery-record-editor textarea{box-sizing:border-box;width:100%;min-width:0;padding:9px;border:1px solid #c3b396;border-radius:9px;background:#fffcf5;color:#392b20;font:inherit}.discovery-record-editor label:has(input[type=checkbox]){display:flex;align-items:center;justify-content:space-between;gap:12px}.discovery-record-editor input[type=checkbox]{flex:none;width:18px;height:18px}.discovery-record-row{padding:10px 0;border-bottom:1px solid #dbcfb7}.discovery-record-editor button{margin:8px 0;padding:8px 12px;border-radius:10px}.discovery-add-record{background:#f4e0a1;border:1px solid #b4954f}.discovery-record-editor [hidden]{display:none}
.discovery-spill{position:relative}.discovery-spill .discovery-spill-cup{animation:discovery-cup-spill 3s ease-in-out infinite}.discovery-spill .discovery-spill-drop{font-size:26px;animation:discovery-drip 3s ease-in-out infinite}.discovery-spill .discovery-spill-startle{font-size:38px;color:#8b452c;animation:discovery-startle 3s ease-in-out infinite}
@keyframes discovery-cup-spill{0%,15%,100%{rotate:0deg}30%,65%{rotate:65deg}}
@keyframes discovery-drip{0%,20%,100%{opacity:0;translate:-20px -5px}35%{opacity:1;translate:0 8px}70%{opacity:0;translate:10px 30px}}
@keyframes discovery-startle{0%,30%,100%{opacity:0;scale:.5}40%,65%{opacity:1;scale:1.15}}
.discovery-animation{height:112px;display:flex;align-items:center;justify-content:center;gap:20px;background:#f2e4c8;border-radius:20px;overflow:hidden}.discovery-animation img{width:72px;height:80px;object-fit:contain}.discovery-animation span{font-size:42px}
.discovery-animation>*,.scene-reaction{animation:var(--reaction-motion,none) 2.4s ease-in-out infinite}
.reaction-wave{--reaction-motion:reaction-wave}.reaction-bounce{--reaction-motion:reaction-bounce}.reaction-ponder{--reaction-motion:reaction-ponder}.reaction-stretch{--reaction-motion:reaction-stretch}.reaction-surprise{--reaction-motion:reaction-surprise}.reaction-sway{--reaction-motion:reaction-sway}.reaction-blush{--reaction-motion:reaction-blush}
@keyframes reaction-wave{0%,70%,100%{rotate:0deg}20%,45%{rotate:9deg}32%,58%{rotate:-9deg}}
@keyframes reaction-bounce{0%,45%,100%{translate:0 0}20%,65%{translate:0 -9px}30%,75%{translate:0 -3px}}
@keyframes reaction-ponder{0%,100%{rotate:0deg}35%,70%{rotate:-7deg}}
@keyframes reaction-stretch{0%,100%{scale:1}35%,60%{scale:.96 1.08}}
@keyframes reaction-surprise{0%,15%,100%{translate:0 0;scale:1}25%{translate:0 -12px;scale:1.08}35%{translate:-3px 0}42%{translate:3px 0}50%{translate:0 0;scale:1}}
@keyframes reaction-sway{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes reaction-blush{0%,100%{rotate:0deg;filter:none}40%,65%{rotate:5deg;filter:drop-shadow(0 0 5px #e9929280)}}
.character-discovery-dialog [data-fit-panel]{display:grid;gap:8px;margin:16px 0}
.character-discovery-dialog [data-fit-panel] button[aria-pressed="true"]{background:#ead2a0;color:#392719;border:2px solid #8a6539}
.character-discovery-dialog [data-fit-panel] button[aria-pressed="true"]::before{content:"\2713  "}
.character-discovery-dialog h3 select{display:inline-block;max-width:100%;min-width:100px;padding:8px 12px;margin:4px;border:1px solid #aa8a55;border-radius:12px;background:#fffaf0;color:#3b2a1c;font:inherit}

html:is([data-animation-intensity=off],[data-animation-intensity=reduced]) :is(.discovery-animation>*,.scene-reaction){animation:none}
@media(prefers-reduced-motion:reduce){.discovery-animation>*,.discovery-spill>*,.scene-reaction{animation:none!important}}

body #app .character-book-v8 button.discovery-lock{display:inline-grid!important;place-items:center!important;flex:none!important;width:auto!important;min-width:48px!important;height:25px!important;min-height:25px!important;padding:3px 5px!important;gap:3px!important;grid-auto-flow:column!important;font-size:10px!important;white-space:nowrap!important;border:1px solid #a68b61!important;border-radius:10px!important;background:#f8eed8!important;box-shadow:none!important;color:#65451f!important;vertical-align:middle!important}
.discovery-lock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
body #app .character-book-v8 button.discovery-lock[aria-pressed=true]{background:#65451f!important;color:#fff8eb!important;-webkit-text-fill-color:#fff8eb!important}
body #app .character-book-v8 button.discovery-lock[aria-pressed=false]{background:#f4f5e7!important;color:#52652f!important;-webkit-text-fill-color:#52652f!important}
body #app .character-book-v8 .discovery-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:5px!important;white-space:normal!important}
.discovery-title .discovery-lock{flex-shrink:0!important}
.character-quick-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.character-quick-media button{min-height:48px;padding:8px;border:1px solid #b8a995;border-radius:12px;background:#f3e7d0;color:#493829;font-size:12px;white-space:normal}

.discovery-rail-item{display:grid;place-items:center;min-width:0}.discovery-rail-button{position:relative;width:100%;min-height:44px}
.discovery-question-icon{display:block;width:44px;height:30px;background-image:url('./assets/character-ui/question-sheet.webp');background-size:747.5px 832px;background-position:-175px -318px;flex:none}
.discovery-rail-button .discovery-countdown{display:block;font:700 10px/12px sans-serif;color:#fff;text-shadow:0 1px 3px #000;text-align:center;margin-top:2px}
.discovery-rail-button:disabled{opacity:.55}.game-hud-command-actions{position:absolute;right:5.5vw;bottom:1.15dvh;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:4}
.life-settings-fields{display:grid;gap:12px;min-width:0;text-align:left;padding:12px;border:1px solid #d8c5aa;border-radius:14px}.life-settings-fields p{margin:0}.life-settings-fields>label{display:grid;gap:6px;min-width:0}.life-settings-fields>label.discovery-group-lock{display:flex;align-items:center;gap:10px}.life-settings-fields input[type="checkbox"]{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:0;padding:0}.life-settings-fields select{width:100%;min-width:0;max-width:100%;font-size:13px}.life-needs-grid{display:grid;gap:8px}.life-needs-grid label{display:grid;grid-template-columns:52px minmax(0,1fr) 55px;align-items:center;gap:6px;font-size:13px}.life-needs-grid meter{width:100%}.room-activity-labels [hidden]{display:none!important}.room-activity-labels{position:absolute;inset:0;pointer-events:none;overflow:visible}.room-activity-labels :is(.home-person-status,.home-interaction-status){display:grid;box-sizing:border-box;width:max-content;max-width:min(140px,90%);padding:5px 7px;border-radius:11px;background:#fffdf3;color:#2f2924;box-shadow:0 3px 9px #0003;font-size:11px;line-height:1.2}.room-activity-labels :is(.home-person-status,.home-interaction-status) small{display:block!important;max-width:126px;white-space:normal;overflow-wrap:anywhere;font-size:10px}.room-activity-labels :is(.home-person-status,.home-interaction-status) b{font-size:11px;overflow-wrap:anywhere}
.activity-settings-section{margin:18px 0;padding:4px 14px 10px;border:1px solid #d8c5aa;border-radius:14px;text-align:left}.activity-settings-section legend{padding:0 8px;color:#654a32;font-weight:700;font-size:15px}
.discovery-group-lock{display:flex;gap:12px;align-items:center;padding:12px 0}.discovery-group-lock input{width:20px;height:20px;flex:none;accent-color:#795339}

.discovery-score{font-size:11px!important;white-space:nowrap;color:#705234;background:#f1e5ce;border-radius:6px;padding:2px 4px;margin-left:auto}
.discovery-statistics table{width:100%;border-collapse:collapse;font-size:14px}.discovery-statistics td,.discovery-statistics th{padding:10px 6px;text-align:left;border-bottom:1px solid #bca88c}.discovery-statistics td:nth-child(2){white-space:nowrap}.discovery-statistics select{max-width:100%}

/* A single transient action menu, shared by all scene targets. */
.context-action-menu{position:fixed;inset:auto;margin:0;width:min(270px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:14px;border:2px solid #806045;border-radius:20px;background:#fff6e5;color:#392b21;box-shadow:0 6px 20px #29180d55}
.context-action-menu::backdrop{background:#21130922}.context-action-menu h2{font-size:18px;margin:0 30px 10px 0}.context-action-menu>button,.context-action-list>button,.context-action-menu select{display:block;min-height:44px;width:100%;margin:5px 0;border:1px solid #b59a75;border-radius:12px;background:#f2e3c9;color:#392b21;font:inherit}.context-action-menu>button:first-child{float:right;width:32px;min-height:32px;margin:0}.context-action-menu p{font-size:13px;margin:7px 0 0}.context-action-menu button:disabled{opacity:.55}