/* 샘플의 프로젝트 정보·콘텐츠 목록과 오른쪽 추가 패널을 구성합니다. */
.portfolio-editor-page { max-width: 1374px; margin: 0 auto; padding: 28px 32px 64px; }
.portfolio-editor-head, .portfolio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.frit-page .portfolio-editor-head h1 { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
.portfolio-editor-head p, .portfolio-editor-panel p, .portfolio-block-kind, .portfolio-counter { color: var(--frit-muted); font-size: 13px; }
.portfolio-head-actions { display: flex; gap: 10px; flex-shrink: 0; }
.portfolio-editor-layout { display: grid; grid-template-columns: minmax(0, 2.55fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.portfolio-editor-main, .portfolio-editor-aside { display: grid; gap: 18px; min-width: 0; }
.portfolio-editor-aside { position: sticky; top: calc(var(--header-height) + 16px); max-height: calc(100vh - var(--header-height) - 32px); overflow-y: auto; scrollbar-width: thin; }
.portfolio-editor-panel { border: 1px solid var(--frit-border); border-radius: 10px; background: var(--k-bg-white); padding: 20px; min-width: 0; }
.portfolio-editor-panel h2, .portfolio-editor-panel h3 { font-size: 18px; font-weight: 700; margin: 0 0 18px; }
.portfolio-panel-head h2 { margin: 0; }
.portfolio-info-grid { display: grid; grid-template-columns: 1.4fr 1.2fr .9fr .9fr; gap: 16px; }
.portfolio-info-grid > div { min-width: 0; }
.portfolio-info-grid label, .portfolio-cover-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.portfolio-info-grid input, .portfolio-info-grid textarea { width: 100%; }
.portfolio-info-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portfolio-info-wide { grid-column: auto; min-width: 0; }
.portfolio-counter { display: block; text-align: right; }
.portfolio-keywords { border: 1px solid var(--frit-border); border-radius: 8px; padding: 8px; min-height: 84px; display: flex; flex-wrap: wrap; align-content: start; gap: 6px; }
.portfolio-keywords button { border: 0; border-radius: 20px; padding: 5px 9px; background: var(--frit-primary-soft); color: var(--frit-primary); font-size: 12px; }
.portfolio-keywords input { min-width: 100px; flex: 1; width: 100px; border: 0; background: transparent; font-size: 13px; }
.portfolio-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.portfolio-add-grid button { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--frit-border); border-radius: 8px; padding: 20px 10px; background: var(--k-bg-white); cursor: pointer; }
.portfolio-add-grid button:hover, .portfolio-add-grid button:focus-visible { border-color: var(--frit-primary); background: var(--frit-primary-softBack); }
.portfolio-add-grid svg { width: 28px; height: 28px; color: var(--frit-primary); fill: none; stroke: currentColor; stroke-width: 1.8; }
.portfolio-add-grid small { color: var(--frit-muted); line-height: 1.6; }
.portfolio-tip { padding: 16px; margin-top: 18px; background: var(--frit-primary-soft); color: var(--frit-primary); border-radius: 8px; font-size: 13px; line-height: 1.7; }
.portfolio-cover-drop { display: grid; place-items: center; gap: 10px; border: 1px dashed var(--frit-border); border-radius: 8px; padding: 24px 10px; text-align: center; cursor: pointer; }
.portfolio-cover-drop img { max-height: 170px; max-width: 100%; object-fit: contain; }
.portfolio-block-list { display: grid; gap: 10px; }
.portfolio-block { display: grid; grid-template-columns: 22px 96px minmax(0, 1fr) 26px; gap: 10px; padding: 10px; border: 1px solid var(--frit-border); border-radius: 8px; background: var(--k-bg-white); min-width: 0; }
.portfolio-block-handle { cursor: grab; border: 0; background: transparent; color: var(--frit-muted); line-height: 1.6; padding: 0; align-self: start; }
.portfolio-block-kind { align-self: start; padding: 5px; border: 1px solid var(--frit-border); border-radius: 4px; color: var(--frit-text); font-size: 12px; }
.portfolio-block-content { min-width: 0; }
.portfolio-block-content > img { display: block; width: 100%; height: auto; max-height: none; }
.portfolio-block-wide { grid-template-columns: 22px minmax(0, 1fr) 26px; }
.portfolio-block-wide > .portfolio-block-kind { grid-column: 2; }
.portfolio-block-wide > .portfolio-block-content { grid-column: 1 / -1; grid-row: 2; }
.portfolio-block-wide > .portfolio-block-menu { grid-column: 3; grid-row: 1; }
.portfolio-block-handle { white-space: pre-line; }
.portfolio-block-content h3 { margin: 6px 0; font-size: 18px; }
.portfolio-block-content p { 
	white-space: pre-wrap; 
	line-height: 1.7; 
	margin: 0; 
}
.portfolio-url-caption { overflow-wrap: anywhere; padding: 5px 8px; background: var(--frit-surface); border-radius: 4px; }
.portfolio-video-play { width: 100%; min-height: 110px; border: 0; border-radius: 6px; background: var(--frit-primary-soft); color: var(--frit-primary); font-size: 32px; cursor: pointer; }
.portfolio-block-content input, .portfolio-block-content textarea { width: 100%; margin-bottom: 8px; }
.portfolio-block-content textarea { min-height: 100px; }
/* 공통 버튼의 inline-flex보다 우선하여 URL 입력 박스 아래 오른쪽에 배치합니다. */
body.frit-page .portfolio-block-content .portfolio-url-complete {
    display: flex;
    width: fit-content;
    margin: 0 0 8px auto;
}
.portfolio-block-menu { position: relative; }
.portfolio-block-menu summary { cursor: pointer; list-style: none; font-size: 20px; }
.portfolio-block-menu > div { position: absolute; right: 0; top: 24px; z-index: 2; width: 100px; background: var(--k-bg-white); border: 1px solid var(--frit-border); border-radius: 6px; padding: 4px; }
.portfolio-block-menu button { display: block; width: 100%; padding: 8px; border: 0; background: transparent; text-align: left; }
.portfolio-block-menu button:hover { background: var(--frit-primary-soft); }
.portfolio-media-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.portfolio-media-preview img { display: block; width: 100%; height: auto; max-height: none; }
.portfolio-media-preview a { overflow-wrap: anywhere; }
.portfolio-block-add { width: 100%; margin-top: 12px; padding: 12px; border: 1px dashed var(--frit-primary); border-radius: 6px; background: var(--frit-primary-softBack); color: var(--frit-primary); cursor: pointer; }
.portfolio-detail-block { margin: 0; min-width: 0; }
.portfolio-detail-block p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.portfolio-detail-block h3 { margin: 12px 0; font-size: 22px; }
.portfolio-detail-block img { display: block; width: 100%; height: auto; }
.portfolio-detail-block iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.portfolio-detail-block a { overflow-wrap: anywhere; }
.portfolio-content-gallery { display: flex; flex-direction: column; gap: 0; }
.business-preview-detail-image.portfolio-content-gallery { max-height: none; overflow: visible; }
.business-profile-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; overflow-wrap: anywhere; }
.portfolio-content-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; padding: 24px; }
.portfolio-content-loading .freemode-loader-image { width: 45px; }
/* 본문 서식은 사용자가 선택한 크기와 글꼴을 그대로 표시합니다. */
.portfolio-text-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--ref-ink); border-radius: 6px 6px 0 0; }
.portfolio-text-toolbar button, .portfolio-text-toolbar select { width: auto; min-height: 34px; padding: 4px 8px; border: 0; border-right: 1px solid var(--frit-muted); border-radius: 0; background: var(--ref-ink); color: var(--k-bg-white); cursor: pointer; font-size: 14px; }
.portfolio-text-toolbar button:hover, .portfolio-text-toolbar button:focus-visible { background: var(--frit-muted); }
.portfolio-text-toolbar svg { width: 18px; height: 18px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.portfolio-text-toolbar [data-text-command="bold"] { font-weight: 700; }
.portfolio-text-toolbar [data-text-command="italic"] { font-style: italic; }
.portfolio-text-toolbar [data-text-command="underline"] { text-decoration: underline; }
.portfolio-text-toolbar [data-text-command="strikeThrough"] { text-decoration: line-through; }
.portfolio-block-content .portfolio-rich-text, .portfolio-detail-block .portfolio-rich-text { color: var(--frit-text); font-size: 16px; white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; }
.portfolio-rich-text.portfolio-text-input { min-height: 180px; padding: 20px; border: 1px solid var(--frit-border); border-radius: 0 0 6px 6px; background: var(--k-bg-white); margin-bottom: 10px; }
.portfolio-rich-text p, .portfolio-rich-text div, .portfolio-rich-text span { color: inherit; font-size: inherit; line-height: inherit; }
.portfolio-rich-text b, .portfolio-rich-text strong { font-weight: 700; }
.portfolio-rich-text i, .portfolio-rich-text em { font-style: italic; }
.portfolio-rich-text u { text-decoration: underline; }
/* 소개 본문에 삽입한 구분선을 공개 화면에서도 같은 색상과 간격으로 표시합니다. */
.portfolio-rich-text hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid var(--frit-border); }
.portfolio-rich-text s, .portfolio-rich-text strike { text-decoration: line-through; }
@media (max-width: 960px) {
    .portfolio-editor-page { padding: 20px 16px; }
    .portfolio-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .portfolio-editor-aside { position: static; max-height: none; overflow: visible; grid-row: 1; grid-template-columns: 1fr 1fr; }
    .portfolio-info-grid { grid-template-columns: 1fr 1fr; }
    .portfolio-editor-head { align-items: start; flex-direction: column; }
}
@media (max-width: 600px) {
    .frit-page .portfolio-editor-head h1 { font-size: 24px; }
    .portfolio-editor-aside { grid-template-columns: 1fr; }
    .portfolio-block { grid-template-columns: 20px minmax(0, 1fr) 22px; }
    .portfolio-block-kind { grid-column: 2; }
    .portfolio-block-content { grid-column: 2; grid-row: 2; }
    .portfolio-block-menu { grid-column: 3; grid-row: 1; }
    .portfolio-media-preview { grid-template-columns: 1fr; }
    .portfolio-head-actions { flex-wrap: wrap; }
}