html { color-scheme:light; background:#dce4e8; }
body.portal-body { margin:0; overflow:hidden; }
#seokbeom-portal { --water:#dce4e8; --ink:#414e53; --muted:#63747c; --accent:#9b4f3e; --edge:clamp(28px,5.2vw,80px); width:100%; height:100vh; height:100dvh; min-height:0; position:relative; overflow:hidden; isolation:isolate; color:var(--ink); background:var(--water); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; }
#seokbeom-portal * { box-sizing:border-box; }
#seokbeom-portal button,#seokbeom-portal a { -webkit-tap-highlight-color:transparent; }
#seokbeom-portal a { color:inherit; text-decoration:none; }
#seokbeom-portal button:focus-visible,#seokbeom-portal a:focus-visible { outline:1px solid var(--accent); outline-offset:6px; }
#seokbeom-portal .portal-signature { position:absolute; z-index:4; left:var(--edge); bottom:max(36px,env(safe-area-inset-bottom)); display:flex; white-space:pre; align-items:center; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; color:#53636c; font:400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.23em; transition:color .3s; }
#seokbeom-portal .portal-signature:hover { color:var(--accent); }
#seokbeom-portal .signature-surname { display:inline-block; width:0; opacity:0; overflow:hidden; transform:translateX(-5px); transition:opacity .42s ease,width .5s ease,transform .5s ease; }
#seokbeom-portal[data-menu="open"] .signature-surname { width:5.2em; opacity:1; transform:translateX(0); }
#seokbeom-portal[data-menu="open"] .portal-signature { color:var(--ink); }
#seokbeom-portal .portal-menu { position:absolute; z-index:3; left:var(--edge); bottom:116px; width:326px; max-width:calc(100% - var(--edge)*2); opacity:0; visibility:hidden; transform:translateY(9px); transition:opacity .4s ease,transform .5s ease,visibility 0s .5s; }
#seokbeom-portal[data-menu="open"] .portal-menu { opacity:1; visibility:visible; transform:translateY(0); transition:opacity .45s ease .04s,transform .5s ease,visibility 0s; }
#seokbeom-portal .portal-intro { margin:0 0 27px; font-size:1rem; line-height:1.95; letter-spacing:-.025em; word-break:keep-all; }
#seokbeom-portal .portal-about { display:inline-flex; align-items:center; min-height:44px; margin-bottom:27px; font-size:.875rem; line-height:1.5; letter-spacing:.19em; }
#seokbeom-portal .portal-about:hover { color:var(--accent); }
#seokbeom-portal .portal-projects h2 { margin:0 0 10px; color:var(--muted); font-size:.75rem; font-weight:400; line-height:1.5; letter-spacing:.19em; }
#seokbeom-portal .project-list { display:grid; gap:0; padding:0; margin:0; list-style:none; }
#seokbeom-portal .project-list li { min-width:0; opacity:0; transform:translateY(4px); transition:opacity .24s,transform .3s; }
#seokbeom-portal[data-menu="open"] .project-list li { opacity:1; transform:translateY(0); transition-delay:calc(.1s + var(--order,0)*.03s); }
#seokbeom-portal .project-list a,#seokbeom-portal .project-list button { display:inline-flex; align-items:center; gap:12px; min-height:36px; max-width:100%; padding:0; border:0; background:none; color:var(--ink); font:400 .9375rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align:left; letter-spacing:.015em; transition:color .2s ease,letter-spacing .3s ease; }
#seokbeom-portal .project-list a:hover,#seokbeom-portal .project-list button:hover { color:var(--accent); letter-spacing:.045em; }
#seokbeom-portal .project-pending { color:var(--muted); font-size:.75rem; opacity:0; transition:opacity .2s; }
#seokbeom-portal .project-list button:hover .project-pending,#seokbeom-portal .project-list button:focus-visible .project-pending { opacity:1; }
#seokbeom-portal .portal-status { position:absolute; margin:12px 0 0; color:var(--muted); font-size:.75rem; line-height:1.6; }
#seokbeom-portal .portal-status:empty { display:none; }
#seokbeom-portal .portal-veil { position:absolute; z-index:2; inset:0; width:min(550px,65%); pointer-events:none; opacity:0; background:linear-gradient(90deg,#dbe3e7 0%,#dbe3e7 70%,rgba(219,227,231,0) 100%); transition:opacity .55s; }
#seokbeom-portal[data-menu="open"] .portal-veil { opacity:1; }
#seokbeom-portal .portal-noscript { position:absolute; left:var(--edge); bottom:120px; font-size:1rem; }
@media(pointer:coarse) { #seokbeom-portal .project-list a,#seokbeom-portal .project-list button { min-height:44px; } }
@media(max-width:620px) {
  #seokbeom-portal { --edge:24px; }
  #seokbeom-portal .portal-signature { bottom:max(24px,env(safe-area-inset-bottom)); font-size:.8125rem; }
  #seokbeom-portal .portal-menu { top:max(30px,env(safe-area-inset-top)); bottom:auto; width:calc(100% - 48px); }
  #seokbeom-portal .portal-intro { margin-bottom:12px; font-size:1rem; line-height:1.9; }
  #seokbeom-portal .portal-about { margin-bottom:16px; }
  #seokbeom-portal .project-list { grid-template-columns:1fr 1fr; column-gap:12px; }
  #seokbeom-portal .project-list a,#seokbeom-portal .project-list button { font-size:.875rem; min-height:44px; }
  #seokbeom-portal .project-pending { display:none; }
  #seokbeom-portal .portal-veil { width:100%; height:var(--veil-height,390px); background:linear-gradient(180deg,#dbe3e7 0%,#dbe3e7 82%,rgba(219,227,231,0) 100%); }
}
@media(max-height:560px) and (min-width:621px) {
  #seokbeom-portal .portal-menu { bottom:96px; }
  #seokbeom-portal .portal-intro { margin-bottom:8px; }
  #seokbeom-portal .portal-about { margin-bottom:8px; }
  #seokbeom-portal .project-list { grid-template-columns:1fr 1fr; column-gap:14px; }
}
@media(prefers-reduced-motion:reduce) { #seokbeom-portal *,#seokbeom-portal *::before,#seokbeom-portal *::after { transition:none!important; } }
#seokbeom-portal[data-overflow="true"] .portal-menu { top:max(20px,env(safe-area-inset-top)); bottom:100px; max-height:calc(100% - 120px); overflow-y:auto; overscroll-behavior:contain; padding:6px 8px 24px 0; }
#seokbeom-portal[data-overflow="true"] .portal-status { position:static; }