/* ============ Branding Studio — design tokens ============ */
:root{
  --ink:#11192B;          /* near-black navy */
  --navy:#1A2540;         /* deep navy */
  --navy-700:#243352;     /* lighter navy */
  --navy-800:#1E2A47;
  --paper:#EEF5FA;        /* cool clean working surface */
  --paper-2:#FFFFFF;      /* card surface */
  --paper-3:#E3EEF6;      /* inset / hover */
  --line:#DCE8F0;         /* hairline on paper */
  --line-soft:#E8F1F7;
  --gold:#1E97D4;         /* clean azure accent (token name kept) */
  --gold-600:#137DB6;
  --gold-soft:#A9DBF1;
  --gold-wash:#E6F4FB;
  --sky:#EAF6FD;          /* pale sky wash */
  --text:#16263A;         /* primary text */
  --text-2:#44566B;       /* secondary */
  --muted:#7B8A99;        /* tertiary */
  --on-navy:#EDF4F9;      /* text on dark */
  --on-navy-dim:#A7BACB;  /* dim text on dark */
  --on-navy-line:rgba(255,255,255,.12);
  --shadow-sm:0 1px 2px rgba(17,25,43,.05), 0 1px 1px rgba(17,25,43,.04);
  --shadow-md:0 12px 30px -12px rgba(17,25,43,.22), 0 4px 10px -6px rgba(17,25,43,.14);
  --shadow-lg:0 30px 70px -28px rgba(17,25,43,.45);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --serif:"Noto Serif JP", serif;
  --sans:"Noto Sans JP", system-ui, sans-serif;
  --maxw:880px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#root{min-height:100vh;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
::selection{background:var(--gold-soft);color:var(--ink);}
.on-light-accent{color:#fff;}

.app-shell{min-height:100vh;display:flex;flex-direction:column;}

/* ============ generic atoms ============ */
.kicker{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  font-weight:700;color:var(--gold-600);
}
.kicker.on-navy{color:var(--gold-600);}
.serif{font-family:var(--serif);}

.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  border:none;border-radius:999px;font-weight:700;font-size:15px;
  padding:15px 28px;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  letter-spacing:.02em;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy);color:var(--on-navy);box-shadow:var(--shadow-md);}
.btn-primary:hover{background:var(--ink);}
.btn-gold{background:linear-gradient(180deg,var(--gold) 0%, var(--gold-600) 100%);color:#fff;box-shadow:0 10px 26px -10px rgba(30,151,212,.55);}
.btn-gold:hover{filter:brightness(1.04);}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--paper-3);color:var(--text);}
.btn-quiet{background:transparent;color:var(--muted);padding:12px 14px;font-weight:600;border:none;border-radius:999px;}
.btn-quiet:hover{color:var(--text);}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;}
.btn-arrow{font-size:18px;line-height:1;margin-top:-1px;}

/* ============ LANDING (light / clean) ============ */
.landing{
  flex:1;min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(115% 80% at 88% -12%, rgba(30,151,212,.16) 0%, transparent 52%),
    radial-gradient(90% 75% at -5% 8%, rgba(120,200,240,.20) 0%, transparent 50%),
    linear-gradient(170deg,#FBFDFF 0%, #E9F4FB 52%, #DCEEF8 100%);
  color:var(--text);position:relative;overflow:hidden;
}
.landing::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(30,120,180,.06) 1px, transparent 1px);
  background-size:24px 24px;mask:radial-gradient(85% 70% at 60% 30%, #000 0%, transparent 78%);
  opacity:.6;
}
.landing-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:30px clamp(24px,5vw,64px);position:relative;z-index:2;
}
.brandmark{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.04em;}
.brandmark .mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-600) 100%);
  color:#fff;font-family:var(--serif);font-weight:700;font-size:19px;
  box-shadow:0 6px 16px -6px rgba(30,151,212,.6);
}
.brandmark .wordmark{font-size:15px;color:var(--text);}
.landing-top .nav-note{font-size:13px;color:var(--muted);}

.landing-body{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:10px clamp(24px,5vw,64px) 40px;position:relative;z-index:2;
  max-width:1080px;margin:0 auto;width:100%;
}
.landing-body h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(38px,6.4vw,76px);line-height:1.16;letter-spacing:.01em;
  margin:22px 0 0;color:var(--text);
}
.landing-body h1 .accent{color:var(--gold-600);}
.landing-lead{
  margin:26px 0 0;max-width:560px;font-size:clamp(16px,1.7vw,19px);
  line-height:1.9;color:var(--text-2);font-weight:400;
}
.landing-cta{display:flex;align-items:center;gap:20px;margin-top:42px;flex-wrap:wrap;}
.landing-cta .time-note{font-size:13px;color:var(--muted);}

.steps-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:64px;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--line);max-width:760px;
  box-shadow:0 18px 40px -26px rgba(20,60,100,.30);
}
.steps-strip .cell{
  background:rgba(255,255,255,.7);padding:22px 24px;backdrop-filter:blur(2px);
}
.steps-strip .num{
  font-family:var(--serif);font-size:13px;color:var(--gold-600);font-weight:600;
  letter-spacing:.1em;
}
.steps-strip .t{margin-top:10px;font-weight:700;font-size:15px;color:var(--text);}
.steps-strip .d{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--text-2);}

/* ============ HEARING ============ */
.hearing{flex:1;display:flex;flex-direction:column;background:var(--paper);min-height:100vh;}
.hearing-head{
  position:sticky;top:0;z-index:5;background:rgba(246,244,239,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.hearing-head-inner{
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:18px clamp(20px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.hh-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--text);}
.hh-brand .mark{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-600) 100%);
  color:#fff;font-family:var(--serif);font-size:15px;
}
.hh-step-label{font-size:13px;color:var(--muted);font-weight:600;}
.hh-step-label b{color:var(--text);font-weight:700;}

.progress-track{height:3px;background:var(--line-soft);width:100%;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-600) 100%);
  transition:width .5s cubic-bezier(.4,0,.1,1);border-radius:0 3px 3px 0;}

.hearing-stepper{
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:26px clamp(20px,4vw,40px) 0;
  display:flex;gap:8px;
}
.step-pill{
  flex:1;display:flex;align-items:center;gap:10px;padding:10px 6px;
  border-bottom:2px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;
  transition:color .2s ease,border-color .2s ease;
}
.step-pill .dot{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);font-size:12px;color:var(--muted);flex:none;
  background:var(--paper-2);transition:all .2s ease;
}
.step-pill.active{color:var(--text);border-color:var(--gold);}
.step-pill.active .dot{border-color:var(--gold);background:var(--gold);color:#fff;}
.step-pill.done{color:var(--text-2);border-color:var(--gold-soft);}
.step-pill.done .dot{border-color:var(--gold);background:var(--paper-2);color:var(--gold-600);}
.step-pill .step-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.hearing-body{
  flex:1;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:14px clamp(20px,4vw,40px) 40px;
}
.form-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);padding:clamp(26px,4vw,44px);margin-top:26px;
}
.form-card-head{margin-bottom:8px;}
.form-card-head .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);font-weight:700;}
.form-card-head h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.2vw,32px);
  margin:12px 0 0;color:var(--text);letter-spacing:.01em;
}
.form-card-head p{margin:12px 0 0;color:var(--text-2);font-size:15px;line-height:1.8;max-width:60ch;}

.field{margin-top:26px;}
.field > label{display:block;font-weight:700;font-size:14.5px;color:var(--text);margin-bottom:4px;}
.field .opt{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:8px;}
.field .hint{font-size:13px;color:var(--muted);line-height:1.7;margin:2px 0 10px;}
.field input[type=text], .field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:#fff;padding:14px 16px;font-size:15.5px;color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;line-height:1.7;
}
.field textarea{resize:vertical;min-height:96px;}
.field input::placeholder,.field textarea::placeholder{color:#AEB1BC;}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-wash);
}

