/* 작품 기고 · 월간지 기고 · 내 기고 — additions to site.css (tokens only, no raw colours).
   Shared pieces (.tab links, .pager, .empty-state, .page-head) live in site.css only.
   --line-strong (≥3:1 on --surface and --bg) is a shared token; --muted stands in
   until tokens.css has it. */
.ico{flex-shrink:0}
.sub-sec{margin-top:48px}
.sub-single{max-width:820px}
.sub-main{display:grid;gap:18px;min-width:0}
.sub-aside{align-content:start}
.sub-aside .eyebrow{margin:0}
.sub-after{margin-top:14px}
.sub-actions{display:flex;flex-wrap:wrap;gap:8px}
/* The submit button spans the form, as in the prototype's writeForm. */
.sub-send{min-height:var(--target-min)}
.sub-notice{padding:14px 18px;border-radius:14px;background:var(--sunk);color:var(--ink-2);text-align:left}
.sub-notice a,.sub-pointer a{overflow-wrap:anywhere}
.sub-pages{min-height:1.4em;font-variant-numeric:tabular-nums}

/* 파일로 보내기: the prototype's dashed drop area, whether the uploader or the
   "preparing" notice is inside. The legend floats so it sits inside the border. */
.sub-files.drop{display:grid;gap:12px;border:2px dashed var(--line-strong,var(--muted));border-radius:16px;padding:22px;color:var(--ink-2)}
.sub-files.drop>legend{float:left;width:100%;padding:0;color:var(--ink);font-weight:400;font-size:.95rem}
.sub-files.drop>legend+*{clear:both}
.sub-drop-formats{color:var(--muted);font-size:.95rem;margin-top:-6px}
.sub-uploads{display:grid;gap:12px;text-align:left}
.sub-uploads .media-uploader{margin:0}

/* D9 pointer: "이런 글이라면" — the other menu, first thing on the page; one compact
   line of running text (no flex: flex split the sentence into separate pieces). */
.sub-pointer{display:block;margin-bottom:28px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.sub-pointer-k{font-weight:700;color:var(--ink);white-space:nowrap;margin-right:.6em}
.sub-pointer a{font-weight:600;color:var(--ink)}

/* Checkboxes with their hint under the label text; 44px rows on touch screens. */
.sub-check{gap:4px}
.sub-check-hint{padding-left:30px}
@media (pointer:coarse){
  .form .check{min-height:var(--target-min);align-items:center}
  .form .check input{width:22px;height:22px;margin-top:0}
  .sub-check-hint{padding-left:32px}
}

/* Licence consent block: separated by space, no hairline running out of the legend. */
.sub-consent{display:grid;gap:12px;margin-top:10px}
.sub-consent legend{padding:0;margin-bottom:6px}
.ex-note{display:block;width:fit-content;max-width:100%;margin-top:6px;border-radius:10px;line-height:1.5}
.sub-terms{border:1px solid var(--line);border-radius:14px;background:var(--sunk)}
.sub-terms summary{cursor:pointer;padding:12px 16px;font-weight:600;min-height:var(--target-min);display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.sub-terms summary::-webkit-details-marker{display:none}
/* Disclosure cue (the native marker is gone with display:flex): a chevron that turns. */
.sub-terms summary::after{content:"";content:"" / "";flex-shrink:0;width:.55em;height:.55em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg)}
.sub-terms[open] summary::after{transform:translateY(25%) rotate(-135deg)}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .sub-terms summary::after{transition:transform .18s cubic-bezier(.23,1,.32,1)}
}
.sub-terms-body{display:grid;gap:10px;padding:0 16px 16px;color:var(--ink-2);font-size:1rem;line-height:1.8;max-height:22em;overflow:auto}
/* 따로 열어 보기: a 44 px row of its own (the terms' own links stay in their sentences). */
.sub-terms-open a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.sub-terms-body .lead-s{color:var(--ink);font-weight:600}

/* Errors: summary and messages are in site.css (partials/error_summary.html). */
.has-error .check input{outline:2px solid var(--ink);outline-offset:2px}

/* Double-submit guard (submissions.js): looks pressed, stays focusable. */
.sub-send[aria-disabled="true"]{opacity:.7;cursor:progress}

/* Login prompt: the same card as the form it stands for (prototype form.form). */
.sub-card{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,36px)}
.sub-login-title{font-size:1.4rem;text-wrap:balance}
.sub-asks-k{font-weight:700;color:var(--ink-2);margin-right:.6em}
.sub-kinds{display:grid;gap:4px}
.sub-kind-list{margin:0;padding-inline-start:1.2em}
@media (max-width:560px){
  .sub-login .sub-actions .btn,.empty-state .sub-actions .btn{flex:1 1 100%}
}

