@charset "UTF-8";
/* 독립 페이지(/method/, /guide/, /educators/) 전용. 메인 페이지에는 쓰지 않음 */
.page{padding:64px 0 88px}
.page-wrap{max-width:780px}
.page-breadcrumb{margin:0 0 22px;color:var(--ink-soft);font-size:.82rem}
.page-breadcrumb a{color:var(--accent-dark);text-decoration:none}
.page-breadcrumb a:hover{text-decoration:underline}
.page h1{margin:0 0 18px;font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);line-height:1.3;word-break:keep-all}
.page-lead{margin:0 0 36px;color:var(--ink-soft);font-size:1.06rem;line-height:1.8;word-break:keep-all}
.page h2{margin:44px 0 14px;font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.7rem);line-height:1.4;word-break:keep-all}
.page h3{margin:26px 0 8px;font-size:1.06rem;line-height:1.5}
.page p,.page li{line-height:1.8;word-break:keep-all}
.page p{margin:0 0 14px}
.page ul,.page ol{margin:0 0 16px;padding-left:22px}
.page li{margin-bottom:6px}
.page-box{margin:22px 0 26px;padding:20px 22px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--white)}
.page-box-title{font-weight:800}
.page-table{overflow-x:auto;margin:0 0 18px}
.page-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem}
.page-table th,.page-table td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6}
.page-table th{background:var(--paper-deep)}
.page-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.page-links .button{min-height:48px;gap:10px;padding:10px 18px;border-color:var(--line)}
@media (max-width:680px){
  .page{padding:40px 0 60px}
  .page-lead{font-size:.98rem}
  .page-links{flex-direction:column}
  .page-links .button{width:100%}
}

/* ── /method/ 전용: 문학 잡지 특집 기사형 (다른 페이지에 영향 없도록 .page-method 범위로 한정) ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-method .page-wrap{max-width:900px}
.page-method .prose,.page-method .method-hero{max-width:680px}
.page-method p,.page-method li{font-size:1.03rem;line-height:1.95}
.page-method p{margin:0 0 18px}
.page-method strong{font-weight:700;color:var(--ink)}
.page-method em{font-style:normal}

/* 머리글 */
.page-method .method-hero{margin-bottom:56px}
.page-method .method-hero .eyebrow{margin-bottom:18px}
.page-method h1{margin-bottom:18px;font-size:clamp(2.3rem,4.8vw,3.3rem);letter-spacing:-.055em}
.page-method .method-subtitle{margin:0;font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.6;color:var(--ink-soft)}
.page-method .method-subtitle em{color:var(--accent-dark)}
.page-method .method-lead{font-family:var(--serif);font-size:1.18rem;line-height:1.9}

/* 제목 위계: 큰 구간에만 장식선 */
.page-method .method-part{margin-top:104px}
.page-method .method-part.part-start{margin-top:136px;padding-top:60px;border-top:1px solid var(--line);position:relative}
.page-method .method-part.part-start::before{position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--accent);content:""}
.page-method h2{margin:0 0 26px;font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.45;letter-spacing:-.045em}
.page-method h3{margin:40px 0 12px;font-family:var(--serif);font-size:1.16rem;font-weight:600;line-height:1.55;color:var(--ink)}

