/* ============================================================ * 수돗물도감 콘텐츠 스킨 (lifeWaterDogam.css) * 원본 : 수돗물도감 시안 CSS(dogam.css + dogam-common.css)를 #lwDogamPop 스코프로 변환한 것 * (원본 시안·변환 스크립트는 작업 완료 후 정리 — 2026-10) * · 데모 전용(reset/body/srcbar/switch/cap) 제거 * · 그린 팔레트를 lifeWater 변수 값(--lw-green #25bd69 / --lw-green-brd #01aa4c)으로 통일 * · 폰트 PretendardGOV (lifeWater.css 와 동일) * 수정 시 : 이 파일을 직접 고친다. * ============================================================ */ /* 팝업 컨테이너 — 표준 lw_infopop 카드(흰 배경·테두리·그림자·overflow:hidden)를 상속하고, 좁은 폭(≤1280 오버레이)·모바일(≤768 바텀시트)은 lifeWater.css 의 .lw_infopop 미디어 규칙에 맡긴다. ★ 폭/최대높이는 반드시 ≥1281 미디어 안에만 둔다 — id 특이성이 미디어의 .lw_infopop 규칙을 이겨버려 좁은 폭에서 팝업이 납작해지는 실측 결함이 있었다. 조각을 덮어쓰는 나머지 규칙은 파일 끝의 정합 블록에 있다(시안 원 규칙보다 뒤 = 우선). */ #lwDogamPop { display: flex; flex-direction: column; } @media (min-width: 1281px) { #lwDogamPop { width: 452px; max-height: calc(100% - 240px); } } #lwDogamPop{--g:#25bd69;--gd:#01aa4c;--gl:#e9f9f0;--gbd:#bfe8d1;--ink:#1e2124;--ink2:#55666f;--ink3:#93a2ab;--line:#e7edf0;--card:#fff;--bg:#fff;--f:'PretendardGOV','Pretendard GOV','Pretendard','Malgun Gothic',sans-serif;font-family:var(--f);} #lwDogamPop .screen{display:none;flex-direction:column;align-items:center;gap:10px;} #lwDogamPop .screen.on{display:flex;} #lwDogamPop .cov{margin-top:14px;border-radius:12px;overflow:hidden;position:relative; border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.13);} #lwDogamPop .cov img{width:100%;display:block;} #lwDogamPop .cov .tag{position:absolute;left:10px;bottom:10px;background:rgba(29,43,54,.82);color:#fff; font-size:10.7px;font-weight:600;padding:5px 11px;border-radius:99px;} #lwDogamPop .prov{display:flex;gap:8px;align-items:flex-start;background:#f4f8f6;border:1px solid var(--line); border-radius:10px;padding:11px 13px;margin-top:12px;} #lwDogamPop .prov .i{color:var(--gd);font-size:13.6px;flex-shrink:0;margin-top:1px;} #lwDogamPop .prov .t{font-size:12px;color:var(--ink2);line-height:1.7;} #lwDogamPop .prov .t b{color:var(--ink);} #lwDogamPop .go{width:100%;background:var(--g);color:#fff;border:none;border-radius:12px;padding:15px; font-family:var(--f);font-size:15.2px;font-weight:800;cursor:pointer;margin-top:14px;} #lwDogamPop .go:hover{background:var(--gd);} #lwDogamPop .btnrow{display:flex;gap:8px;} #lwDogamPop .btnrow .go2{flex:1;margin-top:8px;padding:12px 4px;font-size:12.5px;} #lwDogamPop .go2{width:100%;background:#fff;color:var(--gd);border:1.5px solid var(--gbd);border-radius:12px; padding:12px;font-family:var(--f);font-size:13.1px;font-weight:700;cursor:pointer;margin-top:8px;} #lwDogamPop .pop{width:452px;max-width:100%;max-height:90vh;background:var(--bg);border-radius:16px; overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 55px rgba(0,0,0,.22);} #lwDogamPop .hd{padding:16px 20px 8px;flex-shrink:0;} #lwDogamPop .hd .r0{display:flex;align-items:center;gap:8px;} #lwDogamPop .hd .badge{width:26px;height:26px;background:var(--g);border-radius:8px;color:#fff; display:flex;align-items:center;justify-content:center;font-size:13.6px;font-weight:900;} #lwDogamPop .hd .svc{font-size:13.6px;font-weight:700;color:var(--ink);} #lwDogamPop .hd .x{margin-left:auto;width:30px;height:30px;border:none;background:none;color:var(--ink3); font-size:16px;cursor:pointer;} #lwDogamPop .hback{border:none;background:none;color:var(--ink2);font-size:16.8px;font-weight:700; cursor:pointer;padding:2px 8px 2px 0;font-family:var(--f);} #lwDogamPop .hd .tt{font-size:21.6px;font-weight:900;margin-top:14px;line-height:1.25;} #lwDogamPop .hd .st{font-size:12.8px;color:var(--ink2);margin-top:4px;} #lwDogamPop .bd{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0px 20px 20px;} #lwDogamPop .pane{display:none;} #lwDogamPop .pane.on{display:block;} #lwDogamPop h3, #lwDogamPop .bn-hd{font-size:15.2px;font-weight:800;color:var(--ink);margin:20px 0 10px;display:flex;align-items:center;gap:7px;} #lwDogamPop h3:first-child{margin-top:6px;} #lwDogamPop h3 i{font-style:normal;font-size:15.2px;} #lwDogamPop .pg{display:inline-block;background:#f2f6f8;color:var(--ink2);font-size:11px;font-weight:400; padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;} #lwDogamPop .chk{display:inline-block;background:#fff7e6;color:#9a6b00;border:1px solid #f0dfb3;font-size:9.6px;font-weight:700;padding:1px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;} #lwDogamPop .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;} #lwDogamPop .kpi{background:var(--card);border:1.5px solid var(--g);border-radius:12px;padding:16px 10px;text-align:center;} #lwDogamPop .kpi .v{font-size:21.6px;font-weight:900;color:var(--gd);} #lwDogamPop .kpi .l{font-size:12.2px;color:var(--ink2);margin-top:4px;} #lwDogamPop .box{position:relative;overflow:hidden;background:#e5eeff;border-radius:8px;padding:20px 20px 30px;} #lwDogamPop .box::before{content:"";position:absolute;bottom:0;left:0;right:0;height:44px;pointer-events:none;opacity:.75;border-radius:0 0 8px 8px; background:url("/com/web/lifeWater/images/dogam/box_wave.svg") repeat-x, url("/com/web/lifeWater/images/dogam/box_wave.svg") repeat-x; background-size:210px 40px,150px 44px; background-position:0 8px,0 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); animation:boxFlow 16s linear infinite;} @keyframes boxFlow{from{background-position:0 8px,0 0;}to{background-position:210px 8px,150px 0;}} @media (prefers-reduced-motion:reduce){#lwDogamPop .box::before{animation:none;}} #lwDogamPop .p{font-size:15px;line-height:1.5;} #lwDogamPop .p b{color:var(--ink);} #lwDogamPop .p+.p{margin-top:8px;} #lwDogamPop .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;} #lwDogamPop .tags span{background:var(--gl);color:var(--gd);font-size:11.7px;font-weight:600;padding:5px 11px;border-radius:99px;} #lwDogamPop .note{font-size:11.8px;color:var(--ink3);line-height:1.75;margin-top:9px;} #lwDogamPop .zone{border:1px solid var(--gbd);border-radius:8px;overflow:hidden;margin-top:10px;} #lwDogamPop #dproc{margin-top:12px;} /* 생산과정 '모두 보기' zone (inline margin 이관) */ #lwDogamPop #p1 > .tip{margin-top:16px;} /* 기본현황 tip (하단 배치) */ #lwDogamPop .zone-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px; background:var(--gl);cursor:pointer;font-size:15px;font-weight:400;color:var(--gd);} #lwDogamPop .zone-hd .ch{transition:transform .2s;color:#464c53;width:20px;height:20px;stroke-width:2;} #lwDogamPop .zone-hd .zh-ico{height:18px;width:auto;vertical-align:middle;margin-right:4px;} /* 「왜 ~다를까?」 앞 수도꼭지 아이콘(bullet01.svg) */ #lwDogamPop .zone-hd .zh-t .zh-ico{height:18px;} /* 생산과정 물방울 아이콘 */ #lwDogamPop .zone.on .zone-hd .ch{transform:rotate(180deg);} #lwDogamPop .zone-bd{display:none;padding:8px 20px 13px 20px;} #lwDogamPop .zone.on .zone-bd{display:block;animation:zoneOpen .3s ease both;} /* 펼칠 때 살짝 페이드+슬라이드 */ @keyframes zoneOpen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} #lwDogamPop .imgph{width:100%;aspect-ratio:4/3;background:var(--gl);border:2px dashed var(--gbd);border-radius:10px; display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center; color:var(--gd);font-size:12.5px;font-weight:700;} #lwDogamPop .imgph small{color:var(--ink3);font-weight:500;font-size:10.9px;} #lwDogamPop .wt{width:100%;border-collapse:collapse;margin-top:10px;overflow:hidden;} #lwDogamPop .wt th{background:#ffffff;color:#063a74;font-size:14px;font-weight:600;padding:8px 12px;text-align:left;} #lwDogamPop .wt th:last-child{font-weight:400;} #lwDogamPop .wt td{font-size:14px;color:#464c53;padding:8px 12px;border-top:1px solid #e6e8ea;line-height:1.5;} #lwDogamPop .wt td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;} #lwDogamPop .brand{background:linear-gradient(150deg,#eafaf1,#d8f3e4);border:1px solid var(--gbd); border-radius:12px;padding:18px 16px;} #lwDogamPop .brand .eq{text-align:center;font-size:21.6px;font-weight:900;color:var(--gd);} #lwDogamPop .brand .tx{font-size:13.6px;color:var(--ink2);line-height:1.9;margin-top:13px;padding-top:12px; border-top:1px dashed #a9dcc0;} #lwDogamPop .brand .tx b{color:var(--ink);} #lwDogamPop .qa{background:var(--card);border:1px solid #cdd1d5;border-radius:8px;overflow:hidden;margin-bottom:7px;} #lwDogamPop .qa-q{width:100%;padding:12px 14px;background:none;border:none;font-family:var(--f); font-size:15px;font-weight:400;color:var(--ink);text-align:left;cursor:pointer;display:flex;align-items:center;gap:9px;} #lwDogamPop .qa-q .qm{width:21px;height:21px;background:#256ef4;color:#fff;font-size:12px;font-weight:400; border-radius:50%;display:flex;align-items:center;justify-content:center;padding-top:2px;} #lwDogamPop .qa-q span{flex:1;line-height:1.5;} #lwDogamPop .qa-q .ch{color:var(--ink3);transition:transform .2s;flex-shrink:0;} #lwDogamPop .qa.on .ch{transform:rotate(180deg);} #lwDogamPop .qa-a{display:none;padding:12px 15px 13px 20px;font-size:14px;color:#464c53;line-height:1.4;background:#f7f8fa;} #lwDogamPop .qa-note{color:#464c53;font-size:12px;font-weight:400;margin-top:6px;line-height:1.5;} /* Q&A 공통 안내 주석(inline 이관) */ #lwDogamPop .qa.on .qa-a{display:block;} #lwDogamPop .ct{display:flex;justify-content:space-between;align-items:center;background:#f7fafb; border-radius:8px;padding:12px 15px;margin-bottom:7px;} #lwDogamPop .ct .l{font-size:15px;color:#464c53;} #lwDogamPop .ct .v{font-size:15px;font-weight:400;} #lwDogamPop .ct.dl .btn{background:#256ef4;color:#fff;font-size:12px;font-weight:600;padding:6px 15px; border-radius:99px;text-decoration:none;} #lwDogamPop .tl{display:flex;flex-direction:column;} #lwDogamPop .tli{display:flex;gap:11px;padding:10px 0;} #lwDogamPop .tll{display:flex;flex-direction:column;align-items:center;flex-shrink:0;} #lwDogamPop .tld{width:30px;height:30px;border-radius:50%;background:#ecf2fe;border:1.5px solid #d8e5fd; color:#0b50d0;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;} #lwDogamPop .tlln{width:2px;background:var(--line);flex:1;min-height:12px;margin-top:3px;} #lwDogamPop .tli:last-child .tlln{display:none;} #lwDogamPop .tlb{flex:1;padding-top:3px;} #lwDogamPop .tlb .t{font-size:15px;font-weight:600;margin-bottom:2px;} #lwDogamPop .tlb .d{font-size:14px;color:var(--ink2);line-height:1.7;} #lwDogamPop .tip{border-radius:12px;padding-bottom:13px;margin-top:12px;} #lwDogamPop .tip .t{font-size:12.6px;font-weight:700;color:#464c53;margin-bottom:4px;} #lwDogamPop .tip .d{font-size:12px;color:#464c53;line-height:1.5;padding-left:20px;} /* .tinfo — 취수원 콘텐츠 하단 정보 박스 (info 아이콘 카드) */ #lwDogamPop .tinfo{background:#f3f5f8;border-radius:8px;padding:20px;margin-top:12px;} #lwDogamPop .tinfo .t{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#063a74;margin-bottom:9px;line-height:1.5;} #lwDogamPop .tinfo .t::before{content:"i";flex-shrink:0;width:20px;height:20px;border-radius:6px;background:#063a74;color:#fff;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;} #lwDogamPop .tinfo .t .pg{margin-left:auto;flex-shrink:0;font-weight:400;background:#ffffff;} #lwDogamPop .tinfo .d{font-size:13px;color:#464c53;line-height:1.5;padding-left:0;} #lwDogamPop .flow3{display:flex;align-items:center;gap:2px;margin-top:20px;} #lwDogamPop .flow3 .f{flex:1;background:#ffffff;border:1px solid #d8e5fd;border-radius:8px; padding:16px 5px;text-align:center;font-size:14px;font-weight:600;color:#0b50d0;line-height:1.45;} #lwDogamPop .flow3 .f small{display:block;font-size:13px;color:#464c53;font-weight:400;margin-top:2px;} #lwDogamPop .flow3 .a{color:#93a2ab;font-weight:900;flex-shrink:0;} #lwDogamPop .wq2{display:grid;grid-template-columns:1fr 1fr;gap:10px;} #lwDogamPop .wq{position:relative;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:6px;} #lwDogamPop .wq .l .pg{position:absolute;top:12px;right:12px;margin-left:0;} #lwDogamPop .wq.a{background:#e8fce9;border:1px solid #c8f4ca;} #lwDogamPop .wq.b{background:#eef4ff;border:1px solid #d8e4f9;} #lwDogamPop .wq .ico{height:22.4px;display:flex;align-items:center;font-size:22.4px;line-height:1;margin-bottom:12px;} #lwDogamPop .wq .ico .wq-ico{height:22.4px;width:auto;display:block;} #lwDogamPop .wq .l{font-size:13px;font-weight:600;color:var(--ink2);} #lwDogamPop .wq .t{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;} #lwDogamPop .wq .ok{display:inline-flex;background:#fff;color:#009b24;font-size:12px; font-weight:600;padding:4px 12px;border-radius:99px;width:fit-content;} #lwDogamPop .wq.b .ok{background:#ffffff;color:#0b50d0;} #lwDogamPop .mr{background:var(--card);border:1px solid #cdd1d5;border-radius:8px;padding:20px;margin-bottom:9px;} #lwDogamPop .mr .t{font-size:15px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:7px;} #lwDogamPop .mr .t .mr-ico{height:19px;width:auto;flex-shrink:0;} #lwDogamPop .mr .d{font-size:14px;color:#464c53;line-height:1.5;} #lwDogamPop .mr .d b{color:var(--ink);} #lwDogamPop .mr ul{margin:7px 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:3px;} #lwDogamPop .mr li{font-size:13px;color:#1e2124;line-height:1.5;padding-left:14px;position:relative;} #lwDogamPop .mr li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:#256ef4;} #lwDogamPop .mr li .li-tt{font-weight:600;} #lwDogamPop .ftr{font-size:13px;color:#464c53;line-height:1.5;margin-top:18px;text-align:left;} #lwDogamPop .covwrap{position:relative;margin-top:14px;} #lwDogamPop .covwrap .cov{margin-top:0;} #lwDogamPop .navbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px; border:none;border-radius:50%;background:rgba(29,43,54,.42);color:#fff;font-size:20.8px; cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:3px;} #lwDogamPop .navbtn:hover{background:rgba(29,43,54,.68);} #lwDogamPop .navbtn.prev{left:8px;} #lwDogamPop .navbtn.next{right:8px;} #lwDogamPop .pgbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;} #lwDogamPop .pnb{border:none;background:none;font-family:var(--f);font-size:11.5px;font-weight:700; color:var(--ink3);cursor:pointer;max-width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #lwDogamPop .pnb:hover{color:var(--gd);} #lwDogamPop .dots{display:flex;gap:5px;align-items:center;} #lwDogamPop .dots i{width:6px;height:6px;border-radius:50%;background:#d3dde2;transition:.2s;} #lwDogamPop .dots i.on{background:var(--g);width:16px;border-radius:99px;} #lwDogamPop .ety-miss{background:#f7fafb;border:1.5px dashed #ccd8de;border-radius:12px;padding:13px 15px; margin-top:14px;font-size:12.6px;color:var(--ink2);line-height:1.75;} #lwDogamPop .go.dis{background:#c6d2d9;cursor:default;} #lwDogamPop .zbadge{display:inline-block;background:#191933;color:#46e0d2;font-size:10.9px;font-weight:700; padding:4px 13px;border-radius:99px;margin-top:9px;letter-spacing:.01em;} #lwDogamPop .intro-tx{background:#f7fafb;border:1px solid var(--line);border-radius:12px;padding:14px 15px; margin-top:14px;font-size:13.3px;color:var(--ink2);line-height:1.85;text-align:center;} #lwDogamPop .intro-tx b{color:var(--ink);} #lwDogamPop .nb{width:100%;display:flex;align-items:center;gap:12px;background:var(--card); border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:8px; cursor:pointer;font-family:var(--f);text-align:left;transition:.15s;} #lwDogamPop .nb:hover{border-color:var(--g);box-shadow:0 4px 14px rgba(18,178,91,.14);} #lwDogamPop .nb .ic2{width:38px;height:38px;border-radius:11px;background:var(--gl);display:flex; align-items:center;justify-content:center;font-size:17.6px;flex-shrink:0;} #lwDogamPop .nb .tt2{flex:1;min-width:0;} #lwDogamPop .nb .rg2{font-size:10.9px;color:var(--ink3);} #lwDogamPop .nb .nm2{font-size:15.2px;font-weight:900;color:var(--ink);line-height:1.3;display:block;} #lwDogamPop .nb .ar{color:var(--ink3);font-size:14.4px;flex-shrink:0;} #lwDogamPop .empty2{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:24px 18px 20px;text-align:center;} #lwDogamPop .empty2 .big{font-size:32px;} #lwDogamPop .empty2 .t1{font-size:15.7px;font-weight:900;margin-top:9px;} #lwDogamPop .empty2 .t2{font-size:12.6px;color:var(--ink2);line-height:1.8;margin-top:7px;} #lwDogamPop .allview{width:100%;background:none;border:none;font-family:var(--f);font-size:12.3px;font-weight:700; color:var(--gd);cursor:pointer;margin-top:8px;padding:6px;} #lwDogamPop .allview:hover{text-decoration:underline;} #lwDogamPop .fchips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;} #lwDogamPop .fc{border:1px solid var(--line);background:var(--card);font-family:var(--f);font-size:11.5px; font-weight:700;color:var(--ink2);padding:6px 12px;border-radius:99px;cursor:pointer;} #lwDogamPop .fc.on{background:var(--g);border-color:var(--g);color:#fff;} #lwDogamPop .zgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #lwDogamPop .zcard{background:#fafcff;border:1px solid #d6e0eb;border-radius:8px;padding:11px 12px; cursor:pointer;font-family:var(--f);text-align:left;transition:.15s;position:relative; animation:zvCardIn .35s ease both;} /* 탭 전환 시 카드 순차 페이드+상승 (delay 는 JS 인라인) */ @keyframes zvCardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} #lwDogamPop .zcard.av{border-color:#d6e0eb;background:#fafcff;} #lwDogamPop .zcard:hover{border-color:#bacbde;background:#ffffff;box-shadow:0 4px 12px rgba(88,97,106,.13);} #lwDogamPop .zcard .zr{font-size:12px;color:#58616a;} #lwDogamPop .zcard .zn{font-size:15px;font-weight:600;line-height:1.5;margin-top:1px;word-break:keep-all;} #lwDogamPop .zcard .zy{position:absolute;top:10px;right:10px;background:var(--bg);border:1px solid var(--line);color:var(--ink3); font-size:10px;font-weight:600;padding:2px 7px;border-radius:99px;} #lwDogamPop .zintro2{background:var(--gl);border:1px solid var(--gbd);border-radius:11px;padding:11px 14px; font-size:12.5px;color:var(--gd);line-height:1.7;margin-bottom:12px;} #lwDogamPop .zback2{background:none;border:none;font-family:var(--f);font-size:12.8px;font-weight:700; color:var(--gd);cursor:pointer;padding:0 0 10px;} #lwDogamPop .vtoggle{display:flex;gap:6px;margin-bottom:12px;} #lwDogamPop .vt{flex:1;padding:10px 4px;border:1px solid var(--line);background:var(--card);border-radius:9px; font-family:var(--f);font-size:12.8px;font-weight:700;color:var(--ink2);cursor:pointer;} #lwDogamPop .vt.on{background:#191933;border-color:#191933;color:#46e0d2;} #lwDogamPop .mapbox{background:linear-gradient(165deg,#191933,#10102a);border-radius:14px;padding:12px 8px 6px; position:relative;overflow:hidden;} #lwDogamPop .mapbox svg{width:100%;height:440px;display:block;} #lwDogamPop .map-cnt{position:absolute;top:12px;left:14px;font-size:10.9px;font-weight:700;color:#c8cbe4; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:4px 10px;border-radius:99px;} #lwDogamPop .kpin{cursor:pointer;animation:kpop .5s cubic-bezier(.34,1.56,.64,1) backwards; transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out;} /* 기본(줄어들 때)=매끈, 커질 때 팝 이징은 JS 에서 지정 */ @keyframes kpop{from{transform:scale(0);}to{transform:scale(1);}} #lwDogamPop .pring{animation:ringp 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center;} @keyframes ringp{0%{transform:scale(1);opacity:.65;}100%{transform:scale(2.6);opacity:0;}} #lwDogamPop .map-say{text-align:center;font-size:12px;font-weight:700;color:#46e0d2;padding:8px 0 6px;min-height:30px;} #lwDogamPop .pininfo{background:var(--card);border:1.5px solid var(--gbd);border-radius:12px;padding:13px 15px; margin-top:10px;display:flex;align-items:center;gap:12px;animation:kfade .25s;} @keyframes kfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;}} #lwDogamPop .pininfo .dot2{width:12px;height:12px;border-radius:50%;flex-shrink:0;} #lwDogamPop .pininfo .tt3{flex:1;min-width:0;} #lwDogamPop .pininfo .rg3{font-size:10.9px;color:var(--ink3);} #lwDogamPop .pininfo .nm3{font-size:16.8px;font-weight:900;line-height:1.25;} #lwDogamPop .pininfo .gobtn{background:var(--g);color:#fff;border:none;border-radius:99px;padding:9px 16px; font-family:var(--f);font-size:12.3px;font-weight:800;cursor:pointer;white-space:nowrap;} #lwDogamPop .pininfo .naTag{background:#f2f6f8;color:var(--ink3);font-size:11.2px;font-weight:700; padding:6px 12px;border-radius:99px;white-space:nowrap;} #lwDogamPop .chip-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:1px;} #lwDogamPop .covB{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line); box-shadow:0 5px 14px rgba(29,43,54,.10);} #lwDogamPop .covB img{width:100%;display:block;max-height:295px;object-fit:cover;object-position:top;} #lwDogamPop .covB.open img{max-height:none;} #lwDogamPop .covB .more2{position:absolute;left:0;right:0;bottom:0;padding:26px 0 8px;text-align:center; background:linear-gradient(transparent,rgba(255,255,255,.94) 62%);font-size:10.9px;font-weight:700;color:var(--ink2);cursor:pointer;} #lwDogamPop .covB.open .more2{position:static;background:none;padding:8px 0 2px;} #lwDogamPop .covB .tag{position:absolute;left:8px;top:8px;background:rgba(29,43,54,.72);color:#fff;font-size:9.6px; font-weight:700;border-radius:99px;padding:3px 9px;right:auto;bottom:auto;} #lwDogamPop #e-ety .brand{background:var(--gl);border:1px solid var(--gbd);border-radius:13px;padding:13px 15px;margin-top:12px !important;} #lwDogamPop #e-ety .bq{font-size:10.9px;font-weight:800;color:var(--gd);margin-bottom:4px;} #lwDogamPop #e-ety .brand .eq{font-size:17px !important;font-weight:900;} #lwDogamPop #e-ety .brand .tx{font-size:12.8px;line-height:1.85;margin-top:9px !important;padding-top:9px !important;border-top:1px dashed var(--gbd);} #lwDogamPop #e-ety .brand .tx b{color:var(--gd);} #lwDogamPop .goB{display:block;width:100%;background:var(--g);color:#fff;border:none;border-radius:13px;font-family:var(--f); text-align:left;padding:14px 16px;cursor:pointer;margin-top:12px;} #lwDogamPop .goB .t1{font-size:14.7px;font-weight:800;display:flex;justify-content:space-between;align-items:center;} #lwDogamPop .goB .t2{font-size:11.2px;opacity:.85;margin-top:3px;} #lwDogamPop .mapB{display:flex;align-items:center;gap:11px;width:100%;background:#1d2b36;color:#fff;border:none;border-radius:13px; font-family:var(--f);text-align:left;padding:12px 15px;cursor:pointer;margin-top:8px;} #lwDogamPop .mapB .mi{font-size:20px;} #lwDogamPop .mapB .mt1{font-size:13.1px;font-weight:800;} #lwDogamPop .mapB .mt2{font-size:10.6px;color:#aebac2;margin-top:2px;} #lwDogamPop .mapB .ar{margin-left:auto;color:#d6f76b;font-weight:900;} #lwDogamPop .dlB{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:none;border:none; font-family:var(--f);font-size:11.5px;font-weight:700;color:var(--ink3);padding:12px 4px 2px;cursor:pointer; text-decoration:underline;text-underline-offset:3px;} #lwDogamPop .qa-q .qm{flex:0 0 21px;} #lwDogamPop .acg{display:block;} #lwDogamPop .ac{background:var(--card);border:1px solid #cdd1d5;border-radius:8px;overflow:hidden;margin-bottom:7px;} #lwDogamPop .ac-q{width:100%;padding:12px 14px;background:none;border:none;font-family:var(--f); display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer; font-size:15px;font-weight:600;color:var(--ink);} #lwDogamPop .ac-q .tx{flex:1;line-height:1.5;} #lwDogamPop .ac-q .ch{color:var(--ink3);transition:transform .2s;flex-shrink:0;} #lwDogamPop .ac.on .ch{transform:rotate(180deg);} #lwDogamPop .ac-a{display:none;padding:0 15px 14px;} #lwDogamPop .ac.on .ac-a{display:block;} #lwDogamPop .ac.hi, #lwDogamPop .mr .ac{border-color:#d8e4f9;background:#fafcff;} #lwDogamPop .ac.hi .ac-q, #lwDogamPop .mr .ac .ac-q{color:#063a74;} /* 시민 혜택·주요 공지 하위 아코디언 소타이틀 아이콘 (ss_ico.svg) — #p3 최상위 acg만, .mr 내부 아코디언 제외 */ #lwDogamPop #p3 > .acg .ac-q::before{content:"";flex-shrink:0;width:22px;height:20px;background:url("/com/web/lifeWater/images/dogam/ss_ico.svg") center/contain no-repeat;} /* 시민 혜택 아코디언 오픈 영역 배경 */ #lwDogamPop #p3 > .acg .ac-a{background:#f7f8fa;padding-top:12px;} #lwDogamPop .mr .acg{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);} #lwDogamPop .mr .ac{margin-bottom:6px;} #lwDogamPop .mr .ac:last-child{margin-bottom:0;} /* .bn-hd 스타일은 h3와 통합(위 h3 셀렉터에 병합) */ #lwDogamPop .bn-d{font-size:14px;color:#464c53;line-height:1.5;} #lwDogamPop .bn-d b{color:var(--ink);} #lwDogamPop .bn-rs{margin-top:9px;} #lwDogamPop .bn-r{display:flex;gap:9px;padding:7px 0;border-top:1px dashed #cdd1d5;} #lwDogamPop .bn-r .k{flex:0 0 88px;font-size:13px;font-weight:600;color:#063a74;line-height:1.5;} #lwDogamPop .bn-r .v{flex:1;font-size:13px;color:#464c53;line-height:1.5;} #lwDogamPop .bn-ul{margin:8px 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:5px;} #lwDogamPop .bn-ul li{font-size:12px;color:#464c53;line-height:1.5;padding-left:13px;position:relative;} #lwDogamPop .bn-ul li::before{content:"";position:absolute;left:2px;top:8px;width:4px;height:4px; border-radius:50%;background:#256ef4;} #lwDogamPop .bn-ct{margin-top:9px;background:#fafcff;border:1px solid #d8e4f9;border-radius:8px; padding:8px 10px;font-size:12px;color:#1e2124;line-height:1.5;} #lwDogamPop .bn-ct b{font-weight:800;} #lwDogamPop .bn-fl{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 2px;} #lwDogamPop .bn-fl span{background:#eef4ff;border:1px solid #d8e4f9;border-radius:99px; font-size:12px;font-weight:400;color:#0b50d0;padding:4px 10px 4px 5px; display:inline-flex;align-items:center;gap:5px;} #lwDogamPop .bn-fl b{background:#256ef4;color:#fff;width:16px;height:16px;border-radius:50%; font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} #lwDogamPop .bn-qr{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;} #lwDogamPop .bn-qr a{display:flex;align-items:center;gap:9px;text-decoration:none; background:#ffffff;border:1px solid #bacbde;border-radius:8px;padding:7px 12px 7px 7px;} #lwDogamPop .bn-qr svg{width:56px;height:56px;display:block;border-radius:4px;flex-shrink:0;} #lwDogamPop .bn-qr .qt{display:block;font-size:12px;font-weight:600;color:#0b50d0;line-height:1.45;} #lwDogamPop .bn-qr .qu{display:block;font-size:9.9px;color:var(--ink3);word-break:break-all;margin-top:3px;line-height:1.4;} #lwDogamPop .bn-note{font-size:13px;color:#464c53;line-height:1.5;padding:2px 2px 6px;} #lwDogamPop @media (max-width:400px){.bn-r{flex-direction:column;gap:1px;} #lwDogamPop .bn-r .k{flex:none;}} #lwDogamPop .brandB{background:var(--gl);border:1px solid var(--gbd);border-radius:13px;padding:14px 16px;margin-top:12px;} #lwDogamPop .brandB .q{font-size:11.2px;font-weight:800;color:var(--gd);} #lwDogamPop .brandB .eq{font-size:17.3px;font-weight:900;margin-top:5px;} #lwDogamPop .brandB .tx{font-size:13.1px;line-height:1.85;margin-top:10px;padding-top:10px;border-top:1px dashed var(--gbd);color:var(--ink2);} #lwDogamPop .brandB .tx b{color:var(--gd);} /* 도감 미제공(brandB) 유래 카드 — 데이터 지역 #e-ety .brand 디자인과 동일하게 */ #lwDogamPop .brandB { background: url("../images/dogam/dogam_brand_bg.png") right top/cover no-repeat; border: none; border-radius: 8px; padding: 20px; } #lwDogamPop .brandB .q { color: #0b50d0; font-size: 15px; font-weight: 700; margin-bottom: 10px; } #lwDogamPop .brandB .eq { font-size: 22px; font-weight: 900; color: #111; text-align: center; margin: 8px 0 4px; font-family: 'GmarketSansBold', var(--f); } #lwDogamPop .brandB .tx { font-size: 15px; line-height: 1.5; color: #40484f; border-top: none; padding-top: 0; margin-top: 12px; } #lwDogamPop .brandB .tx b { color: #111; } #lwDogamPop .chip{display:inline-block;background:#f2f6f8;color:var(--ink3);font-size:10.1px;font-weight:700; padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;} #lwDogamPop .ftn{font-size:10.4px;color:var(--ink3);margin-top:9px;line-height:1.7;} #lwDogamPop .flow{display:flex;align-items:stretch;gap:6px;margin-bottom:12px;} #lwDogamPop .fstep{flex:1;background:var(--gl);border:1px solid var(--gbd);border-radius:11px;padding:11px 6px;text-align:center;} #lwDogamPop .fstep .n{font-size:10.1px;font-weight:800;color:var(--gd);} #lwDogamPop .fstep .t{font-size:12.5px;font-weight:800;margin-top:3px;line-height:1.35;} #lwDogamPop .fstep .d{font-size:9.9px;color:var(--ink2);margin-top:3px;} #lwDogamPop .farr{align-self:center;color:var(--ink3);font-weight:900;} #lwDogamPop .steps{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:2px;} #lwDogamPop .steps summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 14px; font-size:13.1px;font-weight:800;cursor:pointer;color:var(--gd);background:var(--gl);} #lwDogamPop .steps summary::-webkit-details-marker{display:none;} #lwDogamPop .steps summary .ch{margin-left:auto;color:var(--gd);transition:transform .2s;} #lwDogamPop .steps[open] summary .ch{transform:rotate(180deg);} #lwDogamPop .step{display:flex;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.7;} #lwDogamPop .step .no{background:var(--g);color:#fff;font-weight:800;font-size:10.1px;border-radius:99px;height:19px;min-width:19px; display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;} #lwDogamPop .step b{display:block;color:var(--ink);} #lwDogamPop .step span{color:var(--ink2);} #lwDogamPop .svcCard{border:1.5px solid var(--gbd);background:#fbfffc;border-radius:13px;padding:13px 15px;margin-bottom:9px;} #lwDogamPop .svcCard .t{font-size:13.1px;font-weight:800;} #lwDogamPop .svcCard .d{font-size:12.3px;color:var(--ink2);line-height:1.8;margin-top:5px;} #lwDogamPop .svcCard .d b{color:var(--ink);} #lwDogamPop .svcCard ul{margin:7px 0 0 2px;list-style:none;} #lwDogamPop .svcCard li{font-size:11.7px;color:var(--gd);font-weight:700;line-height:1.75;} @media(max-width:480px){ #lwDogamPop .pop{width:100%;max-height:88vh;} } /* ══ 라이트 테마 마감 + 구 DB판 패턴 정합 (스크립트가 마지막에 덧붙임 — 같은 셀렉터는 이 블록이 이긴다) ══ */ /* 조각 구조를 표준 카드에 맞춤 — 컨테이너가 카드, .pop 은 투명한 속(이중 카드 방지) */ #lwDogamPop .screen { display: none; align-items: stretch; gap: 0; } #lwDogamPop .screen.on { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #lwDogamPop .pop { width: 100%; max-width: none; max-height: none; min-height: 0; flex: 1 1 auto; background: transparent; box-shadow: none; border-radius: 0; } /* 페이지 근거 칩(.pg) 표시 — 출처 복구 (사용자 요청 2026-08-26) */ /* 원문 링크가 a 태그로 바뀐 지역(21곳) — 연결됨을 색으로 표시 */ #lwDogamPop a.dlB { color: var(--gd); } /* 원문 미확보 지자체 — 회색 준비중 표기 (클릭 대상 아님) */ #lwDogamPop .dlB.dis { color: #b0b8bf; text-decoration: none; cursor: default; } #lwDogamPop .ct .btn.dis { background: #eef0f2; color: #9aa4ad; cursor: default; } /* 헤더 — lw_infopop_cat 패턴 (라벨 15px 600 #1e2124) */ #lwDogamPop .hd .svc { font-size: 15px; font-weight: 600; color: #1e2124; } #lwDogamPop .hd .x { color: #93a2ab; } #lwDogamPop .hd .badge.lw_dg_ico { background: none !important; border-radius: 0; } #lwDogamPop .hd .badge.lw_dg_ico img { width: 26px !important; height: 26px !important; max-width: none; flex: 0 0 auto; display: block; } /* max-width:none — BasicSet img{max-width:100%} 가 flex 안에서 8px 로 눌러버림(실측) */ /* 제목/부제 — lw_twb_tit(19px 600 #1e2124) / lw_twb_sub(15px #6d7882) */ #lwDogamPop .hd .tt { font-size: 19px; font-weight: 600; color: #1e2124; } #lwDogamPop .hd .st { font-size: 15px; color: #6d7882; } /* 방언·권역 배지 — 연그린 칩 */ #lwDogamPop .zbadge { background: var(--gl); border: 1px solid var(--gbd); color: var(--gd); } /* 탭(#lwDogamPop .tabs/.tab) 스타일은 먹는샘물 탭과 통합되어 lifeWater.css 로 이관됨 (`.lw_dwq_tab, #lwDogamPop .tab` 그룹 규칙). 값 변경은 lifeWater.css 한 곳에서. */ /* 섹션 제목 — lw_twb_h(17px 600) */ #lwDogamPop h3, #lwDogamPop .bn-hd { font-size: 17px; font-weight: 600; color: #1e2124; } /* 접이 블록/Q&A — lw_twb_acc 톤(테두리 #cdd1d5 · 본문 #f7f8fa) */ #lwDogamPop .zone { border-color: #cdd1d5; } #lwDogamPop .zone-hd { background: #fff; color: #1e2124; } #lwDogamPop .zone-bd { background: #f7f8fa; } /* ══ 전국 도감 — 디자이너 목업 2026-08-25 : 진파랑 패널 + 실제 시도 지도 ══ */ #lwDogamPop .mapbox { background: #cbe7ff; border: none; border-radius: 8px; position: relative; overflow: hidden; } #lwDogamPop #kmap { display: block; margin-top: 4px; transform: translateY(20px) scale(1.222); transform-origin: center center; } /* 지도 이미지 확대(핀 포함, 1.3×0.94=1.222) + 20px 아래로 (툴팁 가림 방지) */ #lwDogamPop #kmap .sd { fill: #ffffff; stroke: #cbe7ff; stroke-width: .9; stroke-linejoin: round; } #lwDogamPop .map-say { display: none; } /* 핀 클릭 = 바로 이동이라 안내문 불필요 (목업에도 없음) */ /* 지도 핀 hover 고정형 툴팁 — 지도 박스 좌·상단 12px, 160×60px */ #lwDogamPop .mapbox .maptip { position: absolute; left: 12px; top: 12px; width: 160px; height: 60px; box-sizing: border-box; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px; border-radius: 10px; background: #ffe14d; pointer-events: none; text-align: center; opacity: 1; transition: opacity 1s ease; } /* 사라질 때 1s 페이드아웃 (표출은 JS 에서 transition:none 으로 즉시) */ #lwDogamPop .mapbox .maptip .mt-rg { font-size: 13px; font-weight: 400; color: #1e2124; line-height: 1.5; } #lwDogamPop .mapbox .maptip .mt-nm { font-family: 'GmarketSansBold', var(--f); font-weight: 600; font-size: 17px; color: #1e2124; line-height: 1.5; } /* 지도 안 권역 필터 — 흰 알약 바 (전국=파랑 알약, 권역=색 도트+이름) */ #lwDogamPop .mapbox #map-chips { background: rgba(255,255,255,.95); border-radius: 99px; padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; gap: 4px; flex-wrap: nowrap; margin: 0; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; } /* transform 준 #kmap 위로 올려 클릭 가능하게 (칩 탭 복구) */ #lwDogamPop .mapbox #map-chips .fc { background: none; border: none; padding: 4px 6px; font-size: 12.5px; font-weight: 600; color: #1e2124; display: inline-flex; align-items: center; gap: 2px; } #lwDogamPop .mapbox #map-chips .fc.on { background: #256ef4; color: #fff; border-radius: 99px; padding: 4px 14px; text-decoration: none; } /* 모바일 — 권역 칩을 해상도에 따라 PC 비율 그대로 비례 축소(clamp: 좌우 인셋·버튼 여백·폰트·도트). ≤768 에서 팝업이 화면폭에 가까우므로 vw 기준으로 스케일, 상한은 PC 값. */ @media (max-width: 768px) { #lwDogamPop .mapbox #map-chips { left: clamp(5px, 1.6vw, 10px); right: clamp(5px, 1.6vw, 10px); padding: 6px clamp(3px, 1.4vw, 8px); gap: clamp(1px, 0.4vw, 3px); } #lwDogamPop .mapbox #map-chips .fc { padding: 4px clamp(2px, 1vw, 6px); font-size: clamp(9.5px, 3vw, 12.5px); gap: clamp(1px, 0.4vw, 2px); } #lwDogamPop .mapbox #map-chips .fc.on { padding: 4px clamp(6px, 3vw, 14px); } #lwDogamPop .mapbox #map-chips .chip-dot { width: clamp(6px, 2vw, 8px); height: clamp(6px, 2vw, 8px); margin-right: clamp(2px, 0.8vw, 4px); } } /* 「전국 수돗물 이름 32곳」 + 지도/목록 스위치 바 */ #lwDogamPop .zv-bar { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; } #lwDogamPop .zv-cnt { font-size: 16px; font-weight: 700; color: #1e2124; } #lwDogamPop .zv-sw { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; background: #2F6BFF; color: #fff; font-family: var(--f); font-size: 13px; font-weight: 700; height: 30px; padding: 0 5px 0 15px; border-radius: 99px; transition: background .22s ease; } #lwDogamPop .zv-sw .knob { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; } #lwDogamPop .zv-sw.on .knob { order: 1; } /* 지도로 보기 = knob 뒤(오른쪽) */ #lwDogamPop .zv-sw:not(.on) { background: #ecf2fe; color: #256ef4; padding: 0 15px 0 5px; } /* 끔 = 목록 보기: knob 앞(왼쪽), padding 좌우 반전 */ #lwDogamPop .zv-sw:not(.on) .knob { background: #256ef4; } /* 목록 보기: knob 파랑 */ /* 목록 카드쪽 필터 칩(zv-chips)은 기존 라이트 스타일 유지 */ #lwDogamPop .fc { background: #fff; border-color: #cdd1d5; color: #1e2124; font-weight: 400; font-size: 13px; } #lwDogamPop .fc.on { background: #256ef4; border-color: #256ef4; color: #fff; } #lwDogamPop .pininfo { background: #f7f8fa; border-color: #cdd1d5; } #lwDogamPop .zback2 { color: var(--gd); } #lwDogamPop .mapB .ar { color: var(--gd); } /* ══ 진입 화면(Ⓐ) 개편 — 디자이너 시안 2026-08-25 : 파랑 톤 + 컴팩트 버튼 2개 ══ */ #lwDogamPop #en .zbadge, #lwDogamPop #en .prov { display: none; } /* 시안에서 제외된 요소 */ #lwDogamPop .hd { position: relative; } #lwDogamPop .lw_dg_dltop { position: absolute; right: 18px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #2F6BFF; text-decoration: none; } #lwDogamPop .lw_dg_dltop img { width: 13px; height: 15px; position: relative; top: -1px; } /* 아이콘 1px ↑ = 텍스트가 아이콘보다 1px 아래로 보이도록 정렬 */ #lwDogamPop .lw_dg_dltop:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } #lwDogamPop #en .covB { border-radius: 8px; border: 0; box-shadow: none; background: #fff; } #lwDogamPop #en .covB::after { content: ""; position: absolute; inset: 0; border: 1px solid #cdd1d5; border-radius: 8px; pointer-events: none; z-index: 2; } /* 테두리를 이미지 위에 오버레이로 그림 → 이미지 영역까지 테두리 보이고 서브픽셀 들뜸도 없음 */ /* 「표지 전체 보기 ▼」 — 이미지 위 그라디언트 오버레이가 아니라 카드 하단의 일반 행 (시안 0825) */ #lwDogamPop .covB .more2 { position: static; background: none; padding: 10px 0 12px; font-size: 13px; color: #0b50d0; font-weight: 400; } /* 유래 카드 — 제공 배경(물방울) + 파랑 포인트, 글자 크기·배치는 시안 0825 스크린샷 기준 */ #lwDogamPop #e-ety .brand { background: url("../images/dogam/dogam_brand_bg.png") right top/cover no-repeat; border: none; border-radius: 8px; padding: 20px; } #lwDogamPop #e-ety .bq { color: #0b50d0; font-size: 15px; font-weight: 700; margin-bottom: 10px; } #lwDogamPop #e-ety .brand .eq { font-size: 22px !important; font-weight: 900; color: #111; text-align: center; margin: 8px 0 4px; } #lwDogamPop #e-ety .brand .tx { font-size: 15px; line-height: 1.5; color: #40484f; border-top: none !important; padding-top: 0 !important; margin-top: 12px !important; } #lwDogamPop #e-ety .brand .tx b { color: #111; } /* 제목/부제/다운로드 — 시안 0825 크기·색 */ #lwDogamPop #en .tt { font-size: 20px; } #lwDogamPop .lw_dg_dltop { color: #6d7882; } /* 진입 화면 무스크롤 — 표지 이미지가 남는 높이에 맞춰 줄어들어 유래 카드·하단 버튼까지 한 화면에 담긴다. [표지 전체 보기]로 펼치면 이미지가 원본 높이로 커져 그때만 스크롤이 생긴다(자연 폴백) */ #lwDogamPop #en .bd { display: flex; flex-direction: column; } #lwDogamPop #en .covB { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 150px; } #lwDogamPop #en .covB img { flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; } #lwDogamPop #en .covB .more2 { flex: 0 0 auto; position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0 6px; background: linear-gradient(to top, #ffffff 42%, rgba(255,255,255,0)); } /* 하단 흰색 → 상단 투명: 위쪽엔 표지 이미지가 비침 */ #lwDogamPop #en .covB.open .more2 { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0 6px; background: linear-gradient(to top, #ffffff 42%, rgba(255,255,255,0)); } /* 펼침(표지 접기 버튼)도 동일 그라디언트 오버레이 */ #lwDogamPop #en .covB.open { flex: 0 0 auto; } /* 펼침 = 원본 크기 (축소 해제) */ #lwDogamPop #en #e-ety, #lwDogamPop #en .btnrow2, #lwDogamPop #en .zback2 { flex: 0 0 auto; } /* 하단 버튼 2개 가로 배치 — [자세히보기](파랑 필) · [전국 수돗물 도감](흰+파랑 테두리) */ #lwDogamPop .btnrow2 { display: flex; gap: 10px; margin-top: 14px; } #lwDogamPop .btnrow2 .goB, #lwDogamPop .btnrow2 .mapB { flex: 1; margin-top: 0; padding: 10px 4px; border-radius: 26px; font-size: 15px; font-weight: 400; font-family: var(--f); display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } #lwDogamPop .btnrow2 .goB { background: #2F6BFF; color: #fff; border: none; box-shadow: none; } #lwDogamPop .btnrow2 .goB:hover { background: #2563EB; } #lwDogamPop .btnrow2 .mapB { background: #fff; color: #0b50d0; border: 1px solid #256ef4; } #lwDogamPop .btnrow2 .mapB .mapB-hl { font-weight: 600; } /* '전국'만 굵게 */ #lwDogamPop .btnrow2 .ar2 { display: inline-block; width: 7px; height: 11px; font-size: 0; vertical-align: middle; margin-left: 4px; /* gap 4px + 4px = 텍스트↔화살표 8px (텍스트끼리는 4px 유지) */ background-color: currentColor; /* 먹는샘물 자세히보기와 동일한 화살표 SVG를 mask로 사용, 색은 currentColor로 각 버튼에 맞춤 */ -webkit-mask: url(/com/web/lifeWater/images/lw_more_arrow.svg) no-repeat center / contain; mask: url(/com/web/lifeWater/images/lw_more_arrow.svg) no-repeat center / contain; } #lwDogamPop .btnrow2 .goB .ar2 { color: #fff; } /* 자세히보기 = 흰색 화살표 */ #lwDogamPop .btnrow2 .mapB .ar2 { color: #0b50d0; } /* 전국 수돗물 도감 = 파란색 화살표 */ /* 모바일 바텀시트 — 상단 핸들 바 스와이프가 조각 헤더(.hd)에서 시작돼도 잡히게 (lw_infopop_cat 과 동일 처리) */ @media (max-width: 768px) { #lwDogamPop .hd { touch-action: none; margin-top: -12px; padding-top: 12px; } } /* ============================================================ * inline-style cleanup 2026-08-26 (moved from inline style="" in dogam/*.html) * ============================================================ */ #lwDogamPop .svc { cursor: pointer; } #lwDogamPop #en .bd { padding-top: 2px; } #lwDogamPop .mr { margin-top: 12px; } #lwDogamPop .ct.dl .l { color: #1e2124; } #lwDogamPop .brand .eq .sep { color: #93a2ab; } /* Gmarket Sans Bold (무료 배포, 자체 호스팅) — 브랜드 유래 제목(.eq)에 적용 */ @font-face { font-family: 'GmarketSansBold'; src: url('../fonts/GmarketSansBold.woff2') format('woff2'), url('../fonts/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } #lwDogamPop #e-ety .brand .eq { font-family: 'GmarketSansBold', var(--f); } /* header title: water-name part only */ #lwDogamPop .tt .tt-nm { color: #0b50d0; } /* ===== 기본현황 첫 섹션 '~는 어디에서 오나요' 섹션형 카드 (검토샘플 v3 이식) ===== */ #lwDogamPop .sec{position:relative;border-radius:8px;padding:24px;overflow:hidden; background:#e5eeff;--hlc:#bfd6ff; /* 카드 배경 / --hlc=강조 형광펜색 */ box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.75);} #lwDogamPop .sec .glow{position:absolute;top:-16px;right:-14px;width:210px;height:190px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.65),transparent 68%);} #lwDogamPop .sec .obj{position:absolute;top:33px;right:8px;width:120px;height:auto;filter:drop-shadow(0 4px 7px rgba(25,75,95,.16));} #lwDogamPop .sec .wv{display:none;} /* 하단 물결 SVG 제거 */ #lwDogamPop .sec .hd2{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;} #lwDogamPop .sec .pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:#1e2124; background:rgba(255,255,255,.95);border-radius:99px;padding:5px 12px;} #lwDogamPop .sec .pill svg{width:14px;height:auto;} /* 라벨 앞 물방울 아이콘 크기 (inline width=9 덮음) */ #lwDogamPop .sec .pill svg path:first-child{fill:#256ef4;} /* 물방울 아이콘 색 */ #lwDogamPop .sec .pgtag{display:inline-block;background:#f2f6f8;color:var(--ink3)!important;font-size:9.9px;font-weight:700; padding:2px 8px;border-radius:99px;vertical-align:middle;white-space:nowrap;} /* Q&A '보고서 p.NN'(.pg)과 동일 */ #lwDogamPop .sec .hl{position:relative;z-index:2;margin-top:15px;font-size:19px;font-weight:400;line-height:1.5; letter-spacing:-.012em;max-width:268px;word-break:keep-all;color:#1e2124;} #lwDogamPop .sec .hl .hl-nm{display:block;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em;} #lwDogamPop .sec .hl mark{background-color:transparent;color:inherit;padding:0 3px;margin:0 -1px;border-radius:5px;} #lwDogamPop .sec .bd{position:relative;z-index:2;margin-top:11px;font-size:14px;line-height:1.5;word-break:keep-all; max-width:384px;flex:none;overflow:visible;padding:0;color:#464c53;} #lwDogamPop .sec .hl, #lwDogamPop .sec .bd{padding-left:8px;} /* 헤드라인·본문 왼쪽 여백 */ #lwDogamPop .sec .lb3{display:none;} /* '취수원 · 취수장 N곳' 라벨 숨김 */ #lwDogamPop .sec .lb3::after{content:'';flex:0 0 46px;height:1px;background:currentColor;opacity:.35;} #lwDogamPop .sec .chips{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding-left:4px;} #lwDogamPop .sec .chips span{display:inline-flex;align-items:center;font-size:12px;font-weight:400;color:#052b57; border-radius:99px;padding:2px 10px;background-color:#cfe0ff;} #lwDogamPop .sec .rp1,#lwDogamPop .sec .rp2,#lwDogamPop .sec .rp3,#lwDogamPop .sec .sp,#lwDogamPop .sec .bub{transform-box:fill-box;transform-origin:center;} #lwDogamPop .sec .rp1,#lwDogamPop .sec .rp2,#lwDogamPop .sec .rp3{opacity:0;} @media (prefers-reduced-motion: no-preference){ #lwDogamPop .sec .obj{animation:floaty 2.6s ease-in-out infinite alternate;} #lwDogamPop .sec .rp1{animation:rip 2.9s ease-out infinite;} #lwDogamPop .sec .rp2{animation:rip 2.9s ease-out .95s infinite;} #lwDogamPop .sec .rp3{animation:rip 2.9s ease-out 1.9s infinite;} #lwDogamPop .sec .sp1{animation:tw 2.2s ease-in-out infinite;} #lwDogamPop .sec .sp2{animation:tw 2.2s ease-in-out .7s infinite;} #lwDogamPop .sec .sp3{animation:tw 2.2s ease-in-out 1.4s infinite;} #lwDogamPop .sec .bub1{animation:bfl 3.6s ease-in-out infinite alternate;} #lwDogamPop .sec .bub2{animation:bfl 4.4s ease-in-out .6s infinite alternate;} #lwDogamPop .sec .bub3{animation:bfl 4s ease-in-out 1.2s infinite alternate;} } @keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-9px)}} @keyframes wd{to{transform:translateX(-220px)}} @keyframes shm{0%,100%{opacity:.45}50%{opacity:1}} @keyframes rflb{from{opacity:.32}to{opacity:.62}} @keyframes rip{0%{transform:scale(.5);opacity:.95}70%{opacity:.3}100%{transform:scale(1.3);opacity:0}} @keyframes tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}} @keyframes bfl{0%{transform:translateY(0);opacity:.75}100%{transform:translateY(-8px);opacity:1}}