/* 내 기고 */
.sub-count{font-family:var(--mono);font-size:.82rem;opacity:.8;font-variant-numeric:tabular-nums}
/* A status with nothing in it stays focusable and keeps its count, but recedes. */
.tab[data-empty]:not([aria-current]){color:var(--muted);border-style:dashed}
.sub-issue{display:block}
.sub-title-cell{min-width:10em;overflow-wrap:anywhere}
.sub-title-link{font-weight:700;text-decoration:none}
.sub-title-link:hover,.sub-title-link:focus-visible{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.sub-withdrawn td{color:var(--muted)}
.sub-withdrawn .sub-title-link{font-weight:500;text-decoration:line-through;text-decoration-thickness:1px}
.sub-status{display:inline-block;font-size:.82rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1.5px solid var(--line-strong,var(--muted));background:var(--sunk);color:var(--ink);font-family:var(--sans);vertical-align:.15em}
.sub-status[data-status="reviewing"]{background:var(--yellow-soft);color:var(--yellow-ink);border-color:var(--yellow)}
.sub-status[data-status="accepted"],.sub-status[data-status="done"]{background:var(--leaf-soft);color:var(--leaf);border-color:var(--leaf)}
.sub-status[data-status="done"]{border-style:double;border-width:3px}
.sub-status[data-status="declined"]{background:var(--sunk);color:var(--ink-2)}
.sub-status[data-status="withdrawn"]{background:transparent;color:var(--muted);border-style:dashed}
.sub-list.htmx-request{opacity:.6}
@media (prefers-reduced-motion:no-preference){.sub-list{transition:opacity .15s}}
:root[data-motion="off"] .sub-list{transition:none}
@media (forced-colors:active){.sub-status{border-color:CanvasText}}

/* 내 기고 한 편 */
.sub-detail{display:grid;gap:22px;align-content:start}
.sub-detail>*{max-width:52em}
.sub-section-title{font-size:1.2rem;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sub-sub-title{font-family:var(--sans);font-size:.95rem;font-weight:700;margin-top:6px}
.sub-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:10px 22px}
.sub-facts div{display:grid;gap:2px}
.sub-facts dt{color:var(--muted);font-size:.86rem}
.sub-facts dd{margin:0;font-weight:600}
.sub-body{line-height:1.9;color:var(--ink-2);overflow-wrap:anywhere;max-height:30em;overflow:auto;padding:14px 18px;border-radius:14px;background:var(--sunk)}
.sub-body p+p{margin-top:1em}
.sub-file-list{margin:0;padding-left:1.2em;display:grid;gap:4px;overflow-wrap:anywhere}
.sub-history{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sub-history time{color:var(--muted);margin-right:.6em}
.back{margin-top:6px}
/* Destructive submit (기고 철회). --danger / --on-danger are shared tokens (≥4.5:1 in
   every palette); until they exist the button keeps the ink look. */
.btn.danger{background:var(--danger,var(--ink));border-color:var(--danger,var(--ink));color:var(--on-danger,var(--bg))}
@media (forced-colors:active){.btn.danger{border:2px solid CanvasText}}

/* PAR-05: members jump past the guide; the guide folds on narrow screens (summary shown
   there only; submissions.js closes it for members, visitors keep it open). */
.sub-jump{margin:-8px 0 18px}
.sub-guide-fold>summary{display:none}
@media (max-width:640px){
  .sub-guide-fold>summary{display:flex;align-items:center;gap:10px;min-height:var(--target-min);padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:600;cursor:pointer;list-style:none}
  .sub-guide-fold>summary::-webkit-details-marker{display:none}
  .sub-guide-fold>summary::after{content:"";content:"" / "";margin-left:auto;width:.55em;height:.55em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg)}
  .sub-guide-fold[open]>summary{margin-bottom:14px}
  .sub-guide-fold[open]>summary::after{transform:translateY(25%) rotate(-135deg)}
}

/* PAR-13: one picker for every kind; the per-kind limits are a short list under it. */
.sub-uploader .help p+p,.sub-uploader .help p+ul,.sub-uploader .help ul+p{margin-top:4px}
.sub-uploader input[type=file]{max-width:100%}

/* PAR-08: phone and e-mail as full rows (the site's 44px floor), not inline links. */
.sub-under14{display:grid;gap:6px}
.sub-contact-list{display:grid;gap:4px}
.sub-contact-list a{display:inline-flex;align-items:center;gap:.6em;min-height:var(--target-min);overflow-wrap:anywhere}
.contact-k{color:var(--muted);font-size:.9em}

/* PAR-10: what the status means, under the pill; and the legend on 내 기고. */
.sub-guide{display:grid;gap:4px}
.sub-meaning{font-weight:600}
.sub-legend{margin-bottom:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sub-legend summary{cursor:pointer;display:flex;align-items:center;min-height:var(--target-min);padding:0 16px;font-weight:600}
.sub-legend dl{margin:0;padding:4px 16px 16px;display:grid;gap:10px}
.sub-legend dl div{display:grid;grid-template-columns:minmax(9.5em,auto) 1fr;gap:4px 14px;align-items:baseline}
.sub-legend dd{margin:0;color:var(--ink-2)}
@media (max-width:560px){.sub-legend dl div{grid-template-columns:1fr}}