/* 꿍꿍이 메인. 터미널 작업 화면 하나로 본다: 위 탭 막대(tmux), 아래 상태줄(vim), 왼쪽 줄 번호가 테두리이고 안쪽을 칸으로 나눈다.
   PC는 FHD 배치 하나이고, 더 넓은 화면은 같은 배치를 가운데(최대 1840px)에 둔다. 1100 미만은 한 줄로 쌓는다. */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t3)/1.75 var(--ko);word-break:keep-all;-webkit-text-size-adjust:100%;padding-bottom:calc(2.4rem + env(safe-area-inset-bottom,0px))}
button{font:inherit}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 탭 막대와 상태줄 */
.tmux,.vim{display:flex;align-items:center;white-space:nowrap;font:400 var(--t5)/1 var(--mono);background:var(--bar);color:var(--mid);min-height:2.3em}
.tmux{position:sticky;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tmux .ses{flex:none;background:var(--acc);color:var(--bg);font-weight:600;padding:.65em .8em}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;color:var(--mid);text-decoration:none;padding:.65em .7em}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--fg);background:var(--line)}
.tabs a:focus-visible,.cp:focus-visible,.linkbtn:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.tmux .r,.vim .r{margin-left:auto;padding:0 1em;color:var(--dim);flex:none}
.tmux .r{color:var(--fg)}
.vim{position:fixed;left:0;right:0;bottom:0;z-index:5;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);overflow:hidden}
.vim .mode{background:var(--fg);color:var(--bg);font-weight:600;padding:.65em .8em}
.vim .f{padding:0 1em;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.vim .sec{color:var(--acc)}

/* 줄 번호와 칸 */
.mid{position:relative;padding-left:3.6em;font-size:var(--t5)}
.gut{position:absolute;left:0;top:0;bottom:0;width:3.6em;margin:0;padding:1.6em .7em 0 0;text-align:right;color:#3c3e42;font:400 var(--t5)/1.75 var(--mono);overflow:hidden;user-select:none;border-right:1px solid var(--line)}
.grid{width:100%;max-width:1840px;margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:30px 22px;padding:30px 28px 40px;font-size:var(--t3)}
.hero,#projects{grid-column:1/-1}
[data-sec]{scroll-margin-top:calc(2.3em + 20px)}
@media (max-width:1099px){
  .mid{padding-left:0}.gut{display:none}
  .grid{grid-template-columns:minmax(0,1fr);padding:24px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));gap:28px}
  .pjg{grid-template-columns:minmax(0,1fr)!important}
}

/* 첫 화면: 오프닝이 끝날 때의 로고와 대표 문구 */
.hero{display:grid;justify-items:center;gap:12px;padding:14px 0 6px;text-align:center}
.logobox{container-type:inline-size;width:min(100%,768px)}
.logo{margin:0;font:400 8px/1.2 "IBM Plex Mono",ui-monospace,monospace;font-size:min(8px,calc(100cqi / 160 / .6));white-space:pre;overflow:hidden;text-align:left}
.la{color:var(--acc)}.lf{color:var(--dim);opacity:.6}
.tag{margin:0;font:700 var(--t1)/1.35 var(--ko);letter-spacing:-.02em;text-wrap:balance}
.tag b{color:var(--emp);font-weight:700}
.sub{margin:0;color:var(--dim);font-size:var(--t3)}
.cur{display:inline-block;width:.55em;height:1em;background:var(--emp);vertical-align:-.12em;margin-left:.35em;animation:kk-blink 1.05s steps(1) infinite}
@keyframes kk-blink{50%{opacity:0}}

/* 칸 */
.pane{position:relative;border:1px solid var(--line2);border-radius:3px;padding:1.5em 1.2em 1.1em;display:grid;gap:.7em;align-content:start;min-width:0;transition:border-color .15s}
.pane:hover{border-color:var(--emp)}
.pt{position:absolute;top:-.85em;left:.8em;padding:0 .45em;background:var(--bg);font:500 var(--t5)/1.6 var(--mono);color:var(--dim)}
.pane:hover .pt{color:var(--fg)}
.ch{display:flex;gap:1em;align-items:center;min-width:0}
.ico{margin:0;flex:none;font:400 var(--ti)/1.2 "IBM Plex Mono",ui-monospace,monospace;color:var(--dim);white-space:pre;transition:color .15s}
.ico b{font-weight:400;color:color-mix(in srgb,var(--acc) 50%,var(--dim))}
.pane:hover .ico{color:var(--ink)}
.pane:hover .ico b{color:var(--emp)}
.ttl{margin:0;font:700 var(--t3)/1.4 var(--ko);color:var(--fg)}
.cmd{margin:0;color:var(--dim);font:400 var(--t5) var(--mono)}
.cmd i{font-style:normal;color:var(--mid)}
.cmd b{font-weight:400;color:var(--acc)}
.pane p,.pane ol,.pane dl,.pane h3{margin:0}
.lead{font:700 var(--t2)/1.5 var(--ko);color:var(--fg)}
.lead em{font-style:normal;color:var(--emp)}
.txt{color:var(--ink)}
.dimtxt{color:var(--dim);font-size:var(--t4)}
.rules{list-style:none;padding:0;display:grid;gap:.15em}
.rules li{display:grid;grid-template-columns:2em minmax(0,1fr)}
.rules li span:first-child{color:var(--dim)}

/* 만든 것: 2열로 왼쪽부터 채운다 */
.pjg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pc{display:flex;gap:1em;align-items:center;border:1px solid var(--line);border-radius:3px;padding:.9em;min-width:0}
.img{flex:none;width:72px;height:72px;border:1px solid var(--line2);border-radius:14px;display:grid;place-items:center;font:700 var(--t4) var(--ko);color:var(--fg);background:var(--bar)}
.img img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.pci{display:grid;gap:.2em;min-width:0}
.pn{font:700 var(--t2)/1.4 var(--ko);color:var(--fg)}
.pd{font-size:var(--t4);color:var(--ink)}
.pm{display:flex;gap:1em;align-items:center;font:400 var(--t5) var(--mono);color:var(--dim)}
.st{border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:3px;padding:0 .45em;color:var(--acc)}
.pm a{color:var(--acc);text-underline-offset:3px}

/* 연락처 */
.ct{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5em 1em;font:400 var(--t3) var(--mono);align-items:center}
.ct .k{color:var(--dim);font-size:var(--t5)}
.ct .v{color:var(--fg);overflow-wrap:anywhere}
.cp{background:transparent;color:var(--dim);border:1px solid var(--line2);border-radius:4px;font:400 var(--t5) var(--ko);padding:.15em .7em;cursor:pointer;white-space:nowrap}
.cp:hover{color:var(--fg);border-color:var(--dim)}
.cp.ok{color:var(--acc);border-color:var(--acc)}
.ask{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;border:1px solid var(--line2);border-radius:3px;padding:.45em .8em}
.ask span{flex:1;min-width:12em;color:var(--ink)}

/* 꿍꿍이 정보 */
.info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3em 1.2em;font:400 var(--t4)/1.6 var(--ko);color:var(--mid)}
.info dt{color:var(--dim)}
.info dd{margin:0;overflow-wrap:anywhere}
.foot{font:400 var(--t5) var(--mono);color:var(--dim)}
.linkbtn{background:none;border:0;padding:0;color:var(--acc);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}

@media (prefers-reduced-motion:reduce){.cur{animation:none}.pane,.ico{transition:none}html{scroll-behavior:auto}}