:root { --ink:#242424; --muted:#737373; --line:#e7e7e7; --paper:#fff; --soft:#f6f6f8; --purple:#5b5bd6; --yellow:#fff0ad; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans KR",sans-serif; line-height:1.75; word-break:keep-all; }
a { color:inherit; text-decoration:none; }
.skip { position:fixed; top:-4rem; left:1rem; padding:.75rem 1rem; background:#111; color:#fff; z-index:20; }
.skip:focus { top:1rem; }
.topbar, main, footer { width:min(calc(100% - 2.5rem),940px); margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:.65rem; font-weight:700; }
.logo span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; background:var(--purple); color:#fff; }
nav { display:flex; gap:1.3rem; color:var(--muted); font-size:.9rem; }
nav a:hover { color:var(--purple); }
.intro { padding:7rem 0 5rem; }
.kicker { margin:0 0 1.5rem; color:var(--purple); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; max-width:850px; font-size:clamp(2.5rem,5.6vw,4.4rem); line-height:1.26; letter-spacing:-.045em; }
mark { background:linear-gradient(transparent 55%,var(--yellow) 55%); color:inherit; }
.intro-copy { margin:2rem 0; color:#555; font-size:1.15rem; }
.quick-links { display:flex; flex-wrap:wrap; gap:.7rem; }
.quick-links>* { padding:.55rem .85rem; border-radius:999px; background:var(--soft); color:#555; font-size:.86rem; }
.quick-links a:hover { background:#ececff; color:var(--purple); }
.plain-section { padding:3rem 0; border-top:2px solid #2d2d2d; }
.plain-section>h2,.section-title h2 { margin:0 0 1.6rem; font-size:1.55rem; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.about-grid h3 { margin:0 0 .8rem; font-size:1.15rem; }
.about-grid p { margin:0; color:var(--muted); }
.skills ul { margin:0; padding:0; list-style:none; }
.skills li { position:relative; display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.9rem 0; border-top:1px solid var(--line); }
.skills li::before { content:"✦"; color:#c79525; position:absolute; transform:translateX(-1.6rem); }
.skills span { color:var(--muted); }
.projects { padding:6rem 0 2rem; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.section-title h2 { margin-bottom:0; font-size:2rem; }
.section-title p { margin:0; color:var(--muted); }
.project { padding:3.5rem 0 5rem; border-top:1px solid #d6d6d6; }
.identity-featured { padding-top:2.2rem; border-top:3px solid var(--purple); }
.project-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:1.6rem; }
.project-name { display:flex; align-items:center; gap:1rem; }
.project-icon { display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:.9rem; color:#fff; font-size:.75rem; font-weight:700; }
.project-icon.purple{background:#5b5bd6}.project-icon.blue{background:#3978c5}.project-icon.green{background:#288569}.project-icon.orange{background:#d76a3c}
.project-name h3 { margin:0; font-size:1.35rem; }
.project-name p { margin:.1rem 0 0; color:var(--muted); font-size:.9rem; }
.role { padding:.45rem .75rem; border-radius:999px; background:var(--soft); color:#666; font-size:.78rem; }
.project-visual { min-height:330px; display:flex; flex-direction:column; justify-content:center; gap:2rem; padding:clamp(1.5rem,5vw,4rem); border-radius:1rem; overflow:hidden; }
.identity-visual{background:linear-gradient(135deg,#efefff,#f7f5ff)}.remittance-visual{background:linear-gradient(135deg,#eef7ff,#f5f9ff)}.database-visual{flex-direction:row;align-items:stretch;background:linear-gradient(135deg,#eaf8f3,#f5fbf9)}.safety-visual{background:linear-gradient(135deg,#fff1eb,#fff8f4)}
.product-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; min-height:470px; padding:2.5rem 4rem 0; border-radius:1rem; overflow:hidden; background:linear-gradient(135deg,#ededff,#f8f6ff); }
.product-gallery figure { min-width:0; margin:0; align-self:end; text-align:center; }
.product-gallery img { display:block; width:100%; max-height:430px; object-fit:cover; object-position:top; border-radius:1.1rem 1.1rem 0 0; box-shadow:0 1rem 2.5rem rgba(45,45,90,.16); }
.product-gallery figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.product-gallery.child-gallery { grid-template-columns:repeat(4,1fr); padding:2.5rem 3rem 0; background:linear-gradient(135deg,#e8fbf4,#f4fffb); }
.product-gallery.child-gallery img { max-height:430px; }
.identity-overview { margin-bottom:1.25rem; padding:clamp(1.8rem,4vw,3.25rem); border-radius:1rem; background:#23234d; color:#fff; }
.identity-label { margin:0 0 .8rem; color:#aaaaf1; font-size:.76rem; font-weight:700; letter-spacing:.12em; }
.identity-overview h4 { max-width:760px; margin:0; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.42; letter-spacing:-.035em; }
.identity-overview>p:not(.identity-label) { max-width:800px; margin:1.3rem 0 0; color:#d6d6e9; font-size:1rem; }
.identity-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16); }
.identity-facts strong,.identity-facts span { display:block; }
.identity-facts strong { color:#fff; font-size:1.55rem; }
.identity-facts span { margin-top:.2rem; color:#aaaac5; font-size:.76rem; }
.identity-scope { display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:1.5rem; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.identity-scope section { min-height:190px; padding:1.5rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.identity-scope span { color:var(--purple); font-size:.75rem; font-weight:700; }
.identity-scope h4 { margin:.45rem 0 .6rem; font-size:1.05rem; }
.identity-scope p { margin:0; color:#666; font-size:.9rem; }
.platform-map { display:grid; grid-template-columns:1fr auto 1.25fr auto 1fr; align-items:center; gap:1rem; margin-top:1.5rem; padding:1.5rem; border-radius:1rem; background:#f4f4fb; }
.platform-map div { padding:1rem; text-align:center; }
.platform-map b,.platform-map span { display:block; }
.platform-map span { margin-top:.3rem; color:#777; font-size:.76rem; }
.platform-map i { color:#9696bd; font-size:.72rem; font-style:normal; }
.platform-map .platform-core { border-radius:.8rem; background:var(--purple); color:#fff; }
.platform-map .platform-core span { color:#e2e2ff; }
.identity-impact { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2.5rem; }
.identity-impact h4 { margin:0 0 .8rem; font-size:1.05rem; }
.identity-impact ul { margin:0; padding-left:1.2rem; }
.identity-impact li { color:#5f5f5f; font-size:.94rem; }
.identity-impact li+li { margin-top:.45rem; }
.app-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:0 0 1.25rem; }
.app-card { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:#fff; transition:border-color .2s,background .2s,transform .2s; }
.app-card:hover { border-color:#c9d9d2; background:#f8fffc; transform:translateY(-2px); }
.app-card img { width:64px; height:64px; flex:0 0 auto; border-radius:16px; object-fit:cover; box-shadow:0 .45rem 1.2rem rgba(40,70,60,.1); }
.app-card strong,.app-card small { display:block; }
.app-card strong { font-size:.96rem; }
.app-card small { margin-top:.15rem; color:var(--muted); font-size:.78rem; line-height:1.55; }
.service-flow { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; padding:1.5rem; border:1px solid var(--line); border-radius:1rem; background:#fafafa; }
.visual-caption { text-align:center; font-size:1.2rem; font-weight:700; }
.flow-row { display:flex; align-items:center; justify-content:center; gap:1rem; }
.flow-node { min-width:150px; padding:1.25rem 1rem; border:1px solid rgba(70,70,110,.13); border-radius:.9rem; background:rgba(255,255,255,.85); text-align:center; box-shadow:0 .5rem 2rem rgba(50,50,90,.05); }
.flow-node.main { background:var(--purple); color:#fff; }
.flow-node b,.flow-node span { display:block; }
.flow-node span { margin-top:.35rem; color:#777; font-size:.78rem; }
.flow-node.main span { color:#dedcff; }
.arrow { color:#8d8db2; font-size:1.4rem; }
.flow-row.four .flow-node { min-width:0; flex:1; }
.metric { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:2rem; border-radius:1rem; background:rgba(255,255,255,.88); }
.metric strong { color:#218064; font-size:clamp(2.2rem,5vw,4rem); line-height:1; }
.metric span { color:#666; }
.project-content { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:2.5rem; margin-top:2.4rem; }
.project-content h4 { margin:0 0 .7rem; font-size:1.05rem; }
.project-content p,.project-content li { color:#666; font-size:.94rem; }
.project-content p { margin:0; }
.project-content ul { margin:0; padding-left:1.2rem; }
.project-content li+li { margin-top:.35rem; }
.stack { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--purple); font-size:.86rem; font-weight:600; }
.image-source { margin:.8rem 0 0; color:#999; font-size:.74rem; }
.image-source a { text-decoration:underline; text-underline-offset:3px; }
.contact { margin:4rem 0 6rem; padding:3.5rem; border-radius:1rem; background:#f3f3f7; text-align:center; }
.contact h2 { margin:0 0 1rem; font-size:1.5rem; }
.contact a { color:var(--purple); font-weight:700; }
footer { padding:2rem 0 3rem; border-top:1px solid var(--line); color:#999; font-size:.8rem; }
@media(max-width:760px){.topbar,main,footer{width:min(calc(100% - 2rem),940px)}nav a:not(:last-child){display:none}.intro{padding:5rem 0 4rem}.intro-copy br{display:none}.about-grid,.project-content,.identity-impact{grid-template-columns:1fr;gap:1.5rem}.skills li{grid-template-columns:1fr;gap:.2rem}.section-title{display:block}.section-title p{margin-top:.5rem}.project-header{align-items:flex-start}.role{display:none}.identity-facts{grid-template-columns:1fr 1fr}.identity-scope{grid-template-columns:1fr}.identity-scope section{min-height:0}.platform-map{grid-template-columns:1fr}.platform-map i{text-align:center}.project-visual{min-height:0;padding:2rem 1rem}.app-pair{grid-template-columns:1fr}.product-gallery{grid-template-columns:repeat(3,72%);gap:1rem;min-height:390px;padding:2rem 1.2rem 0;overflow-x:auto;scroll-snap-type:x mandatory}.product-gallery.child-gallery{grid-template-columns:repeat(4,72%)}.product-gallery figure{scroll-snap-align:center}.product-gallery img,.product-gallery.child-gallery img{max-height:360px}.service-flow,.flow-row{flex-direction:column}.service-flow .arrow,.flow-row .arrow{transform:rotate(90deg)}.flow-row.four .flow-node,.flow-node{width:100%}.database-visual{flex-direction:column}.metric{min-height:130px}.contact{padding:2.5rem 1rem}}