/* AI 지킴이 소개 사이트: 부모 화면과 같은 색·글꼴. 휴대폰 폭에서는 한 열로 쌓는다. */
:root{
  --ink:#182238;--ink-2:#2b3445;--text:#4b5565;--muted:#6b778c;--line:#e5eaf2;--bg:#f5f7fb;--card:#fff;
  --violet:#625cf3;--violet-deep:#4b44d6;--violet-soft:#f0efff;--violet-line:#dcd9fb;
  --mint:#129c72;--mint-soft:#eaf8f2;--amber:#d88712;--amber-soft:#fff6df;--red:#da5660;--red-soft:#fff0f1;
  --shadow-sm:0 1px 2px rgba(20,30,55,.05);--shadow:0 14px 34px rgba(31,48,79,.09);--shadow-lg:0 30px 70px rgba(31,48,79,.16);
  --radius:16px;--wrap:1120px;--header:68px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);background:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance}
.wrap{width:min(100% - 40px,var(--wrap));margin:0 auto}
.wrap.narrow{max-width:880px}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* Header */
.siteHeader{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.siteHeader .wrap{display:flex;align-items:center;gap:28px;height:var(--header)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:18px;font-weight:800;text-decoration:none}
.brandMark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--violet);color:#fff;font-size:16px;font-weight:800}
.siteNav{display:flex;gap:2px}
.siteNav a{padding:8px 12px;border-radius:10px;color:var(--text);font-size:15px;font-weight:600;text-decoration:none}
.siteNav a:hover{background:var(--bg);color:var(--ink)}
.siteNav a[aria-current="page"]{color:var(--violet)}
.siteNav .navOnlyMobile{display:none}
.headerActions{display:flex;align-items:center;gap:6px;margin-left:auto}
.menuToggle{display:none;width:44px;height:44px;margin-right:-8px;border:0;border-radius:12px;background:none;cursor:pointer}
.menuToggle span{display:block;width:20px;height:2px;margin:0 auto;border-radius:1px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 20px;border:1px solid transparent;border-radius:12px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.btn.primary{background:var(--violet);color:#fff;box-shadow:0 8px 20px rgba(98,92,243,.28)}
.btn.primary:hover{background:var(--violet-deep)}
.btn.ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.btn.ghost:hover{border-color:#cdd4e1}
.btn.text{height:40px;padding:0 12px;color:var(--text)}
.btn.text:hover{color:var(--ink)}
.btn.lg{height:54px;padding:0 26px;border-radius:14px;font-size:16px}
.btn.white{background:#fff;color:var(--violet)}
.btn.outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn.outline:hover{background:rgba(255,255,255,.1)}
.arrowLink{display:inline-flex;align-items:center;gap:4px;color:var(--violet);font-weight:700;text-decoration:none}
.arrowLink:hover{text-decoration:underline}

/* Hero */
.hero{position:relative;overflow:hidden;padding:76px 0 104px;background:radial-gradient(1100px 520px at 88% -8%,#e8e6ff 0%,rgba(232,230,255,0) 62%),radial-gradient(900px 480px at -12% 108%,#e6f6ef 0%,rgba(230,246,239,0) 56%),#fbfbff}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border:1px solid var(--violet-line);border-radius:15px;background:#fff;color:var(--violet);font-size:13px;font-weight:700}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}
.hero h1{margin:20px 0 18px;font-size:clamp(32px,3.7vw,48px);line-height:1.22;font-weight:800;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--violet)}
.lead{margin:0 0 30px;color:var(--text);font-size:clamp(16px,1.55vw,19px);line-height:1.75}
.heroActions{display:flex;flex-wrap:wrap;gap:10px}
.heroNote{display:flex;align-items:center;gap:8px;margin:22px 0 0;color:var(--muted);font-size:14px}
.heroNote svg{flex:none;color:var(--mint)}
.heroVisual{position:relative;padding:0 0 36px}
.browser{overflow:hidden;border:1px solid #e1e5ee;border-radius:14px;background:#fff;box-shadow:var(--shadow-lg)}
.browserBar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid #e6eaf1;background:#f3f5f9}
.browserBar i{width:10px;height:10px;border-radius:50%;background:#d8dde7}
.browserBar span{margin-left:10px;padding:1px 10px;border-radius:6px;background:#fff;color:#8a94a6;font-size:11px}
.phoneFrame{padding:7px;border-radius:30px;background:#12172b;box-shadow:var(--shadow-lg)}
.phoneFrame img{border-radius:23px}
.heroVisual .phoneFrame{position:absolute;right:-18px;bottom:0;width:31%}

/* Sections */
.section{padding:104px 0}
.section.alt{background:var(--bg)}
.section.tight{padding:80px 0}
.eyebrow{display:inline-block;margin:0 0 12px;color:var(--violet);font-size:14px;font-weight:700;letter-spacing:.02em}
.sectionHead{max-width:740px;margin:0 auto 52px;text-align:center}
.sectionHead h2{margin:0 0 14px;font-size:clamp(27px,3.2vw,40px);line-height:1.3;font-weight:800}
.sectionHead p{margin:0;color:var(--text);font-size:17px}

/* Why: example inputs */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.why h2{margin:0 0 18px;font-size:clamp(27px,3.2vw,40px);line-height:1.3;font-weight:800}
.why p{margin:0 0 14px;color:var(--text);font-size:17px}
.bubbles{display:grid;gap:12px;padding:28px;border-radius:24px;background:linear-gradient(160deg,#f4f3ff,#f6fbf9)}
.bubble{justify-self:end;max-width:88%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--violet);color:#fff;font-size:15.5px;line-height:1.5;box-shadow:0 6px 16px rgba(98,92,243,.2)}
.bubble small{display:block;margin-top:6px;color:rgba(255,255,255,.78);font-size:12px;font-weight:600}
.bubble:nth-child(even){justify-self:start;border-radius:18px 18px 18px 4px;background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.bubble:nth-child(even) small{color:var(--muted)}
.bubblesNote{margin:4px 2px 0;color:var(--muted);font-size:12.5px;text-align:right}

/* Features */
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:64px;align-items:center}
.feature+.feature{margin-top:112px}
.feature.reverse .featureText{order:2}
.featureText h3{margin:0 0 16px;font-size:clamp(23px,2.5vw,32px);line-height:1.35;font-weight:800}
.featureText p{margin:0 0 20px;color:var(--text);font-size:16.5px}
.checks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:10px;color:var(--ink-2);font-size:15.5px}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625cf3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.shot{overflow:hidden;border:1px solid #e3e7ef;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.shotPair{position:relative;padding:0 0 48px 0}
.shotPair .shot.over{position:absolute;right:-12px;bottom:0;width:58%;border-radius:18px;box-shadow:var(--shadow-lg)}
.phones{display:flex;justify-content:center;gap:24px}
.phones .phoneFrame{width:min(46%,250px)}
.phones .phoneFrame:nth-child(2){margin-top:48px}
.pill{display:inline-block;padding:1px 8px;border-radius:6px;font-size:.9em;font-weight:700}
.pill.high{background:var(--red-soft);color:#b42318}
.pill.follow{background:var(--amber-soft);color:#8a4b08}

/* Apps */
.apps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:0 auto}
.apps span{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);font-size:14px;font-weight:600}
.apps span.top{border-color:var(--violet-line);background:var(--violet-soft);color:var(--violet)}
.appsNote{margin:22px 0 0;color:var(--muted);font-size:14px;text-align:center}

/* Cards: principles */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.card .icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:13px;background:var(--violet-soft);color:var(--violet)}
.card h3{margin:0 0 8px;font-size:18px;font-weight:800}
.card p{margin:0;color:var(--text);font-size:15px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{padding:30px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.steps li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:36px;height:36px;margin-bottom:18px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800}
.steps h3{margin:0 0 8px;font-size:18px;font-weight:800}
.steps p{margin:0;color:var(--text);font-size:15px}
.stepsMore{margin:28px 0 0;text-align:center}

/* CTA band */
.ctaBand{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:56px 52px;border-radius:26px;background:linear-gradient(135deg,#6a63f5 0%,#4b44d6 100%);color:#fff;box-shadow:0 24px 50px rgba(75,68,214,.3)}
.ctaBand h2{margin:0 0 8px;font-size:clamp(24px,2.8vw,32px);line-height:1.35;font-weight:800}
.ctaBand p{margin:0;color:rgba(255,255,255,.86)}
.ctaActions{display:flex;flex-wrap:wrap;gap:10px}

/* Footer */
.siteFooter{padding:52px 0 60px;background:#0f1424;color:#a9b2c4;font-size:14px}
.footerTop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-bottom:26px;border-bottom:1px solid #232a3f}
.footerBrand{display:grid;gap:8px}
.footerBrand .brand{color:#fff}
.footerLinks{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px 22px}
.footerLinks a{color:#d9deea;text-decoration:none}
.footerLinks a:hover{color:#fff;text-decoration:underline}
.footerInfo{display:grid;gap:4px;padding-top:22px;line-height:1.8}
.placeholder{color:#7d879b}

/* Sub-page hero */
.pageHero{padding:60px 0 40px;background:linear-gradient(180deg,#f6f5ff 0%,#fff 100%)}
.pageHero h1{margin:6px 0 12px;font-size:clamp(30px,3.8vw,44px);line-height:1.25;font-weight:800}
.pageHero p{margin:0;color:var(--text);font-size:17px}
.pageHero .note{margin-top:10px;color:var(--muted);font-size:14px}

/* Guide */
.guideLayout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start;padding:32px 0 104px}
.toc{position:sticky;top:calc(var(--header) + 24px);display:grid;gap:2px}
.toc b{margin:0 0 8px 12px;color:var(--muted);font-size:13px}
.toc a{padding:8px 12px;border-radius:10px;color:var(--text);font-size:14.5px;font-weight:600;text-decoration:none}
.toc a:hover{background:var(--bg);color:var(--ink)}
.toc a.active{background:var(--violet-soft);color:var(--violet)}
.guide{padding:0 0 64px;margin:0 0 64px;border-bottom:1px solid var(--line)}
.guide:last-child{border-bottom:0;margin-bottom:0}
.guide h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:clamp(22px,2.4vw,28px);font-weight:800}
.guide h2 .num{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--violet);color:#fff;font-size:15px}
.guide>p{margin:0 0 8px;color:var(--text);font-size:16.5px}
.guideSteps{display:grid;gap:30px;margin:30px 0 0;padding:0;list-style:none;counter-reset:gs}
.guideSteps>li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px}
.guideSteps>li::before{counter-increment:gs;content:counter(gs);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--violet-soft);color:var(--violet);font-size:14px;font-weight:800}
.guideSteps h3{margin:2px 0 6px;font-size:18px;font-weight:800}
.guideSteps p{margin:0 0 14px;color:var(--text)}
.guideSteps .shot{margin-top:6px}
.guideSteps .phoneFrame{width:min(100%,300px)}
.shotRow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:20px;align-items:start}
.ui{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font-size:.92em;font-weight:700;white-space:nowrap}
.tip{display:flex;gap:10px;margin:18px 0 0;padding:14px 16px;border-radius:12px;background:var(--amber-soft);color:#734305;font-size:15px}
.tip.info{background:var(--violet-soft);color:#3f37c9}
.tip svg{flex:none;margin-top:3px}
.caption{margin:10px 0 0;color:var(--muted);font-size:13px}

/* Child app illustration (not a real screenshot) */
.appDemo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:start}
.appPhone{padding:8px;border-radius:32px;background:#12172b;box-shadow:var(--shadow-lg)}
.appScreen{overflow:hidden;border-radius:25px;background:#f5f7fb;font-size:13px}
.appStatus{display:flex;justify-content:space-between;padding:10px 18px 4px;color:#1d2436;font-size:11px;font-weight:700}
.appTitle{padding:6px 16px 12px;font-size:16px;font-weight:800}
.appCard{margin:0 12px 10px;padding:14px;border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.appCard b{display:block;margin-bottom:6px;font-size:14px}
.appCard p{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5}
.appCode{display:flex;gap:6px;margin-bottom:10px}
.appCode i{display:grid;place-items:center;flex:1;height:36px;border:1px solid var(--line);border-radius:8px;background:#fbfbfe;font-style:normal;font-size:17px;font-weight:800}
.appBtn{display:block;width:100%;padding:10px;border:0;border-radius:10px;background:var(--violet);color:#fff;font:inherit;font-size:13px;font-weight:700}
.appSwitch{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}
.appSwitch i{position:relative;width:40px;height:24px;border-radius:12px;background:var(--mint)}
.appSwitch i::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.appChecks{display:grid;gap:4px;margin:0;padding:0;list-style:none;color:var(--mint);font-size:12.5px;font-weight:700}
.appNotice{margin:10px 12px 14px;padding:12px 14px;border-radius:14px;background:#1d2436;color:#fff;font-size:12px;line-height:1.5}
.appNotice b{display:block;margin-bottom:2px;font-size:12.5px}
.appNotice span{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.14);font-weight:700}
.demoLabel{display:inline-block;margin:12px 0 0;color:var(--muted);font-size:12.5px}

/* FAQ */
.faqTools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 28px}
.faqSearch{flex:1 1 100%;height:50px;padding:0 16px 0 46px;border:1px solid var(--line);border-radius:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b778c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;color:var(--ink);font:inherit;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:38px;padding:0 15px;border:1px solid var(--line);border-radius:19px;background:#fff;color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--violet);background:var(--violet);color:#fff}
.faqGroup{margin:0 0 36px}
.faqGroup h2{margin:0 0 12px;font-size:20px;font-weight:800}
.qa{border:1px solid var(--line);border-radius:14px;background:#fff}
.qa+.qa{margin-top:10px}
.qa summary{display:flex;align-items:center;gap:12px;padding:18px 20px;font-size:16.5px;font-weight:700;list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--violet-soft);color:var(--violet);font-size:14px;font-weight:800}
.qa summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;border-right:2px solid #9aa3b2;border-bottom:2px solid #9aa3b2;transform:rotate(45deg);transition:transform .15s}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa[open]{border-color:var(--violet-line);box-shadow:var(--shadow-sm)}
.qa .answer{padding:0 20px 20px 60px;color:var(--text);font-size:15.5px}
.qa .answer p{margin:0 0 10px}
.qa .answer p:last-child{margin-bottom:0}
.qa .answer ul{margin:0 0 10px;padding-left:18px}
.qa .answer a{color:var(--violet);font-weight:700}
.faqEmpty{padding:40px 20px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center}
.appList{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.appList span{padding:3px 10px;border-radius:999px;background:var(--bg);font-size:13px;font-weight:600;color:var(--ink-2)}
.askBox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:48px 0 0;padding:28px 30px;border-radius:18px;background:var(--bg)}
.askBox h2{margin:0 0 4px;font-size:20px;font-weight:800}
.askBox p{margin:0;color:var(--text)}

/* Notice board */
.board{border-top:2px solid var(--ink)}
.boardHead,.post summary{display:grid;grid-template-columns:72px minmax(0,1fr) 110px;gap:12px;align-items:center;padding:0 16px}
.boardHead{height:48px;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:700}
.boardHead span:first-child,.boardHead span:last-child,.post .no,.post .date{text-align:center}
.post{border-bottom:1px solid var(--line)}
.post summary{min-height:60px;list-style:none;cursor:pointer}
.post summary::-webkit-details-marker{display:none}
.post summary:hover{background:#fafbfe}
.post .no{color:var(--muted);font-size:14px}
.post.pinned .no{justify-self:center;padding:2px 9px;border-radius:6px;background:var(--violet-soft);color:var(--violet);font-size:13px;font-weight:800}
.post .title{font-size:16px;font-weight:700}
.post .date{color:var(--muted);font-size:14px}
.post[open] summary{background:#fafbfe}
.postBody{padding:22px 24px 28px 100px;border-top:1px dashed var(--line);color:var(--text);font-size:15.5px}
.postBody p{margin:0 0 12px}
.postBody ul{margin:0 0 12px;padding-left:18px}
.boardNote{margin:18px 0 0;color:var(--muted);font-size:14px}

/* Responsive */
@media(max-width:1023px){
  .hero .wrap,.why,.feature{grid-template-columns:minmax(0,1fr);gap:40px}
  .feature.reverse .featureText{order:0}
  .heroVisual{max-width:680px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guideLayout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{position:static;display:flex;gap:6px;margin:0 -20px 32px;padding:0 20px 4px;overflow-x:auto;scrollbar-width:none}
  .toc::-webkit-scrollbar{display:none}
  .toc b{display:none}
  .toc a{flex:none;border:1px solid var(--line)}
}
@media(max-width:820px){
  .siteNav,.headerActions .btn.text{display:none}
  .menuToggle{display:block}
  .siteHeader.open .siteNav{position:absolute;top:var(--header);left:0;right:0;display:grid;gap:2px;padding:10px 20px 18px;border-bottom:1px solid var(--line);background:#fff;box-shadow:0 16px 30px rgba(31,48,79,.08)}
  .siteHeader.open .siteNav a{padding:12px}
  .siteHeader.open .siteNav .navOnlyMobile{display:block;margin-top:6px;border-top:1px solid var(--line);border-radius:0;padding-top:16px}
  .siteHeader .wrap{gap:12px}
}
@media(max-width:640px){
  .wrap{width:min(100% - 32px,var(--wrap))}
  .section{padding:72px 0}
  .section.tight{padding:56px 0}
  .hero{padding:44px 0 72px}
  .heroActions .btn{flex:1}
  .heroVisual .phoneFrame{right:-6px;width:36%}
  .cards,.steps{grid-template-columns:minmax(0,1fr)}
  .feature+.feature{margin-top:80px}
  .shotPair .shot.over{right:-6px;width:70%}
  .ctaBand{flex-direction:column;align-items:stretch;padding:36px 26px;text-align:left}
  .ctaActions .btn{flex:1}
  .shotRow,.appDemo{grid-template-columns:minmax(0,1fr)}
  .appDemo .appPhone{max-width:300px}
  .guideSteps>li{grid-template-columns:minmax(0,1fr);gap:10px}
  .qa .answer{padding:0 18px 18px}
  .boardHead{display:none}
  .post summary{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 4px}
  .post .no{justify-self:start;text-align:left}
  .post .date{text-align:left}
  .postBody{padding:18px 4px 22px}
}