/* 현대 세계의 지구본·국가 통계·느린 시간 조작을 분리하는 반응형 화면이다. */
:root{
  color-scheme:dark;
  --world-bg:#071419;
  --world-panel:rgba(12,30,35,.95);
  --world-line:#294248;
  --world-text:#edf3ee;
  --world-muted:#a8bbb9;
  --world-accent:#e9ca90;
  --world-mint:#8bcab7}
  *{
    box-sizing:border-box}
    body{
      margin:0;
      background:var(--world-bg);
      color:var(--world-text);
      font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;
      font-size:14px;
      overflow:hidden}
      button,input,a{
        -webkit-tap-highlight-color:transparent}
        button,input{
          font:inherit}
          button,a{
            touch-action:manipulation}
            button{
              cursor:pointer}
              button:disabled{
                cursor:default;
                opacity:.5}
                button:focus-visible,input:focus-visible,a:focus-visible{
                  outline:2px solid var(--world-accent);
                  outline-offset:3px}
                  a{
                    color:inherit;
                    text-decoration:none}
                    #modern-scene{
                      position:fixed;
                      inset:0}
                      #modern-scene canvas{
                        display:block}
                        .world-header{
                          position:fixed;
                          top:26px;
                          left:30px;
                          right:30px;
                          display:flex;
                          justify-content:space-between;
                          align-items:flex-start;
                          pointer-events:none;
                          z-index:2}
                          .world-header>*{
                            pointer-events:auto}
                            .world-brand{
                              font-size:20px;
                              letter-spacing:.12em;
                              font-weight:750}
                              .world-brand span{
                                display:block;
                                margin-top:8px;
                                font-size:11px;
                                letter-spacing:.13em;
                                color:var(--world-muted);
                                font-weight:500}
                                .world-heading{
                                  text-align:center;
                                  position:absolute;
                                  left:50%;
                                  transform:translateX(-50%);
                                  white-space:nowrap}
                                  .eyebrow{
                                    font-size:10px;
                                    letter-spacing:.14em;
                                    color:var(--world-muted)}
                                    h1{
                                      font-size:29px;
                                      letter-spacing:-.06em;
                                      font-weight:550;
                                      margin:9px 0 7px}
                                      #world-time{
                                        font-size:12px;
                                        color:var(--world-mint);
                                        font-variant-numeric:tabular-nums}
                                        .quiet-button{
                                          border:1px solid var(--world-line);
                                          background:var(--world-panel);
                                          color:var(--world-text);
                                          padding:9px 13px;
                                          border-radius:6px;
                                          font-size:12px}
                                          .panel{
                                            background:var(--world-panel);
                                            border:1px solid var(--world-line);
                                            border-radius:12px}
                                            .country-browser{
                                              position:fixed;
                                              top:128px;
                                              left:28px;
                                              bottom:108px;
                                              width:265px;
                                              display:flex;
                                              flex-direction:column;
                                              padding:20px 16px 10px;
                                              z-index:2}
                                              .panel-heading{
                                                display:flex;
                                                justify-content:space-between;
                                                align-items:center}
                                                .panel-heading h2{
                                                  font-size:16px;
                                                  margin:0;
                                                  font-weight:550}
                                                  #country-count{
                                                    font-size:11px;
                                                    color:var(--world-mint)}
                                                    .muted{
                                                      font-size:11px;
                                                      line-height:1.7;
                                                      color:var(--world-muted)}
                                                      .search-label{
                                                        margin:10px 0 13px}
                                                        .search-label input{
                                                          width:100%;
                                                          color:var(--world-text);
                                                          background:#0a2027;
                                                          border:1px solid var(--world-line);
                                                          border-radius:7px;
                                                          padding:11px 12px;
                                                          outline:none}
                                                          #country-list{
                                                            overflow:auto;
                                                            flex:1;
                                                            scrollbar-width:thin;
                                                            scrollbar-color:#36525a transparent}
                                                            .country-row{
                                                              width:100%;
                                                              border:0;
                                                              background:transparent;
                                                              color:var(--world-text);
                                                              padding:10px 9px;
                                                              border-radius:6px;
                                                              text-align:left;
                                                              display:flex;
                                                              align-items:center;
                                                              gap:10px;
                                                              margin-bottom:3px}
                                                              .country-row:hover{
                                                                background:#19363d}
                                                                .country-row[aria-pressed="true"]{
                                                                  background:#294443;
                                                                  color:var(--world-accent)}
                                                                  .country-row .country-row-name{
                                                                    font-size:12px;
                                                                    display:block}
                                                                    .country-row small{
                                                                      font-size:10px;
                                                                      color:var(--world-muted);
                                                                      display:block;
                                                                      margin-top:3px}
                                                                      .country-row .row-flag{
                                                                        font-size:20px}
                                                                        .country-detail{
                                                                          position:fixed;
                                                                          right:28px;
                                                                          top:128px;
                                                                          width:300px;
                                                                          padding:23px 21px;
                                                                          z-index:2;
                                                                          max-height:calc(100vh - 236px);
                                                                          overflow:auto;
                                                                          scrollbar-width:thin}
                                                                          .selected-heading{
                                                                            display:flex;
                                                                            align-items:center;
                                                                            gap:12px}
                                                                            .flag{
                                                                              font-size:34px}
                                                                              .selected-heading h2{
                                                                                font-size:24px;
                                                                                letter-spacing:-.045em;
                                                                                margin:5px 0 0;
                                                                                font-weight:550}
                                                                                .section-label{
                                                                                  display:flex;
                                                                                  justify-content:space-between;
                                                                                  align-items:center;
                                                                                  font-size:11px;
                                                                                  border-top:1px solid var(--world-line);
                                                                                  padding-top:17px;
                                                                                  margin-top:19px}
                                                                                  .section-label span{
                                                                                    font-size:9px;
                                                                                    color:var(--world-muted)}
                                                                                    .indicator-grid{
                                                                                      display:grid;
                                                                                      grid-template-columns:1fr 1fr;
                                                                                      gap:21px 12px;
                                                                                      padding-top:19px}
                                                                                      .indicator span{
                                                                                        font-size:10px;
                                                                                        color:var(--world-muted);
                                                                                        display:block}
                                                                                        .indicator strong{
                                                                                          font-size:17px;
                                                                                          font-weight:500;
                                                                                          display:block;
                                                                                          margin:6px 0}
                                                                                          .indicator small{
                                                                                            font-size:9px;
                                                                                            color:#96aaa8}
                                                                                            .simulation-label{
                                                                                              color:var(--world-accent)}
                                                                                              .projection{
                                                                                                margin-top:16px}
                                                                                                .projection>span{
                                                                                                  font-size:10px;
                                                                                                  color:var(--world-muted)}
                                                                                                  .projection strong{
                                                                                                    font-size:21px;
                                                                                                    font-weight:500;
                                                                                                    display:block;
                                                                                                    margin:6px 0;
                                                                                                    color:var(--world-accent);
                                                                                                    font-variant-numeric:tabular-nums}
                                                                                                    .projection small{
                                                                                                      display:block;
                                                                                                      font-size:10px;
                                                                                                      color:var(--world-muted)}
                                                                                                      .model-note{
                                                                                                        font-size:10px;
                                                                                                        line-height:1.75;
                                                                                                        color:var(--world-muted);
                                                                                                        margin:20px 0 0}
                                                                                                        .globe-caption{
                                                                                                          position:fixed;
                                                                                                          left:50%;
                                                                                                          bottom:142px;
                                                                                                          transform:translateX(-50%);
                                                                                                          text-align:center;
                                                                                                          pointer-events:none}
                                                                                                          .caption-rule{
                                                                                                            display:block;
                                                                                                            width:35px;
                                                                                                            height:1px;
                                                                                                            background:var(--world-accent);
                                                                                                            margin:auto}
                                                                                                            .globe-caption p{
                                                                                                              font-size:12px;
                                                                                                              letter-spacing:.025em}
                                                                                                              .globe-caption small{
                                                                                                                display:block;
                                                                                                                font-size:10px;
                                                                                                                color:var(--world-muted);
                                                                                                                margin-top:8px}
                                                                                                                .time-dock{
                                                                                                                  position:fixed;
                                                                                                                  bottom:25px;
                                                                                                                  left:50%;
                                                                                                                  transform:translateX(-50%);
                                                                                                                  padding:13px 18px;
                                                                                                                  z-index:3;
                                                                                                                  min-width:420px;
                                                                                                                  text-align:center}
                                                                                                                  .clock-label{
                                                                                                                    font-size:10px;
                                                                                                                    color:var(--world-muted);
                                                                                                                    margin-bottom:11px;
                                                                                                                    display:flex;
                                                                                                                    gap:7px;
                                                                                                                    justify-content:center;
                                                                                                                    align-items:center}
                                                                                                                    .live-dot{
                                                                                                                      width:5px;
                                                                                                                      height:5px;
                                                                                                                      background:var(--world-mint);
                                                                                                                      border-radius:50%}
                                                                                                                      .speed-buttons{
                                                                                                                        display:flex;
                                                                                                                        gap:7px}
                                                                                                                        .speed-buttons button{
                                                                                                                          flex:1;
                                                                                                                          white-space:nowrap;
                                                                                                                          background:transparent;
                                                                                                                          color:var(--world-muted);
                                                                                                                          padding:9px 12px;
                                                                                                                          border:1px solid var(--world-line);
                                                                                                                          border-radius:6px;
                                                                                                                          font-size:11px}
                                                                                                                          .speed-buttons button[aria-pressed="true"]{
                                                                                                                            border-color:var(--world-accent);
                                                                                                                            color:var(--world-accent);
                                                                                                                            background:#303a32}
                                                                                                                            #speed-feedback{
                                                                                                                              display:block;
                                                                                                                              color:var(--world-accent);
                                                                                                                              font-size:10px;
                                                                                                                              max-width:430px;
                                                                                                                              line-height:1.5}
                                                                                                                              #speed-feedback:not(:empty){
                                                                                                                                margin-top:10px}
                                                                                                                                #preview-label{
                                                                                                                                  position:fixed;
                                                                                                                                  bottom:17px;
                                                                                                                                  left:28px;
                                                                                                                                  max-width:245px;
                                                                                                                                  font-size:10px;
                                                                                                                                  line-height:1.6;
                                                                                                                                  color:var(--world-accent);
                                                                                                                                  z-index:4}
                                                                                                                                  .startup-error{
                                                                                                                                    position:fixed;
                                                                                                                                    left:50%;
                                                                                                                                    top:45%;
                                                                                                                                    transform:translate(-50%,-50%);
                                                                                                                                    z-index:6;
                                                                                                                                    width:min(440px,90vw);
                                                                                                                                    padding:25px;
                                                                                                                                    line-height:1.8}
                                                                                                                                    .startup-error h2{
                                                                                                                                      font-size:19px}
                                                                                                                                      .startup-error a{
                                                                                                                                        color:var(--world-accent);
                                                                                                                                        text-decoration:underline}
                                                                                                                                        dialog{
                                                                                                                                          border:1px solid var(--world-line);
                                                                                                                                          background:#10282f;
                                                                                                                                          color:var(--world-text);
                                                                                                                                          border-radius:12px;
                                                                                                                                          max-width:640px;
                                                                                                                                          width:90vw;
                                                                                                                                          padding:26px;
                                                                                                                                          line-height:1.7;
                                                                                                                                          font-size:12px}
                                                                                                                                          dialog::backdrop{
                                                                                                                                            background:rgba(0,0,0,.75)}
                                                                                                                                            dialog .quiet-button{
                                                                                                                                              float:right}
                                                                                                                                              dialog h2{
                                                                                                                                                font-size:21px}
                                                                                                                                                dialog a{
                                                                                                                                                  color:var(--world-mint);
                                                                                                                                                  text-decoration:underline}
                                                                                                                                                  dialog li{
                                                                                                                                                    margin:12px 0}
                                                                                                                                                    .sr-only{
                                                                                                                                                      position:absolute;
                                                                                                                                                      width:1px;
                                                                                                                                                      height:1px;
                                                                                                                                                      overflow:hidden;
                                                                                                                                                      clip:rect(0,0,0,0)}
                                                                                                                                                      [hidden]{
                                                                                                                                                        display:none!important}
                                                                                                                                                        @media(max-width:1100px){
                                                                                                                                                          .country-browser{
                                                                                                                                                            width:210px;
                                                                                                                                                            left:15px}
                                                                                                                                                            .country-detail{
                                                                                                                                                              width:250px;
                                                                                                                                                              right:15px;
                                                                                                                                                              padding:18px}
                                                                                                                                                              .world-header{
                                                                                                                                                                left:20px;
                                                                                                                                                                right:20px}
                                                                                                                                                                .indicator strong{
                                                                                                                                                                  font-size:15px}
                                                                                                                                                                  .globe-caption{
                                                                                                                                                                    bottom:145px;
                                                                                                                                                                    max-width:250px}
                                                                                                                                                                  }
                                                                                                                                                                  @media(max-width:760px){
                                                                                                                                                                    body{
                                                                                                                                                                      overflow:auto}
                                                                                                                                                                      .world-header{
                                                                                                                                                                        position:relative;
                                                                                                                                                                        top:0;
                                                                                                                                                                        left:0;
                                                                                                                                                                        right:0;
                                                                                                                                                                        padding:20px;
                                                                                                                                                                        height:95px}
                                                                                                                                                                        .world-brand{
                                                                                                                                                                          font-size:15px}
                                                                                                                                                                          .world-heading{
                                                                                                                                                                            top:24px}
                                                                                                                                                                            h1{
                                                                                                                                                                              font-size:20px}
                                                                                                                                                                              .world-heading .eyebrow{
                                                                                                                                                                                display:none}
                                                                                                                                                                                .world-header>.quiet-button{
                                                                                                                                                                                  padding:7px;
                                                                                                                                                                                  font-size:10px}
                                                                                                                                                                                  .country-browser{
                                                                                                                                                                                    position:relative;
                                                                                                                                                                                    top:auto;
                                                                                                                                                                                    left:auto;
                                                                                                                                                                                    bottom:auto;
                                                                                                                                                                                    margin:0 12px;
                                                                                                                                                                                    width:calc(100% - 24px);
                                                                                                                                                                                    height:145px;
                                                                                                                                                                                    padding:12px}
                                                                                                                                                                                    .country-browser>.muted{
                                                                                                                                                                                      display:none}
                                                                                                                                                                                      .search-label{
                                                                                                                                                                                        margin:8px 0}
                                                                                                                                                                                        .search-label input{
                                                                                                                                                                                          padding:7px 10px}
                                                                                                                                                                                          #country-list{
                                                                                                                                                                                            display:flex;
                                                                                                                                                                                            overflow:auto;
                                                                                                                                                                                            gap:4px}
                                                                                                                                                                                            .country-row{
                                                                                                                                                                                              width:auto;
                                                                                                                                                                                              flex:none;
                                                                                                                                                                                              white-space:nowrap;
                                                                                                                                                                                              padding:5px 9px}
                                                                                                                                                                                              .country-row small{
                                                                                                                                                                                                display:none}
                                                                                                                                                                                                .panel-heading h2{
                                                                                                                                                                                                  font-size:13px}
                                                                                                                                                                                                  .globe-caption{
                                                                                                                                                                                                    position:relative;
                                                                                                                                                                                                    left:0;
                                                                                                                                                                                                    bottom:auto;
                                                                                                                                                                                                    transform:none;
                                                                                                                                                                                                    margin:310px auto 30px}
                                                                                                                                                                                                    .country-detail{
                                                                                                                                                                                                      position:relative;
                                                                                                                                                                                                      right:auto;
                                                                                                                                                                                                      top:auto;
                                                                                                                                                                                                      width:calc(100% - 24px);
                                                                                                                                                                                                      margin:0 12px 155px;
                                                                                                                                                                                                      max-height:none}
                                                                                                                                                                                                      .indicator-grid{
                                                                                                                                                                                                        grid-template-columns:repeat(4,1fr);
                                                                                                                                                                                                        gap:12px}
                                                                                                                                                                                                        .indicator strong{
                                                                                                                                                                                                          font-size:13px}
                                                                                                                                                                                                          .time-dock{
                                                                                                                                                                                                            min-width:0;
                                                                                                                                                                                                            width:calc(100% - 24px);
                                                                                                                                                                                                            bottom:12px;
                                                                                                                                                                                                            padding:10px}
                                                                                                                                                                                                            .speed-buttons button{
                                                                                                                                                                                                              padding:9px 6px}
                                                                                                                                                                                                              .clock-label{
                                                                                                                                                                                                                margin-bottom:7px}
                                                                                                                                                                                                                #preview-label{
                                                                                                                                                                                                                  bottom:115px;
                                                                                                                                                                                                                  left:14px;
                                                                                                                                                                                                                  max-width:none;
                                                                                                                                                                                                                  font-size:9px;
                                                                                                                                                                                                                  background:#10282f;
                                                                                                                                                                                                                  padding:3px 6px;
                                                                                                                                                                                                                  border-radius:4px}
                                                                                                                                                                                                                  #modern-scene{
                                                                                                                                                                                                                    position:absolute;
                                                                                                                                                                                                                    height:640px}
                                                                                                                                                                                                                    .model-note{
                                                                                                                                                                                                                      max-width:600px}
                                                                                                                                                                                                                    }
                                                                                                                                                                                                                    @media(max-width:760px){
                                                                                                                                                                                                                      body{
                                                                                                                                                                                                                        display:flex;
                                                                                                                                                                                                                        flex-direction:column}
                                                                                                                                                                                                                        .world-header{
                                                                                                                                                                                                                          order:0}
                                                                                                                                                                                                                          .country-browser{
                                                                                                                                                                                                                            order:1}
                                                                                                                                                                                                                            .globe-caption{
                                                                                                                                                                                                                              order:2;
                                                                                                                                                                                                                              margin:330px auto 25px}
                                                                                                                                                                                                                              .country-detail{
                                                                                                                                                                                                                                order:3}
                                                                                                                                                                                                                                .indicator-grid{
                                                                                                                                                                                                                                  grid-template-columns:repeat(2,1fr)}
                                                                                                                                                                                                                                  .indicator strong{
                                                                                                                                                                                                                                    font-size:16px}
                                                                                                                                                                                                                                    #modern-scene{
                                                                                                                                                                                                                                      top:230px;
                                                                                                                                                                                                                                      height:330px}
                                                                                                                                                                                                                                    }

