:root {
  --ink: #17263d;
  --paper: #f6f2e7;
  --card: #fffdf5;
  --lime: #dff25b;
  --coral: #ff6f61;
  --blue: #54bcec;
  --pink: #f6a8cf;
  --yellow: #ffd84e;
  --line: 3px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Gowun Dodum", sans-serif; overflow-x: hidden; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:4px solid var(--coral);outline-offset:3px}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; background: var(--ink); color: white; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 100; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }

.site-header { position: fixed; top: 0; inset-inline: 0; z-index: 50; min-height: 76px; display: flex; align-items: center; gap: 2rem; padding: 0 4vw; border-bottom: 2px solid var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); }
.logo { display: inline-flex; align-items: center; gap: .6rem; font-family: "Black Han Sans", sans-serif; font-size: 1.18rem; white-space: nowrap; }
.logo-spark { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); transform: rotate(-10deg); }
.nav { display: flex; gap: 1.7rem; margin-left: auto; }
.nav a { position: relative; font-weight: 700; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.4rem; height: 4px; background: var(--coral); transition: right .2s; }
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }
.theme-button, .menu-button, .auth-button { border: 2px solid var(--ink); background: var(--card); padding: .5rem .8rem; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.theme-button:active, .menu-button:active, .auth-button:active { transform: translate(3px,3px); box-shadow: none; }
.theme-button { display: flex; gap: .45rem; }
.auth-button{white-space:nowrap;background:var(--yellow);font-weight:700}.auth-button.logged-in{background:var(--lime)}
.install-button{border:2px solid var(--ink);background:var(--blue);padding:.5rem .7rem;font-weight:700;box-shadow:3px 3px 0 var(--ink);cursor:pointer;white-space:nowrap}
.menu-button { display: none; margin-left: auto; }

.hero { min-height: 100vh; padding: 140px 7vw 80px; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5vw; border-bottom: var(--line); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: var(--lime); right: -130px; top: 70px; border: var(--line); }
.eyebrow, .section-number { font-weight: 700; letter-spacing: .08em; font-size: .85rem; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2bc46d; margin-right: .5rem; box-shadow: 0 0 0 5px rgba(43,196,109,.15); animation: pulse 1.8s infinite; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Black Han Sans", sans-serif; font-weight: 400; }
h1 { font-size: clamp(3.7rem, 7.5vw, 7.6rem); line-height: .9; letter-spacing: -.045em; margin: 1.2rem 0 2rem; }
h1 span { color: var(--coral); -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--ink); }
.hero-text { max-width: 610px; font-size: 1.12rem; line-height: 1.85; }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; gap: 1.5rem; padding: .9rem 1.25rem; border: var(--line); font-weight: 700; transition: transform .2s, box-shadow .2s; }
.button.primary { background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--coral); }
.button.ghost { background: var(--card); box-shadow: 6px 6px 0 var(--ink); }
.button:hover { transform: translate(-2px,-2px) rotate(-1deg); }
.hero-art { min-height: 530px; position: relative; display: grid; place-items: center; }
.machine { position: relative; width: min(390px, 80vw); padding: 15px; background: var(--blue); border: 4px solid var(--ink); border-radius: 34px 34px 65px 45px; box-shadow: 15px 16px 0 var(--ink); transform: rotate(2deg); z-index: 3; }
.machine::before, .machine::after { content: ""; position: absolute; bottom: -38px; width: 50px; height: 45px; background: var(--ink); border-radius: 0 0 15px 15px; }
.machine::before { left: 45px; }.machine::after { right: 45px; }
.machine-top { display: flex; gap: 8px; padding: 2px 4px 12px; }
.light { width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 50%; }.red{background:var(--coral)}.yellow{background:var(--yellow)}.green{background:#66d478}
.screen { min-height: 240px; display: grid; place-items: center; align-content: center; background: #1d2f4a; color: var(--lime); border: 4px solid var(--ink); border-radius: 20px; box-shadow: inset 0 0 35px rgba(223,242,91,.18); }
.screen p { font-family: monospace; }.screen strong { font-size: 1.5rem; }.pixel-face { margin-top: 1rem; font-size: 2.3rem; animation: blink 3s infinite; }
.machine-controls { display: flex; gap: 12px; align-items: center; padding: 18px 10px 5px; }.machine-controls span { width: 25px; height: 25px; border-radius: 50%; border: var(--line); background: var(--pink); }.machine-controls button { margin-left: auto; width: 70px; height: 48px; border-radius: 50%; background: var(--coral); border: var(--line); font-family: "Black Han Sans"; cursor: pointer; }
.machine-controls button:active { transform: scale(.92); }
.orbit { position: absolute; border: 2px dashed var(--ink); border-radius: 50%; z-index: 1; animation: spin 18s linear infinite; }.orbit span { position: absolute; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.orbit-one { width: 490px; height: 490px; }.orbit-one span { width: 50px; height: 50px; top: 30px; left: 45px; }.orbit-two { width: 610px; height: 330px; transform: rotate(-24deg); animation-direction: reverse; }.orbit-two span { width: 45px; height: 45px; right: 20px; top: 110px; background: var(--pink); }
.sticker { position: absolute; z-index: 4; padding: .55rem .8rem; border: var(--line); font-family: "Black Han Sans"; box-shadow: 4px 4px 0 var(--ink); }.sticker-idea { top: 10%; right: 4%; background: var(--yellow); transform: rotate(10deg); }.sticker-code { left: 0; bottom: 12%; background: var(--pink); transform: rotate(-8deg); }
.marquee { position: absolute; bottom: 0; left: 0; right: 0; border-top: var(--line); background: var(--lime); overflow: hidden; font-family: "Black Han Sans"; padding: .5rem 0; white-space: nowrap; }.marquee div { width: max-content; animation: marquee 28s linear infinite; }

.section { padding: 110px 7vw; }
.section-heading { margin-bottom: 3.2rem; }.section-number { color: var(--coral); margin-bottom: .7rem; }.section-heading h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); margin: 0; letter-spacing: -.04em; }.section-heading.split { display: flex; justify-content: space-between; align-items: end; }.section-heading.split > p { max-width: 340px; line-height: 1.7; font-weight: 700; }
.about { background: #f9cddf; border-bottom: var(--line); }
.about-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.3rem; }
.about-card { position: relative; min-height: 210px; background: var(--card); border: var(--line); padding: 2rem; box-shadow: var(--shadow); }
.about-card.big { grid-row: span 2; min-height: 450px; background: var(--yellow); display: flex; flex-direction: column; justify-content: flex-end; transform: rotate(-1deg); }.about-card.big h3 { font-size: clamp(2.2rem,4vw,4rem); line-height: 1.05; }.about-card.big p:last-child { max-width: 500px; line-height: 1.8; }
.handwritten { position: absolute; top: 45px; right: 35px; font-family: cursive; font-size: 2rem; transform: rotate(8deg); }.tape { position:absolute; top:-13px; left:38%; width:100px; height:30px; background:rgba(255,255,255,.55); transform:rotate(-3deg); }
.about-card.stat { display: flex; align-items: flex-end; gap: 1rem; background: var(--blue); }.about-card.stat.coral { background: var(--coral); }.about-card.stat strong { font-family: "Black Han Sans"; font-size: 4.7rem; line-height: .8; }.about-card.stat span { font-weight: 700; }
.about-card.quote { grid-column: 2 / 4; background: var(--ink); color: white; display:flex; justify-content:space-between; align-items:end; gap:1rem; }.about-card.quote p { font-size: 1.35rem; line-height: 1.6; }.about-card.quote strong { color: var(--lime); }

.projects { border-bottom: var(--line); }
.filters { display: flex; gap: .7rem; margin-bottom: 2rem; flex-wrap: wrap; }.filter { border: 2px solid var(--ink); background: transparent; padding: .55rem 1rem; cursor:pointer; font-weight:700; }.filter.active { background: var(--ink); color: white; }
.add-project-button{margin-left:auto;border:2px solid var(--ink);background:var(--lime);padding:.55rem 1rem;font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.add-project-button span{font-size:1.15rem}.add-project-button:active{transform:translate(3px,3px);box-shadow:none}
.connection-status{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;padding:.45rem .7rem;border:2px solid var(--ink);background:var(--card);font-size:.78rem;font-weight:700}.connection-status::before{content:"";width:9px;height:9px;border-radius:50%;background:#e4a02c}.connection-status.connected::before{background:#32bc70}.connection-status.preview::before{background:#e0685c}
.project-form-panel{position:relative;display:grid;grid-template-columns:.7fr 1.3fr;gap:2.5rem;margin:0 0 2.5rem;padding:2.4rem;background:var(--yellow);border:var(--line);box-shadow:var(--shadow)}.project-form-panel[hidden]{display:none}.form-intro h3{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1;margin:.5rem 0 1.1rem}.form-intro>p:last-child{line-height:1.7;max-width:380px}.form-sticker{position:absolute;right:20px;top:-20px;padding:.45rem .7rem;background:var(--coral);border:var(--line);box-shadow:4px 4px 0 var(--ink);font-family:"Black Han Sans";transform:rotate(5deg)}#project-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}#project-form label{display:flex;flex-direction:column;gap:.45rem;font-weight:700}#project-form label>span{color:#d34034}#project-form label>em{font-size:.75rem;font-style:normal;font-weight:400}#project-form input,#project-form select,#project-form textarea{width:100%;border:2px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);padding:.8rem;outline:none;resize:vertical}#project-form input:focus,#project-form select:focus,#project-form textarea:focus{box-shadow:4px 4px 0 var(--ink);background:white;color:#17263d}.wide{grid-column:1/-1}#project-form small{font-weight:400;line-height:1.4}.wide>small{text-align:right}.form-actions{display:flex;justify-content:flex-end;gap:.8rem}.form-actions button{border:2px solid var(--ink);padding:.8rem 1rem;font-weight:700;cursor:pointer}.cancel-project{background:var(--card)}.save-project{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--coral)}
.project-tools{display:flex;gap:.8rem;align-items:center;margin-bottom:1.5rem}.search-box{position:relative;flex:1;max-width:420px}.search-box>span[aria-hidden]{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font-size:1.4rem}.search-box input,.sort-box select{width:100%;border:2px solid var(--ink);background:var(--card);color:var(--ink);padding:.7rem .8rem}.search-box input{padding-left:2.5rem}.sort-box{display:flex;align-items:center;gap:.5rem;font-weight:700}.backup-button{margin-left:auto;border:2px solid var(--ink);background:var(--blue);padding:.7rem .9rem;font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.image-field{border:2px dashed var(--ink);padding:1rem;background:color-mix(in srgb,var(--card) 60%,transparent)}.check-label{flex-direction:row!important;align-items:center}.check-label input{width:auto!important;accent-color:var(--coral)}
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.project-card { border: var(--line); background: var(--card); box-shadow: var(--shadow); transition: transform .25s; overflow:hidden; }.project-card:hover { transform: translateY(-8px) rotate(-.7deg); }.project-card.hidden { display:none; }
.project-visual { height: 310px; position:relative; overflow:hidden; border-bottom:var(--line); }.project-card.yellow .project-visual{background:var(--yellow)}.project-card.blue .project-visual{background:var(--blue)}.project-card.pink .project-visual{background:var(--pink)}
.game-character { position:absolute; bottom:77px; left:28%; padding:1rem; border:var(--line); border-radius:45%; background:var(--coral); font-weight:700; transform:rotate(-4deg); }.platform { position:absolute; bottom:48px; left:15%; width:70%; height:28px; background:#55a96d; border:var(--line); }.cloud { position:absolute; font-size:4rem; color:white; -webkit-text-stroke:2px var(--ink); }.cloud.one{top:25px;left:20px}.cloud.two{top:75px;right:20px;font-size:3rem}.coin{position:absolute;right:26%;top:38%;font-size:2.3rem;animation:bob 1.5s infinite}
.sun { font-size: 7rem; position:absolute; left:20px; top:10px; animation:spin 12s linear infinite; }.weather-window { position:absolute; right:28px; bottom:28px; width:72%; height:190px; display:flex; flex-direction:column; padding:1.4rem; border:var(--line); border-radius:20px; background:rgba(255,255,255,.85); box-shadow:8px 8px 0 var(--ink); }.weather-window strong{font-family:"Black Han Sans";font-size:4rem;margin-top:auto}.weather-window span{margin-top:.6rem}
.bot { position:absolute; left:18%; top:72px; width:160px; height:145px; display:flex; justify-content:center; align-items:center; gap:.7rem; border:var(--line); border-radius:45% 45% 38% 38%; background:var(--lime); font-size:1.5rem; box-shadow:8px 8px 0 var(--ink); }.bot::before{content:"";position:absolute;width:3px;height:35px;background:var(--ink);top:-35px}.bot::after{content:"★";position:absolute;top:-60px}.chat-bubble{position:absolute;right:15px;top:25px;width:140px;padding:.8rem;border:var(--line);background:white;border-radius:20px 20px 20px 2px;transform:rotate(4deg)}.bolt{position:absolute;right:15%;bottom:15px;font-size:4rem}
.project-body { padding: 1.5rem; }.tags { display:flex; gap:.5rem; margin-bottom:1rem; }.tags span { border:2px solid var(--ink); padding:.2rem .45rem; font-size:.7rem; font-weight:700; background:var(--paper); }.project-body h3{font-size:1.75rem;margin-bottom:.6rem}.project-body p{line-height:1.65;min-height:54px}.project-link { width:100%; display:flex; justify-content:space-between; border:0; border-top:2px solid var(--ink); background:transparent; padding:1rem 0 0; font-weight:700; cursor:pointer; }.project-link span{font-size:1.4rem}
.custom-project-visual{display:grid;place-items:center}.custom-project-visual::before,.custom-project-visual::after{content:"";position:absolute;border:2px dashed var(--ink);border-radius:50%}.custom-project-visual::before{width:220px;height:220px}.custom-project-visual::after{width:285px;height:130px;transform:rotate(-20deg)}.custom-project-emoji{position:relative;z-index:2;display:grid;place-items:center;width:135px;height:135px;background:var(--card);border:var(--line);border-radius:38% 48% 42% 50%;box-shadow:8px 8px 0 var(--ink);font-size:4.6rem;transform:rotate(-4deg)}.custom-badge{position:absolute;z-index:3;right:18px;top:18px;background:var(--lime);border:2px solid var(--ink);padding:.3rem .55rem;font-weight:700;transform:rotate(5deg)}.project-card-actions{display:flex;align-items:center;border-top:2px solid var(--ink);margin-top:1rem;padding-top:.85rem}.project-card-actions .project-link{border:0;padding:0}.delete-project{border:0;background:transparent;color:var(--coral);font-weight:700;cursor:pointer;padding:.35rem}.delete-project:hover{text-decoration:underline}
.recent-projects{margin-top:3rem;padding:1.5rem;border:var(--line);background:var(--card);box-shadow:var(--shadow)}.recent-projects h3{font-size:1.5rem}.recent-projects>div{display:flex;gap:.7rem;flex-wrap:wrap}.recent-chip{border:2px solid var(--ink);background:var(--yellow);padding:.55rem .8rem;font-weight:700;cursor:pointer}
.dashboard{background:var(--ink);color:var(--paper);border-bottom:var(--line)}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.dashboard-stat{min-height:190px;padding:1.5rem;border:3px solid var(--paper);display:flex;flex-direction:column;justify-content:flex-end;background:#203553}.dashboard-stat:nth-child(2){background:#b64f49}.dashboard-stat:nth-child(3){background:#357899}.dashboard-stat:nth-child(4){background:#70802f}.dashboard-stat strong{font-family:"Black Han Sans";font-size:clamp(3.5rem,7vw,6rem);line-height:.8}.dashboard-stat span{margin-top:1rem;font-weight:700}.tech-map{display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem;margin-top:1.5rem;padding:2rem;border:3px solid var(--paper);background:#142136}.tech-map h3{font-size:2rem}.tech-cloud{display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:.7rem}.tech-cloud span{display:inline-block;padding:.55rem .8rem;border:2px solid var(--paper);background:var(--lime);color:#17263d;font-weight:700;transform:rotate(var(--tilt,0deg))}.tech-cloud span:nth-child(3n){background:var(--pink)}.tech-cloud span:nth-child(3n+1){background:var(--yellow)}
.cover-visual{background-size:cover!important;background-position:center!important}.cover-visual::before,.cover-visual::after{display:none}.draft-badge,.featured-badge{position:absolute;z-index:4;top:16px;padding:.3rem .55rem;border:2px solid var(--ink);font-weight:700}.draft-badge{left:16px;background:var(--card)}.featured-badge{right:16px;background:var(--yellow)}.card-admin-actions{display:flex;gap:.4rem;margin-left:.5rem}.edit-project,.move-project{border:2px solid var(--ink);background:var(--card);cursor:pointer;font-weight:700;padding:.3rem .5rem}.empty-state{grid-column:1/-1;padding:3rem;text-align:center;border:2px dashed var(--ink);font-weight:700}

.favorites { background: var(--lime); border-bottom: var(--line); }
.favorite-track { display:grid; grid-template-columns:repeat(4,1fr); border:var(--line); box-shadow:var(--shadow); }.favorite-track article{min-height:290px;padding:2rem;background:var(--card);border-right:2px solid var(--ink);display:flex;flex-direction:column}.favorite-track article:last-child{border-right:0}.favorite-track article:nth-child(even){background:#ffe88b}.doodle{font-size:4rem;filter:drop-shadow(4px 4px 0 rgba(23,38,61,.2));margin-bottom:auto}.favorite-track small{font-weight:700;color:var(--coral);letter-spacing:.12em}.favorite-track h3{font-size:1.45rem;margin:.5rem 0}.favorite-track p{margin:0;line-height:1.5}

.log { border-bottom:var(--line); }.log-list{border-top:var(--line)}.log-item{display:grid;grid-template-columns:130px 50px 1fr 50px;align-items:start;gap:1rem;padding:2rem .5rem;border-bottom:2px solid var(--ink);transition:background .2s}.log-item:hover{background:var(--yellow)}.log-item time{font-weight:700}.log-icon{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--coral)}.log-type{font-size:.75rem;font-weight:700;color:var(--coral);letter-spacing:.08em}.log-item h3{font-size:1.5rem;margin:.5rem 0}.log-item p{margin:0;line-height:1.6}.log-item button{width:42px;height:42px;border:2px solid var(--ink);background:var(--card);font-size:1.5rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.log-heading{display:flex;align-items:end;justify-content:space-between}.log-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:2rem;padding:2rem;background:var(--yellow);border:var(--line);box-shadow:var(--shadow)}.log-form[hidden]{display:none}.log-form label{display:grid;gap:.4rem;font-weight:700}.log-form input,.log-form textarea{width:100%;border:2px solid var(--ink);background:var(--card);color:var(--ink);padding:.75rem}.log-admin{display:flex;gap:.4rem}.log-admin button{font-size:.8rem;width:auto;height:auto;padding:.4rem}.log-item.draft{opacity:.72}.log-item.draft::after{content:"초안";font-weight:700;background:var(--card);border:2px solid var(--ink);padding:.2rem .4rem}
.cta { position:relative; margin:7vw; padding:5vw; background:var(--blue); border:var(--line); box-shadow:12px 12px 0 var(--ink); display:flex; justify-content:space-between; align-items:center; overflow:hidden; }.cta h2{font-size:clamp(2.5rem,5vw,5rem);line-height:1;margin:0}.cta p{font-weight:700}.idea-button{z-index:2;min-width:180px;padding:1rem;border:var(--line);background:var(--coral);font-family:"Black Han Sans";font-size:1.2rem;box-shadow:6px 6px 0 var(--ink);cursor:pointer}.idea-button:hover span{display:inline-block;animation:bob .5s infinite}.cta-star{position:absolute;right:30%;bottom:-50px;font-size:12rem;color:var(--yellow);-webkit-text-stroke:3px var(--ink);transform:rotate(15deg)}
footer{display:flex;align-items:center;gap:2rem;padding:2rem 7vw;background:var(--ink);color:white}footer p{margin:0}footer p:nth-last-child(2){margin-left:auto}
.toast{position:fixed;z-index:200;left:50%;bottom:-100px;transform:translateX(-50%);background:var(--ink);color:white;border:2px solid white;padding:.9rem 1.2rem;box-shadow:5px 5px 0 var(--coral);transition:bottom .25s}.toast.show{bottom:28px}
.auth-dialog{width:min(520px,calc(100vw - 2rem));color:var(--ink);background:var(--yellow);border:var(--line);padding:2.5rem;box-shadow:12px 12px 0 var(--ink);overflow:visible}.auth-dialog::backdrop{background:rgba(8,14,25,.7);backdrop-filter:blur(5px)}.auth-dialog h2{font-size:clamp(2rem,5vw,3.3rem);line-height:1;margin:.5rem 0 1rem}.auth-dialog>p:not(.section-number){line-height:1.6}.dialog-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:2px solid var(--ink);background:var(--card);font-size:1.5rem;cursor:pointer}.auth-dialog .form-sticker{right:auto;left:35px;top:-20px}.auth-dialog form{display:grid;gap:1rem;margin:1.5rem 0}.auth-dialog label{display:grid;gap:.4rem;font-weight:700}.auth-dialog input{border:2px solid var(--ink);padding:.8rem;background:var(--card);color:var(--ink)}.auth-dialog .save-project{width:100%;border:2px solid var(--ink);padding:.85rem;background:var(--ink);color:var(--paper);font-weight:700;cursor:pointer;box-shadow:4px 4px 0 var(--coral)}.auth-error{min-height:1.2rem;margin:0;color:#b42727;font-weight:700;font-size:.9rem}.auth-dialog>small{display:block;line-height:1.5}
.project-dialog{width:min(900px,calc(100vw - 2rem));max-height:90vh;color:var(--ink);background:var(--paper);border:var(--line);padding:0;box-shadow:12px 12px 0 var(--ink)}.project-dialog::backdrop{background:rgba(8,14,25,.75);backdrop-filter:blur(6px)}.detail-cover{height:330px;background:var(--blue);display:grid;place-items:center;background-size:cover;background-position:center;border-bottom:var(--line);font-size:7rem}.detail-body{padding:2.5rem}.detail-body h2{font-size:clamp(2.5rem,6vw,5rem);line-height:1;margin:.8rem 0 1rem}.detail-meta,.detail-tags{display:flex;flex-wrap:wrap;gap:.5rem}.detail-meta span,.detail-tags span{border:2px solid var(--ink);padding:.3rem .55rem;background:var(--card);font-weight:700}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}.detail-note{padding:1.2rem;border:2px solid var(--ink);background:var(--card)}.detail-note h3{font-size:1.2rem}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink)}.detail-actions{display:flex;gap:.7rem;margin-top:1.5rem}.detail-actions button,.detail-actions a{border:2px solid var(--ink);padding:.7rem 1rem;background:var(--lime);font-weight:700;cursor:pointer}
.idea-dialog{width:min(760px,calc(100vw - 2rem));max-height:90vh;color:var(--ink);background:var(--yellow);border:var(--line);padding:2.5rem;box-shadow:12px 12px 0 var(--ink)}.idea-dialog::backdrop{background:rgba(8,14,25,.75);backdrop-filter:blur(6px)}.idea-dialog h2{font-size:clamp(2.4rem,6vw,4.5rem);margin:.5rem 0}.idea-dialog>p{line-height:1.6}.idea-dialog form{display:grid;grid-template-columns:1fr 160px;gap:.7rem;margin:1.5rem 0;padding:1rem;border:2px solid var(--ink);background:var(--card)}.idea-dialog form input,.idea-dialog form textarea,.idea-dialog form select{border:2px solid var(--ink);padding:.7rem;background:var(--paper);color:var(--ink)}.idea-dialog form input,.idea-dialog form textarea{grid-column:1}.idea-dialog form select,.idea-dialog form button{grid-column:2}.idea-dialog form textarea{grid-row:2/4}.idea-list{display:grid;gap:.7rem}.idea-item{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:start;padding:1rem;border:2px solid var(--ink);background:var(--card)}.idea-item.done{opacity:.55}.idea-item.done h3{text-decoration:line-through}.idea-priority{padding:.25rem .45rem;border:2px solid var(--ink);background:var(--coral);font-size:.75rem;font-weight:700}.idea-item h3{margin:0 0 .3rem}.idea-item p{margin:0;line-height:1.5}.idea-actions{display:flex;gap:.35rem}.idea-actions button{border:2px solid var(--ink);background:var(--paper);padding:.35rem;cursor:pointer}.network-status{position:fixed;z-index:150;left:14px;bottom:14px;padding:.4rem .65rem;border:2px solid var(--ink);background:var(--lime);font-size:.75rem;font-weight:700;box-shadow:3px 3px 0 var(--ink)}.network-status.offline{background:var(--coral)}.back-to-top{position:fixed;z-index:140;right:18px;bottom:18px;width:48px;height:48px;border:2px solid var(--ink);background:var(--yellow);font-size:1.4rem;font-weight:700;box-shadow:4px 4px 0 var(--ink);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:.2s}.back-to-top.visible{opacity:1;pointer-events:auto;transform:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}

body.dark { --ink:#edf3db; --paper:#142136; --card:#1e3049; --line:3px solid var(--ink); --shadow:7px 7px 0 #080e19; }.dark .about{background:#582f4b}.dark .favorites{background:#57703a}.dark .theme-button,.dark .menu-button{background:#1e3049}.dark .project-body .tags span{background:#142136}.dark .screen{border-color:#080e19}.dark .about-card.quote{background:#0a1220}.dark .hero::before{opacity:.35}.dark h1 span{-webkit-text-stroke-color:#080e19;text-shadow:5px 5px 0 #080e19}

@keyframes pulse{50%{transform:scale(.7);opacity:.6}}@keyframes blink{48%,52%{transform:scaleY(.1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-10px)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width: 900px){.site-header{padding:0 4vw;gap:.75rem}.menu-button{display:block}.theme-button{margin-left:0}.install-button{display:none!important}.nav{display:none;position:absolute;top:76px;left:0;right:0;padding:1.5rem 4vw;background:var(--paper);border-bottom:var(--line);flex-direction:column}.nav.open{display:flex}.hero{grid-template-columns:1fr;padding-top:120px}.hero-art{min-height:470px}.about-grid{grid-template-columns:1fr 1fr}.about-card.big{grid-column:span 2}.about-card.quote{grid-column:span 2}.project-form-panel{grid-template-columns:1fr}.project-tools{flex-wrap:wrap}.search-box{max-width:none;flex-basis:100%}.backup-button{margin-left:0}.project-grid{grid-template-columns:1fr}.project-card{display:grid;grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr 1fr}.tech-map{grid-template-columns:1fr}.favorite-track{grid-template-columns:1fr 1fr}.favorite-track article:nth-child(2){border-right:0}.favorite-track article{border-bottom:2px solid var(--ink)}.favorite-track article:nth-last-child(-n+2){border-bottom:0}.log-form{grid-template-columns:1fr 1fr}.cta{align-items:flex-start;flex-direction:column;gap:2rem}footer{flex-wrap:wrap}footer p:nth-last-child(2){margin-left:0}}
@media (max-width: 600px){.theme-label{display:none}.auth-button{font-size:.72rem;padding:.45rem}.logo{font-size:.95rem}.logo-spark{width:29px}.hero{padding-inline:5vw}.hero-art{min-height:400px}.machine{width:280px}.screen{min-height:180px}.orbit-one{width:350px;height:350px}.orbit-two{width:400px}.section{padding:80px 5vw}.section-heading.split{display:block}.section-heading.split>p{margin-top:1rem}.about-grid{display:block}.about-card{margin-bottom:1.3rem}.connection-status{width:100%;margin:0}.sort-box{width:100%}.backup-button{width:100%}.add-project-button{width:100%;margin:0}.project-form-panel{padding:1.5rem}.form-sticker{right:10px}#project-form{grid-template-columns:1fr}#project-form label{grid-column:1}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.project-card{display:block}.project-visual{height:260px}.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-stat{min-height:150px}.tech-map{padding:1.3rem}.favorite-track{display:block}.favorite-track article{border-right:0;border-bottom:2px solid var(--ink)!important}.favorite-track article:last-child{border-bottom:0!important}.log-heading{display:block}.log-heading button{margin-top:1rem}.log-form{grid-template-columns:1fr}.log-form>*{grid-column:1}.log-item{grid-template-columns:85px 1fr 35px}.log-icon{display:none}.log-item button{width:34px;height:34px}.log-item p{display:none}.detail-cover{height:220px}.detail-body{padding:1.4rem}.detail-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.idea-dialog{padding:1.5rem}.idea-dialog form{display:block}.idea-dialog form>*{width:100%;margin-bottom:.6rem}.idea-item{grid-template-columns:1fr}.cta{margin:5vw;padding:2rem 1.4rem}.cta-star{right:-20px;opacity:.35}footer{display:block}footer>*{margin-bottom:1rem!important}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Visitor Lab: playful participation without free-text or personal data */
.community{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}.community::before{content:"✦";position:absolute;right:-3vw;top:-7rem;font-family:"Black Han Sans";font-size:24rem;line-height:1;color:rgba(255,216,78,.1);transform:rotate(12deg)}.community .section-number{color:var(--yellow)}.visitor-lab-grid{position:relative;display:grid;grid-template-columns:1.08fr 1fr .92fr;gap:1.2rem}.visitor-lab-grid>article{min-height:430px;padding:2rem;border:2px solid var(--paper);box-shadow:8px 8px 0 var(--coral);color:var(--ink)}.visitor-lab-grid h3{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1;margin:.6rem 0 1.4rem}.idea-generator-card{position:relative;background:var(--yellow);transform:rotate(-1deg)}.poll-card{background:var(--blue);transform:translateY(1.8rem)}.passport-card{background:var(--paper);transform:rotate(1deg)}.lab-tape{position:absolute;right:1.1rem;top:-.8rem;padding:.35rem 1.2rem;border:2px solid var(--ink);background:var(--coral);font-weight:800;transform:rotate(4deg)}.idea-machine-output{display:grid;place-items:center;min-height:145px;padding:1.2rem;border:3px dashed var(--ink);background:var(--paper);font-family:"Black Han Sans";font-size:1.35rem;line-height:1.45;text-align:center}.lab-action,.random-project-button{width:100%;margin-top:1rem;padding:.9rem;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:800;box-shadow:4px 4px 0 var(--coral)}.lab-action:active,.random-project-button:active{transform:translate(4px,4px);box-shadow:none}.poll-options{display:grid;gap:.7rem}.poll-option{position:relative;width:100%;min-height:54px;padding:.8rem 1rem;border:2px solid var(--ink);background:var(--paper);text-align:left;overflow:hidden}.poll-option i{position:absolute;inset:0 auto 0 0;width:var(--result,0%);background:var(--yellow);opacity:.75;transition:width .45s}.poll-option span,.poll-option strong{position:relative;z-index:1}.poll-option strong{float:right}.poll-option.selected{box-shadow:4px 4px 0 var(--ink)}.poll-option:disabled{cursor:default;color:var(--ink)}.poll-note{margin:1rem 0 0;font-size:.82rem;font-weight:700}.stamp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.4rem 0}.stamp-row span{display:grid;place-items:center;align-content:center;aspect-ratio:1;border:2px dashed var(--ink);border-radius:50%;font-size:.7rem;text-align:center;transform:rotate(-6deg);opacity:.42}.stamp-row span:nth-child(2){transform:rotate(5deg)}.stamp-row span:nth-child(3){transform:rotate(-2deg)}.stamp-row b{display:block;font-family:"Black Han Sans";font-size:1.7rem}.stamp-row span.earned{border-style:solid;background:var(--lime);opacity:1;animation:stamp-in .35s cubic-bezier(.2,1.5,.5,1)}.passport-message{display:block;min-height:48px;line-height:1.5}.next-update{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;margin-bottom:1.2rem;padding:1rem 1.2rem;border:var(--line);background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}.next-update span{padding:.25rem .5rem;background:var(--ink);color:white;font-size:.72rem;font-weight:800}.next-update a{color:inherit;font-weight:800}.reaction-panel{margin-top:1.5rem;padding:1rem;border:2px dashed var(--ink);background:var(--paper)}.reaction-panel h3{margin:0 0 .7rem}.reaction-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.reaction-buttons button{padding:.55rem .7rem;border:2px solid var(--ink);background:white;font-weight:800}.reaction-buttons button.selected{background:var(--lime);box-shadow:3px 3px 0 var(--ink)}.related-project{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:1rem;border:2px solid var(--ink);background:var(--blue)}.related-project button{border:2px solid var(--ink);background:var(--paper);padding:.55rem .8rem;font-weight:800}@keyframes stamp-in{from{transform:scale(1.7) rotate(18deg);opacity:0}}
.project-card.visitor-picked{animation:visitor-pick .8s ease 2;outline:7px solid var(--coral);outline-offset:6px}@keyframes visitor-pick{50%{transform:translateY(-12px) rotate(-1deg)}}
@media(max-width:900px){.visitor-lab-grid{grid-template-columns:1fr 1fr}.passport-card{grid-column:1/-1;min-height:0}.stamp-row{max-width:380px}.poll-card{transform:none}}
@media(max-width:600px){.visitor-lab-grid{display:block}.visitor-lab-grid>article{min-height:0;margin-bottom:1.2rem;padding:1.35rem;transform:none}.next-update{grid-template-columns:1fr}.reaction-buttons button{flex:1}.related-project{align-items:flex-start;flex-direction:column}}

/* Mobile polish: thumb-friendly controls, readable content, safe-area spacing */
button,a,input,select,textarea{touch-action:manipulation}
@media(hover:none){.project-card:hover{transform:none}.idea-button:hover span{animation:none}}
@media(max-width:600px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .site-header{min-height:68px;height:auto;padding-top:env(safe-area-inset-top);gap:.45rem}
  .site-header .logo{white-space:nowrap}.menu-button,.theme-button,.auth-button{min-width:44px;min-height:44px}
  .theme-button{padding:.45rem}.auth-button{width:44px;padding:0;font-size:0}.auth-button::after{content:"⚙";font-size:1.05rem}.auth-button.logged-in::after{content:"✓"}
  .nav{top:calc(68px + env(safe-area-inset-top));max-height:calc(100dvh - 68px);overflow:auto;z-index:20}.nav a{display:flex;align-items:center;min-height:48px}
  input,select,textarea{font-size:16px!important}
  .hero{min-height:auto;padding-top:110px}.hero h1{font-size:clamp(3.1rem,16vw,5.2rem)}.hero-art{min-height:350px}.machine{width:min(270px,78vw)}
  .section{padding-block:64px}.section-heading{margin-bottom:2rem}.section-heading h2{font-size:clamp(2.5rem,13vw,4rem)}
  .project-tools{gap:.65rem}.search-box input,.sort-box select{min-height:48px}.project-visual{height:225px}.project-body{padding:1.2rem}.project-body p{min-height:0}
  .project-link,.filter,.lab-action,.random-project-button,.poll-option,.reaction-buttons button,.detail-actions a,.detail-actions button{min-height:48px}
  .dashboard-grid{grid-template-columns:1fr 1fr;gap:.65rem}.dashboard-stat{min-height:130px;padding:1rem}.dashboard-stat strong{font-size:3rem}
  .log-item{grid-template-columns:68px 1fr;gap:.75rem;padding:1.35rem .2rem}.log-item p{display:block;font-size:.92rem}.log-item>button{grid-column:2;width:44px;height:44px;margin-top:.3rem}.log-item time{font-size:.78rem}
  .project-dialog,.auth-dialog,.idea-dialog{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem);box-shadow:5px 5px 0 var(--ink)}.detail-cover{height:190px}.detail-body{padding:1.15rem}.detail-actions{flex-direction:column}.detail-actions>*{width:100%;text-align:center}.dialog-close{width:44px;height:44px}
  .gallery img{content-visibility:auto}.stamp-row{gap:.35rem}.stamp-row span{font-size:.64rem}.visitor-lab-grid>article{box-shadow:5px 5px 0 var(--coral)}
  .network-status{left:8px;bottom:8px}.back-to-top{right:10px;bottom:10px;width:46px;height:46px}
}
@media(max-width:360px){.site-header .logo{font-size:.82rem}.logo-spark{display:none}.menu-button{padding:.35rem}.hero h1{font-size:2.9rem}.dashboard-grid{grid-template-columns:1fr}.stamp-row span{font-size:.58rem}.stamp-row b{font-size:1.35rem}}

/* Growth themes: one content system, three ages */
.favorite-track{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
html[data-site-theme="studio"]{--ink:#eef6ff;--paper:#0b1020;--card:#141d31;--lime:#b8ff3d;--coral:#ff5c7a;--blue:#40c9ff;--pink:#ab7cff;--yellow:#ffd84d;--line:2px solid var(--ink);--shadow:0 0 0 1px rgba(238,246,255,.16),0 18px 45px rgba(0,0,0,.32);color-scheme:dark}
html[data-site-theme="studio"] .grain{opacity:.03}html[data-site-theme="studio"] .theme-button{display:none}html[data-site-theme="studio"] .site-header{background:rgba(11,16,32,.9);border-color:rgba(238,246,255,.25)}html[data-site-theme="studio"] .logo-spark{border-radius:5px;transform:rotate(45deg);color:#0b1020}html[data-site-theme="studio"] .hero{background:radial-gradient(circle at 78% 30%,rgba(64,201,255,.14),transparent 32%),linear-gradient(135deg,#0b1020,#101a31)}html[data-site-theme="studio"] .hero::before{background:transparent;border:1px solid rgba(184,255,61,.35);box-shadow:0 0 80px rgba(184,255,61,.14)}html[data-site-theme="studio"] h1 span{-webkit-text-stroke:1px var(--ink);text-shadow:5px 5px 0 #35476b}html[data-site-theme="studio"] .machine,html[data-site-theme="studio"] .project-card,html[data-site-theme="studio"] .about-card,html[data-site-theme="studio"] .favorite-track,html[data-site-theme="studio"] .visitor-lab-grid>article{border-radius:14px;transform:none}html[data-site-theme="studio"] .dashboard,html[data-site-theme="studio"] .community{background:#070b14;color:#eef6ff}html[data-site-theme="studio"] .about{background:#10182a}html[data-site-theme="studio"] .favorites{background:#11192b}html[data-site-theme="studio"] .tags span,html[data-site-theme="studio"] .detail-meta span,html[data-site-theme="studio"] .detail-tags span{background:#0b1020}html[data-site-theme="studio"] .project-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--blue),0 22px 55px rgba(0,0,0,.42)}

html[data-site-theme="portfolio"]{--ink:#20251f;--paper:#f2efe7;--card:#fbfaf5;--lime:#b7c8a6;--coral:#9f5f4d;--blue:#9bb1b0;--pink:#c7b5ae;--yellow:#d8c99b;--line:1px solid #20251f;--shadow:0 10px 30px rgba(32,37,31,.09);color-scheme:light}
html[data-site-theme="portfolio"] .grain,html[data-site-theme="portfolio"] .theme-button{display:none}html[data-site-theme="portfolio"] body{font-family:"Gowun Dodum",sans-serif}html[data-site-theme="portfolio"] h1,html[data-site-theme="portfolio"] h2,html[data-site-theme="portfolio"] h3,html[data-site-theme="portfolio"] .logo{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.035em}html[data-site-theme="portfolio"] .site-header{background:rgba(242,239,231,.94);border-color:rgba(32,37,31,.3)}html[data-site-theme="portfolio"] .logo-spark{border:0;border-radius:50%;background:var(--ink);color:var(--paper);transform:none}html[data-site-theme="portfolio"] .hero{min-height:88vh;background:linear-gradient(90deg,#f2efe7 0 66%,#e6e0d4 66%)}html[data-site-theme="portfolio"] .hero::before,html[data-site-theme="portfolio"] .orbit,html[data-site-theme="portfolio"] .floating-note{display:none}html[data-site-theme="portfolio"] .hero h1{font-size:clamp(4rem,8vw,8rem);letter-spacing:-.07em}html[data-site-theme="portfolio"] h1 span{-webkit-text-stroke:0;color:var(--ink);text-shadow:none}html[data-site-theme="portfolio"] .machine{transform:none;border-radius:2px;background:var(--card);box-shadow:var(--shadow)}html[data-site-theme="portfolio"] .screen{background:var(--paper)}html[data-site-theme="portfolio"] .about-card,html[data-site-theme="portfolio"] .project-card,html[data-site-theme="portfolio"] .visitor-lab-grid>article,html[data-site-theme="portfolio"] .favorite-track,html[data-site-theme="portfolio"] .cta{transform:none;border-radius:0;box-shadow:var(--shadow)}html[data-site-theme="portfolio"] .project-card:hover{transform:translateY(-3px)}html[data-site-theme="portfolio"] .dashboard,html[data-site-theme="portfolio"] .community{background:#20251f;color:#f2efe7}html[data-site-theme="portfolio"] .dashboard-stat{background:transparent!important;border:1px solid #f2efe7}html[data-site-theme="portfolio"] .about,html[data-site-theme="portfolio"] .favorites{background:#e8e3d9}html[data-site-theme="portfolio"] .section-number{letter-spacing:.18em;text-transform:uppercase}html[data-site-theme="portfolio"] .marquee{animation:none;background:#20251f;color:#f2efe7}html[data-site-theme="portfolio"] .visitor-lab-grid>article{background:#f2efe7!important}html[data-site-theme="portfolio"] .lab-tape,html[data-site-theme="portfolio"] .cta-star{display:none}
@media(max-width:600px){html[data-site-theme="portfolio"] .hero{background:var(--paper)}html[data-site-theme="portfolio"] .hero h1{font-size:3.5rem}}

/* Mobile resilience for editable content and narrow phones */
img,video,svg{max-width:100%}
main,section,article,.hero-copy,.project-body{min-width:0}
h1,h2,h3,p,a,button{overflow-wrap:anywhere}
@media(max-width:600px){
  .site-header{padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
  .site-header .logo{flex:1;min-width:0;max-width:none;min-height:44px}
  .site-header .logo [data-site-name]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-button,.theme-button,.auth-button{flex:0 0 44px;padding:.35rem}
  .menu-button{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;font-size:.85rem;padding-inline:.2rem}
  .hero::before{display:none}
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
  .filter{width:100%;padding-inline:.45rem}
  .search-box,.sort-box{width:100%;min-width:0}
  .sort-box{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .favorite-track{grid-template-columns:1fr}
  .favorite-track article{min-height:230px;padding:1.4rem}
  .next-update a,footer a{display:inline-flex;align-items:center;min-height:44px}
  .auth-dialog{padding:1.4rem}
  .cta,.panel,.project-form-panel{max-width:100%}
}
@media(max-width:360px){
  .site-header{gap:.3rem}
  .menu-button{font-size:.8rem}
  .hero h1{font-size:clamp(2.55rem,15vw,3rem)}
  .section-heading h2{font-size:2.35rem}
}