@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#254a48;--muted:#7f9490;--green:#2c796a;--orange:#f28b59;--paper:#f7f8f2;--line:#e2e9de;--mint:#e7f1e5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif;font-size:15px}button,a,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible,svg:focus-visible{outline:3px solid #edaa51;outline-offset:5px}button:disabled{opacity:.4;cursor:default}button, a{touch-action:manipulation}a{color:inherit}.topbar{max-width:1480px;margin:auto;padding:27px 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;text-decoration:none;gap:11px}.brand-planet{background:#ef925d;color:#fff6d9;font-size:30px;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;transform:rotate(-20deg);box-shadow:inset -5px -4px 0 #d97d4c}.wordmark{font-weight:900;font-size:30px;letter-spacing:-2px}.brand-dot{color:var(--orange)}.brand-caption{font-size:12px;color:var(--muted);border-left:1px solid #d6dfd5;margin-left:8px;padding-left:20px;letter-spacing:.5px}.header-actions{display:flex;align-items:center;gap:10px}.round-button{height:43px;width:43px;border:1px solid var(--line);border-radius:50%;display:inline-flex;justify-content:center;align-items:center;font-size:23px;background:#fffdf8;transition:background .2s,transform .2s}.round-button:hover{background:#e8f1e5;transform:translateY(-2px)}.round-button svg{width:21px;height:21px}.parent-button{margin-left:12px;font-size:12px;color:#7c8e88}.parent-button span{margin-left:6px}main{max-width:1300px;margin:auto}.intro{text-align:center;margin:15px 0 0}.eyebrow{font-size:11px;color:#7b9288;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:7px}.eyebrow i{background:#d6aa63;width:5px;height:5px;border-radius:50%}h1{font-family:'Gowun Dodum',sans-serif;font-weight:600;font-size:42px;letter-spacing:-1.8px;margin:12px 0 10px}h1 span{color:#488b74}.intro p{font-size:13px;color:var(--muted);margin:0}.explore-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;align-items:center;gap:25px;padding:0 65px 0 32px}.globe-stage{position:relative;height:530px;min-width:0;isolation:isolate}.globe-stage:before{content:'';width:75%;height:23px;border-radius:50%;background:#b4c5b72e;filter:blur(10px);position:absolute;left:13%;bottom:24px;z-index:-1}#globe-wrap{position:absolute;inset:0}#globe{width:100%;height:100%;overflow:visible;touch-action:none;cursor:grab}#globe:active{cursor:grabbing}.orbit{position:absolute;border:1px solid #dce7dc;z-index:-1;pointer-events:none;border-radius:50%;left:50%;top:48%;width:77%;height:92%;transform:translate(-50%,-50%) rotate(-24deg)}.orbit-two{width:90%;height:64%;transform:translate(-50%,-50%) rotate(26deg);border-style:dashed;border-color:#e3e8dc}.sky-spark{position:absolute;color:#e2b768;font-size:23px;z-index:-1}.spark-one{left:13%;top:15%}.spark-two{right:8%;bottom:20%;color:#a4c9b4}.globe-tools{display:flex;flex-direction:column;gap:8px;position:absolute;right:0;top:37%;z-index:4}.globe-tools span{height:5px}.globe-tools .round-button{width:39px;height:39px;font-size:25px;box-shadow:0 3px 10px #254a4805}.paint-toggle{position:absolute;left:34px;top:31px;border-radius:24px;padding:11px 15px;background:#fffdf8e8;font-size:11px;box-shadow:0 3px 18px #254a4809;border:1px solid #e4ebdf}.paint-toggle span{font-size:16px;color:var(--orange);padding-right:5px}.paint-toggle[aria-pressed=true]{background:#ecf3e5;border-color:#b5cfad}.globe-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:11px;color:#90a49a;white-space:nowrap;display:flex;align-items:center;gap:8px}.globe-hint span{font-size:19px;transform:rotate(-20deg)}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:var(--paper);z-index:7}.loading span{font-size:10px;letter-spacing:12px;color:#c1d6be;animation:pulse 1.2s infinite}.loading[hidden]{display:none}.discovery-card{border:1px solid #e3e9df;background:#fffef9;border-radius:27px;padding:24px 23px;box-shadow:0 10px 30px #254a4806;min-height:324px;position:relative;overflow:hidden}.card-eyebrow{color:#91a494;font-size:10px;letter-spacing:1.5px;display:flex;align-items:center;gap:6px}.card-eyebrow:before{content:'';width:5px;height:5px;border-radius:50%;background:#d7b16a}.card-art{height:110px;display:flex;align-items:center;justify-content:center;margin:8px 0}.card-art svg{height:105px;width:110px;overflow:visible}.card-art.flag-art img{width:95px;height:64px;object-fit:cover;border-radius:8px;box-shadow:0 7px 14px #254a4812;transform:rotate(-5deg);border:1px solid #e8e8db}.card-title{font-size:24px;letter-spacing:-1px;margin:0 0 8px;font-family:'Gowun Dodum',sans-serif;font-weight:600}.card-desc{font-family:'Gowun Dodum',sans-serif;font-size:15px;line-height:1.75;margin:0;color:#798e81;min-height:52px}.card-bottom{margin-top:17px;display:flex;align-items:center;justify-content:space-between;gap:8px}.region-tag{padding:6px 10px;border:1px solid #e5ebdf;border-radius:20px;color:#8b9c89;font-size:10px}.listen{height:37px;padding:0 12px;background:#edf3e7;color:#628565;border-radius:19px;display:flex;gap:5px;align-items:center;font-size:11px}.listen svg{width:15px;height:15px}.surprise{margin-top:15px;display:flex;width:100%;align-items:center;text-align:left;gap:12px;padding:17px 18px;border:1px dashed #d4dfcf;border-radius:20px;background:#eef3e7}.surprise-icon{font-size:27px;color:#92a778}.surprise strong{font-size:12px;font-weight:600;display:block}.surprise small{font-size:10px;color:#97a28c;display:block;margin-top:4px}.arrow{margin-left:auto;font-size:23px;color:#a5b194}.mode-dock{display:flex;justify-content:center;gap:7px;background:#fffef9;border:1px solid #e4e9df;border-radius:24px;padding:7px;width:max-content;margin:6px auto 0;box-shadow:0 8px 25px #254a4805}.mode{display:flex;align-items:center;gap:10px;padding:12px 23px;border-radius:18px;min-height:55px;font-size:13px;color:#8d9b8d;font-weight:600;transition:.2s}.mode.active{background:#e8f0df;color:#456e47}.mode:hover{background:#f1f5eb}.mode-icon{font-size:28px;line-height:1}.mode-icon svg{width:30px;height:30px;display:block}.flag-icon{color:#d99867;transform:rotate(-8deg)}.sun-icon{color:#e3b65e}.explore-tray{max-width:1000px;margin:29px auto 0;padding:0 12px}.tray-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:12px;color:#83947f}.tray-heading>span{font-weight:600}.tray-heading button{font-size:10px;color:#8a9c87;padding:8px}.tray-heading button span{margin-left:8px}.tray-items{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#d5e2cd transparent}.destination{flex:1;min-width:108px;border:1px solid #e3e9dd;border-radius:17px;display:flex;align-items:center;gap:10px;padding:14px 13px;background:#fbfcf7;text-align:left;transition:.2s}.destination:hover{background:#eef4e7;transform:translateY(-3px);border-color:#baceb6}.destination img{width:32px;height:23px;object-fit:cover;border-radius:4px;box-shadow:0 2px 4px #0001}.destination span{font-size:11px;white-space:nowrap}.destination svg{width:34px;height:34px;flex-shrink:0}.destination .climate-icon{font-size:27px}.destination.selected{border-color:#97b68a;background:#edf4e6}footer{max-width:1200px;display:flex;justify-content:space-between;margin:30px auto 22px;color:#a8b3a2;font-size:9px;letter-spacing:1px;padding:0 35px}.climate-legend{position:absolute;bottom:0;left:50%;transform:translateX(-50%);align-items:center;gap:10px;font-size:10px;color:#819087;white-space:nowrap;background:#fffdf9dd;border-radius:25px;padding:10px 17px}.climate-legend:not([hidden]){display:flex}.climate-legend i{width:100px;height:6px;border-radius:6px;background:linear-gradient(90deg,#c6e8f0,#c6dca6,#f4d598,#efa16f)}dialog{border:1px solid #dce5d7;background:#fffef9;color:var(--ink);border-radius:26px;padding:25px;max-width:680px;width:calc(100% - 32px);max-height:85dvh;box-shadow:0 25px 100px #20423835}dialog::backdrop{background:#1d3f3b55;backdrop-filter:blur(5px)}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px}.modal-heading h2{font-family:'Gowun Dodum',sans-serif;font-size:25px;margin:0}.modal-heading .round-button{flex-shrink:0}.modal-body{font-size:14px;line-height:1.9;color:#6b8274}.modal-body h3{font-size:15px;color:var(--ink);margin:24px 0 8px}.modal-body p{margin:8px 0}.modal-body a{color:#427b67}.country-search{width:100%;padding:13px 16px;border:1px solid #dce6d7;background:#f8faf4;border-radius:13px;outline:0}.continent-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.continent-tabs button{border-radius:20px;background:#f1f4eb;padding:7px 11px;font-size:11px}.continent-tabs button.active{background:#dfead7}.country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:43dvh;overflow-y:auto;padding:4px}.country-choice{display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 7px;border:1px solid #e8ecdf;border-radius:14px;min-height:86px;font-size:11px}.country-choice:hover{background:#edf4e7}.country-choice img{width:38px;height:26px;object-fit:cover;border:1px solid #eee;border-radius:4px}.empty{grid-column:1/-1;padding:25px;color:#8c9c89}.help-row{display:flex;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid #e9eee2}.help-row>span{width:48px;height:48px;display:grid;place-items:center;background:#edf4e6;border-radius:15px;font-size:24px;flex-shrink:0}.help-row strong{color:var(--ink);display:block;font-size:14px}.help-row small{font-size:12px;line-height:1.7;display:block;margin-top:3px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#315c50;color:white;padding:12px 22px;max-width:90vw;font-size:12px;border-radius:30px;opacity:0;pointer-events:none;transition:.2s;z-index:100}#toast.show{opacity:1;transform:translate(-50%,0)}.animal-marker,.flag-marker,.climate-marker{cursor:pointer}.animal-marker:hover .marker-bg,.flag-marker:hover .marker-bg{stroke:#f2aa6b;stroke-width:3}.map-land{cursor:pointer}.map-land:hover{stroke:#ebad69;stroke-width:1.9px}.map-land.selected{stroke:#ee9d62;stroke-width:2.3px}.card-pop{animation:cardPop .35s ease-out}@keyframes cardPop{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.35}}@media(min-width:1500px){.intro{margin-top:27px}.globe-stage{height:560px}.explore-layout{padding-top:5px}.explore-tray{margin-top:35px}}@media(max-width:1050px){.topbar{padding:22px 30px}.explore-layout{padding:0 30px 0 12px;grid-template-columns:minmax(0,1fr) 250px;gap:15px}.globe-stage{height:470px}.paint-toggle{left:16px}.globe-tools{right:0}.discovery-card{padding:20px}.card-title{font-size:22px}.explore-tray{padding:0 35px}h1{font-size:36px}.intro{margin-top:12px}.destination{min-width:110px}.brand-caption{display:none}}@media(max-width:740px){.topbar{padding:18px 20px}.wordmark{font-size:27px}.brand-planet{width:35px;height:35px;font-size:24px}.header-actions{gap:7px}.round-button{width:37px;height:37px}.parent-button{font-size:10px;margin-left:1px}.parent-button span{display:none}.intro{margin-top:6px}.eyebrow{font-size:9px;letter-spacing:1px}h1{font-size:30px;margin:11px 0 9px}.intro p{font-size:11px}.explore-layout{display:flex;flex-direction:column;gap:0;padding:0 16px}.globe-stage{width:100%;height:min(105vw,480px)}.orbit-one{height:86%;width:87%}.orbit-two{height:63%;width:91%}.paint-toggle{top:21px;left:0;padding:9px 12px;font-size:10px}.globe-tools{right:1px;top:40%;gap:7px}.globe-tools .round-button{width:34px;height:34px;font-size:22px}.globe-hint{bottom:9px;font-size:10px}.globe-stage:before{bottom:29px}.explore-aside{width:100%;max-width:520px}.discovery-card{padding:17px 18px 16px 102px;min-height:131px;border-radius:21px}.card-eyebrow{font-size:8px;margin-bottom:9px}.card-art{position:absolute;left:14px;top:12px;width:78px;height:92px;margin:0}.card-art svg{width:78px;height:78px}.card-art.flag-art img{width:65px;height:44px}.card-title{font-size:20px;margin:0 0 4px}.card-desc{font-size:12px;line-height:1.6;min-height:0}.card-bottom{margin-top:10px}.region-tag{font-size:9px;padding:5px 8px}.listen{height:31px;font-size:10px}.surprise{position:absolute;display:none}.mode-dock{margin:19px auto 0;padding:5px;border-radius:20px;gap:2px;max-width:calc(100% - 24px)}.mode{padding:10px 13px;gap:7px;font-size:11px;min-height:49px;border-radius:15px}.mode-icon{font-size:24px}.mode-icon svg{width:26px;height:26px}.explore-tray{margin-top:23px;padding:0 20px}.tray-heading{font-size:11px;margin-bottom:10px}.tray-heading button{font-size:9px}.destination{padding:13px 12px;min-width:109px;border-radius:14px}.tray-items{gap:8px}footer{margin:17px auto 20px;padding:0 20px;font-size:8px;letter-spacing:.3px}.climate-legend{bottom:4px;font-size:9px;padding:8px 12px}.climate-legend i{width:70px}dialog{padding:20px}.country-grid{grid-template-columns:repeat(3,1fr)}.modal-heading h2{font-size:22px}.country-choice{font-size:10px}.globe-stage .spark-one{left:7%;top:25%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep a zoomed map within its own play area. */
#globe-wrap{overflow:hidden;border-radius:28px}#globe{overflow:hidden}
#zoom-level{display:block;font-size:10px;text-align:center;color:#78917e;padding:2px 0 4px;font-variant-numeric:tabular-nums}
.flag-art img{object-fit:contain!important;background:#fffdf5}
.animal-filters{display:flex;gap:7px;margin:0 0 14px;flex-wrap:wrap}.animal-filters[hidden]{display:none}
.animal-filters button{font-size:11px;background:#f0f4e9;border:1px solid #e2ead9;border-radius:20px;padding:9px 13px;color:#7e967b}.animal-filters button.active{background:#dfebd4;border-color:#b7cfa7;color:#416b42}
.animal-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:65dvh;overflow:auto;padding:3px}
.animal-choice{display:flex;align-items:center;flex-direction:column;padding:14px 8px;border-radius:18px;background:var(--animal-color);border:1px solid #dfe6d6;gap:7px;min-height:145px}.animal-choice:hover{border-color:#a5bc8e;background:#f2f5e9}.animal-choice svg{width:70px;height:70px}.animal-choice strong{font-size:12px;font-weight:500}.animal-choice small{font-size:9px;color:#7f9382;line-height:1.5}.cluster-count{pointer-events:none}
@media(max-width:740px){.animal-gallery-grid{grid-template-columns:repeat(3,1fr);gap:7px}.animal-choice{padding:12px 5px;min-height:130px}.animal-choice svg{width:60px;height:60px}.animal-choice strong{font-size:11px}.animal-filters{gap:5px}.animal-filters button{font-size:10px;padding:8px 10px}#globe-wrap{border-radius:22px}}

/* A light halo keeps Korean names legible on land and on painted flags. */
.country-name{font-family:'Noto Sans KR',sans-serif;font-size:14px;font-weight:600;letter-spacing:0;fill:#31584e;stroke:#fffef3;stroke-width:2.5px;stroke-linejoin:round;paint-order:stroke fill;pointer-events:none;user-select:none}
.country-name-selected{fill:#8a4a28;stroke-width:4px}

.country-label[role="button"]{cursor:pointer}.country-label-flag,.country-label-flag-edge{pointer-events:none}.country-label[role="button"]:hover .country-name{fill:#8a4a28}.country-label:focus-visible .country-label-hit{stroke:#edaa51;stroke-width:2;rx:3}

.climate-controls{max-width:520px;margin:18px auto 3px;padding:14px 18px;border:1px solid #dde7dc;background:#fffdf7;border-radius:20px}.climate-controls[hidden]{display:none}.temperature-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.temperature-heading strong{font-size:13px;color:#41695d}.temperature-heading small{font-size:10px;color:#7b8f83}.temperature-months{display:flex;gap:7px;align-items:center;margin-top:11px}.temperature-months>button{padding:9px 15px;border-radius:18px;font-size:12px;border:1px solid #e0e8d9;background:#f2f5ea}.temperature-months>button.active{background:#dfebd3;border-color:#b5cc9f;color:#3c6944}.temperature-months label{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10px;color:#7a8e7d}.temperature-months select{font:inherit;font-size:12px;background:#fffdf7;border:1px solid #dce4d5;border-radius:11px;padding:8px;color:#436755}.climate-controls p{font-size:10px;color:#879984;margin:10px 0 0}.climate-controls>button{font-size:11px;background:#e4efdc;border-radius:12px;padding:8px 12px;margin-top:7px}.temperature-raster{pointer-events:none}.temperature-legend:not([hidden]){display:block;bottom:1px;width:245px;padding:9px 14px;border:1px solid #e4e9df;background:#fffdf8ed}.temperature-legend-labels{display:flex;justify-content:space-between;font-size:10px}.temperature-legend i{display:block;width:100%;height:8px;margin:6px 0 4px;background:linear-gradient(90deg,#536fa4 0%,#7ba7cf 25%,#c1dfdf 50%,#dce4b8 62.5%,#f0d48d 75%,#eaa274 87.5%,#d76e60 100%)}.temperature-ticks{display:flex;justify-content:space-between;font-size:9px;font-variant-numeric:tabular-nums}.temperature-reading{text-align:center;display:flex;flex-direction:column;gap:4px}.temperature-reading small{font-size:12px;color:#72907e}.temperature-reading strong{font-size:40px;line-height:1.2;font-weight:700;letter-spacing:-2px}.temperature-reading strong span{font-size:23px;letter-spacing:-1px}.temperature-reading>span{font-size:9px;color:#8c9b88}.temperature-pin{pointer-events:none}
@media(max-width:740px){.climate-controls{margin:15px 20px 4px;padding:12px;border-radius:17px}.temperature-heading{align-items:flex-start;flex-direction:column;gap:4px}.temperature-heading strong{font-size:12px}.temperature-heading small{font-size:9px}.temperature-months{gap:5px}.temperature-months>button{font-size:11px;padding:9px 11px}.temperature-months label>span{display:none}.temperature-months select{font-size:11px;padding:8px}.temperature-legend:not([hidden]){width:225px;bottom:1px;padding:7px 12px}.temperature-reading strong{font-size:27px;letter-spacing:-1px}.temperature-reading strong span{font-size:16px}.temperature-reading small{font-size:10px}.temperature-reading>span{font-size:8px}.temperature-art{width:83px;left:11px}}