/* REWORK — 브랜드 이야기 · 사용·관리 · FAQ */
html { scroll-padding-top: 120px; }

/* 머리 */
.s-hero { padding: 40px 0 56px; }
.draft-note { font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.s-title { font-size: clamp(56px, 11vw, 176px); font-weight: 800; line-height: .9; letter-spacing: -0.055em; }
.s-lead { font-size: clamp(17px, 1.8vw, 22px); font-weight: 400; line-height: 1.55; letter-spacing: -0.03em; max-width: 34em; margin-top: 32px; color: var(--ink-2); }
@media (min-width: 768px) { .s-hero { padding: 56px 0 88px; } }

.s-wide { position: relative; }
.s-wide img { width: 100%; height: clamp(320px, 62vw, 760px); object-fit: cover; }
.s-wide figcaption { position: absolute; right: var(--gutter); bottom: 12px; color: rgba(255,255,255,.85); }

/* 이야기 */
.s-sec { padding: 72px 0; }
@media (min-width: 768px) { .s-sec { padding: 120px 0; } }
.s-dark { background: #000; color: #fff; }
.s-dark .s-text { color: #bdbdbd; }
.s-gray { background: var(--surface); }
.s-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .s-grid { grid-template-columns: 1fr 2fr; gap: 64px; } }
.s-num { font-size: clamp(56px, 8vw, 120px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; color: var(--accent); }
.s-text { color: var(--ink-2); margin-top: 18px; max-width: 36em; font-size: 16px; }
.s-journey { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #333; border: 1px solid #333; margin-top: 36px; }
.s-journey li { background: #000; padding: 20px 16px; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
.s-journey span { display: block; font-size: 12px; font-weight: 400; color: #8c8c8c; margin-bottom: 4px; letter-spacing: 0; }
@media (min-width: 768px) { .s-journey { grid-template-columns: repeat(4, 1fr); } }

/* 원칙 */
.s-head { display: grid; gap: 10px; margin-bottom: 36px; align-content: start; }
.principles { list-style: none; display: grid; gap: 40px 16px; }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principles img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 16px; }
.principles .p-num { font-size: 13px; font-weight: 700; color: var(--accent); }
.principles h3 { margin-top: 4px; }
.principles p:last-child { color: var(--ink-2); margin-top: 6px; font-size: 14px; }

/* 숫자 */
.s-numbers { background: var(--accent); color: #fff; padding: 56px 0; }
.s-numbers dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
@media (min-width: 768px) { .s-numbers dl { grid-template-columns: repeat(4, 1fr); } .s-numbers { padding: 88px 0; } }
.s-numbers dt { font-size: 13px; opacity: .8; }
.s-numbers dd { font-size: clamp(56px, 8vw, 120px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: 8px; }
.s-numbers small { font-size: .22em; font-weight: 500; letter-spacing: 0; margin-left: 6px; }

/* 사용·관리 */
.care-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.care-list li { background: #fff; padding: 24px 20px; }
.care-list p { color: var(--ink-2); margin-top: 6px; font-size: 14px; }
@media (min-width: 768px) { .care-list { grid-template-columns: repeat(3, 1fr); } }

/* FAQ */
.faq-grid { display: grid; gap: 8px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 2fr; gap: 64px; } .faq-grid .s-head { position: sticky; top: 140px; } }
.faq-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.faq-cats a { font-size: 13px; padding: 6px 12px; border: 1px solid #cfcfcf; background: #fff; }
.faq-cats a:hover { border-color: var(--ink); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-cat { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.faq-list details { border-top: 1px solid var(--ink); }
.faq-list details:last-child { border-bottom: 1px solid var(--ink); }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 32px 20px 0; position: relative; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-weight: 300; font-size: 22px; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:hover { color: var(--accent); }
.faq-list details p { padding: 0 0 22px; color: var(--ink-2); }

/* 마무리 (메인과 같은 파랑 띠) */
.cta-band { background: #000; color: #fff; padding: 72px 0; }
.cta-band .container { display: grid; gap: 32px; }
.cta-band .display { font-size: clamp(56px, 10vw, 160px); }
.cta-side p { margin-bottom: 20px; font-weight: 400; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent); color: #fff; }
.cta-band + .footer { margin-top: 0; border-top: 1px solid #222; }
@media (min-width: 900px) {
  .cta-band { padding: 112px 0; }
  .cta-band .container { grid-template-columns: 1fr auto; align-items: end; }
  .cta-side { max-width: 320px; }
}