.portfolio{--portfolio-ink:var(--o-ink,#0d1b2a);--portfolio-muted:var(--o-mid,#415a77);--portfolio-paper:var(--o-paper,#fff);--portfolio-line:var(--o-soft,#778da9);color:var(--portfolio-ink);background:var(--portfolio-paper);font:400 16px/1.65 Pretendard,sans-serif;word-break:keep-all;overflow-wrap:anywhere;min-width:0}
.otosystem[data-theme="dark"] .portfolio{--portfolio-ink:var(--h-ink);--portfolio-muted:var(--h-text);--portfolio-paper:var(--h-bg);--portfolio-line:var(--h-line);color-scheme:dark}
.portfolio *{box-sizing:border-box}
.portfolio-filters{margin-block-end:40px}
.portfolio-filter-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;border-bottom:1px solid var(--portfolio-line);margin-block-end:20px}
.portfolio-categories{display:flex;gap:24px;flex-wrap:wrap}
.portfolio-categories>a{display:inline-flex;align-items:center;min-height:52px;padding-block:12px;border-bottom:3px solid transparent;color:var(--portfolio-muted);font-weight:500;text-decoration:none;margin-block-end:-1px}
.portfolio-categories>a[aria-current]{border-bottom-color:var(--portfolio-ink);color:var(--portfolio-ink);font-weight:600}
.portfolio-categories>a:hover{color:var(--portfolio-ink);border-bottom-color:var(--portfolio-line)}
.portfolio-filter-status{display:flex;align-items:center;gap:16px;color:var(--portfolio-muted);font-size:14px}
.portfolio-filter-status strong{color:var(--portfolio-ink);font-weight:600;font-variant-numeric:tabular-nums}
.portfolio-filter-status>a{display:inline-flex;align-items:center;min-height:44px;color:var(--portfolio-muted);text-underline-offset:4px}
.portfolio-categories>a,.portfolio-filter-status>a{position:relative}
.portfolio-categories>a::before,.portfolio-filter-status>a::before{content:"";position:absolute;inset:0 auto 0 50%;width:100%;min-width:44px;transform:translateX(-50%)}
.portfolio-filter-row{display:flex;align-items:flex-start;gap:16px}
.portfolio-filter-label{flex:0 0 48px;min-height:44px;display:flex;align-items:center;color:var(--portfolio-muted);font-size:14px;font-weight:600}
.portfolio-filter-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.portfolio-filter{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--portfolio-line) 40%,var(--portfolio-paper));color:var(--portfolio-muted);text-decoration:none;font:400 16px/1.5 Pretendard,sans-serif}
.portfolio-filter:hover{border-color:var(--portfolio-muted);color:var(--portfolio-ink)}
.portfolio-filter[aria-current]{border-color:var(--portfolio-ink);background:var(--portfolio-ink);color:var(--portfolio-paper);font-weight:600}
.portfolio-feature-tags{margin-block-start:12px;padding-inline-start:64px}
.portfolio-feature-tags>summary{display:flex;align-items:center;gap:8px;width:fit-content;min-height:44px;color:var(--portfolio-muted);font-size:14px;cursor:pointer;list-style:none}
.portfolio-feature-tags>summary::-webkit-details-marker{display:none}
.portfolio-feature-tags>summary::after{content:'+';font-size:20px;line-height:1;margin-inline-start:4px}
.portfolio-feature-tags[open]>summary::after{content:'−'}
.portfolio-feature-tags>summary>span{font-variant-numeric:tabular-nums}
.portfolio-feature-tags>summary:focus-visible{outline:3px solid var(--portfolio-muted);outline-offset:4px}
.portfolio-feature-tags[open]>.portfolio-filter-options{margin-block-start:8px}
.portfolio-project-tags{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-block-start:12px}
.portfolio-project-tags>a{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--portfolio-muted);font-size:13px;line-height:20px;text-decoration:none;text-underline-offset:4px}
.portfolio-project-tags>a::before{content:'#'}
.portfolio-project-tags>a:hover{color:var(--portfolio-ink)}
.portfolio-project-tags>a[aria-current]{color:var(--portfolio-ink);font-weight:600}
@media(max-width:479px){.portfolio-filter-heading{gap:4px;margin-block-end:16px}.portfolio-categories{width:100%;gap:24px}.portfolio-filter-status{width:100%;justify-content:space-between;min-height:44px}.portfolio-filter-row{display:block}.portfolio-filter-label{min-height:32px;margin-block-end:8px}.portfolio-filter{padding-inline:12px}.portfolio-feature-tags{padding-inline-start:0}.portfolio-filters{margin-block-end:32px}}
.portfolio h2,.portfolio h3,.portfolio p,.portfolio dl,.portfolio dd,.portfolio ul{margin:0}
.portfolio-project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:start;padding-block:24px;border-bottom:1px solid var(--portfolio-line)}
.portfolio-project:first-child{padding-block-start:0}
.portfolio-visual{aspect-ratio:3/2;display:grid;place-items:center;border:1px solid var(--portfolio-line);background:var(--portfolio-paper);overflow:hidden}
.portfolio-visual img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;object-position:center top}
.portfolio-image-empty{padding:24px;text-align:center;color:var(--portfolio-muted)}
.portfolio-copy{min-width:0}
.portfolio-copy h2,.portfolio-write h2,.portfolio-admin-read h2{font:600 28px/1.3 Outfit,Pretendard,sans-serif;letter-spacing:-.01em;margin-block-end:24px}
.portfolio-copy h2{font-size:24px;margin-block-end:12px}
.portfolio .portfolio-intro{line-height:1.65;margin-block-end:12px}
.portfolio-purpose{white-space:pre-line;line-height:1.65;margin-block-end:16px}
.portfolio-details{display:grid;gap:16px}
.portfolio-details>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px}
.portfolio-details dt{font-weight:600;color:var(--portfolio-muted)}
.portfolio-details dd{white-space:pre-line;min-width:0}
.portfolio-details ul{padding-inline-start:16px;white-space:normal}
.portfolio-details li+li{margin-block-start:8px}
.portfolio .portfolio-note{font-size:14px;line-height:1.65;color:var(--portfolio-muted);white-space:pre-line;margin-block:24px}
.portfolio-button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;padding:12px 24px;border:1px solid var(--portfolio-ink);border-radius:0;background:var(--portfolio-ink);color:var(--portfolio-paper);font:600 16px/1.5 Pretendard,sans-serif;text-decoration:none;cursor:pointer;margin-block-start:24px}
.portfolio-button:hover{background:var(--portfolio-muted);color:var(--portfolio-paper)}
.portfolio-button-secondary{background:var(--portfolio-paper);color:var(--portfolio-ink)}
.portfolio :where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--portfolio-muted);outline-offset:4px}
.portfolio-tools{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-block:24px}
.portfolio-tools .portfolio-button{margin:0}
.portfolio-tools>a:not(.portfolio-button){display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:4px;color:var(--portfolio-muted)}
.portfolio-empty{text-align:center;padding:72px 24px;border-block:1px solid var(--portfolio-line);color:var(--portfolio-muted)}
.portfolio-empty p+p{margin-block-start:12px}
.portfolio-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-block-start:48px}
.portfolio-pagination :is(a,strong){display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--portfolio-line);color:var(--portfolio-ink);text-decoration:none}
.portfolio-pagination strong{background:var(--portfolio-ink);color:var(--portfolio-paper)}
.portfolio-write{max-width:900px}
.portfolio-field{margin-block:24px}
.portfolio-field label{display:block;font-weight:600;margin-block-end:12px}
.portfolio-field :is(input[type=text],input[type=url],textarea,select){display:block;width:100%;max-width:100%;min-height:48px;padding:12px;border:1px solid var(--portfolio-line);border-radius:0;background:var(--portfolio-paper);color:var(--portfolio-ink);font:400 16px/1.65 Pretendard,sans-serif}
.portfolio-field textarea{min-height:144px;resize:vertical}
.portfolio-field h3{font-size:16px;line-height:1.3}
.portfolio-admin-read{padding:24px;border:1px solid var(--portfolio-line);margin-block-end:48px}
.portfolio-admin-content{overflow-wrap:anywhere}
.portfolio-admin-content pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.portfolio-admin-content img{max-width:100%;height:auto}
.portfolio-copy .portfolio-note{margin-block:12px}
.portfolio-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;margin-block-start:12px}
.portfolio-actions>.portfolio-button{margin:0;flex:none}
.portfolio-disclosure{flex:1 1 240px;min-width:0}
.portfolio-disclosure summary{width:fit-content;min-height:48px;padding-block:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.portfolio-disclosure summary:focus-visible{outline:3px solid var(--portfolio-muted);outline-offset:4px}
.portfolio-disclosure[open] .portfolio-when-closed,.portfolio-disclosure:not([open]) .portfolio-when-open{display:none}
.portfolio-disclosure-body{padding-block-start:16px;margin-block-start:12px;border-top:1px solid var(--portfolio-line)}
.portfolio-disclosure-body h3{font-size:16px;line-height:1.3;margin-block-end:8px}
.portfolio-disclosure-body ul{padding-inline-start:20px}
.portfolio-disclosure-body li+li{margin-block-start:8px}
@media(max-width:1023px){.portfolio-project{grid-template-columns:minmax(0,1fr);gap:24px}.portfolio-visual{max-width:432px;width:100%}}
@media(max-width:479px){.portfolio-project{padding-block:24px}.portfolio-copy h2{font-size:24px}.portfolio-details>div{grid-template-columns:minmax(0,1fr);gap:8px}.portfolio-button{width:100%;padding-inline:16px}.portfolio-tools{gap:12px}.portfolio-empty{padding:48px 16px}}