:root { --web-shadow:0 18px 48px 0 rgba(23,23,23,.24), 0 6px 18px 0 rgba(23,23,23,.12); color:#252525; background:#fff; scroll-behavior:smooth; }
body { margin:0; background:#fff; }
.header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.guide-home { display:inline-flex; align-items:center; min-height:44px; color:#8b481e; font-size:.95rem; }
.app-guide { width:min(1080px,calc(100% - 64px)); margin:0 auto; padding:0 0 64px; }
.guide-hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:40px; padding:64px 0 52px; }
.guide-hero h1 { font-size:clamp(2rem,4.5vw,3.3rem); font-weight:500; line-height:1.35; letter-spacing:-.055em; margin:14px 0 24px; }
.guide-lead { font-size:1.1rem; color:#727272; line-height:1.9; }
.guide-hero > img { width:100%; height:auto; aspect-ratio:1.1; object-fit:cover; object-position:center; border-radius:28px; border:1px solid #e5e7eb; }
.app-guide .eyebrow { color:#ad4a10; font-size:.85rem; font-weight:500; letter-spacing:.02em; }
.app-guide h2 { font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.45; font-weight:500; letter-spacing:-.04em; margin:8px 0 24px; }
.app-guide h3 { font-size:1.15rem; font-weight:550; line-height:1.65; margin:14px 0 10px; }
.app-guide p,.app-guide li,.app-guide dd { font-size:1rem; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; }
.app-guide p { color:#666; }
.app-guide strong { font-weight:600; color:#363636; }
.app-guide > section { padding:48px 0; border-top:1px solid #e5e7eb; scroll-margin-top:24px; }
.app-guide article { scroll-margin-top:24px; }
.guide-nav { display:flex; flex-wrap:wrap; gap:10px; padding:0 0 32px; }
.guide-nav a { display:flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid #e5e7eb; border-radius:999px; color:#666; font-size:.94rem; background:#fff; }
.guide-nav a:hover { border-color:#e5935c; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.guide-card, .guide-note, .app-guide .guide-preview, .guide-steps li { box-shadow:var(--web-shadow); }
.guide-card { padding:28px; border:1px solid #e5e7eb; border-radius:22px; background:#fff; }
.tag { font-size:.85rem; color:#ac4d16; }
.guide-button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:10px 20px; border:1px solid #ec975e; border-radius:13px; color:#a54610; background:#fff; margin-top:14px; font-size:1rem; }
.guide-button:hover { background:#fafafa; }
.guide-link { display:inline-flex; align-items:center; min-height:44px; color:#a7460c; text-decoration:underline; text-underline-offset:5px; font-size:.96rem; }
.guide-split,.guide-preview { display:grid; grid-template-columns:1fr 1.25fr; gap:48px; }
.guide-note { padding:24px!important; background:#fff; border:1px solid #e5e7eb!important; border-radius:20px; margin-top:20px; }
.guide-note > :first-child { margin-top:0; }
.guide-note p:last-child { margin-bottom:0; }
.app-guide .guide-preview { padding:36px!important; margin-top:20px; background:#fff; border:1px solid #e5e7eb!important; border-radius:26px; }
.free-label { display:inline-block; padding:8px 16px; border:1px solid #efb38b; border-radius:999px; background:#fff; color:#aa4307; font-size:1.04rem; margin-top:12px; }
.guide-list { padding-left:20px; }
.guide-list li { margin-bottom:10px; color:#666; }
.app-guide .small { font-size:.9rem; color:#727272; line-height:1.85; }
.guide-steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.guide-steps li { padding:24px; border:1px solid #e5e7eb; border-radius:20px; background:#fff; }
.guide-steps li > span { color:#ba500c; font-size:.85rem; }
.guide-steps h3 { margin-top:16px; }
.guide-roles { margin-top:0; }
.guide-roles > div { padding:16px 0; border-bottom:1px solid #e5e7eb; }
.guide-roles > div:first-child { padding-top:0; }
.guide-roles dt { font-size:1.15rem; font-weight:550; }
.guide-roles dd { color:#666; margin:8px 0 0; }
.guide-actions { display:flex; flex-wrap:wrap; gap:20px; }
.guide-table-wrap { overflow-x:auto; border:1px solid #e5e7eb; border-radius:16px; }
.guide-table-wrap table { margin:0; width:100%; border-collapse:collapse; background:#fff; font-size:.95rem; }
.guide-table-wrap th,.guide-table-wrap td { padding:18px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:top; line-height:1.7; }
.guide-table-wrap th { font-weight:550; }
.guide-table-wrap thead { background:#fafafa; }
.guide-table-wrap tbody tr:last-child>* { border-bottom:0; }
a:focus-visible { outline:3px solid #bf5110; outline-offset:4px; }
@media(max-width:760px) { .app-guide { width:calc(100% - 36px); } .guide-hero { grid-template-columns:1fr; gap:24px; padding:36px 0; } .guide-hero > img { aspect-ratio:1.8; max-height:260px; } .guide-grid,.guide-split,.guide-preview,.guide-steps { grid-template-columns:1fr; gap:16px; } .guide-card { padding:23px; } .app-guide > section { padding:36px 0; } .app-guide .guide-preview { padding:25px!important; } .guide-hero h1 { font-size:2.3rem; } .guide-table-wrap th,.guide-table-wrap td { padding:12px; font-size:.87rem; } .guide-table-wrap th:first-child { min-width:110px; } }
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } }