/* UI 1.1.2: compact reference layout. Generation and document exports are unchanged. */
:root{--blue:#2d7bff;--ink:#102550;--border:#dce8fc;--page-left:clamp(84px,9.6vw,138px);--page-right:clamp(24px,4.5vw,64px);font-family:"Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;color:var(--ink);background:#f5f9ff}
body{min-width:320px;background:linear-gradient(180deg,#f7fbff,#f3f8ff 72%,#eaf2ff);-webkit-font-smoothing:antialiased;overflow-x:clip}
.hero{padding:0;background:radial-gradient(ellipse at 10% 0%,#355d97,transparent 60%),linear-gradient(105deg,#183864,#123063 70%,#315a91);overflow:hidden}
.hero-inner{position:relative;max-width:1440px;height:124px;min-height:0;margin:auto;padding:8px var(--page-right) 0 var(--page-left)}
.brand-block{display:flex;align-items:flex-start;gap:18px;position:relative;z-index:1;width:max-content;max-width:58%}
.brand-mark{display:block;flex:none;width:38px;height:48px;filter:drop-shadow(0 2px 4px #06245238)}
.brand-copy{min-width:0}.brand-line{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hero h1{font-size:27px;font-weight:850;line-height:1.2;letter-spacing:.012em;margin:0;color:#fff;white-space:nowrap}
.hero .version{font-size:10px;line-height:1.6;margin:0;padding:3px 11px;border-radius:99px;color:#2468d5;background:#dceaff;white-space:nowrap}
.hero p{font-size:12px;line-height:1.6;letter-spacing:.025em;color:#e9f1ff;margin:5px 0 0}
.header-cat{position:absolute;right:0;top:-95px;width:600px;max-width:none;height:auto;display:block;pointer-events:none;user-select:none;clip-path:inset(0 54% 0 0)}
/* Show the supplied banner's caption separately so the cat can peek over the card without clipping the caption. Both use the same unchanged artwork. */
.hero-inner:after{content:"";position:absolute;right:0;top:-45px;width:334px;height:169px;background:url('../assets/mascots/header-cat.webp?v=1.1.1') right top/600px auto no-repeat;pointer-events:none}
.app-shell{position:relative;z-index:2;max-width:1440px;margin:-40px auto 0;padding:0 var(--page-right) 0 var(--page-left)}
.setup-area{position:relative;padding:0}.setup-panels{display:flex;flex-direction:column;gap:16px}.content-offset{margin:0}
.setup-area:before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--page-left));right:calc(-1 * var(--page-right));bottom:-5px;height:92px;background:#dce9ff;clip-path:polygon(0 8%,10% 24%,25% 82%,40% 100%,80% 100%,100% 24%,100% 100%,0 100%);pointer-events:none}
.panel{position:relative;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px #3159920a;padding:15px 25px 17px;margin:0}
.section-title{display:flex;align-items:center;gap:16px;font-size:19px;font-weight:750;line-height:1.35;margin:0}
.step{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;background:linear-gradient(135deg,#408bff,#2473fb);border-radius:50%;color:white;font-size:22px;font-weight:650;line-height:1;margin:0}
.section-description,.documents-panel .head .hint{font-size:12px;color:#476593;line-height:1.65;margin:-7px 0 0 54px;font-weight:400}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:16px}
.field-label{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:700;padding-left:4px}.icon{color:#2d7bff;flex:none;width:22px;height:22px}
select,input[type=number]{height:42px;min-height:42px;padding:0 14px;margin-top:6px;border:1px solid #d5e3fc;border-radius:9px;background-color:#fff;color:#294575;font:inherit;font-size:13px}
select{appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23142756' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
select:disabled{background-color:#fcfdff;color:#61769b;opacity:1;cursor:not-allowed}
#profileInfo{display:none;font-size:11px;color:#577095;margin:10px 0 0}.purpose-panel.has-profile #profileInfo{display:block}
.head{gap:10px;align-items:center}.documents-panel .head>div:first-child{flex:1;min-width:0}.head .section-title{margin:0}.document-selection{font-size:10px;color:#2d6ad6;font-weight:700;white-space:nowrap}
.empty{margin-top:16px;padding:17px 18px 13px;min-height:118px;border:1px dashed #cbdcfa;border-radius:10px;background:#f5f9ff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#233b68;font-size:12px;font-weight:700;line-height:1.8;gap:6px}
.empty:before{content:"";display:block;width:40px;height:43px;margin-bottom:2px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238398bd' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a1.5 1.5 0 0 0-1.5 1.5v17A1.5 1.5 0 0 0 6 22h5M14 2v5h5M14 2l5 5v4'/%3E%3Ccircle cx='16.5' cy='16.5' r='3.5'/%3E%3Cpath d='m19 19 2.5 2.5'/%3E%3C/svg%3E")}
.empty:after{content:"選択に応じて、作成可能なドキュメントの種類がここに表示されます。";font-size:10px;font-weight:400;color:#617da8}
#documents:not(.empty){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.doc{margin:0;padding:13px;align-content:start;border-radius:10px;border:1px solid #d8e5fa;transition:background .15s,border-color .15s}.doc:has(input:checked){background:#f2f7ff;border-color:#8db8ff}.doc:hover{border-color:var(--blue)}.doc strong{font-size:14px}.doc p{font-size:12px}.doc p,.doc .tags,.doc .fmt{overflow-wrap:anywhere}.tag{font-size:10px;background:#eaf2ff;padding:2px 6px;color:#476593}.fmt{font-size:10px}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:16px;height:16px;cursor:pointer;flex-shrink:0}
button{border:1px solid var(--border);border-radius:8px;min-height:36px;padding:8px 12px;background:#f4f8ff;color:#284577;font-size:12px;transition:background .15s,border-color .15s}
button:hover:not(:disabled){background:#e7f0ff;border-color:#a4c5fb;filter:none}.primary{background:#2d7bff;border-color:#2d7bff;color:#fff}.primary:hover:not(:disabled){background:#1b67e7;border-color:#1b67e7;color:#fff}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.doc:focus-within{outline:3px solid #98bdfd;outline-offset:3px}
.settings-grid{display:grid;grid-template-columns:minmax(440px,1.45fr) minmax(225px,1fr);gap:30px;margin:13px 0 0 55px}
legend{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;line-height:22px;margin:0 0 7px;padding:0}
legend .icon{width:20px;height:20px}.choices{display:flex;gap:10px;flex-wrap:wrap}.format-choice{display:flex;align-items:center;gap:7px;border:1px solid #e1eafb;border-radius:9px;background:#f7faff;padding:6px 10px;min-height:36px;font-size:12px;font-weight:500;cursor:pointer}
.format-choice:has(input:checked){border-color:#9fc0ff;background:#eef5ff}.format-choice:has(input:focus-visible){outline:3px solid #98bdfd;outline-offset:2px}
.file-icon{position:relative;display:grid;place-items:center;width:20px;height:22px;color:#fff;border-radius:3px;font-size:11px;font-weight:800;box-shadow:2px 1px 0 #dae4f4;flex:none}.file-icon.xlsx{background:#237e51}.file-icon.docx{background:#2769dc}.file-icon.pptx{background:#e3653b;border-radius:50%}.file-icon.pdf{background:#cf2444;font-size:7px}
.count-field{border-left:1px solid #d5e3fb;padding-left:29px}.count-field .choices{align-items:center;justify-content:space-between;gap:14px;min-height:36px}.count-field label{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;white-space:nowrap}.count-field input{width:20px;height:20px}
.secondary-settings{display:grid;grid-template-columns:minmax(285px,1fr) minmax(300px,1.2fr);gap:16px;align-items:start;margin:13px 0 0 55px}
.length-option{display:flex;align-items:center;gap:10px;min-width:0;min-height:36px;font-size:12px;white-space:nowrap}.length-option select{flex:1;width:0;min-width:0;height:36px;min-height:36px;margin:0;font-size:12px;padding-left:10px}
.advanced{min-width:0;border:1px solid #e1eafb;border-radius:8px;background:#f9fbff;margin:0}.advanced>summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;padding:6px 11px;min-height:35px;font-size:12px;font-weight:700}.advanced>summary::-webkit-details-marker{display:none}.advanced>summary:after{content:"＋";margin-left:auto;color:#6082b6}.advanced[open]>summary:after{content:"−"}
#advancedSummary{font-size:10px;font-weight:400;color:#61799c;overflow-wrap:anywhere}
.advanced-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:13px;border-top:1px solid #e1eafb}.advanced-grid label{font-size:12px}.advanced-grid .hint{font-size:11px;margin:5px 0}.advanced-grid .export-hint{margin:0;padding-top:9px;border-top:1px solid #e1eafb}.advanced input[type=number]{font-size:14px;height:38px;min-height:38px}.evaluation-option{gap:8px;font-size:12px}
.generate-area{display:flex;align-items:center;flex-direction:column;margin-top:13px}
#generate{display:flex;align-items:center;justify-content:center;gap:12px;border-radius:16px;width:min(400px,100%);min-height:42px;padding:8px 18px;font-size:14px;font-weight:600;letter-spacing:.04em;white-space:normal;margin:0;box-shadow:0 4px 10px #2878fb29}.spark,.arrow{font-size:20px}#generate:disabled{opacity:.72;box-shadow:none}.generate-area .note{font-size:9px;text-align:center;color:#6680aa;margin:7px 0 0;line-height:1.6}
.mascot{position:absolute;left:calc(-1 * var(--page-left) - 65px);bottom:-5px;width:360px;pointer-events:none;user-select:none;z-index:3}.mascot img{display:block;position:relative;z-index:1;width:100%;height:auto;margin-bottom:-1px}.mascot-desk{height:18px;width:52%;border-radius:0 4px 0 0;background:linear-gradient(#e6bc86 0 5px,#cc9a62 5px,#b98046)}
.content-offset>.status{font-size:11px;margin:12px 0 8px;padding:7px 12px;background:transparent;color:#5f769b}.content-offset>.status.error{background:#fff0ee;color:#a23228}.content-offset>.status.success{background:#eaf5f1;color:#226349}.status-actions button{margin-bottom:8px}
.results-panel{scroll-margin-top:16px;margin:16px 0}.results-panel h2{display:flex;align-items:center;gap:12px;font-size:19px;margin-bottom:6px}.results-panel>.head{flex-wrap:wrap}.results-panel .count{border-radius:99px;background:#edf4ff;padding:3px 10px;font-size:12px}.results-panel .evaluation-notice{font-size:11px}.result{padding:14px 0}.result:has(input:checked){background:#f7faff}.result .filename{font-size:13px;line-height:1.65}.result .actions button{min-height:36px}.help{padding:10px 15px;border-radius:9px;background:#ffffff9e;font-size:12px}.help summary{font-size:12px}.help p{overflow-wrap:anywhere}
dialog{border-radius:14px;padding-top:0;overscroll-behavior:contain}dialog::backdrop{background:#11274c8c;backdrop-filter:blur(3px)}.preview-tools{position:sticky;top:0;z-index:4;padding:17px 0 13px;background:white;border-bottom:1px solid var(--border)}.preview-tools h2{overflow-wrap:anywhere}.preview-tools button{flex:none}.preview-meta{background:#f5f9ff;line-height:1.9}.preview-section{scroll-margin-top:95px}.preview-section h3{border-left:3px solid var(--blue);padding-left:12px}.preview-section p{line-height:2}
footer{font-size:10px;color:#7189ac;line-height:1.8;padding:17px 18px 24px}
@media(max-width:1100px){:root{--page-left:85px;--page-right:25px}.hero h1{font-size:24px}.hero p{font-size:11px}.brand-block{gap:12px}.header-cat{width:440px;top:-47px}.hero-inner:after{width:245px;top:-14px;height:138px;background-size:440px auto}.panel{padding:16px 20px}.grid{gap:15px}.settings-grid{grid-template-columns:minmax(390px,1.4fr) minmax(185px,1fr);gap:17px;margin-left:32px}.count-field{padding-left:17px}.count-field .choices{gap:8px}.format-choice{gap:5px;padding:6px 8px}.secondary-settings{margin-left:32px;grid-template-columns:1fr 1.1fr;gap:12px}.mascot{width:280px;left:calc(-1 * var(--page-left) - 48px)}.brand-line{gap:8px}.hero .version{font-size:9px;padding:2px 8px}}
@media(max-width:900px){:root{--page-left:22px;--page-right:22px}.mascot{display:none}.hero h1{font-size:23px}.hero p{max-width:355px}.brand-mark{width:32px;height:42px}.settings-grid{margin-left:0;grid-template-columns:minmax(375px,1.4fr) minmax(185px,1fr);gap:16px}.secondary-settings{margin-left:0}.grid{gap:13px}.field-label{font-size:12px;gap:7px}.section-description,.documents-panel .head .hint{font-size:11px}.panel{padding:16px 20px}.header-cat{width:340px;top:-17px}.hero-inner:after{width:190px;top:4px;height:120px;background-size:340px auto}.hero-inner{height:124px}}
@media(max-width:700px){:root{--page-left:14px;--page-right:14px}.hero-inner{height:174px;padding:17px 18px 0}.hero-inner:after{display:none}.brand-block{max-width:100%;gap:10px}.brand-mark{width:29px;height:38px}.hero h1{font-size:21px;white-space:normal}.brand-line{gap:8px}.hero p{font-size:11px;margin-top:6px;line-height:1.7}.header-cat{top:69px;right:5px;max-width:none;width:270px;clip-path:none}.app-shell{margin-top:-20px}.setup-panels{gap:14px}.panel{padding:17px 16px;border-radius:12px}.step{width:34px;height:34px;font-size:19px}.section-title{font-size:17px;gap:11px}.section-description,.documents-panel .head .hint{font-size:11px;line-height:1.75;margin:0 0 0 45px}.grid{grid-template-columns:1fr;gap:13px;margin-top:16px}.field-label{font-size:13px}.icon{width:21px;height:21px}select,input[type=number]{font-size:16px;min-height:44px;height:44px}.documents-panel .head{display:flex;flex-wrap:wrap}.documents-panel .head>div:first-child{flex-basis:100%}.document-selection{margin:0 0 0 auto}.empty{margin-top:14px;font-size:12px;padding:17px 13px}.empty:after{font-size:10px}#documents:not(.empty){grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr;gap:15px;margin-top:15px}.format-field .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.format-choice{min-height:44px;gap:8px;font-size:13px;padding:9px 11px}.count-field{border-left:0;border-top:1px solid var(--border);padding:12px 0 0}.count-field .choices{justify-content:flex-start;gap:26px}.count-field label{min-height:44px}.secondary-settings{grid-template-columns:1fr;gap:12px;margin-top:12px}.length-option{display:block;font-size:13px}.length-option select{display:block;width:100%;font-size:16px;min-height:44px;height:44px;margin-top:7px}.advanced>summary{min-height:44px;flex-wrap:wrap;gap:5px 8px}.advanced input[type=number]{font-size:16px;min-height:44px}.generate-area{margin-top:16px}#generate{min-height:46px;font-size:13px;padding:10px 12px;gap:8px;letter-spacing:0}.generate-area .note{font-size:9px}.results-panel h2{font-size:17px}.results-panel .head>.actions{gap:6px}.results-panel .head>.actions button{font-size:11px;min-height:40px}.result .filename{font-size:12px}.result .actions button{min-height:40px}.content-offset>.status{font-size:11px}.preview-tools{padding-top:14px}.preview-tools h2{font-size:15px}dialog{padding:0 16px 18px}.preview-meta{font-size:11px}.preview-section p{font-size:13px}.help{padding:11px 13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
