/* 코엔에프 공식 링크 허브 */
:root{--navy:#123b67;--blue:#1d6fe8;--bg:#f5f9fd;--ink:#172433;--muted:#718091;--line:#e3ebf3;--shadow:0 8px 22px rgba(21,65,105,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#dfe8f1;color:var(--ink);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #8ac5ff;outline-offset:3px}
.page-shell{width:min(100%,720px);min-height:100vh;margin:0 auto;background:var(--bg);overflow:hidden}

/* Hero */
.hero{position:relative;padding:34px 26px 30px;color:#fff;background:linear-gradient(145deg,#092b4f 0%,#123b67 45%,#3e9ed1 100%);border-radius:0 0 30px 30px;overflow:hidden}
.hero:after{content:"";position:absolute;width:370px;height:370px;right:-110px;top:-150px;border:1px solid #ffffff2b;border-radius:50%;box-shadow:0 0 0 30px #ffffff0f,0 0 0 62px #ffffff0a}
.brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;color:var(--blue);background:#fff;font-size:21px;font-weight:900;box-shadow:0 8px 18px #0523424d}
.brand strong{font-size:21px;font-weight:900;letter-spacing:-.8px}
.brand small{display:block;margin-top:3px;color:#ffffffbf;font-size:10px;letter-spacing:1.4px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:20px;align-items:center;margin-top:27px}
.eyebrow{margin:0 0 9px;color:#bce4ff;font-size:11px;font-weight:800;letter-spacing:1.35px}
.hero h1{margin:0;font-size:clamp(26px,6vw,36px);line-height:1.2;letter-spacing:-1.8px}
.hero-copy{max-width:380px;margin:13px 0 0;color:#e8f5ff;font-size:13px;line-height:1.65}
.qr-card{padding:11px;border-radius:16px;background:#fff;box-shadow:0 9px 20px #05234245;text-align:center}
.qr-card>small{display:block;margin-top:7px;color:var(--navy);font-size:9px;font-weight:900}
.qr-box{width:94px;height:94px;margin:0 auto}
.qr-box img{display:block;width:100%;height:100%}
.qr-box.empty{display:grid;place-items:center;border:2px dashed #b9d4ec;border-radius:8px}
.qr-box.empty img{display:none}
.qr-box.empty:after{content:"QR";color:#9aabba;font-size:18px;font-weight:900}

/* Content */
.content{padding:24px 22px 30px}
.content section{margin-top:26px}
.content section:first-child{margin-top:0}
.section-title{display:flex;align-items:end;justify-content:space-between;margin:0 2px 12px}
.section-title h2{margin:0;font-size:19px;letter-spacing:-.8px}
.section-title small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:1.1px}
.load-error{margin:0 0 20px;padding:12px;border-radius:12px;background:#fff3f0;color:#b3412a;font-size:12px;text-align:center}

/* Card (SNS / 구매) */
.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.purchase-list{display:grid;gap:10px}
.card{display:flex;align-items:center;min-width:0;min-height:62px;gap:10px;padding:11px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow);transition:.18s}
a.card:hover,a.resource:hover,a.drive-button:hover{border-color:#b9d4ec;box-shadow:0 12px 28px #15416924;transform:translateY(-2px)}
.txt{display:block;min-width:0;flex:1}
.card b{display:block;overflow:hidden;font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.card em,.resource small{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-style:normal;line-height:1.2}
.card>strong{color:#9aabba;font-size:21px;line-height:1}
.purchase>strong{font-size:21px}
.disabled{opacity:.55;cursor:default}
.purchase.disabled>strong{font-size:10px;font-weight:700}
.icon,.purchase-icon{display:grid;flex:none;place-items:center;color:#fff;font-weight:900;background:var(--navy)}
.icon{width:32px;height:32px;border-radius:10px;font-size:14px}
.purchase{min-height:68px;padding:13px}
.purchase-icon{width:38px;height:38px;border-radius:12px;font-size:16px}
.purchase .txt b{font-size:13px}
.purchase .txt em{font-size:10px}

/* 아이콘 색상 (links.csv의 icon 값) */
.ic-instagram{background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.ic-facebook{background:#1877f2;font-size:18px}
.ic-threads,.ic-x,.ic-tiktok{background:#111}
.ic-youtube{background:#f03;font-size:12px}
.ic-naver-clip,.ic-naver-blog,.ic-smartstore{background:#20b965}
.ic-blogger{background:#e56b3b}
.ic-coupang{background:#e8452c}
.ic-mall{background:var(--navy)}

/* 문의 */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.contact-card{min-width:0;padding:14px 11px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow)}
.contact-card small{display:block;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.contact-card b{display:block;margin:6px 0 12px;font-size:14px;letter-spacing:-.5px;white-space:nowrap}
.contact-btn{color:var(--blue);font-size:10px;font-weight:800}
.contact-btn.disabled{color:var(--muted);opacity:1}

/* 홍보자료 */
.resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.resource{display:block;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow);transition:.18s}
.video-thumb{display:grid;height:120px;place-items:center;background:linear-gradient(135deg,#0f3761,#35a8d0)}
.video-thumb span{display:grid;width:42px;height:42px;place-items:center;padding-left:2px;border-radius:50%;color:var(--blue);background:#fffffff0}
.flyer-thumb{display:grid;height:120px;place-items:center;color:#a44728;background:linear-gradient(135deg,#ffdd87,#ff8d55);font-size:13px;font-weight:900;line-height:1.25;text-align:center}
.thumb-ad-image{color:#1b5a8a;background:linear-gradient(135deg,#cfe9fb,#7fc0e8)}
.thumb-logo{color:#fff;background:linear-gradient(135deg,#123b67,#1d6fe8)}
.res-meta{padding:11px}
.resource b{display:block;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.drive-button{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:11px;padding:12px;border:1px solid transparent;border-radius:13px;color:var(--blue);background:#eaf4ff;font-size:11px;font-weight:900;transition:.18s}
.drive-button b{font-size:18px}

footer{padding:4px 22px 27px;color:#8b9aab;font-size:10px;line-height:1.6;text-align:center}

@media(min-width:721px){
  body{padding:32px 0}
  .page-shell{border-radius:24px;box-shadow:0 20px 60px #14365729}
  .hero{border-radius:24px 24px 30px 30px}
}
@media(max-width:430px){
  .hero{padding:28px 20px 25px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 96px;gap:12px}
  .hero h1{font-size:25px}
  .hero-copy{font-size:12px}
  .hero-copy br{display:none}
  .qr-card{padding:8px}
  .qr-box{width:78px;height:78px}
  .content{padding-right:16px;padding-left:16px}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{display:flex;align-items:center;gap:9px;padding:12px}
  .contact-card small{width:84px;flex:none}
  .contact-card b{flex:1;margin:0}
  .resources{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-thumb,.flyer-thumb{height:84px}
}