/* Pogeun Games — the little playground */
:root { --paper:#f8f7ef; --ink:#214c3e; --muted:#6b786d; --orange:#c77752; }
body { background:var(--paper); -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
.reading-progress { position:fixed; inset:0 auto auto 0; height:3px; width:0; background:#c98258; z-index:20; }
header { padding:26px 6%; max-width:1560px; position:relative; z-index:5; }
.brand { font-size:30px; letter-spacing:-1.7px; }
.brand-icon { border-radius:14px 14px 14px 4px; transform:rotate(-5deg); }
.brand-small { letter-spacing:5px; font-size:8px; padding-top:7px; }
nav { font-size:12px; gap:34px; }
nav a { transition:color .2s,background .2s; }
nav a:hover { color:var(--orange); }
nav a:last-child { background:var(--ink);color:var(--paper);border:0; padding:13px 23px; }
nav a:last-child:hover { background:#346852; }
.menu-toggle { display:none; }
.hero { max-width:1560px; grid-template-columns:1fr 1.05fr; gap:0; padding:48px 6% 58px; }
.hero-copy { padding:12px 0 30px; z-index:1; }
.eyebrow { font-size:9px; letter-spacing:2.2px; }
.hero .eyebrow { border:1px solid #d7dfce; display:inline-flex; padding:9px 12px; border-radius:20px; margin:0; }
.hero .eyebrow .dot { background:#79945f; }
h1 { font-size:clamp(43px,4.45vw,72px); line-height:1.32; margin:26px 0 24px; letter-spacing:-.075em; font-weight:800; }
h1 em { white-space:nowrap; }
h1 em:after { height:11px; bottom:1px; background:#d5dfa9; transform:rotate(-3deg); }
.intro { font-size:15px; line-height:1.95; margin:0 0 30px; }
.button { padding:17px 24px; gap:35px; font-size:12px; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-3px); box-shadow:0 7px 16px #214c3e18; }
.button span { display:inline-block; transition:transform .2s; }
.button:hover span { transform:translate(2px,-2px); }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.quiet-link { font-size:11px; font-weight:600; border-bottom:1px solid #b4bfaa; padding:9px 0; }
.quiet-link span { margin-left:15px; }
.hero-note { font-size:10px; line-height:1.9; margin-top:38px; gap:13px; }
.hero-note strong { font-weight:500; }
.hero-note .mini-mark { color:#c17854; font-size:35px; }
.hero-visual { position:relative; align-self:stretch; min-height:540px; display:flex; align-items:center; justify-content:center; }
.cozy-world { width:115%; max-width:720px; height:auto; display:block; filter:drop-shadow(0 12px 20px #254d3d08); animation:world-arrive 1.2s both; }
.visual-topline,.visual-bottomline { position:absolute; left:9%; right:0; display:flex; justify-content:space-between; font-size:7px; letter-spacing:1.7px; color:#84917a; }
.visual-topline { top:0; }.visual-bottomline { bottom:6px; }
.floating-note { position:absolute; background:#fffdf5; box-shadow:0 9px 30px #324f3c10; border:1px solid #e1e5d6; }
.note-left { left:1%; bottom:20%; font-size:10px; padding:13px 18px; transform:rotate(-7deg); border-radius:8px; animation:float-left 6s ease-in-out infinite; }
.note-left>span { font-size:22px; color:var(--orange); margin-right:9px; vertical-align:middle; }
.note-right { right:-1%; top:23%; padding:14px 18px; font:italic 28px Georgia; transform:rotate(8deg); border-radius:50%; text-align:center; background:#f8e8bd; border:1px dashed #ccaf76; animation:float-right 7s ease-in-out infinite; }
.note-right small { font:7px 'Noto Sans KR',sans-serif; display:block; letter-spacing:.2px; margin-top:3px; }
.ticker { padding:19px 6%; font-size:9px; letter-spacing:2.7px; background:#e8ebdc; color:var(--ink); border-top:1px solid #d9dfce; border-bottom:1px solid #d9dfce; }
.ticker b { color:#a6b292; font-size:22px; }
.section { max-width:1560px; padding:100px 6%; }
.section-head { margin-bottom:36px; }
h2 { font-weight:700; font-size:clamp(29px,2.8vw,43px); }
.section-head>p { font-size:12px; line-height:1.9; }
.game-card { background:#234b3d; color:var(--paper); grid-template-columns:1.18fr 1fr; border-radius:16px; box-shadow:0 18px 45px #2649340a; }
.game-art { background:#d9dfc5; min-height:570px; color:var(--ink); }
.game-art:after { content:'01'; position:absolute; bottom:0; right:20px; font:italic 180px Georgia; color:#b3c095; opacity:.3; z-index:0; }
.game-art:before { top:105px; left:-10px; border-color:#9fac8570; }
.art-label { display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:2px;top:28px;left:28px; }
.phone { z-index:1; width:190px; border-width:5px; border-radius:23px; transition:transform .5s; }
.phone-back { top:78px;left:16%;transform:rotate(-12deg); }
.phone-front { top:115px;left:48%;transform:rotate(10deg); }
.game-card:hover .phone-back { transform:rotate(-15deg) translateY(-6px); }
.game-card:hover .phone-front { transform:rotate(7deg) translateY(-8px); }
.art-caption { z-index:2; font-size:10px; bottom:24px; }
.art-star { z-index:2; right:35px; font-size:60px; }
.game-info { padding:54px 11%; }
.status { border-color:#769177; background:#385d49; color:#dce6c9; font-size:10px; padding:7px 12px; }
.status .dot { color:#bcd08e; }
.game-info h3 { font-size:39px; margin:25px 0 10px; }
.game-en { font-size:8px; color:#a6bba3; letter-spacing:1.7px; }
.game-desc { color:#d0d9c7; font-size:13px; line-height:2.1; margin:25px 0; }
.tags span { background:#365c49; color:#d7dfca; font-size:9px; padding:6px 9px; border:1px solid #4b6d54; }
.text-button { color:var(--paper); border-color:#57745b; font-size:12px; margin-top:25px; padding-bottom:17px; transition:padding .2s; }
.text-button:hover { padding-left:8px;padding-right:8px; }
.game-info .caption { color:#a6b69e; font-size:9px; margin-top:20px; }
.game-meta { display:flex; gap:30px; margin-top:24px; }
.game-meta>span { font-size:7px; letter-spacing:1.8px; color:#9db397; }
.game-meta strong { display:block;font-size:10px;font-weight:400;letter-spacing:0;color:#dae1cf;margin-top:7px; }
.studio-divider { max-width:1372px; margin:0 auto; border-top:1px solid #dce1d2; padding:25px 0; display:flex; justify-content:space-between; align-items:center; color:#879278; font-size:10px; letter-spacing:.05em; }
.studio-divider b { font-size:28px;color:#bb7953; }
.about { border:0; padding-top:70px; padding-bottom:85px; }
.about-grid { grid-template-columns:1.1fr 1fr; gap:60px; margin-top:28px; }
.about-grid h2 { font-size:clamp(34px,3.4vw,51px); line-height:1.45; }
.about-lead { font-size:19px; font-weight:500; }
.about-grid p:not(.about-lead) { font-size:13px; line-height:2.1; }
.signature { color:#899a79; font-size:22px; }
.values { margin-top:55px; padding-top:30px; }
.values>div>span { font:italic 23px Georgia; color:#9ca989; }
.values h3 { font-size:18px;font-weight:600;margin-top:20px; }
.values p { font-size:11px; }
.contact { max-width:none; padding:80px max(6%,calc((100vw - 1372px)/2)); background:#e9eddf; gap:80px; position:relative; overflow:hidden; }
.contact:before { content:'hello.'; position:absolute; right:-25px; bottom:-75px; font:italic 270px Georgia; color:#dee5d3; pointer-events:none; }
.contact>div { position:relative; }
.contact h2 { font-size:36px; }
.contact-box { transform:rotate(2deg); padding:35px 35px 30px; border-radius:4px; box-shadow:0 10px 28px #31563b0b; border:1px solid #d8dfce; background:repeating-linear-gradient(0deg,#fffdf4,#fffdf4 31px,#e5e9dc 32px,#fffdf4 33px); }
.envelope { font-size:32px; color:#9aaa89; }
.contact-box h3 { font-size:23px;font-weight:600; }
.contact-box>p { background:#fffdf4; display:table; }
.contact-state { border-radius:20px;border:1px solid #d6deca; background:#f2f4e9; width:fit-content; padding:8px 12px;font-size:10px; }
.postage { position:absolute;right:28px;top:28px;border:1px dashed #a5b391;color:#829571;padding:10px 10px 7px;font:italic 22px Georgia;text-align:center;transform:rotate(8deg); }
.postage small { display:block;font:6px sans-serif;letter-spacing:1px;margin-top:5px; }
.contact-note { font-size:10px!important; }
footer { padding:38px 6%;max-width:1560px; }
footer .brand { font-size:24px; }
footer>span { font-size:9px; }
dialog { max-width:880px; width:calc(100% - 40px); padding:0; overflow:auto; max-height:90dvh; box-shadow:0 30px 100px #081e1a70; }
dialog::backdrop { background:#163f32cb; backdrop-filter:blur(10px); }
.detail-layout { display:grid; grid-template-columns:.85fr 1fr; }
.detail-copy { padding:65px 35px 40px; }
dialog h2 { font-size:31px; }
dialog p,dialog li { font-size:12px; }
dialog .status { background:#e7ebdb; color:var(--ink); }
.close { z-index:3; width:36px; height:36px;border-radius:50%;background:#e8ebdf;top:15px;right:15px;line-height:1; }
.gallery { padding:25px;background:#d8dfc9;display:flex;flex-direction:column;align-items:center;gap:20px; }
.gallery-top { display:flex;width:100%;justify-content:space-between;font-size:7px;letter-spacing:1.6px; }
#gallery-image { width:auto;max-width:100%;height:420px;object-fit:contain; border:5px solid #254c3c;border-radius:19px;box-shadow:0 12px 22px #2b4d3525; }
.gallery-controls { display:flex;gap:7px; }
.gallery-tab { background:transparent;border:1px solid #acbb9d;border-radius:20px;padding:8px 13px;font-size:10px;color:var(--ink); }
.gallery-tab.active { background:var(--ink);color:var(--paper);border-color:var(--ink); }
.reveal { transition:opacity .65s,transform .65s; }.reveal.waiting { opacity:0;transform:translateY(22px); }
@keyframes world-arrive { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }
@keyframes float-left { 50%{transform:translateY(-7px) rotate(-5deg)} }
@keyframes float-right { 50%{transform:translateY(6px) rotate(11deg)} }
@media(min-width:1500px) { .hero{padding-top:70px;padding-bottom:75px}.hero-visual{min-height:620px} }
@media(max-width:1100px) { .hero-visual{min-height:480px}.hero-actions{gap:15px}.quiet-link{font-size:10px}.phone{width:165px}.game-art{min-height:520px}.phone-back{left:12%}.phone-front{left:48%}.game-info{padding:35px 9%}.game-info h3{font-size:33px}.game-meta{gap:22px}.studio-divider{margin:0 6%}.note-left{left:0;bottom:14%} }
@media(max-width:760px) {
 header{padding:23px 6%}.brand{font-size:27px}.hero{grid-template-columns:1fr;padding:35px 6% 30px;gap:10px}.hero-copy{padding-bottom:0}h1{font-size:51px;margin:23px 0}.intro{font-size:14px;margin-bottom:25px}.hero-actions{gap:20px}.hero-note{margin-top:24px;font-size:9px}.hero-visual{min-height:0;aspect-ratio:1.1;margin:18px -3% 0}.cozy-world{width:100%;max-height:520px}.visual-topline{top:4px;left:4%;right:3%;font-size:6px}.visual-bottomline{bottom:0;left:4%;right:3%;font-size:6px}.note-left{left:1%;bottom:18%;font-size:8px;padding:9px 12px}.note-left>span{font-size:18px}.note-right{top:19%;right:2%;font-size:23px;padding:12px}.note-right small{font-size:6px}.ticker{font-size:7px;letter-spacing:1.5px;padding:16px 6%}.ticker b{font-size:18px}.section{padding:65px 6%}.section-head{display:block}.section-head h2{font-size:29px}.section-head>p{font-size:11px}.game-card{grid-template-columns:1fr}.game-art{min-height:485px}.phone{width:170px}.phone-back{left:17%;top:70px}.phone-front{left:49%;top:97px}.game-info{padding:34px 8%}.game-info h3{font-size:34px}.game-desc{font-size:13px}.game-meta{margin-top:22px;gap:35px}.studio-divider{padding:20px 0;font-size:8px}.about{padding-top:45px}.about-grid{grid-template-columns:1fr;gap:25px;margin-top:24px}.about-grid h2{font-size:37px}.about-lead{font-size:17px}.about-grid p:not(.about-lead){font-size:12px}.values{margin-top:35px}.values h3{font-size:14px}.values p{font-size:10px}.values>div>span{font-size:20px}.contact{padding:55px 6%;grid-template-columns:1fr;gap:35px}.contact h2{font-size:31px}.contact-box{margin:0 4px;padding:30px}.contact:before{font-size:180px;bottom:-40px}.detail-layout{grid-template-columns:1fr}.gallery{padding:25px 20px 20px}#gallery-image{height:330px}.detail-copy{padding:30px 25px}.close{background:#f8f7ef}dialog{max-width:440px}.signature{font-size:21px}footer{padding:30px 6%}.reveal.waiting{transform:translateY(12px)}
}
@media(max-width:480px) {
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:1px solid #c8d3bf;width:40px;height:40px;border-radius:50%;padding:11px;color:var(--ink)}.menu-toggle span{height:1px;width:100%;background:currentColor;transition:transform .2s}header:has(.menu-toggle[aria-expanded=true]) .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}header:has(.menu-toggle[aria-expanded=true]) .menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}nav{display:none;position:absolute;top:81px;left:6%;right:6%;background:#fffdf5;border:1px solid #dce2d2;border-radius:12px;padding:15px;box-shadow:0 12px 22px #234b3d15;gap:0;flex-direction:column;align-items:stretch}nav.open{display:flex}nav a,nav a:first-child{display:block;padding:13px 12px}nav a:last-child{padding:13px 12px;margin-top:6px;border-radius:7px}.hero{padding-top:25px}h1{font-size:44px}.button{font-size:11px;padding:16px 20px;gap:22px}.quiet-link{font-size:9px}.hero-actions{gap:16px}.hero-visual{margin-top:25px}.visual-topline{font-size:5px;letter-spacing:1px}.phone{width:147px}.phone-back{left:12%}.phone-front{left:48%}.game-art{min-height:430px}.art-caption{font-size:9px}.art-star{right:20px;font-size:48px}.ticker{letter-spacing:1px}.ticker span:nth-of-type(2){font-size:6px}.values>div{padding:0 10px}.values h3{font-size:12px}.values p{font-size:9px}.contact-box h3{font-size:21px}footer .brand{font-size:22px}footer>span{font-size:8px}
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }.reveal.waiting{opacity:1;transform:none} }