.scene-notice {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 80vw);
  padding: 20px;
  line-height: 1.8;
  color: var(--world-muted);
  z-index: 1;
}

/* (★중요) 도시가 주 화면이며 국가 목록과 통계는 요청할 때 펼친다. */
[hidden] { display: none !important; }
.view-tools { display:flex; gap:6px; flex-wrap:wrap; }
.view-tools button { border:1px solid #ffffff30; border-radius:8px; padding:9px 13px; background:#18282be6; color:#e9eee9; cursor:pointer; }
.view-tools button[aria-pressed="true"] { background:#e1d5ba; color:#25352f; }
.world-header { align-items:center; background:linear-gradient(#17272bd9,transparent); }
.city-summary { position:absolute; left:24px; top:125px; padding:18px 22px; pointer-events:none; }
.city-summary h2 { font-size:22px; margin:8px 0; }
.city-summary p { font-size:12px; margin:8px 0; }
.city-summary small { color:#c1cbc4; font-size:11px; }
.country-browser,.country-detail { z-index:8; }
.citizen-card { position:absolute; right:24px; top:125px; width:280px; padding:22px; z-index:9; }
.citizen-card h2 { margin:10px 0 16px; }
.citizen-card strong { color:#ebd7a9; }
.citizen-card p { font-size:14px; }
.citizen-card small { font-size:11px; color:#b6c3bc; }
#citizen-close { float:right; background:transparent; border:0; color:white; font-size:24px; cursor:pointer; }
.globe-caption { left:24px; bottom:110px; transform:none; max-width:none; text-shadow:0 1px 4px #000; pointer-events:none; }
@media(max-width:900px) {
 .world-header { gap:8px; flex-wrap:wrap; padding:14px; }
 .world-heading { order:0; }
 .view-tools { order:3; width:100%; justify-content:center; }
 .view-tools button { padding:8px; font-size:12px; }
 .city-summary { left:12px; top:160px; padding:12px; }
 .city-summary h2 { font-size:17px; }
 .city-summary p { font-size:10px; }
 .city-summary small { font-size:9px; }
 .citizen-card { top:160px; right:12px; width:250px; padding:16px; }
 .country-browser,.country-detail { top:160px; bottom:120px; max-height:calc(100dvh - 290px); }
 .globe-caption { left:12px; bottom:125px; font-size:10px; }
}

.world-header { top:0; left:0; right:0; padding:18px 24px; gap:22px; background:#15272bed; }
.world-heading { position:static; transform:none; margin-right:auto; text-align:left; }
.world-heading .eyebrow { display:none; }
.world-heading h1 { font-size:21px; margin:0 0 5px; }
@media(max-width:900px) {
 body { display:block; overflow:hidden; }
 #modern-scene { position:fixed; inset:0; height:100dvh; width:100%; }
 .world-header { position:fixed; padding:12px; gap:10px; }
 .world-brand { font-size:14px; }
 .world-brand span { margin-top:5px; font-size:9px; }
 .world-heading { position:static; transform:none; white-space:normal; }
 .world-heading h1 { font-size:18px; }
 #world-time { font-size:10px; }
 .world-header>.quiet-button { display:block; font-size:10px; padding:7px; }
 .country-browser,.country-detail { position:fixed; left:12px; right:12px; width:auto; margin:0; overflow:auto; }
 .globe-caption { position:fixed; margin:0; display:block; }
 .time-dock { position:fixed; bottom:30px; left:12px; right:12px; width:auto; transform:none; margin:0; }
 .speed-buttons { display:flex; }
 .speed-buttons button { padding:10px 7px; }
 #preview-label { bottom:8px; left:12px; font-size:9px; }
}