.quick-mode{
  margin-top:24px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.quick-mode__header{display:grid;gap:8px;}
.quick-mode__eyebrow{
  color:var(--gold-600);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.quick-mode h2{
  margin:0;
  font-family:var(--serif);
  font-size:24px;
  line-height:1.35;
}
.quick-mode p{margin:0;color:var(--text-2);line-height:1.7;}
.quick-mode__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.quick-mode__grid .field{margin-top:18px;}
.quick-mode__grid .field > span{
  display:block;
  font-weight:700;
  font-size:14px;
  margin-bottom:8px;
}
.quick-mode__actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
}
.voice-control{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  margin-top:8px;
}
.voice-button{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--gold-600);
  display:grid;
  place-items:center;
  line-height:1;
}
.voice-button.is-listening{
  background:var(--gold-wash);
  border-color:var(--gold);
}
.voice-status{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.choice-grid{display:flex;flex-wrap:wrap;gap:10px;}
.choice{
  display:inline-flex;align-items:center;gap:9px;padding:12px 18px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-size:14.5px;font-weight:600;color:var(--text-2);transition:all .15s ease;
}
.choice:hover{border-color:var(--gold-soft);color:var(--text);}
.choice.sel{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-600);}
.choice .tick{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;flex:none;}
.choice.sel .tick{background:var(--gold);border-color:var(--gold);color:#fff;font-size:10px;}

.form-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:30px;
}
.form-nav .right{display:flex;align-items:center;gap:14px;}
.save-hint{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;}
.save-hint .dot{width:7px;height:7px;border-radius:50%;background:#5BA37B;}

/* ============ GENERATING ============ */
.generating{
  flex:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:var(--on-navy);
  background:radial-gradient(110% 90% at 50% 0%, var(--navy-700) 0%, var(--ink) 70%);
  padding:40px;
}
.gen-orbit{position:relative;width:120px;height:120px;margin-bottom:38px;}
.gen-orbit .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--on-navy-line);}
.gen-orbit .ring.spin{
  border-color:transparent;border-top-color:var(--gold);
  animation:spin 1.1s linear infinite;
}
.gen-orbit .core{
  position:absolute;inset:34px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-600) 100%);
  display:grid;place-items:center;font-family:var(--serif);color:#fff;font-size:24px;font-weight:600;
  box-shadow:0 0 40px -6px rgba(30,151,212,.75);
}
@keyframes spin{to{transform:rotate(360deg);}}
.generating h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,38px);margin:0;color:#fff;}
.generating .gen-sub{color:var(--on-navy-dim);margin-top:14px;font-size:15px;}
.gen-tasks{margin-top:40px;display:flex;flex-direction:column;gap:14px;text-align:left;width:min(420px,90vw);}
.gen-task{
  display:flex;align-items:center;gap:14px;font-size:15px;color:var(--on-navy-dim);
  opacity:.4;transition:opacity .4s ease,color .4s ease;
}
.gen-task.active{opacity:1;color:var(--on-navy);}
.gen-task.done{opacity:1;color:var(--on-navy);}
.gen-task .gt-ico{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--on-navy-line);font-size:13px;transition:all .3s ease;
}
.gen-task.active .gt-ico{border-color:var(--gold);color:var(--gold-soft);}
.gen-task.done .gt-ico{background:var(--gold);border-color:var(--gold);color:#fff;}

/* ============ OUTPUT ============ */
.output{flex:1;background:var(--paper);min-height:100vh;}
.output-bar{
  position:sticky;top:0;z-index:10;background:rgba(246,244,239,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.output-bar-inner{
  max-width:980px;margin:0 auto;width:100%;padding:14px clamp(20px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.output-bar .ob-left{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;}
.output-bar .ob-left .mark{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-600));color:#fff;
  font-family:var(--serif);font-size:15px;
}
.output-bar .ob-actions{display:flex;align-items:center;gap:10px;}

.doc{max-width:980px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(20px,4vw,40px) 80px;}

.doc-hero{
  border-radius:var(--r-xl);overflow:hidden;position:relative;color:var(--on-navy);
  background:
    radial-gradient(120% 120% at 85% -20%, rgba(182,138,78,.22) 0%, transparent 55%),
    linear-gradient(155deg,var(--navy) 0%, var(--ink) 100%);
  padding:clamp(34px,5vw,60px);box-shadow:var(--shadow-lg);
}
.doc-hero .dh-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:700;}
.doc-hero .dh-name{margin-top:18px;font-size:15px;color:var(--on-navy-dim);font-weight:600;letter-spacing:.04em;}
.doc-hero .dh-catch{
  font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(30px,5vw,52px);line-height:1.3;margin:14px 0 0;letter-spacing:.01em;
}
.doc-hero .dh-tag{margin-top:22px;font-size:clamp(15px,2vw,18px);line-height:1.9;color:var(--on-navy-dim);max-width:60ch;}
.doc-hero .dh-type-badge{
  position:absolute;top:clamp(34px,5vw,60px);right:clamp(34px,5vw,60px);
  border:1px solid var(--on-navy-line);border-radius:999px;padding:8px 16px;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold-soft);
}

.doc-section{margin-top:30px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(26px,3.5vw,40px);box-shadow:var(--shadow-sm);}
.doc-section > .ds-label{display:flex;align-items:center;gap:12px;}
.doc-section .ds-num{font-family:var(--serif);font-size:13px;color:var(--gold-600);font-weight:600;
  border:1px solid var(--gold-soft);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex:none;}
.doc-section .ds-title{font-weight:700;font-size:18px;color:var(--text);letter-spacing:.01em;}
.doc-section .ds-body{margin-top:20px;}

.statement{font-family:var(--serif);font-size:clamp(20px,2.6vw,27px);line-height:1.85;color:var(--text);font-weight:500;}
.statement em{font-style:normal;color:var(--gold-600);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.mini{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;}
.mini .mini-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:700;}
.mini .mini-c{margin-top:12px;font-size:15.5px;line-height:1.9;color:var(--text);}

.point-list{display:flex;flex-direction:column;gap:14px;}
.point{display:flex;gap:16px;align-items:flex-start;}
.point .p-no{font-family:var(--serif);font-size:20px;color:var(--gold);font-weight:600;line-height:1.4;flex:none;width:30px;}
.point .p-text{font-size:16px;line-height:1.85;color:var(--text);}
.point .p-text b{font-weight:700;}

.story p{font-size:16px;line-height:2.05;color:var(--text-2);margin:0 0 18px;}
.story p:last-child{margin-bottom:0;}
.story p strong{color:var(--text);font-weight:700;}

.copyblock{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 24px;font-size:15.5px;line-height:2;color:var(--text);}
.copyblock .copy-btn{
  position:absolute;top:14px;right:14px;border:1px solid var(--line);background:#fff;
  border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--text-2);
  display:inline-flex;gap:6px;align-items:center;transition:all .15s ease;
}
.copyblock .copy-btn:hover{border-color:var(--gold);color:var(--gold-600);}
.copyblock .copy-btn.copied{background:var(--gold-wash);border-color:var(--gold);color:var(--gold-600);}
.pdf-hidden{display:none !important;}

.doc-foot{margin-top:40px;text-align:center;color:var(--muted);font-size:13px;}
.doc-foot .restart{margin-top:14px;display:inline-flex;gap:10px;}

/* Keep screens immediately visible across browser/headless environments. */
.fade-in{opacity:1;transform:none;}

@media (max-width:620px){
  .two-col{grid-template-columns:1fr;}
  .steps-strip{grid-template-columns:1fr;}
  .quick-mode__grid{grid-template-columns:1fr;}
  .step-pill .step-name{display:none;}
  .hh-step-label{display:none;}
}

/* ============ PRINT (PDF) ============ */
@media print{
  @page{size:A4;margin:14mm;}
  body{background:#fff;}
  .output-bar{display:none !important;}
  .doc{max-width:none;padding:0;}
  .doc-hero{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    border:1px solid var(--line);page-break-inside:avoid;}
  .doc-section{box-shadow:none;page-break-inside:avoid;break-inside:avoid;}
  .copy-btn{display:none !important;}
  .doc-foot{display:none !important;}
}