@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-dark: #000000;--bg-card: rgba(20, 20, 20, .4);--bg-card-hover: rgba(35, 35, 35, .6);--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--text-main: #f0f0f0;--text-muted: #999999;--accent: #ffffff;--accent-2: #aaaaaa;--nav-h: 72px;--footer-h: 56px;--space: clamp(16px, 4vw, 40px)}*{box-sizing:border-box}::selection{background:#333;color:#fff}body{margin:0;min-height:100vh;background:var(--bg-dark);color:var(--text-main);font-family:Outfit,Pretendard,sans-serif;overflow-x:hidden}a,button{color:inherit;text-decoration:none;border:none;background:none;cursor:pointer}.flex-center{display:flex;align-items:center;justify-content:center;gap:6px}.flex-col{display:flex;flex-direction:column}.page-backdrop{position:fixed;inset:0;z-index:-1;background-image:url(/assets/home-background-dark.jpg);background-size:cover;background-position:center;filter:blur(28px) brightness(.85);transform:scale(1.1)}.page{min-height:calc(100vh - var(--nav-h));padding-bottom:var(--footer-h);display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 var(--space);background:#00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.topbar__identity{display:flex;align-items:center;gap:16px}.topbar__divider{width:1px;height:24px;background:var(--border);transform:rotate(15deg)}.topbar__back{font-size:.9rem;font-weight:500;color:var(--text-muted);display:flex;align-items:center;gap:6px;transition:.2s}.topbar__back:hover{color:var(--text-main)}.mark{display:flex;align-items:center;gap:12px}.mark__avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}.mark__avatar img{width:100%;height:100%;object-fit:cover}.mark__word{font-weight:700;font-size:1.2rem;letter-spacing:-.02em}.topbar nav{display:flex;gap:24px}.topbar nav a{font-size:.85rem;font-weight:500;color:var(--text-muted);transition:.2s}.topbar nav a:hover{color:var(--text-main)}.bento-container{width:min(100%,1200px);margin:0 auto;padding:40px var(--space) 80px}.bento-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:24px}.bento-box,.settings-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:32px;position:relative;overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column}.bento-nav--settings:hover,.bento-nav--contact:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.bento-hero{grid-column:span 3;justify-content:center;display:flex;flex-direction:column}.bento-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;line-height:1.1;margin:0 0 16px;letter-spacing:-.03em}.bento-hero p{font-size:1.2rem;color:var(--text-muted);max-width:500px;line-height:1.6;margin:0}.bento-image{grid-column:span 1;padding:0;position:relative;min-height:0}.bento-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.bento-header{display:flex;align-items:center;gap:10px;color:var(--accent-2);margin-bottom:24px;font-weight:600}.bento-about{grid-column:span 2}.bento-about p{font-size:1.1rem;line-height:1.6;color:var(--text-main);margin:0}.bento-nav{grid-column:span 1;justify-content:space-between}.bento-nav h3{margin:0 0 8px;font-size:1.3rem}.bento-nav p{margin:0;font-size:.9rem;color:var(--text-muted)}.bento-nav-icon,.bento-nav--settings .bento-nav-icon,.bento-nav--contact .bento-nav-icon{color:var(--accent)}.bento-arrow{position:absolute;top:24px;right:24px;color:var(--text-muted);transition:.3s}.bento-nav--settings:hover .bento-arrow,.bento-nav--contact:hover .bento-arrow{color:var(--text-main);transform:translate(4px,-4px)}.bento-gear{grid-column:span 4;grid-row:auto}.gear-bento-list{display:flex;flex-direction:column;gap:16px}.gear-bento-item{display:flex;flex-direction:column;padding-bottom:16px;border-bottom:1px solid var(--border)}.gear-bento-item:last-child{border-bottom:none;padding-bottom:0}.gear-bento-category{font-size:.75rem;font-weight:600;color:var(--accent-2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.gear-bento-name{margin:0 0 4px;font-size:1.2rem;font-weight:600}.gear-bento-desc{margin:0;font-size:.95rem;color:var(--text-muted);line-height:1.5;padding-left:14px;position:relative}.gear-bento-desc:before{content:"•";position:absolute;left:2px;color:var(--border-hover)}.list-layout{width:min(100%,1000px);margin:0 auto;padding:80px var(--space) 120px}.list-header{text-align:center;margin-bottom:64px}.list-icon-wrapper{display:inline-flex;padding:16px;border-radius:20px;background:var(--bg-card);border:1px solid var(--border);color:var(--accent);margin-bottom:24px}.list-header h1{font-size:3rem;margin:0 0 16px;letter-spacing:-.04em}.list-header p{font-size:1.1rem;color:var(--text-muted);margin:0}.settings-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.settings-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.item-card__category{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);font-weight:600}.item-card__index{display:flex;align-items:center;gap:4px;font-size:.9rem;color:var(--text-muted);font-weight:500}.settings-card h2{margin:8px 0 0;font-size:1.8rem}.settings-card__note{margin:0;color:var(--text-muted);line-height:1.6;font-size:1rem}.settings-card__values{margin-top:32px;background:#0000004d;border-radius:16px;overflow:hidden}.settings-category-title{margin:0;padding:24px 24px 12px;font-size:1rem;color:var(--accent);background:#ffffff05;border-bottom:1px solid var(--border)}.settings-category-title:first-child{border-top:none}.settings-value-row{display:flex;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border)}.settings-value-row:last-child{border-bottom:none}.settings-label{color:var(--text-muted);font-size:.95rem;flex-shrink:0;margin-right:16px}.settings-val{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}.contact-list{width:min(100%,640px);margin:0 auto;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;overflow:hidden}.contact-row{display:grid;grid-template-columns:160px minmax(0,1fr) 24px;align-items:center;gap:16px;width:100%;min-height:72px;padding:0 28px;font:inherit;text-align:left;border-bottom:1px solid var(--border)}.contact-list>div:last-child .contact-row{border-bottom:none}.contact-row__label{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}.contact-row__value{font-size:1.05rem;font-weight:500;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-row__action{display:flex;justify-content:flex-end;color:var(--text-muted);transition:color .2s}.contact-row:hover .contact-row__action{color:var(--text-main)}.page-footer{position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--footer-h);display:flex;justify-content:space-between;align-items:center;padding:0 var(--space);background:#00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);color:var(--text-muted);font-size:.85rem;font-weight:500}.page-footer button{font:inherit;color:inherit;transition:color .2s}.page-footer button:hover{color:var(--text-main)}@media(max-width:1024px){.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-hero{grid-column:span 2}.bento-image{grid-column:span 2;grid-row:span 1;aspect-ratio:2/1}.bento-gear{grid-column:span 2}.settings-list-grid{grid-template-columns:1fr}}@media(max-width:640px){.bento-grid{grid-template-columns:minmax(0,1fr)}.bento-hero,.bento-image,.bento-about,.bento-nav,.bento-gear{grid-column:span 1;grid-row:auto}.bento-hero{padding:40px 24px}.bento-hero h1{font-size:2.2rem}.bento-image{aspect-ratio:16/9}.bento-nav{min-height:200px}.settings-value-row{flex-direction:column;gap:8px;text-align:left}.settings-val{text-align:left}.contact-row{grid-template-columns:96px minmax(0,1fr) 20px;padding:0 20px}.topbar nav a{display:none}.topbar nav a.flex-center{display:flex}}
