/* Photographic visuals and real product screenshots, September 2026. */
.hero-visual .hero-photo{background-image:url('/assets/site-hero-v1.jpg');background-position:center 52%}
.hero-visual .hero-ov{background:linear-gradient(90deg,rgba(12,27,41,.94) 0%,rgba(12,27,41,.83) 40%,rgba(12,27,41,.34) 100%)}
.hero-visual .hero-in{grid-template-columns:.95fr 1.05fr;gap:44px;padding-top:96px;padding-bottom:88px;min-height:690px}
.hero-visual .h1{font-size:44px;line-height:1.4;letter-spacing:-.035em}
.hero-visual .acc{color:#b5d8f5}
.hero-visual .lead{font-size:16px;line-height:1.9;max-width:440px!important}
.hero-product{padding-top:58px;min-width:0}
.hero-product-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;margin-bottom:13px;letter-spacing:.015em;color:#fff}
.status-dot{width:6px;height:6px;background:#b5d8f5;border-radius:50%;box-shadow:0 0 0 4px rgba(181,216,245,.15);flex:none}
.app-screen{margin:0;background:#fff;border:1px solid #d7dfe5;box-shadow:0 14px 40px rgba(21,43,61,.07);color:var(--ink);min-width:0;overflow:hidden}
.hero-product .app-screen{box-shadow:0 24px 70px rgba(0,0,0,.3);border-color:rgba(255,255,255,.45)}
.screen-bar{display:flex;align-items:center;gap:12px;padding:12px 15px;background:#f8fafc;border-bottom:1px solid #e5e9ed;font-size:10px;font-weight:500;letter-spacing:.02em;color:#617080}
.screen-lights{display:flex;gap:4px;flex:none}
.screen-lights i{display:block;width:6px;height:6px;border-radius:50%;background:#ccd4dd}
.screen-lights i:first-child{background:#8b9dad}
.screen-type{margin-left:auto;color:var(--navy);font-size:10px;white-space:nowrap}
.screen-expand{display:block;position:relative;background:#f4f5f7;cursor:zoom-in}
.screen-expand img{display:block;width:100%;height:auto;aspect-ratio:1365/900}
.expand-hint{position:absolute;bottom:14px;right:14px;padding:7px 12px;background:rgba(22,52,79,.94);color:#fff;font-size:11px;letter-spacing:.02em;box-shadow:0 2px 8px #0002;opacity:0;transition:opacity .15s}
.screen-expand:hover .expand-hint,.screen-expand:focus-visible .expand-hint{opacity:1}
.app-screen figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid #e5e9ed;font-size:12px;font-weight:700;background:#fff}
.app-screen figcaption span{color:#778491;font-weight:400;font-size:11px}
.hero-product .app-screen figcaption{display:none}
.hero-product-foot{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:11px;color:#d5e3ed;flex-wrap:wrap}
.hero-product-foot a{border-bottom:1px solid #7793a9;padding-bottom:2px}
.product-tour{background:#f6f8fa;border-bottom:1px solid var(--line);scroll-margin-top:85px}
.tour-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.tour-heading .sub{max-width:340px}
.tour-tabs{display:flex;border-bottom:1px solid #ccd6df;gap:8px;margin-bottom:26px;overflow-x:auto;scrollbar-width:thin}
.tour-tabs[hidden]{display:none}
.tour-tabs button{flex:1;border:0;border-bottom:3px solid transparent;background:transparent;padding:17px 18px;color:#626f7c;font:500 15px/1.5 "Noto Sans KR",sans-serif;white-space:nowrap;cursor:pointer;min-height:52px}
.tour-tabs button[aria-selected="true"]{color:var(--navy);font-weight:700;border-bottom-color:var(--navy);background:#eaf0f5}
.tour-tabs button:hover{color:var(--navy);background:#edf2f6}
.tour-description{display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:55px;margin-bottom:18px}
.tour-description h3{font-size:17px;line-height:1.6;font-weight:700}
.tour-description p{font-size:13px;color:var(--fg2);max-width:470px}
.tour-panel[hidden]{display:none}
.tour-panel .app-screen{max-width:1080px;margin:0 auto}
.tour-panel .screen-bar{padding:13px 18px;font-size:12px}
.tour-panel .expand-hint{opacity:1}
.site-photo{margin:0 0 22px;position:relative;background:#e4e7e8;overflow:hidden}
.site-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.site-photo figcaption{position:absolute;inset:auto 0 0;padding:38px 20px 17px;background:linear-gradient(transparent,rgba(12,27,41,.8));color:white;font-size:13px;font-weight:500}
.site-photo figcaption span{display:block;font-size:10px;font-weight:400;color:#c7d1d8;margin-top:3px}
#partner .mock{box-shadow:0 10px 30px #16344f09}
#partner .g2{align-items:start}
#partner .chip{position:static;margin-top:12px;box-shadow:none;font-size:12px}
.attendance-visual{padding:200px 28px 26px;background:#dfe6eb;isolation:isolate;overflow:hidden;min-height:530px}
.attendance-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% center;z-index:-2}
.attendance-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,27,43,.75),rgba(11,27,43,.08));z-index:-1}
.attendance-visual .chip{position:relative;top:auto!important;left:auto!important;display:table;margin:0 auto 12px;box-shadow:0 4px 18px #0002}
.attendance-visual .mock{width:100%;box-shadow:0 15px 40px #0003}
.feature-screen .app-screen{box-shadow:0 16px 50px #16344f10}
.feature-screen .expand-hint{opacity:1}
.screen-dialog{border:0;padding:0;width:min(1440px,96vw);max-width:96vw;max-height:94dvh;background:#f5f7fa;color:#22282e;box-shadow:0 20px 90px #0006;font-family:"Noto Sans KR",sans-serif}
.screen-dialog::backdrop{background:rgba(8,20,32,.82)}
.screen-dialog-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fff;border-bottom:1px solid #d9e1e7;padding:12px 20px}
.screen-dialog-header h2{font-size:16px;margin:0}
.screen-dialog-close{font:500 13px/1.5 "Noto Sans KR",sans-serif;cursor:pointer;background:#fff;color:#16344f;border:1px solid #c8d3dc;padding:9px 16px;min-height:40px}
.screen-dialog-image-wrap{overflow:auto}
.screen-dialog img{display:block;width:100%;height:auto}
.screen-dialog-note{margin:0;padding:12px 20px;font-size:12px;color:#617080;background:#fff}
.screen-dialog-open{overflow:hidden}
:where(.tour-tabs button,.screen-expand,.screen-dialog-close,.hero-product-foot a):focus-visible{outline:3px solid #6098c4;outline-offset:4px}
@media(max-width:1100px){.hero-visual .hero-in{gap:30px}.hero-visual .h1{font-size:38px}.hero-product-foot{font-size:10px}.screen-bar{gap:8px;padding:10px}}
@media(max-width:960px){
  .hero-visual .hero-in{grid-template-columns:1fr;padding-top:62px;padding-bottom:52px;gap:40px;min-height:0}
  .hero-visual .hero-ov{background:linear-gradient(110deg,rgba(12,27,41,.94),rgba(12,27,41,.66))}
  .hero-visual .hero-photo{background-position:70% center}
  .hero-visual .lead{max-width:560px!important}
  .hero-product{padding-top:0;max-width:700px;width:100%}
  .hero-product .app-screen{max-width:100%}
  .hero-product-foot{font-size:12px}
  .tour-heading{align-items:flex-start;flex-direction:column;gap:18px}
  .tour-description{align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:7px;min-height:80px}
  .tour-description p{max-width:none}
  .tour-tabs{gap:0}
  .tour-tabs button{padding:14px 18px;font-size:14px}
  #partner .g2{gap:36px}
  .attendance-visual{min-height:530px;max-width:600px;width:100%;margin:0 auto}
  .feature-screen{width:100%}
}
@media(max-width:560px){
  .hero-visual .hero-in{padding-top:46px;padding-bottom:40px;gap:32px}
  .hero-visual .h1{font-size:32px}
  .hero-visual .kicker{font-size:12px}
  .hero-visual .lead{font-size:14px}
  .hero-visual .checks{gap:10px;font-size:11px}
  .of .hero-visual .btn,.of .hero-visual .btn-w{padding:14px 18px;font-size:13px}
  .hero-product-label{font-size:11px}
  .hero-product-foot{font-size:10px;gap:9px}
  .screen-bar{font-size:9px;padding:10px;gap:7px}
  .screen-type{font-size:9px}
  .screen-lights{gap:3px}
  .screen-lights i{width:5px;height:5px}
  .app-screen figcaption{padding:10px;font-size:11px;gap:4px}
  .app-screen figcaption span{font-size:10px}
  .tour-panel .screen-bar{font-size:10px;padding:10px}
  .tour-tabs button{font-size:12px;padding:13px 12px;min-height:48px}
  .tour-description h3{font-size:15px}
  .tour-description p{font-size:12px}
  .tour-description{min-height:100px}
  .expand-hint{bottom:8px;right:8px;font-size:10px;padding:6px 9px;opacity:1}
  .attendance-visual{padding:175px 20px 25px;min-height:500px}
  .screen-dialog{max-height:90dvh}
  .screen-dialog-header{padding:10px 12px}
  .screen-dialog-header h2{font-size:14px}
  .screen-dialog-image-wrap img{min-width:1000px}
}
@media(prefers-reduced-motion:reduce){.expand-hint{transition:none}}