@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#25252b;--muted:#787883;--bg:#faf9f6;--violet:#7260da}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7260da;outline-offset:4px}header,main,footer{max-width:1160px;margin:auto}header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9e7e2}.brand{display:flex;align-items:center;gap:10px;font-size:38px;color:var(--violet);text-decoration:none}.brand span{font-size:22px;font-weight:900;color:var(--ink);line-height:1.1}.brand small{display:block;letter-spacing:3px;font-size:9px;margin-top:7px;color:var(--violet)}.nav{font-size:12px;color:var(--muted)}.nav b{color:var(--violet);margin-left:20px;font-size:24px}.hero{min-height:420px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:46px 0 55px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--violet)}h1{font-size:47px;letter-spacing:-2.8px;line-height:1.35;margin:20px 0}h1 span{color:var(--violet)}.hero p{font-size:14px;color:var(--muted);line-height:1.9}.primary{background:var(--ink);color:white;border:0;border-radius:10px;padding:15px 22px;margin-top:12px;font-size:13px;font-weight:700}.primary span{margin-left:25px}.hero-art{position:relative;height:310px;max-width:430px;margin-left:30px;background:radial-gradient(ellipse,#eeebf7 0,transparent 65%)}.tile{position:absolute;border:3px solid var(--ink);border-radius:25px;box-shadow:6px 7px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900}.purple{background:#b5a1f5;width:144px;height:144px;top:10px;left:45px;font-size:100px;transform:rotate(-14deg)}.yellow{background:#f6d773;width:162px;height:162px;top:95px;left:190px;transform:rotate(13deg);font-size:37px}.green{background:#b8dac3;width:110px;height:110px;top:182px;left:65px;font-size:25px;line-height:1.05;transform:rotate(-9deg);text-align:center}.float{position:absolute}.star{right:35px;top:1px;font-size:70px;color:#f0b485}.wave{left:8px;top:148px;font-size:50px;color:var(--violet);transform:rotate(15deg)}.bubble{position:absolute;bottom:-10px;right:24px;transform:rotate(-8deg);border:1.5px solid var(--ink);border-radius:30px;padding:10px 15px;background:white;font-size:10px;font-weight:900;letter-spacing:1px}.catalog{padding:35px 0;border-top:1px solid #e9e7e2}.section-head{display:flex;justify-content:space-between;align-items:center}h2{font-size:26px;letter-spacing:-1px;margin:9px 0 22px}.search{background:white;border:1px solid #e6e4df;border-radius:10px;padding:10px 15px;color:var(--muted);display:flex;gap:10px}.search input{border:0;background:transparent;width:150px;font-size:12px;outline:none}.filters{display:flex;gap:8px;margin:8px 0 25px;flex-wrap:wrap}.filters button{border:1px solid #e6e4df;border-radius:30px;padding:8px 17px;background:transparent;font-size:12px;color:#777}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:white;border:1px solid #e9e7e2;border-radius:16px;overflow:hidden;text-align:left;padding:0;transition:transform .2s,box-shadow .2s;color:var(--ink)}.card:hover{transform:translateY(-5px);box-shadow:0 12px 28px #27233410}.art{height:155px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.art:before,.art:after{content:'';position:absolute;border:1px solid #ffffff80;border-radius:50%;width:180px;height:180px;right:-55px;top:-85px}.art:after{left:-85px;top:65px}.symbol{font-size:65px;font-weight:900;letter-spacing:-3px;transform:rotate(-8deg);text-shadow:3px 3px 0 #ffffff90;z-index:1}.tag{position:absolute;top:12px;left:13px;border-radius:5px;padding:4px 7px;background:#ffffff99;font-size:9px;font-weight:800;color:#555}.card-copy{padding:18px}.card-copy small{font-size:10px;color:var(--muted)}.card h3{margin:6px 0;font-size:17px;letter-spacing:-.5px}.card p{font-size:11px;color:var(--muted);margin:0 0 18px}.card-tail{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0efec;padding-top:12px;font-size:10px;color:var(--muted)}.card-tail b{color:var(--ink);font-size:13px}.bottom{margin:12px 0 55px;background:#eeebf8;border-radius:16px;padding:27px 32px;display:flex;align-items:center;gap:23px}.bottom>span{font-size:42px;color:var(--violet)}.bottom h3{font-size:17px;margin:0 0 7px}.bottom p{font-size:12px;color:var(--muted);margin:0}.bottom-arrow{margin-left:auto}footer{display:flex;justify-content:space-between;padding:25px 0 35px;border-top:1px solid #e9e7e2;font-size:11px;color:var(--muted)}footer b{color:var(--ink)}dialog{border:0;border-radius:22px;padding:26px;width:min(540px,94vw);max-height:90vh;color:var(--ink);box-shadow:0 30px 100px #0004}dialog::backdrop{background:#24213299;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--violet)}.modal-head button{border:0;background:#f3f2f6;width:32px;height:32px;border-radius:50%}dialog h2{margin:10px 0}#instructions{font-size:13px;color:var(--muted);line-height:1.7}#play{margin:22px 0;min-height:240px;text-align:center}.game-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.game-foot button,.game-btn{border:0;padding:12px 18px;border-radius:9px;background:var(--violet);color:white}.arena{width:100%;min-height:240px;border:0;border-radius:16px;background:#eeebf8;color:var(--ink);font-size:21px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.arena small{font-size:12px}.score{font-size:35px;font-weight:800;margin:10px}.board{display:grid;gap:8px;margin:auto;max-width:380px}.cell{aspect-ratio:1;border:0;border-radius:9px;font-size:22px;font-weight:800;background:#eeebf8;color:var(--ink)}.status{font-size:15px;margin:15px}.keys{display:flex;justify-content:center;gap:8px;margin-top:15px}.keys button{background:#eeebf8;border:0;border-radius:8px;padding:12px 16px}canvas{max-width:100%;border-radius:14px;background:#eeebf8}.type-input{width:100%;padding:14px;border:1px solid #d8d2ef;border-radius:10px}.target{font-size:18px;line-height:1.8;background:#f4f2fa;padding:18px;border-radius:10px}@media(max-width:1200px){header,main,footer{margin-left:35px;margin-right:35px}}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}h1{font-size:38px}.hero-art{transform:scale(.8);transform-origin:center;margin:0}.hero{grid-template-columns:1fr 1fr}.nav{display:none}}@media(max-width:550px){header,main,footer{margin-left:20px;margin-right:20px}header{height:80px}.hero{display:block;padding-top:35px}.hero-art{height:285px;margin:20px auto 0;max-width:350px;transform:scale(.85)}h1{font-size:36px}.section-head{align-items:flex-start}.search{margin-top:12px;padding:9px}.search input{width:80px}.grid{gap:12px}.art{height:125px}.card-copy{padding:14px}.card p{line-height:1.6;min-height:35px}.bottom{padding:22px 18px;gap:15px}.bottom h3{font-size:14px}.bottom p{font-size:10px}footer span{font-size:9px}h2{font-size:23px}}
.tetris-layout{display:flex;justify-content:center;gap:20px;text-align:left}.tetris-layout>canvas{width:min(240px,58%);height:auto;aspect-ratio:1/2}.tetris-layout aside{width:110px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}.tetris-layout aside small{font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:9px}.tetris-layout aside strong{font-size:23px}.tetris-layout aside p{font-size:11px;line-height:1.6}.tetris-layout aside canvas{background:#f0edf7}.tetris-layout .game-btn{font-size:11px;padding:10px}.keys{flex-wrap:wrap}.keys button{touch-action:manipulation;font-size:13px}.gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);padding:8px;background:#dfc49c;border-radius:10px;width:100%;max-width:430px;margin:auto}.gomoku-board button{position:relative;aspect-ratio:1;border:0;background:linear-gradient(transparent 48%,#947652 49%,#947652 51%,transparent 52%),linear-gradient(90deg,transparent 48%,#947652 49%,#947652 51%,transparent 52%);padding:0;display:grid;place-items:center}.stone{width:85%;height:85%;border-radius:50%;box-shadow:1px 2px 3px #0004}.stone.black{background:radial-gradient(circle at 30% 25%,#555,#171717 70%)}.stone.white{background:radial-gradient(circle at 30% 25%,white,#e0dfd9 70%)}.gomoku-board button:disabled{cursor:default}.gomoku-board button:focus-visible{outline-offset:0;z-index:2}

.hubnav{display:flex;gap:22px}.hubnav a{font-size:13px;text-decoration:none;color:#666276}.hubnav a:hover{color:var(--violet)}.testcta{display:inline-block;font-size:13px;color:var(--violet);text-decoration:none;padding:14px;margin-left:8px;font-weight:700}.hubtabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 22px}.hubtabs button{padding:12px 20px;border:1px solid #dfdae9;border-radius:12px;background:white;color:#635d71;font-weight:700;font-size:13px}.hubtabs button.active{background:#7260da;color:white;border-color:#7260da}.hubtabs small{margin-left:7px;opacity:.7}.test-card{display:block;text-decoration:none}.card p{line-height:1.7;min-height:38px}.ad-space{min-height:120px;margin:22px 0 30px;border:1px dashed #dedbe4;border-radius:12px;background:#f3f1f5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#a4a0ae}.ad-space small{font-size:9px;letter-spacing:2px}.ad-space span{font-size:12px}.catalog{scroll-margin-top:20px}@media(max-width:550px){.hubnav{gap:10px}.hubnav a{font-size:11px}.brand span{font-size:19px}.brand{font-size:30px}.testcta{margin-left:0}.ad-space{min-height:100px}.hubtabs button{padding:10px 12px;font-size:12px}}

/* Keep card actions aligned across each row. */
.card{display:flex;flex-direction:column;height:100%}.art{flex:none}.card-copy{display:flex;flex-direction:column;flex:1}.card-copy p{flex:1}.card-tail{margin-top:auto}

.card{text-decoration:none}.content-directory{border-top:1px solid #e9e7e2;padding:25px 0 40px}.directory-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.directory-links a{font-size:12px;color:#625589;text-decoration:none}.detailcopy{font-size:14px;line-height:1.9;color:#787883;max-width:700px;margin:15px 0 25px}@media(max-width:700px){.directory-links{grid-template-columns:repeat(2,1fr)}}