/* ad.seongam.net — 공개 페이지 (시안 A: 모던·깔끔) */
:root{
  --green:#1f7a4d; --green-d:#155c39; --green-l:#e8f5ee;
  --ink:#1a2420; --muted:#5f6b64; --line:#e6ebe8;
  --bg:#f6f9f7; --card:#ffffff; --accent:#f4a300;
  --radius:18px; --shadow:0 2px 4px rgba(20,40,30,.04),0 12px 28px rgba(20,60,40,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:8px 14px;border-radius:8px;z-index:99}

/* Header */
header.site{background:linear-gradient(135deg,var(--green) 0%,var(--green-d) 100%);color:#fff;padding:34px 0 30px;position:relative;overflow:hidden}
header.site::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:rgba(255,255,255,.06);border-radius:50%}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:26px;flex:none;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover}
.brand h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.brand p{margin:2px 0 0;font-size:13px;opacity:.85}
.tagline{margin:20px 0 0;font-size:26px;font-weight:800;line-height:1.35;letter-spacing:-.03em;max-width:640px}
.tagline b{color:#ffe08a}

/* CTA hero */
.cta-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.cta{background:#fff;border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);transition:.18s}
.cta:hover{transform:translateY(-3px)}
.cta .ic{width:44px;height:44px;border-radius:12px;background:var(--green-l);display:grid;place-items:center;font-size:22px;flex:none;overflow:hidden}
.cta .ic img{width:100%;height:100%;object-fit:cover}
.cta b{display:block;font-size:15px;font-weight:800;color:var(--ink)}
.cta span{font-size:12px;color:var(--muted)}
.cta .arrow{margin-left:auto;color:var(--green);font-weight:800}

/* Sections */
main.wrap{padding-top:32px; padding-bottom:10px}
.sec{margin-bottom:30px}
.sec-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sec-h h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.sec-h .bar{width:4px;height:16px;border-radius:2px;background:var(--green)}
.sec-h .cnt{font-size:12px;color:var(--muted);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 16px 18px;text-align:center;transition:.18s;position:relative;display:block}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card .icon{width:60px;height:60px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;font-size:30px;overflow:hidden}
.card .icon img{width:100%;height:100%;object-fit:cover}
.card h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em}
.card p{margin:5px 0 0;font-size:12px;color:var(--muted)}
.card .ext{position:absolute;top:12px;right:12px;font-size:11px;color:#c2ccc7}

.c-green .icon{background:var(--green-l);color:var(--green-d)}
.c-amber .icon{background:#fff3d6;color:#b57600}
.c-blue  .icon{background:#e6f0fb;color:#1b6fb8}
.c-pink  .icon{background:#fce8ef;color:#c73e6c}
.c-purple .icon{background:#f0e9fb;color:#7b4bc0}
.c-teal  .icon{background:#e2f4f2;color:#1a8079}

/* Footer */
footer{background:#12211a;color:#cfdcd5;margin-top:26px;padding:30px 0}
.fgrid{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.fcol h4{margin:0 0 8px;font-size:14px;color:#fff}
.fcol p{margin:3px 0;font-size:13px;line-height:1.6}
.fcol a{color:#8fd3ac}
.tel{font-size:20px;font-weight:800;color:#fff}
.admin-link{display:inline-block;margin-top:10px;font-size:12px;color:#5c7a68}

@media(max-width:760px){
  .cta-row{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .tagline{font-size:21px}
}

/* QR Modal */
.qr-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  backdrop-filter: blur(4px);
}
.qr-modal.show {
  opacity: 1;
  visibility: visible;
}
.qr-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  transform: translateY(20px);
  transition: .3s;
  color: var(--ink);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.qr-modal.show .qr-modal-content {
  transform: translateY(0);
}
.qr-modal-content img {
  width: 200px;
  height: 200px;
  margin: 15px 0;
  border-radius: 12px;
}
.qr-close {
  position: absolute;
  top: 15px; right: 15px;
  background: none; border: none;
  font-size: 24px; cursor: pointer;
  color: var(--muted);
}
.qr-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
  vertical-align: middle;
}
.qr-btn:hover {
  background: rgba(255,255,255,0.3);
}