/* ===== portfolio 스킨 전용 스타일 (게시판 공통은 asset/css/board.css) =====
   수정 요령: 목록 = .work-grid(카드 격자) / 보기 = .pf-* / 카드 모양(.work-card)은 layout/component.css 에 있다.
   보기 화면은 위에서 아래로 .pf-head → .pf-section(이미지·설명·첨부, 구역마다 선) → .pf-pager → .pf-actions 순서다. */

/* ===== 목록: 카드 격자 ===== */
.work-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 6rem 3.6rem;}
.work-grid .work-card {position: relative;width: auto;}
.work-grid .work-title, .work-grid h3 {margin-top: 2.2rem;font-size: 2.8rem;font-weight: 800;line-height: 1.35;}
.work-grid .work-card:hover h3 {color: var(--color-primary);}
.work-grid .work-meta {display: flex;flex-wrap: wrap;gap: .8rem 1.6rem;margin-top: 1rem;font-size: 1.7rem;color: var(--color-muted);}
.work-grid .work-meta span + span::before {content: "·";margin-right: 1.6rem;}
.work-grid .work-meta .work-cate {color: var(--color-primary);font-weight: 800;}
.work-flag {position: absolute;left: 1.6rem;top: 1.6rem;padding: .6rem 1.4rem;border-radius: 10rem;background: var(--color-accent);color: var(--color-ink);font-size: 1.3rem;font-weight: 800;}
.work-check {position: absolute;right: 1.6rem;top: 1.6rem;z-index: 2;display: flex;align-items: center;justify-content: center;width: 4.4rem;height: 4.4rem;border-radius: 50%;background: var(--color-white);box-shadow: var(--shadow);}
.work-check input {width: 2.2rem;height: 2.2rem;accent-color: var(--color-primary);}
.work-grid .work-thumb {position: relative;}

/* ===== 보기: 머리 (분류·제목·정보 칸·사이트 바로가기) ===== */
.pf-view {width: 100%;}
.pf-cate {margin-bottom: 2rem;}
.pf-head-row {display: flex;align-items: flex-end;justify-content: space-between;gap: 3rem;}
.pf-head-row .pf-title {flex: 1;min-width: 0;}
.pf-visit {flex: none;}
.pf-title {font-size: 5.2rem;font-weight: 700;line-height: 1.3;letter-spacing: -.15rem;}
.pf-info {display: grid;grid-template-columns: repeat(4, 1fr);margin-top: 4.4rem;border-top: .2rem solid var(--color-ink);border-bottom: .1rem solid var(--color-line);}
.pf-info > div {padding: 2.8rem 3rem;border-left: .1rem solid var(--color-line);}
.pf-info > div:first-child {padding-left: 0;border-left: 0;}
.pf-info dt {display: flex;align-items: center;gap: .8rem;font-size: 1.5rem;font-weight: 800;color: var(--color-muted);}
.pf-info dt .bo-ico {width: 1.8rem;height: 1.8rem;color: var(--color-primary);}
.pf-info dd {margin-top: 1.2rem;font-size: 2.2rem;font-weight: 700;line-height: 1.4;word-break: break-all;}
.pf-visit .bo-ico {width: 2rem;height: 2rem;}

/* ===== 보기: 구역 (구역마다 위쪽 선 + 넉넉한 간격) ===== */
.pf-section {margin-top: 7rem;padding-top: 5.6rem;border-top: .1rem solid var(--color-line);}
.pf-section-title {display: flex;align-items: center;gap: 1.4rem;margin-bottom: 3.6rem;font-size: 2.6rem;font-weight: 800;}
.pf-shots {display: grid;gap: 3.2rem;}
.pf-shots figure {margin: 0;}
.pf-shots img {width: 100%;height: auto;border-radius: var(--radius);border: .1rem solid var(--color-line);}
.pf-body {max-width: 96rem;font-size: 2rem;line-height: 1.9;}
.pf-body img {max-width: 100%;height: auto;border-radius: 1.6rem;}
.pf-body p {margin-bottom: 1.8rem;}
.pf-files {display: grid;gap: 1.2rem;}
.pf-files a {display: flex;flex-wrap: wrap;align-items: center;gap: .6rem 1.2rem;padding: 2rem 2.4rem;border: .1rem solid var(--color-line);border-radius: 1.6rem;background: var(--color-white);font-size: 1.8rem;font-weight: 600;transition: border-color .3s, color .3s;}
.pf-files a:hover {border-color: var(--color-primary);color: var(--color-primary);}
.pf-files a span {font-size: 1.4rem;font-weight: 400;color: var(--color-muted);}

