/* ARKHIVE — About / 소개 + 후원 안내 page. Reuses brand.css + landing.css.
   This page is PUBLIC (no member guard) — like the main page. */

/* dark hero band */
.ab-hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; min-height: 400px; }
@media (max-width: 720px) { .ab-hero { min-height: 460px; } }
.ab-herobody { position: relative; z-index: 2; padding: clamp(34px,4vw,52px) clamp(20px,4vw,56px); }
.ab-herobody .ey { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.26em; color: rgba(255,255,255,0.6); }
.ab-herobody h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px,8vw,104px); line-height: 1.04; letter-spacing: -0.01em; margin: 16px 0 0; word-break: keep-all; }
.ab-herobody h1 .red { color: var(--red); }
.ab-herobody .lead { font-size: clamp(15px,1.7vw,18px); line-height: 1.7; color: rgba(255,255,255,0.7); margin-top: 24px; max-width: 620px; text-wrap: pretty; word-break: keep-all; }

/* overview prose + figures */
.ab-overview { background: var(--white); }
.ab-ovgrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px,5vw,72px); align-items: start; }
@media (max-width: 860px) { .ab-ovgrid { grid-template-columns: 1fr; } }
.ab-prose p { font-size: 15.5px; line-height: 1.8; color: #2c2c30; margin: 0 0 18px; text-wrap: pretty; word-break: keep-all; }
.ab-prose p strong { color: var(--ink); font-weight: 700; }
.ab-prose p .red { color: var(--red); font-weight: 700; }
.ab-figs { display: flex; flex-direction: column; gap: 1px; background: rgba(28,28,30,0.1); border: 1px solid rgba(28,28,30,0.1); }
.ab-fig { background: var(--white); padding: 22px 24px; }
.ab-fig .n { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-weight: 900; font-size: 42px; line-height: 0.9; letter-spacing: -0.02em; color: var(--ink); }
.ab-fig .n .u { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--stone); letter-spacing: 0.04em; }
.ab-fig .k { font-weight: 700; font-size: 13.5px; margin-top: 9px; }
.ab-fig .s { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-top: 3px; }

/* section frame on white */
.ab-sec { background: var(--white); border-top: 1px solid rgba(28,28,30,0.08); }
.ab-sec.alt { background: var(--off); }

/* DONATE band */
.ab-donate { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.ab-donate .bgheart { position: absolute; right: -10px; top: -30px; font-family: var(--font-display); font-weight: 900; font-size: clamp(140px,20vw,300px); line-height: 0.7; color: rgba(217,87,87,0.10); user-select: none; pointer-events: none; }
.ab-dgrid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px,5vw,64px); align-items: start; }
@media (max-width: 860px) { .ab-dgrid { grid-template-columns: 1fr; } }
.ab-dintro .lead { color: rgba(255,255,255,0.72); }
.ab-dintro .np { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 6px 13px; margin-top: 22px; }
.ab-dintro .np .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* donation channel card */
.ab-dcard { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 26px 26px 24px; }
.ab-dcard .ch { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--stone); }
.ab-dcard h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin: 8px 0 18px; }
.ab-channel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--off); border: 1px solid rgba(28,28,30,0.1); border-radius: var(--radius); margin-bottom: 10px; }
.ab-channel .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-channel .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--stone); }
.ab-channel .v { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); }
.ab-channel .hold { font-family: var(--font-mono); font-size: 10px; color: var(--stone); }
.ab-copy { flex: none; padding: 9px 13px; border: 1px solid rgba(28,28,30,0.2); background: #fff; border-radius: calc(var(--radius) - 1px); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink); cursor: pointer; transition: all .14s; }
.ab-copy:hover { border-color: var(--ink); }
.ab-toss { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: var(--radius); background: #0064FF; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
.ab-toss .tm { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: -0.02em; background: #fff; color: #0064FF; padding: 3px 8px; border-radius: 5px; }
.ab-toss .ar { margin-left: auto; }
.ab-kakao { display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 10px; padding: 0 18px; border-radius: var(--radius); background: #FEE500; color: #3C1E1E; text-decoration: none; font-weight: 700; font-size: 15px; }
.ab-kakao .tm { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: -0.02em; background: #3C1E1E; color: #FEE500; padding: 3px 8px; border-radius: 5px; }
.ab-kakao .ar { margin-left: auto; }
.ab-dnote { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--stone); line-height: 1.65; margin-top: 16px; }

/* use-of-funds list */
.ab-uses { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 720px) { .ab-uses { grid-template-columns: 1fr; } }
.ab-use { border: 1px solid rgba(28,28,30,0.12); border-radius: var(--radius); padding: 20px; background: var(--white); }
.ab-use .un { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--red); }
.ab-use .ut { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 10px 0 8px; }
.ab-use .ud { font-size: 13px; line-height: 1.65; color: #3a3a40; word-break: keep-all; }

/* terms + contact */
.ab-tc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,4vw,48px); }
@media (max-width: 760px) { .ab-tc { grid-template-columns: 1fr; } }
.ab-card { border: 1px solid rgba(28,28,30,0.12); border-radius: var(--radius); padding: 28px 28px 26px; background: var(--white); }
.ab-card .ck { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--stone); display: flex; align-items: center; gap: 10px; }
.ab-card .ck .prep { font-size: 8.5px; letter-spacing: 0.1em; color: var(--ty-head); border: 1px solid var(--ty-line); border-radius: 999px; padding: 2px 8px; }
.ab-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; margin: 12px 0 14px; }
.ab-card p { font-size: 14px; line-height: 1.75; color: #3a3a40; margin: 0 0 14px; text-wrap: pretty; }
.ab-terms-list { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.ab-terms-list .row { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; line-height: 1.6; }
.ab-terms-list .row .i { font-family: var(--font-mono); font-size: 11px; color: var(--red); flex: none; }
.ab-contact-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--off); border: 1px solid rgba(28,28,30,0.1); border-radius: var(--radius); margin-bottom: 10px; }
.ab-contact-row .cl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--stone); width: 64px; flex: none; }
.ab-contact-row .cv { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }

/* Korean line-break safety — keep words like 비영리 from splitting across lines.
   about.css only loads on the About page, so this is scoped to it. */
.lp-lead, .ab-stbody h2 { word-break: keep-all; }

/* ====================================================================
   SHOW MUST GO ON — parent studio brand (ARKHIVE is one project of it).
   Echoes the business card: charcoal ground, heavy stacked wordmark,
   red rule accents, "Design of Experience" as a SLOGAN (not a brand).
   ==================================================================== */
.ab-studio { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.ab-studio .ghost { position: absolute; right: -14px; bottom: -40px; transform: rotate(180deg); font-family: var(--font-display); font-weight: 900; line-height: 0.78; font-size: clamp(90px, 15vw, 230px); color: rgba(255,255,255,0.035); user-select: none; pointer-events: none; letter-spacing: 0.01em; }
.ab-studio .ghost span { display: block; }
.ab-stgrid { display: grid; grid-template-columns: minmax(200px, 0.78fr) 1.22fr; gap: clamp(32px,6vw,76px); align-items: start; position: relative; z-index: 1; }
@media (max-width: 820px) { .ab-stgrid { grid-template-columns: 1fr; gap: 40px; } }

/* the SHOW MUST GO ON stacked wordmark */
.smgo { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 900; line-height: 0.88; letter-spacing: 0.01em; color: #fff; }
.smgo span { display: block; }
.ab-stlogo .smgo { font-size: clamp(48px, 7vw, 92px); }
.ab-smgo-img { display: block; width: clamp(158px, 21vw, 224px); height: auto; }
.ab-rule { display: block; height: 2px; background: var(--red); border: 0; }
.ab-rule.top { width: 124px; margin: 0 0 24px; }
.ab-rule.bot { width: 84px; margin: 26px 0 0; }
.ab-slogan { font-family: var(--font-body); font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em; color: rgba(255,255,255,0.85); margin-top: 18px; white-space: nowrap; }

/* studio body */
.ab-stbody .lp-kicker { color: rgba(255,255,255,0.55); }
.ab-stbody h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(27px,3.2vw,40px); line-height: 1.2; letter-spacing: -0.01em; margin: 12px 0 20px; word-break: keep-all; }
.ab-stbody p { font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.72); margin: 0 0 16px; max-width: 560px; text-wrap: pretty; word-break: keep-all; }
.ab-stbody p strong { color: #fff; font-weight: 700; }
.ab-scope { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.ab-scope span { font-family: var(--font-body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; color: #fff; background: var(--red); border: 0; border-radius: 999px; padding: 7px 15px; }
.ab-maker { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); }
.ab-maker .nm { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; }
.ab-maker .en { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--stone); }

/* unified contact channel (one window for all inquiries) */
.ab-contact2 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ab-contact2 a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); text-decoration: none; color: #fff; transition: border-color .14s; }
.ab-contact2 a:hover { border-color: var(--red); }
.ab-contact2 a .cl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }
.ab-contact2 a .cv { font-family: var(--font-mono); font-size: 13.5px; color: #fff; }
.ab-stnote { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.65; margin-top: 16px; }

/* footer "a SHOW MUST GO ON project" tag */
.ab-footproj { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(255,255,255,0.4); margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.ab-footproj .bar { width: 18px; height: 2px; background: var(--red); }