.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}
.portfolio *{box-sizing:border-box}
.portfolio h2,.portfolio h3,.portfolio p,.portfolio dl,.portfolio dd,.portfolio ul{margin:0}
.portfolio-project{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:48px;align-items:start;padding-block:48px;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:auto;aspect-ratio:3/2;object-fit:cover}
.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-purpose{white-space:pre-line;line-height:1.65;margin-block-end:24px}
.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}
@media(max-width:1023px){.portfolio-project{grid-template-columns:minmax(0,1fr);gap:24px}.portfolio-visual{max-width:720px;width:100%}}
@media(max-width:479px){.portfolio-project{padding-block:40px}.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}}