/* 제안용 층: 사이트 디자인과 섞이지 않도록 '남보라' 한 가지 색으로만 표시한다. */
:root { --pn: #3a3f9e; --pn-soft: #eef0ff; --pn-ink: #1f2266; }

/* 맨 위 안내 띠 */
.pn-ribbon { background: var(--pn-ink); color: #fff; font-size: .85rem; }
.pn-ribbon__in { width: min(100% - 2 * var(--gutter), 62rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding-block: .4rem; flex-wrap: wrap; }
.pn-ribbon__text strong { color: #ffd98a; }
.pn-ribbon__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pn-btn { font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: .3em; min-height: 2.2rem; padding: .1em .95em; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; text-decoration: none; cursor: pointer; }
.pn-btn--solid { background: #fff; color: var(--pn-ink); border-color: #fff; }
.pn-btn[aria-pressed="false"] { opacity: .85; }
@media (max-width: 760px) {
	.pn-ribbon__more { display: none; }
	.pn-ribbon__in { justify-content: space-between; }
}

/* 화면별 제안 메모 */
.pnote { margin-top: 1.4rem; padding: .9rem 1.1rem; background: var(--pn-soft); border-left: 5px solid var(--pn); border-radius: .5rem; color: var(--pn-ink); font-size: .85rem; line-height: 1.65; max-width: 48rem; }
.pnote__tag { font-weight: 800; margin-bottom: .25rem; }
.pnote__badge { display: inline-block; background: var(--pn); color: #fff; border-radius: 999px; padding: 0 .7em; margin-right: .3em; font-size: .78rem; }
.shead--center + * .pnote, .shead--center ~ .pnote { margin-inline: auto; }
.family .pnote { margin-top: 2rem; }
.hero + .pnote, .trust .pnote { margin-bottom: 1.2rem; }
[data-notes="off"] .pnote { display: none; }
/* 첫 화면 메모는 사진 아래 띠로 */
.hero ~ .pnote { width: min(100% - 2 * var(--gutter), 62rem); margin: 1.2rem auto 0; max-width: none; }

/* 데모 안내 토스트 (카톡·전화 버튼을 눌렀을 때) */
.pn-toast { position: fixed; left: 50%; bottom: calc(4.4rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 200; width: min(92vw, 30rem); background: var(--pn-ink); color: #fff; padding: .9rem 1.1rem; border-radius: .8rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); font-size: .9rem; line-height: 1.55; }
.pn-toast strong { color: #ffd98a; }
@media (min-width: 761px) { .pn-toast { bottom: 2rem; } }

/* ========== 제안서 페이지 ========== */
.pn { --pn-gap: 3.4rem; }
.pn-hero { background: var(--deep); color: #fff; padding-block: 3.4rem 2.6rem; }
.pn-hero__kicker { color: var(--gold); font-weight: 700; font-size: .9rem; }
.pn-hero__title { font-size: 2.5rem; margin-top: .7rem; }
.pn-hero__lead { margin-top: 1rem; max-width: 36em; font-size: 1.05rem; color: #e3eef0; }
.pn-hero__meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.6rem; }
.pn-hero__meta li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: .7rem; padding: .5rem .9rem; font-weight: 700; }
.pn-hero__meta span { display: block; font-size: .78rem; color: var(--gold); font-weight: 700; }
.pn-toc ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; counter-reset: toc; }
.pn-toc li { counter-increment: toc; }
.pn-toc a { display: inline-flex; gap: .4em; align-items: center; min-height: 2.4rem; padding: .1em .9em; border-radius: 999px; background: #fff; color: var(--deep); font-weight: 700; text-decoration: none; font-size: .9rem; }
.pn-toc a::before { content: counter(toc); font-family: var(--serif); color: var(--gold-text); }
@media (max-width: 760px) { .pn-hero__title { font-size: 1.8rem; } }

.pn-sec { padding-block: var(--pn-gap); }
.pn-sec--sand { background: var(--sand); }
.pn-sec--deep { background: var(--deep); color: #fff; }
.pn-num { font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--gold-text); line-height: 1; }
.pn-sec--deep .pn-num { color: var(--gold); }
.pn-sec__title { font-size: 1.75rem; margin: .4rem 0 .8rem; }
.pn-sec__lead { color: var(--ink2); max-width: 44em; margin-bottom: 1.6rem; }
.pn-h3 { font-size: 1.3rem; margin: 1.6rem 0 1rem; }
.pn-inline-badge { display: inline-block; background: var(--pn); color: #fff; border-radius: 999px; padding: 0 .6em; font-size: .8rem; font-weight: 800; }
.pn-note-small { color: var(--ink2); font-size: .85rem; margin-top: 1rem; }
.pn-sec--deep .pn-note-small { color: #d4e4e6; }

.pn-shot { display: block; width: 100%; height: auto; border-radius: .7rem; }
.pn-shot--frame { border: 1px solid var(--line); box-shadow: var(--shadow); margin-top: 1rem; background: #fff; }

/* 1분 둘러보기 */
.pn-tour { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5em), 1fr)); gap: 1rem; }
.pn-tour__card { position: relative; display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: .8rem .8rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
a.pn-tour__card:hover { border-color: var(--teal); }
a.pn-tour__card:hover strong { text-decoration: underline; }
.pn-tour__card .pn-shot { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--line); margin-bottom: .4rem; }
.pn-tour__card .pn-qr { aspect-ratio: auto; object-fit: contain; width: 70%; margin-inline: auto; border: 0; }
.pn-tour__step { position: absolute; top: .3rem; left: .3rem; background: var(--pn); color: #fff; font-weight: 800; border-radius: 999px; padding: 0 .55em; font-size: .9rem; }
.pn-tour__card strong { font-size: 1.05rem; color: var(--teal); }
.pn-tour__card > span:last-child { color: var(--ink2); font-size: .9rem; line-height: 1.6; }

/* 걱정 해결 */
.pn-quote { margin: 0 0 1.8rem; padding: 1.2rem 1.4rem; border-left: 5px solid var(--gold); background: #fff; border-radius: .5rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.pn-quote cite { display: block; font-family: var(--sans); font-style: normal; font-size: .85rem; color: var(--ink2); font-weight: 500; margin-top: .4rem; }
.pn-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); gap: 1.6rem; }
.pn-answer h3, .pn-card h3, .pn-cards h3, .pn-split h3, .pn-options h3 { font-family: var(--sans); font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; }
.pn-answer p, .pn-card p, .pn-cards p { color: var(--ink2); }
.pn-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); gap: 1rem; margin-top: 1.8rem; }
.pn-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr)); margin-top: 0; }
.pn-cards li, .pn-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.3rem; }
.pn-sec--sand .pn-cards li { border-color: transparent; }
.pn-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr)); gap: 1rem; margin-top: 1.8rem; }
.pn-split > div { background: var(--mist); border-radius: var(--r); padding: 1.2rem 1.4rem; }
.pn-split ul, .pn-list { padding-left: 1.2em; display: grid; gap: .3rem; }

