/* 방법론·프로세스 페이지 프리셋 — page-methodology */
/* .fnc-ppw 루트 전용. 단계·피드백·통과 기준을 시각적으로 명확히 보여 준다. */
.fnc-ppw { --ppw-ink:#173a2a; --ppw-green:#1f6440; --ppw-pale:#e9f3e9; color:var(--wp--preset--color--on-surface); background:var(--wp--preset--color--background); font-family:var(--wp--preset--font-family--body); }
.fnc-ppw-wrap { width:min(1040px, calc(100% - 2 * var(--wp--preset--spacing--50))); margin:0 auto; }
.fnc-ppw-kicker { margin:0 0 .8rem; color:var(--ppw-green); font-family:var(--wp--preset--font-family--label); font-size:.75rem; font-weight:800; letter-spacing:.14em; }
.fnc-ppw h1,.fnc-ppw h2,.fnc-ppw h3 { font-family:var(--wp--preset--font-family--headline); color:var(--wp--preset--color--on-surface); letter-spacing:-.03em; }
.fnc-ppw-hero { background:linear-gradient(135deg,rgba(14,47,42,.92),rgba(31,100,64,.86)),url('/wp-content/uploads/2026/06/autumn-rice-paddy-hanok.jpg') center 54%/cover no-repeat; color:#fff; padding:clamp(2.5rem,4.5vw,4rem) 0 clamp(2.25rem,4vw,3.5rem); position:relative; overflow:hidden; }
.fnc-ppw-hero::after { content:""; position:absolute; width:42rem; height:42rem; border:1px solid rgba(255,255,255,.16); border-radius:50%; right:-13rem; top:-23rem; box-shadow:0 0 0 3rem rgba(255,255,255,.035),0 0 0 6rem rgba(255,255,255,.025); }
.fnc-ppw-hero .fnc-ppw-wrap { position:relative; z-index:1; }.fnc-ppw-hero .fnc-ppw-kicker { color:#ccebc9; }.fnc-ppw-hero h1 { color:#fff; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.14; letter-spacing:-.03em; margin:0; word-break:keep-all; }.fnc-ppw-hero p:not(.fnc-ppw-kicker) { max-width:65ch; font-size:1.1rem; line-height:1.75; margin:1.4rem 0 0; color:rgba(255,255,255,.91); }
.fnc-ppw-hero__lead { display:inline-block; font-size:1.16em; letter-spacing:-.035em; }
.fnc-ppw .fnc-ppw-hero .fnc-ppw-hero__actions { width:100%; justify-content:flex-start; margin:1.9rem 0 0; }.fnc-ppw-hero .fnc-ppw-hero__actions .fnc-food-cta__primary { color:var(--ppw-ink); background:var(--ppw-pale); border-color:rgba(255,255,255,.72); box-shadow:0 6px 18px rgba(7,29,19,.16); }.fnc-ppw-hero .fnc-ppw-hero__actions .fnc-food-cta__primary:hover { color:var(--ppw-ink); background:#fff; border-color:#fff; }.fnc-ppw-hero .fnc-ppw-hero__actions .fnc-food-cta__primary:focus-visible { outline:3px solid #ccebc9; outline-offset:3px; }
.fnc-ppw-section { padding:clamp(4rem,8vw,7rem) 0; }.fnc-ppw-section h2,.fnc-ppw-listening h2 { font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.22; margin:0; word-break:keep-all; }.fnc-ppw-intro { max-width:68ch; font-size:1.06rem; line-height:1.8; color:var(--wp--preset--color--on-surface-variant); margin:1.25rem 0 0; }
.fnc-ppw-flow { margin:3rem 0 0; padding:clamp(1.5rem,4vw,3rem); border:1px solid var(--wp--preset--color--outline-variant); border-radius:var(--fnc-radius-lg); background:var(--wp--preset--color--surface-container-lowest); }.fnc-ppw-flow figcaption { padding-bottom:.75rem; border-bottom:1px solid var(--wp--preset--color--outline-variant); }.fnc-ppw-flow figcaption h2 { max-width:28ch; font-size:clamp(1.45rem,2.4vw,1.9rem); font-weight:800; line-height:1.18; word-break:keep-all; }.fnc-ppw-flow figcaption p:last-child { max-width:64ch; margin-bottom:1rem; font-size:1.02rem; line-height:1.75; color:var(--wp--preset--color--on-surface-variant); word-break:keep-all; }
.fnc-ppw-flow__canvas { position:relative; min-height:31.25rem; }.fnc-ppw-flow__arrows { position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; }.fnc-ppw-flow__arrows .main { fill:none; stroke:#4f8760; stroke-width:3; stroke-linejoin:miter; }.fnc-ppw-flow__arrows .feedback { fill:none; stroke-width:2.5; stroke-dasharray:7 6; stroke-linejoin:miter; }.fnc-ppw-flow__arrows .forum { stroke:#bd7d22; }.fnc-ppw-flow__arrows .revision { stroke:#287047; }.fnc-ppw-flow__arrows marker path { fill:#4f8760; }.fnc-ppw-flow__arrows marker#ppw-arrow-forum path { fill:#bd7d22; }.fnc-ppw-flow__arrows marker#ppw-arrow-revision path { fill:#287047; }.fnc-ppw-flow__line { position:absolute; inset:0; z-index:1; padding:0; margin:0; list-style:none; }.fnc-ppw-flow__step { position:absolute; width:23%; transform:translateX(-50%); display:grid; justify-items:center; gap:.4rem; text-align:center; color:var(--ppw-ink); }.fnc-ppw-flow__step--01 { left:12.5%; top:6rem; }.fnc-ppw-flow__step--02 { left:37.5%; top:6rem; }.fnc-ppw-flow__step--03 { left:62.5%; top:6rem; }.fnc-ppw-flow__step--04 { left:87.5%; top:6rem; }.fnc-ppw-flow__step--05 { left:37.5%; top:17rem; }.fnc-ppw-flow__step--06 { left:62.5%; top:17rem; }.fnc-ppw-flow__step--07 { left:87.5%; top:17rem; }.fnc-ppw-flow__number { display:grid; place-items:center; width:4.8rem; height:4.8rem; border-radius:50%; background:var(--wp--preset--color--surface-container-lowest); border:3px solid #4f8760; color:var(--ppw-green); box-shadow:0 3px 12px rgba(31,100,64,.1); font-family:var(--wp--preset--font-family--label); font-size:.95rem; font-weight:800; }.fnc-ppw-flow__step .material-symbols-outlined { font-size:1.5rem; color:var(--ppw-green); }.fnc-ppw-flow__step strong { font-family:var(--wp--preset--font-family--headline); font-size:1.05rem; font-weight:800; line-height:1.3; letter-spacing:-.02em; word-break:keep-all; }
.fnc-ppw-flow__feedback { position:absolute; z-index:2; box-sizing:border-box; width:13.5rem; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.45rem; row-gap:.08rem; border-radius:10px; padding:.55rem .7rem; background:var(--wp--preset--color--surface-container-lowest); box-shadow:0 2px 10px rgba(23,58,42,.08); color:var(--ppw-ink); font-size:.72rem; line-height:1.3; }.fnc-ppw-flow__feedback span { grid-column:1; grid-row:1 / 3; align-self:center; font-size:1.8rem; color:var(--ppw-green); line-height:1; }.fnc-ppw-flow__feedback b,.fnc-ppw-flow__feedback small { grid-column:2; min-width:0; overflow-wrap:break-word; }.fnc-ppw-flow__feedback small { color:var(--wp--preset--color--on-surface-variant); }.fnc-ppw-flow__feedback--forum { right:0; top:.2rem; border-left:3px solid #bd7d22; }.fnc-ppw-flow__feedback--forum span { color:#bd7d22; }.fnc-ppw-flow__feedback--revision { left:0; bottom:0; border-left:3px solid #287047; }
.fnc-ppw-section--steps { background:var(--wp--preset--color--surface-container-low); }.fnc-ppw-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.5rem; }.fnc-ppw-step { display:flex; flex-direction:column; padding:1.35rem; background:var(--wp--preset--color--surface-container-lowest); border-radius:var(--fnc-radius-md); border-top:3px solid #8fb79a; }.fnc-ppw-step--vision { background:#edf6e9; border-color:var(--ppw-green); }.fnc-ppw-step__number { margin:0; color:var(--ppw-green); font-family:var(--wp--preset--font-family--label); font-weight:800; font-size:.75rem; }.fnc-ppw-step .material-symbols-outlined { color:var(--ppw-green); margin-top:.7rem; }.fnc-ppw-step h3 { font-size:1.15rem; margin:.55rem 0; }.fnc-ppw-step > p:last-of-type { font-size:.9rem; line-height:1.65; color:var(--wp--preset--color--on-surface-variant); margin:0; word-break:keep-all; }.fnc-ppw-step__meta { margin:auto 0 0; padding-top:1rem; }.fnc-ppw-step__meta div { display:grid; grid-template-columns:3.25rem 1fr; gap:.4rem; padding:.45rem 0; border-top:1px solid var(--wp--preset--color--outline-variant); font-size:.72rem; line-height:1.4; }.fnc-ppw-step__meta dt { color:var(--ppw-green); font-weight:800; }.fnc-ppw-step__meta dd { margin:0; color:var(--wp--preset--color--on-surface-variant); }.fnc-ppw-steps > .fnc-ppw-step:last-child { grid-column:span 2; }
.fnc-ppw-listening { padding:clamp(4rem,8vw,6rem) 0; background:var(--ppw-ink); color:#fff; }.fnc-ppw-listening__grid { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(2rem,5vw,4rem); align-items:start; }.fnc-ppw-listening .fnc-ppw-kicker { color:#b6e0b7; }.fnc-ppw-listening h2 { color:#fff; font-size:clamp(1.45rem,2.3vw,1.9rem); word-break:keep-all; }.fnc-ppw-listening h2 span { display:block; white-space:nowrap; }.fnc-ppw-listening p:not(.fnc-ppw-kicker) { line-height:1.8; margin:0 0 1rem; color:rgba(255,255,255,.88); }.fnc-ppw-listening strong { color:#cdf0c9; }
/* 설계도 링크 — 관문 세 박스 아래에 같은 시각 문법으로 놓는다. 밝은 카드로 두면
   딥그린 면 위에서 이 링크가 관문보다 무거워져 위계가 뒤집힌다. 투명 배경·흰 테두리로
   맞추고 활자를 관문 박스(제목 #cdf0c9, 본문 .82rem)와 같은 크기로 낮춘다. */
.fnc-ppw-blueprint { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.25rem; align-items:center; box-sizing:border-box; width:100%; margin:.75rem 0 0; padding:1rem; border:1px solid rgba(255,255,255,.2); border-radius:var(--fnc-radius-sm); background:transparent; color:#fff; text-decoration:none; transition:background-color .18s ease,border-color .18s ease; }.fnc-ppw-blueprint:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.42); }.fnc-ppw-blueprint:focus-visible { outline:2px solid #ccebc9; outline-offset:3px; }.fnc-ppw-blueprint__eyebrow { display:block; margin-bottom:.35rem; color:#b6e0b7; font-family:var(--wp--preset--font-family--label); font-size:.68rem; font-weight:800; letter-spacing:.12em; }.fnc-ppw-blueprint h3 { margin:0; color:#cdf0c9; font-size:1rem; line-height:1.45; word-break:keep-all; }.fnc-ppw-listening .fnc-ppw-blueprint p { max-width:70ch; margin:.35rem 0 0; color:rgba(255,255,255,.75); font-size:.82rem; line-height:1.55; }.fnc-ppw-blueprint__arrow { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:transparent; color:#cdf0c9; font-size:1rem; }
.fnc-ppw-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; list-style:none; padding:0; margin:2rem 0; }.fnc-ppw-fields li { padding:1rem; border:1px solid var(--wp--preset--color--outline-variant); border-radius:var(--fnc-radius-sm); font-family:var(--wp--preset--font-family--label); font-weight:700; }.fnc-ppw-goal { font-size:1.1rem; line-height:1.7; }.fnc-ppw-goal strong { color:var(--ppw-green); }.fnc-ppw-updated { color:var(--wp--preset--color--outline); font-size:.82rem; }.fnc-ppw .fnc-food-cta { margin-top:3rem; }.fnc-ppw .fnc-food-cta__inner { position:relative; isolation:isolate; overflow:hidden; padding:clamp(2rem,4vw,2.75rem); border-radius:1rem; background:linear-gradient(135deg,#0e2f2a,#17463f); color:#fff; box-shadow:0 20px 50px rgba(14,47,42,.18); text-align:center; }.fnc-ppw .fnc-food-cta__inner::after { content:""; position:absolute; z-index:-1; width:18rem; height:18rem; right:-7rem; bottom:-10rem; border-radius:50%; background:rgba(189,90,52,.28); }.fnc-ppw .fnc-food-cta__copy { max-width:44rem; margin-inline:auto; }.fnc-ppw .fnc-food-cta__eyebrow { display:block; margin-bottom:.75rem; color:#f6e3d8; font-family:var(--wp--preset--font-family--label); font-size:.75rem; font-weight:700; letter-spacing:.14em; }.fnc-ppw .fnc-food-cta h3 { margin:0 0 .75rem; color:#fff; font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.28; word-break:keep-all; }.fnc-ppw .fnc-food-cta p { max-width:42rem; margin:0 auto; color:rgba(255,255,255,.82); line-height:1.7; }.fnc-ppw .fnc-food-cta__actions { display:flex; align-items:center; justify-content:center; gap:.75rem; margin:2rem auto 0; }.fnc-ppw .fnc-food-cta__support { margin-left:1.5rem; }.fnc-ppw .fnc-food-cta__primary,.fnc-ppw .fnc-food-cta__secondary { box-sizing:border-box; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.75rem 1.125rem; border-radius:.625rem; font-family:var(--wp--preset--font-family--label); font-size:.9rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:background-color .18s ease,border-color .18s ease,color .18s ease; }.fnc-ppw .fnc-food-cta__primary { color:#8f3f1f; background:#f6e3d8; border:1px solid #f6e3d8; }.fnc-ppw .fnc-food-cta__primary:hover { color:#8f3f1f; background:#fff; border-color:#fff; }.fnc-ppw .fnc-food-cta__secondary { color:#fff; background:transparent; border:1px solid rgba(255,255,255,.55); }.fnc-ppw .fnc-food-cta__secondary:hover { color:#fff; background:rgba(255,255,255,.12); border-color:#fff; }.fnc-ppw .fnc-food-cta__primary .material-symbols-outlined,.fnc-ppw .fnc-food-cta__secondary .material-symbols-outlined { font-size:1.125rem; }

/* 두 축·연구 경계·비전 가설·다음 실행 항목 */
.fnc-ppw-axes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2.5rem; }.fnc-ppw-axis { position:relative; min-height:7.5rem; padding:1.5rem; border:1px solid var(--wp--preset--color--outline-variant); border-radius:var(--fnc-radius-md); background:var(--wp--preset--color--surface-container-lowest); }.fnc-ppw-axis span { color:var(--ppw-green); font-family:var(--wp--preset--font-family--label); font-size:.72rem; font-weight:800; letter-spacing:.1em; }.fnc-ppw-axis h3 { margin:.55rem 0; font-size:1.35rem; }.fnc-ppw-axis p { margin:0; color:var(--wp--preset--color--on-surface-variant); font-size:.9rem; line-height:1.65; word-break:keep-all; }.fnc-ppw-axis--horizontal::before { content:"→"; position:absolute; right:1.25rem; top:1rem; color:#8fb79a; font-size:2rem; }.fnc-ppw-axis--vertical::before { content:"↓"; position:absolute; right:1.25rem; top:1rem; color:#8fb79a; font-size:2rem; }.fnc-ppw-axis--process { grid-column:1 / -1; min-height:0; background:var(--ppw-ink); border-color:var(--ppw-ink); }.fnc-ppw-axis--process span { color:#b6e0b7; }.fnc-ppw-axis--process h3 { color:#fff; }.fnc-ppw-axis--process p { color:rgba(255,255,255,.8); }
.fnc-ppw-boundary { padding:clamp(3.5rem,7vw,5.5rem) 0; background:#edf3e9; border-block:1px solid #d4e2d3; }.fnc-ppw-boundary__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,7vw,6rem); }.fnc-ppw-boundary h2 { margin:0; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.22; word-break:keep-all; }.fnc-ppw-boundary p { margin:0 0 1rem; color:var(--wp--preset--color--on-surface-variant); line-height:1.8; }.fnc-ppw-boundary strong { color:var(--ppw-green); }.fnc-ppw-source-list { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1.5rem 0 0; list-style:none; }.fnc-ppw-source-list li { padding:.45rem .75rem; border-radius:999px; background:#fff; border:1px solid #c5d8c6; color:var(--ppw-ink); font-family:var(--wp--preset--font-family--label); font-size:.75rem; font-weight:700; }
.fnc-ppw-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.fnc-ppw-review-badge { flex:none; padding:.45rem .75rem; border-radius:999px; background:#f5eedf; color:#8b5d1d; border:1px solid #e4c78f; font-family:var(--wp--preset--font-family--label); font-size:.72rem; font-weight:800; }.fnc-ppw-visions { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }.fnc-ppw-visions article { padding:1.5rem; border:1px solid var(--wp--preset--color--outline-variant); border-radius:var(--fnc-radius-md); background:var(--wp--preset--color--surface-container-lowest); }.fnc-ppw-visions .material-symbols-outlined { display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--ppw-pale); color:var(--ppw-green); }.fnc-ppw-visions h3 { margin:1rem 0 .6rem; font-size:1.3rem; }.fnc-ppw-visions article { display:flex; flex-direction:column; }.fnc-ppw-visions p { margin:0; color:var(--wp--preset--color--on-surface-variant); font-size:.9rem; line-height:1.65; word-break:keep-all; }.fnc-ppw-visions small { display:block; margin:auto 0 0; padding-top:.75rem; border-top:1px solid var(--wp--preset--color--outline-variant); color:#8b5d1d; font-size:.8rem; line-height:1.5; word-break:keep-all; }.fnc-ppw-visions__more { max-width:74ch; margin:1.75rem 0 0; color:var(--wp--preset--color--on-surface-variant); font-size:.95rem; line-height:1.75; word-break:keep-all; }.fnc-ppw-visions__more a { color:var(--ppw-green); font-weight:700; }
.fnc-ppw-gates { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:0; margin:2.5rem 0 0; list-style:none; }.fnc-ppw-gates li { padding:1rem; border:1px solid rgba(255,255,255,.2); border-radius:var(--fnc-radius-sm); }.fnc-ppw-gates b,.fnc-ppw-gates span { display:block; }.fnc-ppw-gates b { color:#cdf0c9; margin-bottom:.35rem; }.fnc-ppw-gates span { color:rgba(255,255,255,.75); font-size:.82rem; line-height:1.5; }
.fnc-ppw-next { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; padding:0; margin:2.5rem 0; list-style:none; }.fnc-ppw-next li { display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1.25rem; border:1px solid var(--wp--preset--color--outline-variant); border-radius:var(--fnc-radius-md); }.fnc-ppw-next > li > span { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--ppw-pale); color:var(--ppw-green); font-family:var(--wp--preset--font-family--label); font-size:.72rem; font-weight:800; }.fnc-ppw-next b { color:var(--ppw-ink); }.fnc-ppw-next p { margin:.35rem 0 0; color:var(--wp--preset--color--on-surface-variant); font-size:.86rem; line-height:1.6; }
@media (max-width:800px) { .fnc-ppw-flow__canvas { min-height:0; padding:2rem 0 0; }.fnc-ppw-flow__arrows { display:none; }.fnc-ppw-flow__line { position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.fnc-ppw-flow__step { position:relative; left:auto; top:auto; width:auto; transform:none; grid-template-columns:auto 1fr; justify-items:start; text-align:left; border-bottom:1px solid var(--wp--preset--color--outline-variant); padding-bottom:.8rem; }.fnc-ppw-flow__step strong { align-self:center; }.fnc-ppw-flow__step .material-symbols-outlined { display:none; }.fnc-ppw-flow__feedback { position:static; margin-top:1rem; }.fnc-ppw-steps { grid-template-columns:repeat(2,1fr); }.fnc-ppw-listening__grid,.fnc-ppw-boundary__grid { grid-template-columns:1fr; }.fnc-ppw-fields { grid-template-columns:repeat(2,1fr); }.fnc-ppw-visions { grid-template-columns:1fr; } }
@media (max-width:600px) { .fnc-ppw-listening h2 span { white-space:normal; }.fnc-ppw-blueprint { grid-template-columns:1fr; gap:.75rem; }.fnc-ppw-blueprint__arrow { justify-self:start; }.fnc-ppw .fnc-food-cta__actions { align-items:stretch; flex-direction:column; }.fnc-ppw .fnc-food-cta__support { margin-left:0; }.fnc-ppw .fnc-food-cta__primary,.fnc-ppw .fnc-food-cta__secondary { width:100%; white-space:normal; } }
@media (max-width:480px) { .fnc-ppw-steps,.fnc-ppw-fields,.fnc-ppw-axes,.fnc-ppw-next,.fnc-ppw-gates { grid-template-columns:1fr; }.fnc-ppw-steps > .fnc-ppw-step:last-child { grid-column:auto; }.fnc-ppw-axis--process { grid-column:auto; }.fnc-ppw-flow__line { grid-template-columns:1fr; } }