/* P8 design-c 2026-10-21 — RequestVault. Loaded last. Tokens: RequestVault/DESIGN_TOKENS.md (refero "Monarch": warm linen
   canvas, white paper, one ember). The client-facing portal reads like paper on a desk. Radius 8 (controls) / 4 (cards,
   panels) + full for status chips. Ember is a fill with ink text only; it is never text. */
:root{
  --p8-linen:#efecea;  /* Monarch Linen: page canvas */
  --p8-paper:#ffffff;  /* Paper: cards, forms */
  --p8-stone:#dcd9d6;  /* Stone: lines */
  --p8-smoke:#cccccc;  /* Smoke: control borders */
  --p8-ink:#22201d;    /* Ink: headings, body, secondary fills */
  --p8-graphite:#777573; /* Graphite: secondary text on white only (4.6:1) */
  --p8-ember:#ff692d;  /* Ember Orange: primary fill, active marker */
  --p8-success:#1d7a4f; --p8-warn:#9a5b00; --p8-danger:#c0392b; --p8-info:#2f5d8a;
  --p8-r-ctl:8px; --p8-r-box:12px; --p8-r-lg:20px;
  /* §4-1 chrome accent (rv-chrome.css): ember fill keeps ink text, like every primary here */
  --rv-act:var(--p8-ember); --rv-act-press:#e85a20; --rv-on-act:var(--p8-ink); --rv-link:#b5481c; --rv-ring:#b5481c;
  /* Remap the Phase 2 purple palette. */
  --ink:var(--p8-ink); --muted:#5c5a57; --line:var(--p8-stone);
  --purple:var(--p8-ink); --purple2:var(--p8-ink); --lav:var(--p8-linen);
  --green:var(--p8-success); --blue:var(--p8-info); --orange:var(--p8-warn); --red:var(--p8-danger); --danger:var(--p8-danger);
}
html body{background:var(--p8-linen);color:var(--p8-ink)}
html body h1,html body h2{color:var(--p8-ink);font-weight:700;letter-spacing:-.03em}
html body h3{color:var(--p8-ink);font-weight:600;letter-spacing:-.02em}
html body :focus-visible{outline:2px solid var(--p8-ink);outline-offset:2px}
html body .muted,html body small{color:#5c5a57} /* graphite darkened for linen backgrounds (AA) */

/* ---------- Buttons: primary / secondary / text; hover · focus · active · disabled · loading ---------- */
html body .btn{height:auto;min-height:40px;padding:0 18px;border:1px solid var(--p8-smoke);border-radius:var(--p8-r-ctl);background:var(--p8-paper);color:var(--p8-ink);font-size:14px;font-weight:600;box-shadow:none;filter:none;transition:background-color .15s,border-color .15s,color .15s}
html body .btn:hover:not(:disabled){border-color:var(--p8-ink);filter:none}
html body .btn:active:not(:disabled){background:var(--p8-linen);transform:none}
html body .btn.primary{background:var(--p8-ember);border-color:var(--p8-ember);color:var(--p8-ink);box-shadow:none}
html body .btn.primary:hover:not(:disabled){background:var(--p8-ink);border-color:var(--p8-ink);color:#fff}
html body .btn.primary:active:not(:disabled){background:#000;border-color:#000;color:#fff}
html body .btn.ghost{background:transparent;border-color:transparent;color:var(--p8-ink)}
html body .btn.ghost:hover:not(:disabled){background:var(--p8-linen)}
html body .btn.small{min-height:40px;padding:0 12px;font-size:13px}
html body .btn.danger{color:var(--p8-danger);background:var(--p8-paper);border-color:var(--p8-smoke)}
html body .btn.danger:hover:not(:disabled){border-color:var(--p8-danger)}
html body .btn:disabled,html body .btn[aria-disabled=true]{opacity:1;background:var(--p8-linen)!important;border-color:var(--p8-stone)!important;color:var(--p8-graphite)!important;cursor:not-allowed}
html body .btn.is-loading,html body .btn[aria-busy=true]{position:relative;color:transparent!important;pointer-events:none}
html body .btn.is-loading::after,html body .btn[aria-busy=true]::after{content:'';position:absolute;inset:calc(50% - 8px) auto auto calc(50% - 8px);width:16px;height:16px;border:2px solid var(--p8-ink);border-right-color:transparent;border-radius:50%;animation:p8spin .7s linear infinite}
@keyframes p8spin{to{transform:rotate(360deg)}}
html body a.text-link,html body .link{color:var(--p8-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Forms + inline errors ---------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html body select,html body textarea,html body .input{border-radius:var(--p8-r-ctl);border-color:var(--p8-smoke);background-color:var(--p8-paper)}
html body input:focus,html body select:focus,html body textarea:focus{border-color:var(--p8-ink);box-shadow:0 0 0 1px var(--p8-ink);outline:none}
html body [aria-invalid=true]{border-color:var(--p8-danger)!important;box-shadow:0 0 0 1px var(--p8-danger)!important}
html body .p8-field-error{display:flex;gap:6px;margin:6px 0 0;color:var(--p8-danger);font-size:13px;font-weight:600;line-height:1.5}
html body .p8-field-error::before,html body .form-error:not([hidden]):not(:empty)::before{content:'오류';flex:none;padding:0 6px;border:1px solid currentColor;border-radius:999px;font-size:12px;line-height:18px;height:20px;font-weight:600}
html body .form-error:not([hidden]):not(:empty){display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid #efc6c0;border-radius:var(--p8-r-box);background:var(--p8-paper);color:var(--p8-danger);font-size:14px;font-weight:600}

/* ---------- Public pages ---------- */
html body .public-head{background:var(--p8-linen);border-bottom:1px solid var(--p8-stone);box-shadow:none;backdrop-filter:none}
html body .public-nav a{display:inline-flex;align-items:center;min-height:44px;color:#5c5a57;font-weight:400}
html body .public-nav a:hover,html body .public-nav a.active{color:var(--p8-ink)}
html body .public-nav a.active{box-shadow:inset 0 -2px 0 var(--p8-ember)}
/* One primary per screen: the header repeats the hero action as a secondary. */
html body .public-head .btn.primary{background:var(--p8-paper);border-color:var(--p8-ink);color:var(--p8-ink)}
html body .public-head .btn.primary:hover{background:var(--p8-ink);color:#fff}
html body .intro-hero{background:var(--p8-linen)!important}
html body .intro-hero::after,html body .intro-hero::before{display:none}
html body .intro-hero h1{font-size:clamp(34px,3.8vw,54px);font-weight:700;line-height:1.22;letter-spacing:-.035em}
html body .intro-hero h1 em,html body .intro-hero h1 span,html body .intro-hero h1 b,html body .intro-hero h1 strong{color:var(--p8-ink)!important;background:none!important;-webkit-text-fill-color:currentColor}
html body .intro-hero p{color:#5c5a57;font-size:17px;line-height:1.75}
html body .eyebrow{background:var(--p8-paper)!important;color:var(--p8-ink)!important;border:1px solid var(--p8-stone)!important;border-radius:999px!important;font-weight:600}
html body .hero-actions .btn{min-height:48px}
html body .trust-row{color:#5c5a57}
html body .trust-row svg,html body .trust-row i{color:var(--p8-ink)}
html body .rv-window,html body .float-card,html body .float-tile{border-radius:var(--p8-r-box)!important;border:1px solid var(--p8-stone)!important;background:var(--p8-paper)!important;box-shadow:0 1px 0 var(--p8-stone),0 20px 40px -24px rgba(34,32,29,.28)!important}
html body .float-tile{color:var(--p8-ink)!important}
html body .rv-side .mi.active,html body .rv-side .active{background:var(--p8-linen)!important;color:var(--p8-ink)!important}
html body .mini-btn{background:var(--p8-ember)!important;color:var(--p8-ink)!important;border-radius:var(--p8-r-ctl)!important;box-shadow:none!important}
html body .pill{border-radius:999px;font-weight:600}
html body .pill.blue{background:#eef3f8!important;color:var(--p8-info)!important}
html body .pill.orange{background:#fbf2e3!important;color:var(--p8-warn)!important}
html body .pill.green{background:#ecf5ef!important;color:var(--p8-success)!important}
html body .pill.red{background:#fbeceb!important;color:var(--p8-danger)!important}
html body .metric-strip{background:var(--p8-paper);border-top:1px solid var(--p8-stone);border-bottom:1px solid var(--p8-stone)}
html body .metric .ico,html body .flow-card .num,html body .fi .ic,html body .ic,html body .ico{background:var(--p8-linen)!important;color:var(--p8-ink)!important;border-radius:var(--p8-r-box)!important}
html body .flow-card,html body .wizard,html body .wiz-side,html body .feature-zone .field{border-radius:var(--p8-r-box)!important;border-color:var(--p8-stone)!important;box-shadow:none!important;background:var(--p8-paper)}
html body .wiz-step.active,html body .wiz-step.on{color:var(--p8-ink);box-shadow:inset 3px 0 0 var(--p8-ember)}
html body section h2{font-size:clamp(24px,2.3vw,32px)}
html body .public-footer{background:var(--p8-linen);border-top:1px solid var(--p8-stone)}
html body .public-footer a,html body .rv-biz a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Work screens ---------- */
html body .app-top{background:var(--p8-paper);border-bottom:1px solid var(--p8-stone);box-shadow:none}
html body .side{background:var(--p8-linen);border-right:1px solid var(--p8-stone)}
html body .side a{border-radius:var(--p8-r-ctl);color:#5c5a57;font-size:14px}
html body .side a:hover{background:#e6e2de}
html body .side a.active{background:var(--p8-paper);color:var(--p8-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--p8-ember),0 0 0 1px var(--p8-stone)}
html body .main{background:var(--p8-linen)}
html body .main-head h1{font-size:24px;font-weight:700}
html body .panel,html body .card,html body .table-wrap,html body .rv-first-run{border-radius:var(--p8-r-box);border-color:var(--p8-stone);box-shadow:none;background:var(--p8-paper)}
html body table th{background:#f7f5f3;color:var(--p8-ink);font-size:13px;font-weight:600}
html body table td{border-color:var(--p8-stone)}
html body .rv-steps li::before{background:var(--p8-linen);color:var(--p8-ink);border:1px solid var(--p8-stone)}
html body .rv-steps li:first-child::before{background:var(--p8-ember);border-color:var(--p8-ember)}
html body .rv-steps li span{color:#5c5a57}
html body .search{background:var(--p8-linen);border-radius:var(--p8-r-ctl);border-color:var(--p8-stone)}
html body .avatar{background:var(--p8-ink);color:#fff}
html body .modal,html body [role=dialog]{border-radius:var(--p8-r-box)}

@media (max-width:768px),(pointer:coarse){
  html body .btn,html body .btn.small,html body .side a{min-height:44px}
  html body .btn.icon-only{min-width:44px}
}
@media (prefers-reduced-motion:reduce){html body *{transition:none!important;animation:none!important}}

/* ---------- Auth screens ---------- */
html body .auth-body,html body .auth-layout{background:var(--p8-linen)!important}
html body .auth-copy{background:var(--p8-linen)!important;color:var(--p8-ink)}
html body .auth-copy p,html body .auth-copy li{color:#5c5a57!important}
html body .auth-card{background:var(--p8-paper);border:1px solid var(--p8-stone);border-radius:var(--p8-r-box);box-shadow:none}
html body .auth-links a,html body .auth-help-link{color:var(--p8-ink)!important;text-decoration:underline;text-underline-offset:3px}
html body .top-user,html body .side-bottom,html body .side-bottom *{color:#5c5a57}
html body .top-user strong,html body .side-bottom strong{color:var(--p8-ink)}
@media (max-width:768px),(pointer:coarse){
  html body a.brand,html body .top-user,html body .auth-links a,html body .auth-help-link,html body .rv-logout,html body .public-head .btn{min-height:44px;display:inline-flex;align-items:center}
}
html body .avatar,html body .top-user .avatar,html body .side-bottom .avatar{color:#fff!important}
@media (max-width:768px),(pointer:coarse){html body .btn{min-height:44px!important}}
@media (max-width:768px),(pointer:coarse){html body .auth-body a:not(.btn){min-height:44px;display:inline-flex;align-items:center}}
/* Floating icon tiles around the preview were decoration only. */
html body .float-tile{display:none!important}

/* ---------- P9 (2026-10-22): §4-1 chrome + landing (rq-p9.js) ---------- */
html body .site-top a.site-btn.primary{color:var(--p8-ink)}
html body .site-top a.site-btn.primary:hover{background:var(--p8-ink);color:#fff}
html body .app-top .rv-app-account{display:flex;align-items:center;gap:8px;margin-left:auto}
.rq-section{padding:88px 0}
.rq-band{background:var(--p8-paper);border-top:1px solid var(--p8-stone);border-bottom:1px solid var(--p8-stone)}
.rq-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end;margin-bottom:32px}
.rq-head h2,.rq-split h2{margin:12px 0 0;font-size:clamp(26px,2.4vw,34px);line-height:1.3}
.rq-head p,.rq-split p{margin:0;color:#5c5a57;font-size:16px;line-height:1.75}
.rq-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.rq-split>div>p{margin-top:16px}
.rq-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;border-top:1px solid #c9c5c1}
.rq-uses div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--p8-stone)}
.rq-uses dt{font-weight:700}
.rq-uses dd{margin:0;color:#5c5a57}
.rq-steps{margin:0;padding:0;list-style:none;border-top:1px solid #c9c5c1}
.rq-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:20px 0;border-bottom:1px solid var(--p8-stone)}
.rq-steps li>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--p8-ember);color:var(--p8-ink);font-weight:700}
.rq-steps h3{margin:4px 0 6px;font-size:18px}
.rq-steps p{margin:0;color:#5c5a57;font-size:15px;line-height:1.7}
.rq-table{overflow-x:auto;background:var(--p8-paper);border:1px solid var(--p8-stone);border-radius:var(--p8-r-box)}
.rq-table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rq-table th,.rq-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--p8-stone);white-space:nowrap}
.rq-table tbody th{font-weight:700;background:none}
.rq-table tbody tr:last-child>*{border-bottom:0}
.rq-more,.rq-split p a{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--p8-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--p8-ember);text-decoration-thickness:2px;text-underline-offset:4px}
.rq-split p a{min-height:0;margin:0}
.rq-faq details{border-bottom:1px solid var(--p8-stone)}
.rq-faq summary{min-height:56px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.rq-faq p{margin:0 0 16px;color:#5c5a57;line-height:1.7}
.rq-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:48px;border-radius:var(--p8-r-lg);background:var(--p8-ink);color:#fff}
.rq-cta h2{margin:0;color:#fff!important;font-size:clamp(24px,2.2vw,30px)}
.rq-cta p{margin:8px 0 0;color:#d6d2ce}
.rq-cta .btn.primary{min-height:48px;padding:0 24px}
@media (max-width:900px){
  .rq-section{padding:56px 0}
  .rq-head,.rq-split{grid-template-columns:1fr;gap:16px}
  .rq-uses{grid-template-columns:1fr}
  .rq-uses div{grid-template-columns:1fr;gap:4px}
  .rq-cta{flex-direction:column;align-items:stretch;padding:28px 20px}
}
@media (max-width:760px){
  /* the shared account block replaces .top-user, so it takes over the right edge */
  html body .app-top{gap:4px}
  html body .app-top .rv-app-account{gap:0}
  html body .app-top .site-icon-btn{width:40px}
}
@media (max-width:768px),(pointer:coarse){
  html body [data-help-category]{min-height:44px}
}
/* account page: labels were #95a0b3 / #8a95a5 on white (2.6–3.0:1) */
html body .request-summary dt,html body .client-summary dt,html body .session small{color:#5c5a57}
@media (max-width:768px),(pointer:coarse){html body .help-layout summary{min-height:44px;display:flex;align-items:center}}
/* An error region shows only when it has a message: no empty box, no "오류" badge without text. */
.form-error:empty,.field-error:empty,.p8-field-error:empty,[id$=-error]:empty{display:none!important}
/* QA 2026-10-22 (375px): links inside table cells, tab rows, search inputs and file tabs are full touch targets. */
@media (max-width:768px),(pointer:coarse){
  html body :is(td,.request-name,.rv-cell-title) a,html body a:is(.request-name,.rv-request-title,.rv-cell-title){display:inline-flex;align-items:center;min-height:44px}
  html body .main :is(.tabs,.rv-tabs,.status-tabs,[role=tablist]) button,html body .main .segmented button{min-height:44px}
  html body .main input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:44px}
  html body .main .panel-head a,html body .main a.small,html body .main .panel a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:768px),(pointer:coarse){html body :is(.rv-list-filters,.rv-vault-tabs) button{min-height:44px}}