/* ===== 보기: 이전 / 다음 작업 (두 칸 + 가운데 선) ===== */
.pf-pager {display: grid;grid-template-columns: 1fr 1fr;margin-top: 7rem;border-top: .2rem solid var(--color-ink);border-bottom: .1rem solid var(--color-line);}
.pf-pager > * {display: block;min-width: 0;padding: 3.2rem 3.6rem;transition: background .3s;}
.pf-pager-next {border-left: .1rem solid var(--color-line);text-align: right;}
.pf-pager a:hover {background: var(--color-soft);}
.pf-pager-label {display: flex;align-items: center;gap: .8rem;font-size: 1.5rem;font-weight: 800;color: var(--color-muted);}
.pf-pager-next .pf-pager-label {justify-content: flex-end;}
.pf-pager-label .bo-ico {width: 2rem;height: 2rem;}
.pf-pager strong {display: block;margin-top: 1.2rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 2.2rem;font-weight: 700;}
.pf-pager a:hover strong {color: var(--color-primary);}
.pf-pager .is-empty strong {font-weight: 500;color: #9a9aa6;}

/* ===== 보기: 버튼 (내용과 간격을 두고 위에 선) ===== */
.pf-actions {margin-top: 6rem;padding-top: 4.4rem;border-top: .1rem solid var(--color-line);}
.pf-actions .btn .bo-ico {width: 2rem;height: 2rem;}

/* ===== 글쓰기 ===== */
.pf-write .bo-textarea {min-height: 32rem;}
.pf-field-head {display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;}
.pf-field-head .bo-help {margin-top:.6rem;}
.pf-selected-count {flex:none;padding:.7rem 1.2rem;border-radius:10rem;background:var(--color-soft);color:var(--color-primary);font-size:1.35rem;font-weight:800;}
.pf-scope-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:.8rem;}
.pf-scope-option {position:relative;display:flex;align-items:center;gap:1.1rem;min-height:6.4rem;padding:1.4rem 1.6rem;border:.2rem solid var(--color-line);border-radius:1.4rem;background:#fff;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;}
.pf-scope-option:hover {border-color:rgba(var(--primary-rgb),.55);transform:translateY(-.2rem);}
.pf-scope-option.is-selected {border-color:var(--color-primary);background:var(--color-soft);box-shadow:0 0 0 .3rem rgba(var(--primary-rgb),.08);}
.pf-scope-option input {position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;}
.pf-scope-check {position:relative;flex:none;width:2.2rem;height:2.2rem;border:.2rem solid #b5bfce;border-radius:.6rem;background:#fff;}
.pf-scope-option.is-selected .pf-scope-check {border-color:var(--color-primary);background:var(--color-primary);}
.pf-scope-option.is-selected .pf-scope-check::after {content:"";position:absolute;left:.6rem;top:.25rem;width:.55rem;height:1rem;border:solid #fff;border-width:0 .2rem .2rem 0;transform:rotate(45deg);}
.pf-scope-option:focus-within {outline:0;box-shadow:0 0 0 .4rem rgba(var(--primary-rgb),.14);}
.pf-scope-option strong {font-size:1.55rem;line-height:1.35;}
.pf-other-label {margin-top:1rem;font-size:1.5rem;color:var(--color-muted);}
.pf-section-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;margin-bottom:3rem;}
.pf-section-heading .bo-section-title {margin-bottom:0;}
.pf-section-heading > .bo-help {max-width:52rem;text-align:right;}
.pf-section-kicker {margin-bottom:.8rem;color:var(--color-primary);font-size:1.2rem;font-weight:800;letter-spacing:.15em;}
.pf-insight-fields {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;}
.pf-insight-fields .bo-field {padding:2rem;border:.1rem solid var(--color-line);border-radius:1.6rem;background:var(--color-bg);}
.pf-insight-fields .bo-label {display:flex;align-items:center;gap:1rem;}
.pf-insight-fields .bo-label span {display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--color-ink);color:#fff;font-size:1.15rem;}
.pf-insight-fields .pf-insight-input {min-height:15rem;padding:1.5rem 1.6rem;font-size:1.6rem;line-height:1.65;}
.pf-write .bo-file {align-items:center;gap:2rem;padding:2rem;border-style:solid;background:#fff;}
.pf-write .bo-file.is-cover {border-color:rgba(40,108,255,.42);background:linear-gradient(135deg,rgba(40,108,255,.08),rgba(40,108,255,.025));}
.pf-file-label {display:flex;flex:0 0 25rem;flex-direction:column;align-items:flex-start;gap:.4rem;}
.pf-file-label strong {font-size:1.7rem;color:var(--color-ink);}
.pf-file-label span {font-size:1.3rem;font-weight:600;line-height:1.5;color:var(--color-muted);}
.pf-write .bo-file.is-cover .pf-file-label strong {color:var(--color-primary);}
.pf-write .bo-file input[type="file"] {flex:1;}

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
  .work-grid {gap: 5rem 2.8rem;}
  .pf-title {font-size: 4.4rem;}
  .pf-info > div {padding: 2.4rem 2rem;}
}
@media (max-width: 1024px) {
  .work-grid {grid-template-columns: repeat(2, 1fr);}
  .pf-info {grid-template-columns: repeat(2, 1fr);}
  .pf-info > div {padding: 2.4rem 2.4rem;}
  .pf-info > div:nth-child(odd) {padding-left: 0;border-left: 0;}
  .pf-info > div:nth-child(n+3) {border-top: .1rem solid var(--color-line);}
}
@media (max-width: 768px) {
  .work-grid {grid-template-columns: 1fr;gap: 4rem;}
  .work-grid h3 {font-size: 2.4rem;}
  .pf-title {font-size: 3.2rem;letter-spacing: -.1rem;}
  .pf-head-row {flex-direction: column;align-items: stretch;gap: 2.4rem;}
  .pf-visit {width: 100%;}
  .pf-info dd {font-size: 1.9rem;}
  .pf-section {margin-top: 5rem;padding-top: 4rem;}
  .pf-section-title {margin-bottom: 2.6rem;font-size: 2.2rem;}
  .pf-body {font-size: 1.8rem;}
  .pf-pager {grid-template-columns: 1fr;margin-top: 5rem;}
  .pf-pager > * {padding: 2.4rem 1.6rem;}
  .pf-pager-next {border-top: .1rem solid var(--color-line);border-left: 0;text-align: left;}
  .pf-pager-next .pf-pager-label {justify-content: flex-start;}
  .pf-pager strong {font-size: 1.9rem;}
  .pf-actions {margin-top: 4rem;padding-top: 3.2rem;}
  .pf-field-head,.pf-section-heading {align-items:flex-start;flex-direction:column;gap:1.2rem;}
  .pf-section-heading > .bo-help {text-align:left;}
  .pf-scope-grid {grid-template-columns:1fr 1fr;}
  .pf-insight-fields {grid-template-columns:1fr;}
  .pf-write .bo-file {align-items:stretch;flex-direction:column;gap:1.2rem;}
  .pf-file-label {flex-basis:auto;width:100%;}
}

/* Project overview: fixed right column, generous artwork column. */
.pf-layout {display:grid;grid-template-columns:minmax(0,1fr) 38rem;gap:5rem;align-items:start;}
.pf-layout .pf-head {grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + 3rem);padding:3.2rem;border:.1rem solid var(--color-line);border-top:.4rem solid var(--color-primary);border-radius:var(--radius);background:rgba(255,255,255,.96);box-shadow:0 1.2rem 4rem rgba(28,62,116,.05);}
.pf-eyebrow {margin-bottom:2.4rem;color:var(--color-primary);font-size:1.2rem;font-weight:800;letter-spacing:.15em;}
.pf-layout .pf-head-row {display:flex;flex-direction:column;align-items:stretch;gap:2.4rem;}
.pf-layout .pf-title {font-size:3.6rem;letter-spacing:-.1rem;overflow-wrap:anywhere;}
.pf-layout .pf-visit {width:100%;font-size:1.6rem;padding:1.5rem;}
.pf-layout .pf-info {display:block;margin-top:2.8rem;border-top:.1rem solid var(--color-line);border-bottom:0;}
.pf-layout .pf-info > div {padding:2.4rem 0 0;border:0;}
.pf-layout .pf-info dd {margin-top:.8rem;font-size:1.9rem;line-height:1.6;word-break:normal;}
.pf-scope-tags {display:flex;flex-wrap:wrap;gap:.7rem;}
.pf-scope-tags span {display:inline-flex;padding:.55rem 1rem;border-radius:10rem;background:var(--color-soft);color:var(--color-primary);font-size:1.35rem;font-weight:800;line-height:1.35;}
.pf-main {grid-column:1;grid-row:1;min-width:0;}
.pf-main .pf-section:first-child {margin-top:0;padding-top:0;border-top:0;}
.pf-main .pf-section {margin-top:4rem;padding-top:3.6rem;}
.pf-main .pf-section-title {font-size:2.2rem;margin-bottom:2.4rem;}
.pf-main .pf-body {font-size:1.9rem;overflow-wrap:anywhere;}
.pf-main .pf-shots img {display:block;background:#fff;box-shadow:0 1rem 3rem rgba(28,62,116,.04);}
.pf-insight-head .pf-section-title {margin-bottom:0;}
.pf-insight-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.4rem;}
.pf-insight-card {position:relative;min-height:24rem;padding:3rem 2.6rem;border:.1rem solid var(--color-line);border-radius:1.8rem;background:#fff;overflow:hidden;}
.pf-insight-card:first-child {background:var(--color-ink);color:#fff;border-color:var(--color-ink);}
.pf-insight-no {display:block;margin-bottom:4.4rem;color:var(--color-primary);font-size:1.25rem;font-weight:800;letter-spacing:.12em;}
.pf-insight-card:first-child .pf-insight-no {color:var(--color-accent);}
.pf-insight-card h4 {font-size:2rem;font-weight:800;}
.pf-insight-card p {margin-top:1.4rem;font-size:1.6rem;line-height:1.75;color:var(--color-muted);}
.pf-insight-card:first-child p {color:rgba(255,255,255,.72);}
.pf-contact {display:flex;align-items:center;justify-content:space-between;gap:4rem;margin-top:7rem;padding:4.4rem 5rem;border-radius:var(--radius);background:linear-gradient(135deg,var(--color-soft),#fff);border:.1rem solid rgba(var(--primary-rgb),.2);}
.pf-contact h3 {font-size:3rem;font-weight:800;letter-spacing:-.06rem;}
.pf-contact p:not(.pf-section-kicker) {margin-top:1rem;font-size:1.7rem;line-height:1.7;color:var(--color-muted);}
.pf-contact .btn {flex:none;}
.pf-contact .bo-ico {width:1.8rem;height:1.8rem;}
@media(max-width:1280px) {.pf-layout {grid-template-columns:minmax(0,1fr) 32rem;gap:3rem;}.pf-layout .pf-head {padding:2.6rem;}.pf-layout .pf-title {font-size:3.2rem;}}
@media(max-width:900px) {
 .pf-layout {display:flex;flex-direction:column;gap:3.2rem;}
 .pf-layout .pf-head {position:static;width:100%;}.pf-main {width:100%;}
 .pf-layout .pf-info {display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
 .pf-layout .pf-title {font-size:3rem;}.pf-layout .pf-visit {max-width:28rem;}
 .pf-eyebrow {margin-bottom:1.6rem;}
 .pf-insight-grid {grid-template-columns:1fr;}
 .pf-insight-card {min-height:0;}
 .pf-insight-no {margin-bottom:2.4rem;}
 .pf-contact {align-items:flex-start;flex-direction:column;padding:3.2rem;}
}
@media(max-width:560px) {
 .pf-scope-grid {grid-template-columns:1fr;}
 .pf-contact {padding:2.6rem 2rem;}
 .pf-contact h3 {font-size:2.4rem;}
 .pf-contact .btn {width:100%;}
}