/* 인용·목록 (박스 없이) */
.page-method .method-quote{margin:30px 0;font-family:var(--serif);font-size:1.28rem;line-height:1.7;color:var(--ink)}
.page-method .method-quote-soft{color:var(--ink-soft);margin-bottom:10px}
.page-method .method-pull{margin:36px 0;font-family:var(--serif);font-size:1.22rem;line-height:1.85;color:var(--ink)}
.page-method .question-list,.page-method .line-list{margin:4px 0 26px;padding:0;list-style:none}
.page-method .question-list li,.page-method .line-list li{margin:0 0 6px;font-family:var(--serif);font-size:1.08rem;line-height:1.8;color:var(--ink)}
.page-method .line-list li{padding-left:18px;color:#3d5548}
.page-method .method-note{margin-top:28px;color:var(--ink-soft);font-size:.94rem!important;line-height:1.85}
.page-method .method-verse{margin:32px 0;padding-left:22px;font-family:var(--serif);font-size:1.12rem;line-height:2.05}

/* 강조 박스: 핵심 문장에만 */
.page-method .method-box{max-width:720px;margin:48px 0;padding:30px 34px;border-left:2px solid var(--accent);background:var(--white)}
.page-method .method-box p{margin:0 0 10px;color:var(--ink-soft);font-size:.98rem}
.page-method .method-box p:last-child{margin-bottom:0}
.page-method .method-box-label{color:var(--accent-dark)!important;font-size:.72rem!important;font-weight:800;letter-spacing:.16em}
.page-method .method-box-strong{color:var(--ink)!important;font-family:var(--serif);font-size:1.26rem!important;line-height:1.75!important}

/* 읽는 순서 */
.page-method .method-steps-list{max-width:680px;margin:0 0 34px;padding:0;list-style:none;counter-reset:mstep}
.page-method .method-steps-list li{display:grid;grid-template-columns:42px 1fr;gap:10px;margin:0 0 14px;counter-increment:mstep}
.page-method .method-steps-list li::before{color:var(--ink-soft);font-family:var(--serif);font-size:1rem;content:counter(mstep,decimal-leading-zero)}

/* 선택지형 vs 1인칭: 두 영역 비교 */
.page-method .compare{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(6,auto);margin:44px 0}
.page-method .compare-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;padding:30px 32px 16px}
.page-method .compare-col dl{display:contents}
.page-method .compare-col-fpr{background:rgba(169,80,53,.055)}
.page-method .compare-title{margin:0 0 10px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:1.2rem}
.page-method .compare-col-fpr .compare-title{color:var(--accent-dark);border-bottom-color:rgba(169,80,53,.25)}
.page-method .compare-col dl>div{padding:14px 0;border-bottom:1px solid rgba(25,51,45,.08)}
.page-method .compare-col dl>div:last-child{border-bottom:0}
.page-method .compare dt{margin-bottom:3px;color:var(--ink-soft);font-size:.78rem;letter-spacing:.02em}
.page-method .compare dd{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}

/* 선택지 예시 → 자유 입력: 전후 비교 */
.page-method .before-after{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;margin:44px 0}
.page-method .ba-block+.ba-block{padding-left:56px;border-left:1px solid var(--line);margin-left:-56px}
.page-method .ba-label{margin:0 0 12px;color:var(--ink-soft);font-size:.9rem!important;line-height:1.7!important}
.page-method .ba-options{margin:0;padding:0;list-style:none}
.page-method .ba-options li{margin:0 0 6px;color:var(--ink-soft);font-size:1rem}
.page-method .ba-options span{display:inline-block;width:1.6em;font-weight:700}
.page-method .ba-prompt{margin:0 0 24px;font-family:var(--serif);font-size:1.16rem;line-height:1.8;color:var(--ink)}
.page-method .ba-free{margin:0;padding:0;list-style:none}
.page-method .ba-free li{margin:0 0 4px;font-family:var(--serif);font-size:1.05rem;color:#3d5548}

/* 할 수 있는 것 / 바꾸지 않는 것: 두 영역 */
.page-method .two-areas{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:36px 0 8px}
.page-method .area+.area{padding-left:56px;border-left:1px solid var(--line);margin-left:-56px}
.page-method .area-title{margin:0 0 14px;font-size:1.1rem}
.page-method .area ul{margin:0;padding:0;list-style:none}
.page-method .area li{margin:0 0 6px;font-size:1rem}

/* 말·속말·행동: 약한 카드 */
.page-method .input-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:8px 0 36px}
.page-method .input-card{padding:24px 22px 22px;border-top:1px solid var(--line);background:rgba(255,253,247,.5)}
.page-method .input-card p{margin:0}
.page-method .input-card-tag{margin:0 0 8px;font-size:1.3rem;font-weight:600}
.page-method .input-card-desc{margin-bottom:14px!important;color:var(--ink-soft);font-size:.92rem!important;line-height:1.7!important}
.page-method .input-card-ex{font-family:var(--serif);font-size:1rem!important;line-height:1.65!important;color:#3d5548}

/* 게임·자유서사 비교표: 가로선만 */
.page-method .method-table{margin:40px 0}
.page-method .method-table table{width:100%;border-collapse:collapse}
.page-method .method-table th,.page-method .method-table td{padding:14px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.95rem;line-height:1.6;word-break:keep-all}
.page-method .method-table thead th{border-bottom:1px solid var(--ink);color:var(--ink-soft);font-size:.8rem;font-weight:700}
.page-method .method-table tbody th{width:15%;color:var(--ink-soft);font-size:.86rem;font-weight:700}
.page-method .method-table .col-fpr{background:rgba(169,80,53,.055)}
.page-method .method-table thead .col-fpr{color:var(--accent-dark)}

/* 마지막 문구 */
.page-method .method-finale{margin:140px 0 0;padding:72px 24px 68px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.page-method .method-finale-main{margin:0 0 24px;font-family:var(--serif);font-size:clamp(1.65rem,3.6vw,2.4rem);font-weight:600;line-height:1.6;letter-spacing:-.05em}
.page-method .method-finale-sub{margin:0;color:var(--ink-soft);font-size:1.02rem}

@media (max-width:680px){
  .page-method p,.page-method li{font-size:.99rem;line-height:1.9}
  .page-method .method-hero{margin-bottom:40px}
  .page-method h1{font-size:clamp(2rem,8.6vw,2.45rem)}
  .page-method .method-subtitle{font-size:1.14rem}
  .page-method .method-lead{font-size:1.1rem}
  .page-method .method-part{margin-top:68px}
  .page-method .method-part.part-start{margin-top:86px;padding-top:40px}
  .page-method h2{margin-bottom:20px;font-size:1.4rem}
  .page-method h3{margin-top:30px;font-size:1.08rem}
  .page-method .method-quote{font-size:1.16rem}
  .page-method .method-pull{font-size:1.1rem}
  .page-method .method-box{margin:36px 0;padding:24px 20px}
  .page-method .method-box-strong{font-size:1.12rem!important}
  .page-method .method-steps-list li{grid-template-columns:34px 1fr;gap:6px}
  /* 비교: 선택지형 묶음 / 1인칭 묶음 */
  .page-method .compare{display:block;margin:32px 0}
  .page-method .compare-col{display:block;padding:22px 20px 8px}
  .page-method .compare-col dl{display:block;margin:0}
  .page-method .compare-col+.compare-col{margin-top:18px}
  .page-method .compare-col dl>div{padding:12px 0}
  .page-method .before-after,.page-method .two-areas{display:block;margin:32px 0}
  .page-method .ba-block+.ba-block,.page-method .area+.area{margin:28px 0 0;padding:28px 0 0;border-left:0;border-top:1px solid var(--line)}
  .page-method .input-cards{grid-template-columns:1fr;gap:0}
  .page-method .input-card{padding:20px 0;background:transparent}
  .page-method .input-card:last-child{border-bottom:1px solid var(--line)}
  /* 게임 비교표: 항목별 줄 구분(카드 없음) */
  .page-method .method-table table,.page-method .method-table tbody,.page-method .method-table tr,.page-method .method-table th,.page-method .method-table td{display:block;width:auto}
  .page-method .method-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .page-method .method-table tr{padding:16px 0 10px;border-top:1px solid var(--line)}
  .page-method .method-table tr:last-child{border-bottom:1px solid var(--line)}
  .page-method .method-table tbody th{width:auto;padding:0 0 8px;border:0;color:var(--ink);font-family:var(--serif);font-size:1.04rem}
  .page-method .method-table td{display:grid;grid-template-columns:8.5em 1fr;gap:10px;padding:5px 0;border:0;font-size:.94rem}
  .page-method .method-table td.col-fpr{margin:4px -8px 0;padding:6px 8px}
  .page-method .method-table td::before{color:var(--ink-soft);font-size:.78rem;line-height:1.7;content:attr(data-label)}
  .page-method .method-finale{margin-top:96px;padding:52px 8px 48px}
}

/* ── /method/ 최종 디자인 보정: 장식보다 읽기 흐름을 우선 ── */
.page-method .page-wrap{max-width:960px}
.page-method .prose,.page-method .method-hero{max-width:720px}
.page-method p,.page-method li{font-size:1rem;line-height:1.92}
.page-method .method-hero{margin-bottom:72px}
.page-method .method-hero .eyebrow{margin-bottom:20px}
.page-method h1{font-size:clamp(2.45rem,4.7vw,3.45rem);line-height:1.24}
.page-method .method-subtitle{max-width:620px;font-size:clamp(1.18rem,2.2vw,1.48rem);line-height:1.72}
.page-method .method-lead{font-size:1.17rem;line-height:1.95}
.page-method .method-part{margin-top:112px}
.page-method .method-part.part-start{margin-top:136px;padding-top:64px}
.page-method h2{max-width:760px;margin-bottom:28px;font-size:clamp(1.55rem,2.7vw,2rem);line-height:1.42}
.page-method h3{margin-top:38px}

/* 강조는 '박스' 대신 편집자 주석처럼 처리 */
.page-method .method-box{max-width:720px;margin:52px 0;padding:8px 0 8px 28px;border-left:3px solid var(--accent);background:transparent}
.page-method .method-box p{font-size:.96rem}
.page-method .method-box-strong{font-size:1.23rem!important;line-height:1.78!important}
.page-method .method-quote{margin:34px 0;font-size:1.26rem}
.page-method .method-pull{margin:40px 0;font-size:1.2rem}
.page-method .question-list,.page-method .line-list{margin-bottom:30px}
.page-method .line-list li{padding-left:0;color:#3d5548}
.page-method .line-list li::before{content:"— ";color:var(--accent-dark)}

/* 읽는 순서: 숫자와 문장만 남겨 설명서 느낌을 줄임 */
.page-method .method-steps-list{margin-top:8px;margin-bottom:42px}
.page-method .method-steps-list li{grid-template-columns:48px 1fr;gap:14px;margin:0;padding:14px 0;border-bottom:1px solid rgba(25,51,45,.08)}
.page-method .method-steps-list li:first-child{border-top:1px solid rgba(25,51,45,.08)}
.page-method .method-steps-list li::before{color:var(--accent-dark);font-size:.9rem;letter-spacing:.04em}

/* 선택지형 vs 1인칭: 표가 아니라 두 개의 편집 영역처럼 */
.page-method .compare{grid-template-columns:1fr 1fr;gap:56px;margin:48px 0 54px}
.page-method .compare-col{padding:24px 0 0;border-top:1px solid var(--line);background:transparent}
.page-method .compare-col-fpr{border-top:2px solid var(--accent);background:transparent}
.page-method .compare-title{padding-bottom:16px;border-bottom:0;font-size:1.18rem}
.page-method .compare-col-fpr .compare-title{border-bottom:0}
.page-method .compare-col dl>div{padding:13px 0;border-bottom:1px solid rgba(25,51,45,.07)}
.page-method .compare dt{font-size:.76rem}
.page-method .compare dd{font-size:.98rem;line-height:1.65}
.page-method .compare-col-fpr dd{font-weight:600}

/* 선택지 예시와 자유 입력 예시는 박스 중첩 없이 한 흐름으로 */
.page-method .before-after{grid-template-columns:.76fr 1.24fr;gap:72px;margin:52px 0}
.page-method .ba-block{padding-top:18px;border-top:1px solid var(--line)}
.page-method .ba-block+.ba-block{margin-left:0;padding:18px 0 0;border-left:0;border-top:2px solid var(--accent)}
.page-method .ba-prompt{margin-top:4px;font-size:1.18rem}
.page-method .ba-free li{margin-bottom:6px}

/* 독자의 자유 / 작품 보호 */
.page-method .two-areas{gap:64px;margin:42px 0 18px}
.page-method .area{padding-top:18px;border-top:1px solid var(--line)}
.page-method .area+.area{margin-left:0;padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}
.page-method .area-title{margin-bottom:18px}
.page-method .area li{position:relative;padding-left:16px;margin-bottom:8px}
.page-method .area li::before{position:absolute;left:0;color:var(--accent-dark);content:"·"}

/* 말·속말·행동: 카드보다 3단 편집 칼럼에 가깝게 */
.page-method .input-cards{gap:32px;margin:16px 0 44px}
.page-method .input-card{padding:22px 0 0;border-top:1px solid var(--line);background:transparent}
.page-method .input-card-tag{font-size:1.2rem}

/* 긴 비교표는 색칠을 없애고 활자·선으로만 구분 */
.page-method .method-table{margin:44px 0 50px}
.page-method .method-table th,.page-method .method-table td{padding:15px 12px;background:transparent}
.page-method .method-table .col-fpr{background:transparent}
.page-method .method-table thead .col-fpr{color:var(--accent-dark);border-bottom-color:var(--accent)}
.page-method .method-table tbody td.col-fpr{font-weight:600;color:#32483f}

/* 마지막은 별도 카드가 아니라 넓은 여백과 한 줄의 선으로 마무리 */
.page-method .method-finale{margin-top:150px;padding:72px 0 18px;border-top:1px solid var(--ink);border-bottom:0;text-align:left}
.page-method .method-finale-main{max-width:720px;margin-bottom:26px;font-size:clamp(1.7rem,3.5vw,2.5rem);line-height:1.62}
.page-method .method-finale-sub{max-width:680px;font-size:1rem;line-height:1.9}

@media (max-width:680px){
  .page-method p,.page-method li{font-size:.98rem;line-height:1.88}
  .page-method .method-hero{margin-bottom:52px}
  .page-method h1{font-size:clamp(2.05rem,9vw,2.55rem)}
  .page-method .method-subtitle{font-size:1.12rem}
  .page-method .method-part{margin-top:82px}
  .page-method .method-part.part-start{margin-top:104px;padding-top:46px}
  .page-method h2{font-size:1.43rem;line-height:1.48}
  .page-method .method-box{margin:38px 0;padding:4px 0 4px 20px}
  .page-method .method-box-strong{font-size:1.1rem!important}
  .page-method .method-steps-list li{grid-template-columns:36px 1fr;gap:8px;padding:12px 0}
  .page-method .compare{display:block;margin:36px 0 40px}
  .page-method .compare-col{padding:18px 0 0}
  .page-method .compare-col+.compare-col{margin-top:34px}
  .page-method .before-after,.page-method .two-areas{display:block;margin:36px 0}
  .page-method .ba-block+.ba-block,.page-method .area+.area{margin-top:34px;padding-top:18px}
  .page-method .input-cards{gap:0}
  .page-method .input-card{padding:20px 0}
  .page-method .method-table td.col-fpr{margin:0;padding:5px 0;background:transparent}
  .page-method .method-finale{margin-top:108px;padding-top:48px;text-align:left}
}

/* ── /guide/ · /educators/ 최종 편집형 디자인 ── */
.page-guide .page-wrap,.page-educators .page-wrap{max-width:960px}
.page-guide p,.page-guide li,.page-educators p,.page-educators li{font-size:1rem;line-height:1.9}
.page-guide h1,.page-educators h1{margin:0 0 20px;font-size:clamp(2.45rem,4.7vw,3.45rem);line-height:1.24;letter-spacing:-.055em}
.page-guide h2,.page-educators h2{margin:0 0 28px;font-size:clamp(1.55rem,2.7vw,2rem);line-height:1.42;letter-spacing:-.045em}
.page-guide h3,.page-educators h3{font-family:var(--serif);font-size:1.14rem;font-weight:600;line-height:1.55}
.page-eyebrow{margin:0 0 20px;color:var(--accent-dark);font-size:.74rem!important;font-weight:800;letter-spacing:.18em;line-height:1.3!important}
.section-lead{max-width:720px;margin:-4px 0 34px!important;color:var(--ink-soft);font-size:1.02rem!important;line-height:1.85!important}
.section-note{max-width:720px;margin:28px 0 0!important;color:var(--ink-soft);font-size:.93rem!important;line-height:1.85!important}

/* guide */
.page-guide .guide-hero{max-width:760px;margin:0 0 86px}
.page-guide .guide-subtitle{max-width:690px;margin:0;color:var(--ink-soft);font-family:var(--serif);font-size:clamp(1.2rem,2.25vw,1.5rem);line-height:1.72}
.page-guide .guide-subtitle strong{color:var(--ink);font-weight:600}
.page-guide .guide-part{margin-top:112px}
.page-guide .guide-part.guide-start{margin-top:0}
.page-guide .guide-steps{max-width:780px;margin:0;padding:0;list-style:none;counter-reset:gstep}
.page-guide .guide-steps li{display:grid;grid-template-columns:42px 160px 1fr;gap:18px;margin:0;padding:18px 0;border-bottom:1px solid rgba(25,51,45,.09);counter-increment:gstep}
.page-guide .guide-steps li:first-child{border-top:1px solid rgba(25,51,45,.09)}
.page-guide .guide-steps li::before{color:var(--accent-dark);font-family:var(--serif);font-size:.92rem;content:counter(gstep,decimal-leading-zero)}
.page-guide .step-title{font-weight:700;color:var(--ink)}
.page-guide .step-desc{color:var(--ink-soft);line-height:1.78}
.page-guide .guide-pull{max-width:760px;margin:72px 0 0;padding:8px 0 8px 28px;border-left:3px solid var(--accent)}
.page-guide .guide-pull p{margin:0 0 8px;color:var(--ink-soft);font-size:.96rem}
.page-guide .guide-pull strong{display:block;margin:2px 0 10px;font-family:var(--serif);font-size:1.28rem;line-height:1.72;color:var(--ink)}
.page-guide .guide-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:22px 0 0}
.page-guide .guide-inputs article{padding:22px 0 0;border-top:1px solid var(--line)}
.page-guide .guide-inputs h3{margin:0 0 8px;font-size:1.22rem}
.page-guide .guide-inputs p{margin:0}
.page-guide .input-explain{color:var(--ink-soft);font-size:.91rem!important;line-height:1.7!important}
.page-guide .input-example{margin-top:14px!important;font-family:var(--serif);color:#3d5548;font-size:1.02rem!important;line-height:1.72!important}
.page-guide .guide-scene{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;margin:34px 0 0}
.page-guide .scene-text,.page-guide .scene-response{padding-top:20px;border-top:1px solid var(--line)}
.page-guide .scene-response{border-top:2px solid var(--accent)}
.page-guide .scene-label{display:block;margin-bottom:14px;color:var(--ink-soft);font-size:.76rem;font-weight:800;letter-spacing:.08em}
.page-guide .guide-scene p{font-size:1.05rem;line-height:1.8}
.page-guide .scene-note{margin-top:16px!important;color:var(--ink-soft);font-size:.9rem!important}
.page-guide .guide-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:24px}
.page-guide .guide-three article{padding-top:22px;border-top:1px solid var(--line)}
.page-guide .guide-num{display:block;margin-bottom:18px;color:var(--accent-dark);font-size:.78rem;font-weight:800;letter-spacing:.08em}
.page-guide .guide-three h3{margin:0 0 12px}
.page-guide .guide-three p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.8}
.page-guide .guide-faq{padding-top:70px;border-top:1px solid var(--line)}
.page-guide .faq-list{max-width:820px;margin-top:22px;border-top:1px solid var(--line)}
.page-guide .faq-list details{border-bottom:1px solid var(--line)}
.page-guide .faq-list summary{position:relative;padding:22px 42px 22px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.08rem;font-weight:600;line-height:1.55;color:var(--ink)}
.page-guide .faq-list summary::-webkit-details-marker{display:none}
.page-guide .faq-list summary::after{position:absolute;right:4px;top:22px;color:var(--accent-dark);font-size:1.25rem;font-weight:400;content:"+"}
.page-guide .faq-list details[open] summary::after{content:"−"}
.page-guide .faq-answer{max-width:720px;padding:0 34px 22px 0}
.page-guide .faq-answer p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.85}
.page-guide .faq-answer strong{color:var(--ink)}
.page-guide .guide-end{max-width:760px;margin-top:130px;padding-top:56px;border-top:1px solid var(--ink)}
.page-guide .guide-end p{max-width:690px}

/* educators */
.page-educators .edu-hero{max-width:790px;margin-bottom:96px}
.page-educators .edu-subtitle{max-width:730px;margin:0 0 30px;color:var(--ink-soft);font-family:var(--serif);font-size:clamp(1.2rem,2.25vw,1.5rem);line-height:1.72}
.page-educators .edu-subtitle strong{color:var(--ink);font-weight:600}
.page-educators .edu-status{max-width:720px;margin:0;padding-left:20px;border-left:2px solid var(--line);color:var(--ink-soft);font-size:.94rem;line-height:1.85}
.page-educators .edu-part{margin-top:116px}
.page-educators .edu-part.edu-start{margin-top:0}
.page-educators .edu-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:30px 0 0}
.page-educators .edu-modes article{padding-top:22px;border-top:1px solid var(--line)}
.page-educators .mode-no{display:block;margin-bottom:16px;color:var(--accent-dark);font-size:.78rem;font-weight:800;letter-spacing:.08em}
.page-educators .edu-modes h3{margin:0 0 12px}
.page-educators .edu-modes p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.82}
.page-educators .edu-editorial{max-width:720px}
.page-educators .edu-editorial blockquote{margin:40px 0;padding:0 0 0 24px;border-left:3px solid var(--accent);font-family:var(--serif);font-size:1.28rem;line-height:1.8;color:var(--ink)}
.page-educators .edu-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:36px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-educators .edu-flow div{padding:24px 22px 22px;border-right:1px solid var(--line)}
.page-educators .edu-flow div:last-child{border-right:0}
.page-educators .edu-flow span{display:block;margin-bottom:12px;color:var(--accent-dark);font-family:var(--serif);font-size:1.05rem;font-weight:600}
.page-educators .edu-flow p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.75}
.page-educators .edu-questions{max-width:760px;margin:30px 0 28px;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-educators .edu-questions p{margin:0;padding:14px 0;border-bottom:1px solid rgba(25,51,45,.07);font-family:var(--serif);font-size:1.06rem;line-height:1.7}
.page-educators .edu-questions p:last-child{border-bottom:0}
.page-educators .edu-two,.page-educators .edu-guidance{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:28px}
.page-educators .edu-two>div,.page-educators .edu-guidance>div{padding-top:20px;border-top:1px solid var(--line)}
.page-educators .edu-two h3,.page-educators .edu-guidance h3{margin:0 0 14px}
.page-educators .edu-two ul,.page-educators .edu-guidance ul{margin:0;padding:0;list-style:none}
.page-educators .edu-two li,.page-educators .edu-guidance li{position:relative;margin:0 0 8px;padding-left:15px;color:var(--ink-soft);font-size:.96rem;line-height:1.8}
.page-educators .edu-two li::before,.page-educators .edu-guidance li::before{position:absolute;left:0;color:var(--accent-dark);content:"·"}
.page-educators .edu-lesson{max-width:840px;margin-top:30px;border-top:1px solid var(--ink)}
.page-educators .lesson-meta{display:flex;flex-wrap:wrap;gap:14px 36px;padding:18px 0;border-bottom:1px solid var(--line)}
.page-educators .lesson-meta p{margin:0;color:var(--ink-soft);font-size:.9rem}
.page-educators .lesson-meta strong{margin-right:8px;color:var(--ink)}
.page-educators .lesson-timeline{margin:0;padding:0;list-style:none}
.page-educators .lesson-timeline li{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.page-educators .lesson-time{color:var(--accent-dark);font-family:var(--serif);font-weight:600}
.page-educators .lesson-timeline strong{display:block;margin-bottom:5px;font-family:var(--serif);font-size:1.05rem}
.page-educators .lesson-timeline p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.78}
.page-educators .edu-checklist{max-width:820px;margin-top:26px;border-top:1px solid var(--line)}
.page-educators .edu-checklist>div{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.page-educators .edu-checklist>div>span{color:var(--accent-dark);font-family:var(--serif);font-size:.9rem}
.page-educators .edu-checklist p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.82}
.page-educators .edu-checklist strong{color:var(--ink)}
.page-educators .edu-fit h3{font-size:1.06rem}
.page-educators .edu-limit{max-width:760px;margin-top:134px;padding-top:58px;border-top:1px solid var(--ink)}
.page-educators .edu-limit p{max-width:720px}

@media (max-width:760px){
  .page-guide .guide-steps li{grid-template-columns:34px 1fr;gap:8px 12px;padding:15px 0}
  .page-guide .step-title{grid-column:2}
  .page-guide .step-desc{grid-column:2}
  .page-guide .guide-inputs,.page-guide .guide-three,.page-educators .edu-modes{grid-template-columns:1fr;gap:0}
  .page-guide .guide-inputs article,.page-guide .guide-three article,.page-educators .edu-modes article{padding:20px 0;border-bottom:1px solid var(--line)}
  .page-guide .guide-scene,.page-educators .edu-two,.page-educators .edu-guidance{grid-template-columns:1fr;gap:30px}
  .page-guide .scene-response{margin-top:6px}
  .page-educators .edu-flow{grid-template-columns:1fr 1fr}
  .page-educators .edu-flow div:nth-child(2){border-right:0}
  .page-educators .edu-flow div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

@media (max-width:680px){
  .page-guide p,.page-guide li,.page-educators p,.page-educators li{font-size:.98rem;line-height:1.88}
  .page-guide h1,.page-educators h1{font-size:clamp(2.05rem,9vw,2.55rem)}
  .page-guide h2,.page-educators h2{font-size:1.43rem;line-height:1.48}
  .page-guide .guide-hero,.page-educators .edu-hero{margin-bottom:64px}
  .page-guide .guide-subtitle,.page-educators .edu-subtitle{font-size:1.12rem}
  .page-guide .guide-part,.page-educators .edu-part{margin-top:84px}
  .page-guide .guide-pull{margin-top:52px;padding-left:20px}
  .page-guide .guide-pull strong{font-size:1.12rem}
  .page-guide .guide-faq{padding-top:46px}
  .page-guide .faq-list summary{padding:20px 34px 20px 0;font-size:1.02rem}
  .page-guide .faq-list summary::after{top:20px}
  .page-guide .faq-answer{padding-right:0}
  .page-guide .guide-end,.page-educators .edu-limit{margin-top:104px;padding-top:46px}
  .page-educators .edu-flow{grid-template-columns:1fr}
  .page-educators .edu-flow div{border-right:0;border-bottom:1px solid var(--line)}
  .page-educators .edu-flow div:last-child{border-bottom:0}
  .page-educators .edu-flow div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .page-educators .edu-editorial blockquote{font-size:1.15rem}
  .page-educators .lesson-timeline li{grid-template-columns:52px 1fr;gap:14px}
  .page-educators .edu-checklist>div{grid-template-columns:34px 1fr;gap:12px}
}


/* ── 2026-09-29 미리보기: PC 공간 활용 + 모바일 여백 압축 ── */
@media (min-width:901px){
  .page{padding:52px 0 72px}
  .page-method .page-wrap,.page-guide .page-wrap,.page-educators .page-wrap{max-width:1240px}

  /* 긴 본문은 PC에서 화면 폭을 충분히 사용한다. */
  .page-method .prose,.page-method .method-hero{max-width:1140px}
  .page-method .method-subtitle{max-width:980px}
  .page-method .method-lead{max-width:1140px}
  .page-method p,.page-method li{line-height:1.78}
  .page-method p{margin-bottom:14px}
  .page-method .method-hero{margin-bottom:48px}
  .page-method h1{font-size:clamp(2.35rem,3.8vw,3rem)}
  .page-method .method-part{margin-top:68px}
  .page-method .method-part.part-start{margin-top:86px;padding-top:40px}
  .page-method h2{max-width:1140px;margin-bottom:18px}
  .page-method h3{margin-top:30px}
  .page-method .method-quote{margin:24px 0}
  .page-method .method-pull{margin:30px 0}
  .page-method .method-box{max-width:980px;margin:34px 0}
  .page-method .method-steps-list{max-width:1140px;margin-bottom:28px}
  .page-method .method-steps-list li{padding:10px 0}
  .page-method .compare{gap:36px;margin:34px 0 40px}
  .page-method .before-after{gap:40px;margin:36px 0}
  .page-method .two-areas{gap:42px;margin:30px 0 10px}
  .page-method .input-cards{gap:26px;margin-bottom:34px}
  .page-method .method-table{margin:34px 0 40px}
  .page-method .method-finale{margin-top:96px;padding-top:50px}

  /* 이용안내 */
  .page-guide .guide-hero{max-width:1140px;margin-bottom:50px}
  .page-guide .guide-subtitle{max-width:1080px}
  .page-guide .guide-part{margin-top:68px}
  .page-guide .guide-steps{max-width:1140px}
  .page-guide .guide-steps li{grid-template-columns:42px 170px 1fr;padding:13px 0}
  .page-guide .guide-pull{max-width:1100px;margin-top:42px}
  .page-guide .guide-inputs{gap:26px}
  .page-guide .guide-scene{gap:42px;margin-top:26px}
  .page-guide .guide-three{gap:28px}
  .page-guide .guide-faq{padding-top:48px}
  .page-guide .faq-list{max-width:1120px}
  .page-guide .faq-answer{max-width:1040px}
  .page-guide .guide-end{max-width:1140px;margin-top:80px;padding-top:38px}

  /* 교사·학교 */
  .page-educators .edu-hero{max-width:1140px;margin-bottom:52px}
  .page-educators .edu-subtitle{max-width:1080px}
  .page-educators .edu-status{max-width:1080px}
  .page-educators .edu-part{margin-top:70px}
  .page-educators .edu-modes{gap:28px;margin-top:22px}
  .page-educators .edu-editorial{max-width:1140px}
  .page-educators .edu-editorial blockquote{margin:30px 0}
  .page-educators .edu-flow{margin:26px 0}
  .page-educators .edu-questions{max-width:1140px;margin:22px 0}
  .page-educators .edu-two,.page-educators .edu-guidance{gap:42px;margin-top:22px}
  .page-educators .edu-lesson{max-width:1140px;margin-top:22px}
  .page-educators .lesson-timeline li{padding:15px 0}
  .page-educators .edu-checklist{max-width:1140px}
  .page-educators .edu-checklist>div{padding:14px 0}
  .page-educators .edu-limit{max-width:1140px;margin-top:82px;padding-top:38px}
}

@media (max-width:680px){
  .page{padding:32px 0 48px}
  .page-breadcrumb{margin-bottom:16px}
  .page-method .method-hero{margin-bottom:42px}
  .page-method .method-hero .eyebrow{margin-bottom:14px}
  .page-method h1{margin-bottom:12px}
  .page-method .method-part{margin-top:58px}
  .page-method .method-part.part-start{margin-top:70px;padding-top:30px}
  .page-method h2{margin-bottom:16px}
  .page-method h3{margin-top:24px}
  .page-method p{margin-bottom:12px}
  .page-method .method-quote{margin:20px 0}
  .page-method .method-pull{margin:24px 0}
  .page-method .method-box{margin:30px 0}
  .page-method .method-steps-list{margin-bottom:26px}
  .page-method .compare{margin:28px 0 32px}
  .page-method .compare-col+.compare-col{margin-top:26px}
  .page-method .before-after,.page-method .two-areas{margin:28px 0}
  .page-method .ba-block+.ba-block,.page-method .area+.area{margin-top:26px}
  .page-method .method-finale{margin-top:78px;padding-top:38px}

  .page-guide .guide-hero,.page-educators .edu-hero{margin-bottom:42px}
  .page-guide .guide-part,.page-educators .edu-part{margin-top:58px}
  .page-guide .guide-pull{margin-top:38px}
  .page-guide .guide-faq{padding-top:36px}
  .page-guide .faq-list summary{padding-top:17px;padding-bottom:17px}
  .page-guide .faq-list summary::after{top:17px}
  .page-guide .guide-end,.page-educators .edu-limit{margin-top:70px;padding-top:32px}
  .page-educators .edu-editorial blockquote{margin:30px 0}
  .page-educators .edu-flow{margin-top:26px}
}