/* 표 */
.pn-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.pn-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.pn-table th, .pn-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pn-table thead th { background: var(--deep); color: #fff; font-size: .9rem; }
.pn-table tbody th { font-weight: 700; width: 24%; }
.pn-table tbody td:nth-child(2) { background: #f3f8f8; }
.pn-table--ref tbody td:nth-child(2) { background: transparent; font-weight: 700; color: var(--teal); }
.pn-table tbody tr:last-child > * { border-bottom: 0; }
.pn-pick { display: inline-block; margin-left: .3em; background: var(--gold); color: var(--ink); border-radius: 999px; padding: 0 .6em; font-size: .78rem; font-weight: 800; }
.pn-reason { margin-top: 1.2rem; padding: 1.2rem 1.4rem; background: var(--mist); border-radius: var(--r); display: grid; gap: .7rem; }
.pn-reason--minus { background: #fff; border: 1px dashed var(--line); }
.pn-honest { color: var(--ink2); }
.pn-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr)); gap: 1rem; margin-top: 1.8rem; }

/* 일정 */
.pn-timeline { list-style: none; padding: 0; display: grid; gap: .6rem; }
.pn-timeline li { display: grid; grid-template-columns: 7em 1fr; gap: 1rem; padding: .9rem 1.1rem; border-radius: .6rem; background: var(--sand); }
.pn-timeline strong { color: var(--deep); }
@media (max-width: 760px) { .pn-timeline li { grid-template-columns: 1fr; gap: .2rem; } }
.pn-options { margin-top: 2rem; padding: 1.4rem; border: 2px dashed var(--line); border-radius: var(--r); }
.pn-options p { color: var(--ink2); }
.pn-options__shots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: 1rem; margin-top: .6rem; }
.pn-options__shots .pn-shot { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.pn-options__shots span { display: block; text-align: center; font-weight: 700; margin-top: .4rem; }

/* 미팅 질문 */
.pn-ask { padding-left: 1.4em; display: grid; gap: .7rem; max-width: 46em; }
.pn-ask strong { color: var(--gold); }
.pn-ask__end { margin-top: 1.4rem; color: #e3eef0; }
@media (max-width: 760px) {
	.pn-ribbon { font-size: clamp(14px, .85rem, 16px); }
	.pn-btn { min-height: 40px; }
}