/* iny-OS 나루터 공개 포폴 — 심플·가운데정렬·반응형. 브랜드(보라·나루터 배경) 기반. */
:root{
  --paper:#f7f5fc; --card:#ffffff; --ink:#241c3a; --muted:#65607a;
  --accent:#6d28d9; --accent2:#7c3aed; --accent-soft:#f0ebfe; --line:rgba(87,70,130,.12);
  --nav:rgba(247,245,252,.85); --emc:#5b21c4; --shadow:0 6px 24px rgba(60,40,120,.06);
}
[data-theme="dark"]{
  --paper:#0a0817; --card:rgba(26,20,42,.66); --ink:#f2effb; --muted:#b7afd0;
  --accent:#c1b3ff; --accent2:#b79bff; --accent-soft:rgba(124,92,191,.16); --line:rgba(205,193,255,.12);
  --nav:rgba(10,8,23,.74); --emc:#c1b3ff; --shadow:0 6px 26px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  line-height:1.66; word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased;}
[data-theme="dark"] body{
  background:
    radial-gradient(ellipse at 20% 8%, rgba(91,33,182,.28), transparent 55%),
    radial-gradient(ellipse at 82% 6%, rgba(60,60,190,.2), transparent 52%),
    linear-gradient(180deg,#090819 0%,#0c0a20 50%,#070512 100%);
  background-attachment:fixed;}
/* 은은히 반짝이는 별(다크만) — 유일한 움직임, 심플 유지 */
.starfield{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0}
[data-theme="dark"] .starfield{opacity:.45;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 22%,#fff,transparent),radial-gradient(1.1px 1.1px at 28% 64%,#dbeafe,transparent),
    radial-gradient(1px 1px at 44% 32%,#c4b5fd,transparent),radial-gradient(1.2px 1.2px at 62% 78%,#fff,transparent),
    radial-gradient(1px 1px at 74% 18%,#e0e7ff,transparent),radial-gradient(1.4px 1.4px at 88% 54%,#fff,transparent),
    radial-gradient(1px 1px at 8% 82%,#a5b4fc,transparent),radial-gradient(1px 1px at 54% 92%,#fff,transparent),
    radial-gradient(1px 1px at 36% 10%,#fff,transparent),radial-gradient(1.1px 1.1px at 94% 86%,#dbeafe,transparent);
  animation:twinkle 7s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.34}50%{opacity:.56}}
/* 은은히 흐르는 우주먼지(배경 전용, 다크만) — 히어로엔 없음 */
.dustcanvas{position:fixed; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; opacity:0; transition:opacity .5s}
[data-theme="dark"] .dustcanvas{opacity:.4}
body>*{position:relative; z-index:1}
.starfield,.dustcanvas{z-index:0}
a{color:inherit}

/* 반응형 유동 컨테이너 — 셀포지처럼 넓게, 가운데 정렬 */
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(18px,5vw,40px); text-align:center}

/* nav */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.4) blur(14px); background:var(--nav); border-bottom:1px solid var(--line)}
.nav .in{max-width:1080px; margin:0 auto; padding:12px clamp(18px,5vw,40px); display:flex; align-items:center; gap:12px}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:.94rem; letter-spacing:-.01em; white-space:nowrap; color:var(--ink); text-decoration:none}
.logo img{width:25px; height:25px; border-radius:7px; display:block}
.navlinks{display:flex; gap:1px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{font-size:.83rem; font-weight:600; color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:9px; white-space:nowrap; transition:.15s}
.navlinks a:hover,.navlinks a.on{color:var(--accent); background:var(--accent-soft)}
.themebtn{flex:0 0 auto; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:9px; width:33px; height:33px; font-size:.9rem; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center}
.themebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
main{flex:1 0 auto}
h1,h2,h3,p{overflow-wrap:anywhere; word-break:keep-all; margin:0}
strong,b{font-weight:700}
.cap{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:40px 0 15px; display:flex; align-items:center; justify-content:center; gap:12px}
.cap::before,.cap::after{content:""; height:1px; width:min(30px,7vw); background:var(--line)}
.capsub{font-size:.82rem; color:var(--muted); text-align:center; margin:-6px 0 14px; line-height:1.5}
/* 페이지 히어로 바로 아래 첫 섹션 라벨은 위 간격을 좁힌다 */
main>section:first-of-type{padding-top:6px}
main>section:first-of-type .cap:first-child{margin-top:14px}
.note{color:var(--muted); font-size:.82rem; margin:16px auto 0; max-width:52ch; text-align:center; line-height:1.6}
section{padding:26px 0}

/* ── 홈 히어로 = 브랜드 배경, 가운데정렬 ── */
.homehero{position:relative; overflow:hidden; border-radius:22px; margin:14px 0 8px; min-height:clamp(300px,46vw,400px);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
  background:#5a2fd0 url('/hero-bg.png') center/cover no-repeat;}
.homehero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,14,70,.5) 0%, rgba(40,20,92,.35) 55%, rgba(40,20,92,.12) 100%);}
.homehero .hcopy{position:relative; z-index:1; text-align:center; padding:clamp(28px,6vw,52px); max-width:640px}
.homehero .htitle,.homehero .htagline,.homehero .heyebrow{color:#fff}
.homehero .htitle em{color:#ecdcff}
.homehero .htagline{color:#ece0ff; margin-left:auto; margin-right:auto}
.statuspill{display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600; color:#efe6ff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); padding:5px 13px; border-radius:999px; margin-bottom:16px; font-variant-numeric:tabular-nums; backdrop-filter:blur(4px)}

/* ── 내부 페이지 히어로 = 심플 보라 그라데이션, 가운데정렬 ── */
.hero{position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--line); margin:24px 0 6px;
  min-height:128px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,#efe9ff 0%,#f6f2ff 55%,#e7ddff 100%);}
[data-theme="dark"] .hero{background:linear-gradient(130deg,#1a1430 0%,#100c1e 60%,#171126 100%)}
.hero .hcopy{position:relative; text-align:center; padding:clamp(22px,4vw,32px) clamp(18px,4vw,28px)}
.heyebrow{font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--emc); margin-bottom:10px}
.htitle{font-size:clamp(24px,5.4vw,38px); font-weight:840; line-height:1.15; letter-spacing:-.035em; color:var(--ink)}
.htitle em{color:var(--emc); font-style:normal}
.htagline{font-size:clamp(13px,2.4vw,15px); color:var(--muted); margin-top:14px; max-width:44ch; line-height:1.62}
.cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.btn{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.9rem; text-decoration:none; padding:11px 20px; border-radius:12px; transition:.15s; cursor:pointer}
.btn.pri{background:#fff; color:#5a2fd0; border:1px solid #fff}
.btn.pri:hover{filter:brightness(.96)}
.btn.sec{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.45)}
.btn.sec:hover{background:rgba(255,255,255,.24)}
.pdesc{color:var(--muted); font-size:1rem; margin:18px auto 0; max-width:52ch; text-align:center; line-height:1.62}

/* pulse — 보라 일색, 심플. 넓은 화면에선 한 줄 대시보드 */
.pulse{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:620px){.pulse{grid-template-columns:repeat(3,1fr)}}
@media(min-width:940px){.pulse{grid-template-columns:repeat(6,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:17px 14px; box-shadow:var(--shadow); text-align:center}
.stat .v{font-size:1.55rem; font-weight:840; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.05; color:var(--accent)}
.stat .l{font-size:.8rem; color:var(--ink); margin-top:5px; font-weight:700}
.stat .s{font-size:.68rem; color:var(--muted); margin-top:2px}
.updated{text-align:right; font-size:.72rem; color:var(--muted); margin:18px 4px 4px 0; font-variant-numeric:tabular-nums}
.hvisits{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.hvisits .statuspill{margin-bottom:0}
.statuspill b{font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-left:2px}
/* river = 항해 흐름(정거장처럼) */
.river{display:flex; flex-wrap:wrap; gap:4px 2px; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 18px; box-shadow:var(--shadow)}
.rstep{text-align:center; min-width:62px; padding:0 4px}
.rstep .rv{font-weight:820; color:var(--accent); font-variant-numeric:tabular-nums; font-size:1.28rem; line-height:1.05; letter-spacing:-.02em}
.rstep .rl{font-size:.7rem; color:var(--muted); display:block; margin-top:4px; letter-spacing:.01em}
.rarw{color:var(--accent); opacity:.35; font-size:.9rem}
/* 성장 곡선(우리 그래프) */
.growthbox{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 18px 8px; box-shadow:var(--shadow)}
.growth{width:100%; height:auto; display:block}
.growth .growLine{stroke-dasharray:2400; stroke-dashoffset:2400; animation:growDraw 1.8s cubic-bezier(.4,0,.2,1) forwards}
.growth .growArea,.growth .growEnd{opacity:0; animation:growFade .6s ease-out 1.3s forwards}
.growth .growVal{fill:var(--accent); font-size:17px; font-weight:800; font-variant-numeric:tabular-nums}
[data-theme="dark"] .growth .growVal{fill:#d6c6ff}
.growth .growAx{fill:var(--muted); font-size:11px; opacity:.7}
@keyframes growDraw{to{stroke-dashoffset:0}}
@keyframes growFade{to{opacity:1}}

/* content — 가운데정렬, 심플 카드 */
.grid2{display:grid; gap:12px}
@media(min-width:600px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid; gap:11px}
@media(min-width:560px){.grid3{grid-template-columns:1fr 1fr}}
@media(min-width:800px){.grid3{grid-template-columns:repeat(3,1fr)}}
.beat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 18px; box-shadow:var(--shadow); text-align:center}
.beat .yr{display:inline-block; font-weight:800; color:#fff; background:var(--accent); font-size:.72rem; letter-spacing:.02em; padding:3px 11px; border-radius:999px; margin-bottom:11px}
[data-theme="dark"] .beat .yr{color:#1a1330}
.beat h3{margin-bottom:7px; font-size:1.06rem; font-weight:750; color:var(--ink)}
.beat p{color:var(--muted); font-size:.92rem}
/* 핵심 문장 콜아웃 */
.thesis{margin:20px auto 6px; max-width:44ch; text-align:center; font-size:1.02rem; font-weight:700; line-height:1.6; color:var(--ink);
  background:var(--accent-soft); border:1px solid var(--line); border-radius:16px; padding:18px 22px}
/* 채널 칩 */
.chiprow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center}
.chan{display:inline-block; background:var(--card); border:1px solid var(--line); color:var(--accent); font-weight:700; font-size:.86rem; padding:8px 15px; border-radius:999px; box-shadow:var(--shadow); text-decoration:none; transition:.15s}
a.chan:hover{background:var(--accent-soft); border-color:var(--accent); transform:translateY(-1px)}
/* 사용한 도구 스택 */
.stack{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); display:grid; gap:16px}
.sgroup{display:grid; gap:9px; justify-items:center}
.slabel{font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--accent)}
.stags{display:flex; flex-wrap:wrap; gap:7px; justify-content:center}
.stag{font-size:.8rem; font-weight:600; color:var(--muted); background:var(--accent-soft); border:1px solid var(--line); padding:5px 12px; border-radius:8px}
@media(min-width:640px){.sgroup{grid-template-columns:96px 1fr; justify-items:start; align-items:center; gap:14px}.stags{justify-content:flex-start}.slabel{text-align:right; width:96px}}
.flow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:6px 0}
.flow .step{background:var(--card); border:1px solid var(--line); color:var(--accent); border-radius:999px; padding:8px 16px; font-weight:700; white-space:nowrap; font-size:.9rem; box-shadow:var(--shadow)}
.flow .arw{color:var(--accent); opacity:.4; font-size:.9rem}
.se{display:grid; gap:11px; margin-top:15px}
@media(min-width:520px){.se{grid-template-columns:1fr 1fr}}
.se .box{border:1px solid var(--line); border-radius:16px; padding:18px; background:var(--card); box-shadow:var(--shadow); text-align:center}
.se .t{font-weight:750; margin-bottom:6px; font-size:.98rem}
.se .box p{color:var(--muted); font-size:.88rem}
.se .self .t{color:var(--accent)} .se .ext .t{color:var(--accent2)}
.fam .m{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 16px; box-shadow:var(--shadow); text-align:center}
.fam .em{font-size:1.8rem; line-height:1}
.fam .nm{font-weight:800; margin:9px 0 4px; font-size:1.05rem; color:var(--ink)}
.fam .ro{color:var(--muted); font-size:.86rem}
.cardx{border:1px solid var(--line); border-radius:16px; padding:20px 18px; background:var(--card); box-shadow:var(--shadow); text-align:center}
.cardx h3{margin-bottom:8px; font-size:1.02rem; font-weight:750; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap}
.cardx p{color:var(--muted); font-size:.89rem}
.vstep{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 16px; box-shadow:var(--shadow); text-align:center}
.vstep .n{display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--accent); font-size:.82rem; margin-bottom:10px}
.vstep .n::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)}
.vstep p{color:var(--muted); font-size:.88rem; line-height:1.6}
.wip{font-size:.64rem; font-weight:800; color:var(--accent2); background:color-mix(in srgb,var(--accent2) 15%,transparent); padding:2px 8px; border-radius:999px}

/* 나눔 — 공개물 카드 */
.shares{margin-top:clamp(26px,5vh,48px)}
.share{display:flex; flex-direction:column; align-items:center}
.sharetag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--line); padding:4px 11px; border-radius:999px; margin-bottom:10px}
.share .cta{margin-top:16px}
.sharelicense{text-align:center; font-size:.68rem; color:var(--muted); opacity:.5; margin:8px auto 0; letter-spacing:.01em}

/* 별자리 — 밤하늘 패널(테마 무관 어둡게, 별이 빛나게) */
.cst{width:100%; height:auto; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; display:block; margin-top:2px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(110,81,179,.32), transparent 60%), linear-gradient(160deg,#191333 0%,#0e0a20 62%,#130e28 100%);}
.cst .edge{stroke:#a99be6; stroke-width:1; opacity:.32}
.cst .bgstar{fill:#fff; opacity:.32}
.cst .halo{fill:#c9b9ff; opacity:.16}
.cst .node{fill:#d7ccff; animation:starpulse 3.6s ease-in-out infinite}
.cst .node.big{fill:#fff}
.cst .lbl{fill:#e3ddf7; font-size:12px; font-weight:600; opacity:.92}
@keyframes starpulse{0%,100%{opacity:.45}50%{opacity:1}}

.foot{flex:0 0 auto; padding:36px 0 56px; text-align:center; color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); margin-top:28px}
.foot .b{color:var(--accent); font-weight:700}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}