/* ============================================================
   Partner window / portal: the Share kit tab (Reach W2-PEOPLE, 2026-09-27)
   public/js/partner-share-kit.js draws into #pp-kit; the tab strip #pp-tabs sits under the
   greeting. Loads after tb-baekja.css and the page's own <style>. Baekja, one column; no gold
   here (the page's one gold is the message "보내기" on the main tab). Korean first: every
   serif stack is 'Newsreader', 'Pretendard', serif (Newsreader is latin-only) and text wraps
   keep-all. Nothing is wider than the column at 390 px.
   ============================================================ */

/* the tab strip */
.pp-tabs { display: flex; gap: 6px; margin: -12px 0 24px; border-bottom: 1px solid var(--pp-rule, rgba(28, 27, 24, .08)); }
.pp-tabs[hidden] { display: none !important; }
.pp-tab {
  border: 0; background: none; font-family: inherit; font-size: 14.5px; font-weight: 600; color: #5A5E55;
  padding: 10px 4px 11px; margin-right: 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pp-tab.on { color: #1C1B18; border-bottom-color: #44604F; }
.pp-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(123, 158, 137, .35); border-radius: 6px; }

/* the kit tab hides the window's own sections; the greeting, tabs and footer stay */
#pp-main.ppk-on > *:not(.pp-demo):not(.pp-place):not(.pp-hello):not(.pp-tabs):not(.ppk):not(.pp-foot) { display: none !important; }
.ppk[hidden] { display: none !important; }

.ppk { word-break: keep-all; overflow-wrap: break-word; }
.ppk * { box-sizing: border-box; }
.ppk-intro { font-size: 14.5px; line-height: 1.65; color: #5A5E55; margin: 0 0 8px; }
.ppk-founding { display: inline-block; margin: 4px 0 6px; font-family: 'Newsreader', 'Pretendard', serif; font-size: 15px; font-weight: 600; color: #44604F; background: #DCE4DB; border-radius: 999px; padding: 4px 12px; }
.ppk-sample { margin: 6px 0 10px; font-size: 13px; color: #5A5E55; background: #EEF2F4; border-radius: 10px; padding: 8px 12px; }
.ppk-eyebrow { font-size: 12.5px; font-weight: 700; color: #9AA09A; letter-spacing: .05em; margin: 26px 0 10px; }
.ppk-card { background: #fff; border: 1px solid var(--pp-rule, rgba(28, 27, 24, .08)); border-radius: 12px; padding: 16px 18px; }
.ppk-quiet { color: #5A5E55; font-size: 14px; line-height: 1.6; }
.ppk-loading { text-align: center; color: #9AA09A; font-size: 14px; padding: 40px 0; }

/* consents */
.ppk-toggle { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 0; cursor: pointer; position: relative; }
.ppk-toggle + .ppk-note + .ppk-toggle { border-top: 1px solid #EEF2F4; }
.ppk-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppk-switch { width: 40px; height: 24px; border-radius: 999px; background: #EEF2F4; border: 1px solid rgba(28, 27, 24, .12); position: relative; margin-top: 1px; transition: background .15s ease; }
.ppk-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(28, 27, 24, .2); transition: transform .15s ease; }
.ppk-toggle input:checked + .ppk-switch { background: #44604F; border-color: #44604F; }
.ppk-toggle input:checked + .ppk-switch::after { transform: translateX(16px); }
.ppk-toggle input:focus-visible + .ppk-switch { box-shadow: 0 0 0 3px rgba(123, 158, 137, .35); }
.ppk-toggle.is-off { cursor: default; opacity: .7; }
.ppk-toggle__txt { display: grid; gap: 2px; min-width: 0; }
.ppk-toggle__t { font-size: 15px; font-weight: 650; color: #1C1B18; }
.ppk-toggle__s { font-size: 13px; line-height: 1.55; color: #5A5E55; }
.ppk-note { min-height: 0; font-size: 12.5px; color: #44604F; padding-left: 52px; }
.ppk-note:empty { display: none; }
.ppk-note.bad { color: #1C1B18; }
.ppk-handle { border-top: 1px solid #EEF2F4; padding-top: 12px; margin-top: 4px; }
.ppk-handle label { display: block; font-size: 12.5px; font-weight: 650; color: #5A5E55; margin-bottom: 6px; }
.ppk-handle__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ppk-at { color: #9AA09A; font-weight: 600; }
.ppk-handle input { width: 100%; font-family: inherit; font-size: 14.5px; border: 1px solid rgba(28, 27, 24, .12); border-radius: 10px; background: #F9FBFD; padding: 9px 11px; color: #1C1B18; }
.ppk-handle .ppk-note { padding-left: 0; margin-top: 6px; }

.ppk-btn { border: 1px solid #44604F; background: #fff; color: #44604F; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.ppk-btn:hover { background: #DCE4DB; }
.ppk-btn[disabled] { opacity: .5; cursor: default; }

/* the QR kit */
.ppk-kitrow { padding: 10px 0; border-bottom: 1px solid #EEF2F4; }
.ppk-kitrow:last-of-type { border-bottom: 0; }
.ppk-kitrow__t { font-family: 'Newsreader', 'Pretendard', serif; font-size: 16px; font-weight: 600; color: #1C1B18; margin-bottom: 6px; }
.ppk-kitrow__l { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ppk-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ppk-lang__n { color: #5A5E55; min-width: 3.2em; }
.ppk-dl { color: #44604F; font-weight: 600; text-decoration: none; border-bottom: 1px solid #DCE4DB; }
.ppk-dl:hover { border-bottom-color: #44604F; }
.ppk-foot { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: #9AA09A; }

/* cards to share */
.ppk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ppk-tile { display: grid; gap: 4px; text-decoration: none; color: #5A5E55; font-size: 12px; }
.ppk-tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #EEF2F4; display: block; }

/* posting together */
.ppk-steps { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.65; color: #1C1B18; }
.ppk-steps li { margin-bottom: 4px; }
.ppk-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #EEF2F4; }
.ppk-copy__l { font-size: 12.5px; font-weight: 650; color: #5A5E55; }
.ppk-copy__v { font-size: 12.5px; color: #1C1B18; background: #F9FBFD; border-radius: 6px; padding: 4px 6px; overflow-wrap: anywhere; word-break: break-all; }

@media (max-width: 480px) {
  .pp-tab { margin-right: 10px; }
  .ppk-card { padding: 14px 14px; }
  .ppk-copy { grid-template-columns: 1fr auto; }
  .ppk-copy__l { grid-column: 1 / -1; }
  .ppk-handle__row { grid-template-columns: auto minmax(0, 1fr); }
  .ppk-handle__row .ppk-btn { grid-column: 1 / -1; justify-self: start; }
}