:root{--green:#173e35;--ink:#203c32;--cream:#f7f4ec;--gold:#bc9761;--pale:#e9ede5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans','Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.85}a{color:inherit;text-decoration:none}button{font:inherit}header{position:sticky;top:0;z-index:20;background:rgba(247,244,236,.96);border-bottom:1px solid #e0dfd4;backdrop-filter:blur(14px)}.nav{max-width:1160px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:17px 22px;gap:18px}.logo{font-family:'Noto Serif KR',serif;font-size:24px;font-weight:700;letter-spacing:-1px}.navlinks{display:flex;gap:24px;align-items:center;font-size:13px;font-weight:600}.navlinks a:hover{color:#9a713c}.navlinks .call{background:var(--green);color:white;padding:9px 16px;border-radius:4px}.wrap{max-width:1160px;margin:auto;padding:0 22px}.hero{min-height:610px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:38px;padding-top:65px;padding-bottom:65px}.kicker{letter-spacing:.22em;font-size:12px;color:#a7834f;font-weight:700}.hero h1,.section h2{font-family:'Noto Serif KR',serif;letter-spacing:-.055em;line-height:1.55;font-weight:600;word-break:keep-all}.hero h1{font-size:clamp(29px,3.7vw,48px);margin:24px 0}.hero p{font-size:16px;max-width:520px;word-break:keep-all}.btn{display:inline-block;background:var(--green);color:white;padding:13px 24px;margin-top:18px;border-radius:3px;font-size:14px}.art{height:460px;border-radius:240px 240px 12px 12px;background:radial-gradient(ellipse at 50% 80%,#e3caa0 0%,transparent 55%),linear-gradient(160deg,#b6c9b3,#e8dfc8 58%,#d6b69d);position:relative;overflow:hidden;box-shadow:15px 20px 0 #e9e7d9}.art:before{content:'';position:absolute;left:12%;right:12%;top:12%;bottom:12%;border:1px solid #ffffff80;border-radius:200px 200px 10px 10px}.flower{position:absolute;width:210px;left:22%;top:17%;filter:drop-shadow(2px 8px 4px #314b3b44)}.flower svg{width:100%;height:auto}.art .caption{position:absolute;bottom:28px;right:25px;color:#45664f;font-family:serif;font-style:italic;letter-spacing:.15em;font-size:13px}.section{padding:90px 0}.section h2{font-size:clamp(27px,3vw,39px);margin:12px 0 26px}.section p{word-break:keep-all}.light{background:#e9ede5}.dark{background:var(--green);color:#f9f4e7}.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold);font-weight:700}.center{text-align:center}.lead{font-size:18px;max-width:780px;margin:0 auto}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}.card{background:#fffdf7;padding:34px 27px;border:1px solid #e5e1d5;border-radius:7px;min-height:230px}.card .num{font-family:serif;color:#c0a16f;font-size:28px}.card h3{font-family:'Noto Serif KR',serif;font-size:20px;margin:12px 0}.card p{font-size:14px;color:#52665d}.dark .card{background:#245246;color:#fff;border-color:#3a665a}.dark .card p{color:#e2e9e2}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.frame{background:linear-gradient(135deg,#d6d8bd,#d9c4a2);padding:38px;min-height:330px;border:12px solid #c3ad83;outline:1px solid #8b7654;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Noto Serif KR',serif;font-size:27px;line-height:1.8;color:#365044}.frame small{font-family:'DM Sans',sans-serif;letter-spacing:.22em;font-size:12px;color:#8a7557}.pill{display:inline-block;border:1px solid #c9c4ad;padding:6px 12px;font-size:12px;margin:6px 5px 0 0}.post-card{display:block;transition:transform .2s}.post-card:hover{transform:translateY(-4px)}.post-card .date{font-size:12px;color:#998366}.post-card h3{line-height:1.55}.footer{background:#122e27;color:#e3e8df;padding:55px 0;font-size:14px}.footer .footgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer h3{font-family:'Noto Serif KR',serif;font-size:23px}.muted{opacity:.75}.bloglinks a{display:inline-block;border-bottom:1px solid #9eae9c;margin-right:15px}.adminlink{font-size:12px;opacity:.65}.notice{font-size:12px;color:#627367}.article{max-width:790px;margin:0 auto;padding:85px 22px 110px}.article h1{font-family:'Noto Serif KR',serif;font-size:36px;line-height:1.5}.article .body{white-space:pre-line;font-size:17px;line-height:2.1}.back{color:#6a765c;font-size:14px}@media(max-width:800px){.nav{flex-wrap:wrap}.navlinks{gap:12px;flex-wrap:wrap;font-size:12px}.hero,.split{grid-template-columns:1fr}.hero{padding-top:45px}.art{height:340px;max-width:460px;width:100%;margin:auto}.grid{grid-template-columns:1fr}.section{padding:60px 0}.hero h1{font-size:32px}}

/* Compact mobile navigation: keep every link reachable without a tall two-row menu. */
@media(max-width:600px){.nav{display:block;padding:12px 16px 8px}.logo{display:block;font-size:22px;margin-bottom:8px}.navlinks{display:flex;flex-wrap:nowrap;gap:17px;width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;font-size:13px;padding:0 0 7px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.navlinks a{flex:0 0 auto}.navlinks .call{padding:6px 11px}.hero{min-height:0;padding-top:30px;padding-bottom:42px;gap:28px}.hero h1{font-size:clamp(27px,7.3vw,34px);line-height:1.48;margin:16px 0}.hero p{font-size:15px;line-height:1.85}.kicker{font-size:10px;letter-spacing:.12em}.btn{padding:11px 19px;margin-top:12px}.art{height:280px;max-width:340px}.flower{width:160px}.section{padding:48px 0}.article{padding:45px 18px 75px}.article h1{font-size:clamp(26px,7vw,34px)}.wrap{padding-left:18px;padding-right:18px}}

/* Visible mobile shortcuts and a clean swipeable navigation rail. */
.mobile-quick{display:none}
@media(max-width:600px){.nav{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}.nav .logo{margin:0}.mobile-quick{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.mobile-quick a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:5px 9px;border:1px solid #cdd5c9;border-radius:6px;white-space:nowrap}.mobile-quick .mobile-call{background:var(--green);color:#fff;border-color:var(--green)}.navlinks{grid-column:1/-1;margin-top:8px;scrollbar-width:none}.navlinks::-webkit-scrollbar{display:none}.navlinks a[href='/search.html'],.navlinks a.call{display:none}}

/* Health articles: override older inline page styles on narrow screens. */
@media(max-width:600px){body .article{padding:30px 20px 65px!important}body .article h1{font-size:clamp(27px,7vw,32px)!important;line-height:1.45!important;margin:17px 0 20px!important;word-break:keep-all}body .article h2{font-size:21px!important;line-height:1.5!important;margin-top:32px!important;margin-bottom:12px!important;word-break:keep-all}body .article p{font-size:16px!important;line-height:1.85!important;overflow-wrap:break-word}body .article .crumb{font-size:13px!important}body .article .note{padding:17px!important;margin-top:28px!important}body .article .bottom{margin-top:30px!important}body .article ul{padding-left:22px}body .article li{margin:8px 0}}

/* Prominent implant care card and readable expanded treatment menu. */
#care .grid>.card:first-child{box-shadow:0 12px 30px rgba(23,62,53,.09);border-radius:14px}
#care .grid>.card:first-child h3{color:#173e35}
#care .grid>.card:first-child a{display:inline-block;padding:10px 15px;background:#173e35;color:#fff;border-radius:7px;text-decoration:none}
@media(max-width:600px){#care .grid>.card:first-child{padding:24px 20px}#care .grid>.card:first-child h3{font-size:28px!important}}

/* Journal cards and featured images: responsive, consistent presentation. */
#post-list .post-card{min-width:0;overflow:hidden}
#post-list .post-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:14px}
#post-list .post-card h3,#post-list .post-card p{overflow-wrap:anywhere;word-break:keep-all}
.article>img{display:block;max-width:100%;height:auto;border-radius:14px;margin:0 auto 28px}
.article .body{overflow-wrap:anywhere;word-break:keep-all}
@media(max-width:600px){#post-list .post-card img{aspect-ratio:16/10;height:auto}#post-list .post-card h3{font-size:21px;line-height:1.5}.article>img{width:100%;margin-bottom:24px}.article .body{font-size:16px;line-height:1.9}}


/* Keep clinical illustrations, tables and long links inside narrow phone screens. */
.article img,.article svg,.article video,.article iframe{max-width:100%;height:auto}
.article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse}
.article pre,.article code{max-width:100%;overflow-wrap:anywhere}
.article a{overflow-wrap:anywhere}
@media(max-width:600px){
 .article{min-width:0}
 .article blockquote{margin-left:0;margin-right:0;padding:14px 16px}
 .article table{font-size:14px}
 .article th,.article td{padding:9px 10px}
}

/* Visiting-hours panel with clear alternating-week guidance. */
.hours-box{margin:20px 0;padding:20px 22px;border:1px solid #d6e1d6;border-radius:12px;background:#f4f8f2}
.hours-box h3{margin:0 0 10px;font-size:20px;color:#173e35}
.hours-box p{margin:8px 0;line-height:1.95}
.hours-box .notice{font-size:13px;line-height:1.7}
@media(max-width:600px){.hours-box{padding:17px 16px}.hours-box p{font-size:14px;line-height:1.9}}

/* Direct access to phone and clinic hours from the homepage introduction. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.hero-actions .btn{margin-top:0;text-align:center}
.hero-actions .hero-call{background:#173e35;color:#fff}
.hero-actions .hero-hours{background:transparent;border:1px solid #8fa897;color:#173e35}
@media(max-width:600px){.hero-actions{gap:8px}.hero-actions .btn{font-size:13px;padding:11px 13px}.hero-actions .hero-hours{flex-basis:100%}}

/* Focused-care shortcut: visually distinct from phone and directions. */
.hero-actions .hero-focus{background:#eef5ee;border:1px solid #a4bba9;color:#173e35}
#focus-care{scroll-margin-top:24px}
#focus-care .card a{display:inline-block;font-weight:700;line-height:1.6}
@media(max-width:600px){.hero-actions .hero-focus{flex-basis:100%}}

/* Patient symptom links: legible, tappable care pathways. */
#symptoms{scroll-margin-top:24px}
#symptoms .symptom-grid .card{min-width:0}
#symptoms .symptom-grid h3{word-break:keep-all;line-height:1.45}
#symptoms .symptom-grid a{display:inline-block;margin-top:10px;font-weight:700;color:#173e35;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:600px){#symptoms .symptom-grid .card{padding:21px 19px}#symptoms .symptom-grid a{padding:8px 0}}

/* Accessible native-details FAQ, including keyboard focus indication. */
#faq{scroll-margin-top:24px}
.faq-list{display:grid;gap:11px;margin:24px 0}
.faq-list details{border:1px solid #d6e1d6;border-radius:12px;background:#fff;overflow:hidden}
.faq-list summary{cursor:pointer;font-weight:700;padding:17px 20px;line-height:1.6;color:#173e35}
.faq-list summary:focus-visible{outline:3px solid #507a60;outline-offset:-3px}
.faq-list details[open] summary{border-bottom:1px solid #e0e9df}
.faq-list details p{padding:0 20px 18px;margin:15px 0 0;line-height:1.8}
.faq-list details a{font-weight:700;overflow-wrap:anywhere}
@media(max-width:600px){.faq-list summary{padding:15px 16px}.faq-list details p{padding:0 16px 16px}}

/* Keep the expanded desktop menu usable at intermediate widths. */
@media(min-width:801px){.navlinks{gap:clamp(7px,1.1vw,17px);flex-wrap:wrap;justify-content:flex-end}.navlinks a{white-space:nowrap}.nav{gap:12px}.logo{flex-shrink:0}}
@media(max-width:600px){.mobile-quick{gap:4px}.mobile-quick a{padding:5px 7px;font-size:11px}.logo{font-size:20px}}
#location,#faq{scroll-margin-top:90px}

/* Readable health articles and next-step links on small screens. */
.article{overflow-wrap:anywhere}
.article p,.article li{word-break:keep-all}
.article h1,.article h2,.article h3{word-break:keep-all;overflow-wrap:anywhere}
.article .note{max-width:100%}
.article .note ul{padding-left:1.35em;margin:12px 0 0}
.article .note li{margin:8px 0;line-height:1.75}
.article .note a,.article .bottom a{display:inline-block;line-height:1.7;text-underline-offset:3px}
.article a:focus-visible{outline:3px solid #507a60;outline-offset:3px;border-radius:3px}
.article img{max-width:100%;height:auto}
@media(max-width:600px){.article{padding:36px 18px 65px}.article h1{font-size:clamp(27px,7.2vw,34px);line-height:1.45}.article h2{font-size:clamp(21px,5.5vw,25px);line-height:1.5;margin-top:32px}.article p{font-size:16px;line-height:1.85}.article .note{padding:18px}.article .note a,.article .bottom a{padding:5px 0}}

/* Mobile care-page links, text and diagrams: shared rules for pages using site.css. */
.care-extra{overflow-wrap:anywhere}
.care-extra h2,.care-extra p,.care-extra li{word-break:keep-all}
.care-extra a:focus-visible,.gum-section a:focus-visible{outline:3px solid #507a60;outline-offset:3px}
.care-extra .care-tile{min-width:0}
@media(max-width:600px){.care-extra .care-diagram{padding:18px 12px;gap:9px}.care-extra .care-diagram .phase{min-width:min(100%,230px);max-width:none;flex-basis:100%;padding:14px}.care-extra .care-diagram .arrow{transform:rotate(90deg);line-height:1}.care-extra .care-grid{gap:12px}.care-extra .care-tile{padding:19px}.gum-section .gum-box{padding:20px}}

/* Keep symptom discovery obvious and easy to tap on small screens. */
.hero-actions .hero-symptoms{background:#e8f3ed;border:2px solid #507a60;color:#173e35;font-weight:800}
.hero-actions .hero-symptoms:focus-visible{outline:3px solid #173e35;outline-offset:3px}
@media(max-width:600px){.hero-actions .hero-symptoms{flex-basis:100%;padding:14px 16px;font-size:15px}.hero-actions .hero-focus{order:1}.hero-actions .hero-symptoms{order:0}}

/* Distinguish health reading from the next clinical step in symptom cards. */
#symptoms .symptom-grid .card>a{max-width:100%;text-underline-offset:3px}
#symptoms .symptom-grid .card>a[href^="/gum-treatment.html"],#symptoms .symptom-grid .card>a[href^="/retreatment.html"],#symptoms .symptom-grid .card>a[href^="/cervical-abrasion.html"],#symptoms .symptom-grid .card>a[href^="/insured-care.html"]{border:1px solid #b9d0be;border-radius:8px;background:#eef5ee;padding:10px 12px;text-decoration:none}
#symptoms .symptom-grid .card>a[href^="/gum-treatment.html"]:hover,#symptoms .symptom-grid .card>a[href^="/retreatment.html"]:hover,#symptoms .symptom-grid .card>a[href^="/cervical-abrasion.html"]:hover,#symptoms .symptom-grid .card>a[href^="/insured-care.html"]:hover{background:#dcecdf}
#symptoms .symptom-grid .card>a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:6px}
@media(max-width:600px){#symptoms .symptom-grid .card>a{display:block;margin-top:7px;padding:11px 0;font-size:15px;line-height:1.6}#symptoms .symptom-grid .card>a[href^="/gum-treatment.html"],#symptoms .symptom-grid .card>a[href^="/retreatment.html"],#symptoms .symptom-grid .card>a[href^="/cervical-abrasion.html"],#symptoms .symptom-grid .card>a[href^="/insured-care.html"]{margin-top:11px;padding:13px 14px;font-size:15px}#symptoms .symptom-grid .card br{display:none}}

/* After reading symptom guidance, patients can find clinic contact details. */
#symptoms .symptom-contact{margin:24px 0 0;padding:20px 22px;border:1px solid #c5d8c9;border-radius:12px;background:#f3f8f3;line-height:1.85;word-break:keep-all}
#symptoms .symptom-contact a{display:inline-block;margin:12px 12px 0 0;padding:10px 13px;border:1px solid #93b09c;border-radius:8px;color:#173e35;font-weight:700;text-decoration:none}
#symptoms .symptom-contact a:first-of-type{background:#173e35;color:#fff;border-color:#173e35}
#symptoms .symptom-contact a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){#symptoms .symptom-contact{padding:18px 16px;font-size:15px}#symptoms .symptom-contact a{display:block;margin:10px 0 0;text-align:center;padding:13px 12px}}

/* Keyboard accessibility: bypass the long homepage navigation. */
.skip-link{position:fixed;top:12px;left:12px;z-index:9999;transform:translateY(-160%);padding:12px 18px;border-radius:7px;background:#173e35;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.18)}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:3px solid #e4cf89;outline-offset:2px}

/* Location directions: large, easy-to-tap map and call actions. */
.location-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:18px}.location-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-align:center;line-height:1.45}.location-actions .btn:focus-visible{outline:3px solid #507a60;outline-offset:3px}@media(max-width:600px){.location-actions{flex-direction:column}.location-actions .btn{width:100%;box-sizing:border-box;white-space:normal}}

/* Health article next steps: readable, accessible contact actions on phones. */
[data-care-link="true"]{word-break:keep-all;overflow-wrap:anywhere}
[data-care-link="true"] .health-care-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
[data-care-link="true"] .health-care-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;box-sizing:border-box;padding:11px 15px;border:1px solid #91b3a0;border-radius:8px;background:#fff;color:#173e35;font-weight:700;text-decoration:none;text-align:center;line-height:1.5}
[data-care-link="true"] .health-care-actions a:first-child{background:#173e35;color:#fff;border-color:#173e35}
[data-care-link="true"] a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){[data-care-link="true"]{padding:16px!important;font-size:15px}[data-care-link="true"] .health-care-actions{flex-direction:column}[data-care-link="true"] .health-care-actions a{width:100%;min-height:48px}}

/* First-screen care summary: readable and restrained on mobile. */
.hero-care-summary{margin:18px 0 6px;padding:12px 16px;border-left:3px solid #507a60;background:#edf2e9;color:#173e35;font-size:15px;font-weight:700;line-height:1.9;word-break:keep-all}
.hero-care-summary span{padding:0 5px;color:#698b77}
@media(max-width:600px){.hero-care-summary{font-size:14px;padding:12px 13px;line-height:1.85}.hero-care-summary span{padding:0 3px}}

/* Direct care navigation: each first-screen specialty is a touch-friendly link. */
.hero-care-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px;border-left:3px solid #507a60}
.hero-care-summary a{display:flex;align-items:center;min-height:46px;padding:10px 12px;border:1px solid #c4d5c5;border-radius:8px;background:#fff;color:#173e35;text-decoration:none;font-weight:700;line-height:1.55}
.hero-care-summary a:hover{background:#e1ebdf;border-color:#507a60}
.hero-care-summary a:focus-visible{outline:3px solid #287d60;outline-offset:2px}
@media(max-width:600px){.hero-care-summary{grid-template-columns:1fr;gap:8px;padding:10px}.hero-care-summary a{min-height:48px;font-size:14px}}

/* Homepage mobile hierarchy: three primary actions after specialty links. */
.hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;line-height:1.5}
.hero-actions .btn:focus-visible,.hero-care-summary a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){.hero-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px}.hero-actions .btn{width:100%;min-height:48px;padding:13px 15px;font-size:15px;white-space:normal}.hero-actions .hero-call{order:0}.hero-actions .hero-symptoms{order:1}.hero-actions .hero-hours{order:2}}

/* Bridge from focused treatments to symptom-first discovery. */
.focus-symptom-link{margin:18px 0 24px;padding:15px 18px;border-radius:10px;background:#edf4ec;line-height:1.8;word-break:keep-all}
.focus-symptom-link a{display:inline-block;margin-left:6px;color:#173e35;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.focus-symptom-link a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){.focus-symptom-link{padding:15px;font-size:15px}.focus-symptom-link a{display:block;margin:8px 0 0;padding:10px 0;line-height:1.6}}

/* Preserve natural teeth first in the complete care overview. */
#care .care-preservation-feature{grid-column:1/-1;background:#f0f5ef;border:2px solid #9fb9a6}
#care .care-preservation-feature h3{font-size:clamp(24px,3vw,34px);line-height:1.45}
#care .care-preservation-feature a{display:inline-block;padding:6px 0;font-weight:700;color:#173e35;text-decoration:underline;text-underline-offset:3px}
#care .care-preservation-feature a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){#care .care-preservation-feature{padding:20px 16px}#care .care-preservation-feature a{display:block;padding:10px 0}}

/* Mobile visit information: keep the confirmed hours and parking readable. */
#location .hours-box{overflow-wrap:anywhere}
#location .visit-check a{display:inline-block;min-height:44px;line-height:44px;text-underline-offset:3px}
#location .location-actions a{min-height:48px;display:inline-flex;align-items:center;justify-content:center;line-height:1.5;text-align:center}
@media(max-width:600px){#location .hours-box{padding:18px 15px;line-height:1.9}#location .hours-box p{word-break:keep-all}#location .visit-check{padding:16px!important}#location .location-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}#location .location-actions a{width:100%;padding:12px 14px;white-space:normal}}

/* Homepage mobile: put diagnosis and care pathways ahead of decoration. */
@media(max-width:600px){
 .hero{gap:22px;padding-top:22px;padding-bottom:42px}
 .hero .kicker{font-size:11px;letter-spacing:.12em}
 .hero h1{font-size:clamp(27px,7vw,34px);line-height:1.48;margin:14px 0}
 .hero #intro{font-size:15px;line-height:1.85;margin:0 0 15px}
 .hero .art{height:185px;max-width:360px;border-radius:110px 110px 10px 10px;box-shadow:7px 9px 0 #e9e7d9}
 .hero .flower{width:115px;left:calc(50% - 57px);top:5%}
 .hero .art .caption{bottom:13px;right:16px;font-size:10px;letter-spacing:.08em}
 #focus-care .grid .card{min-width:0;padding:21px 18px}
 #focus-care .grid .card h3{font-size:21px;line-height:1.5;word-break:keep-all}
 #focus-care .grid .card a{min-height:44px;display:inline-flex;align-items:center;padding:9px 0;text-underline-offset:3px}
 #philosophy,#focus-care,#symptoms,#care,#health-info,#location{scroll-margin-top:118px}
}

/* Mobile health article reading comfort and tap targets (shared stylesheet). */
@media(max-width:600px){
 body main.article{max-width:100%;padding:36px 18px 70px;overflow-wrap:break-word}
 body main.article h1{font-size:clamp(27px,7vw,34px);line-height:1.45;word-break:keep-all}
 body main.article h2{font-size:clamp(21px,5.5vw,25px);line-height:1.5;word-break:keep-all}
 body main.article p,body main.article li{font-size:16px;line-height:1.85;word-break:keep-all}
 body main.article .note{padding:18px 16px;margin-top:26px}
 body main.article .note a,body main.article .bottom a{display:inline-block;min-height:44px;padding:9px 2px;line-height:1.6;text-underline-offset:3px}
 body main.article a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:3px}
 body main.article ul{padding-left:22px}
}

/* Accessibility: reduced motion and resilient Korean text rendering. */
body{font-family:'DM Sans','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(max-width:600px){
 .nav,.navlinks,.mobile-quick{min-width:0}
 .nav a{overflow-wrap:anywhere}
}

/* Visit information: make parking details readable on narrow screens. */
#location .parking-info{margin:20px 0;padding:19px 21px;border:1px solid #c5d8c9;border-radius:12px;background:#f3f8f3;overflow-wrap:break-word}
#location .parking-info h3{margin:0 0 10px;color:#285447;font-size:19px;line-height:1.5;word-break:keep-all}
#location .parking-info p{margin:8px 0;line-height:1.8;word-break:keep-all}
#location .parking-info .parking-note{font-size:14px;color:#53675a}
@media(max-width:600px){#location .parking-info{padding:17px 16px;margin:17px 0}#location .parking-info h3{font-size:17px}#location .parking-info p{font-size:15px}}

/* Visit actions: clear, thumb-friendly map and phone buttons. */
#location .location-actions{gap:12px;margin-top:18px}
#location .location-actions .btn{box-sizing:border-box;min-width:0;min-height:50px;padding:13px 18px;text-align:center;white-space:normal;overflow-wrap:anywhere;text-decoration:none}
#location .location-actions .btn:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){#location .location-actions{gap:10px}#location .location-actions .btn{display:flex;width:100%;min-height:52px;align-items:center;justify-content:center;font-size:15px;line-height:1.5}}

/* Keep symptom help readable below the homepage treatment shortcuts. */
.hero-care-help{margin:12px 0 18px;font-size:14px;line-height:1.75;color:#476052;word-break:keep-all}
.hero-care-help a{color:#245d4b;font-weight:700;text-underline-offset:3px}
.hero-care-help a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){.hero-care-help{font-size:15px;line-height:1.85;margin:14px 0 18px}.hero-care-help a{display:inline-block;min-height:44px;padding:8px 2px;vertical-align:middle}.hero-care-summary a{font-size:15px;line-height:1.6;padding:12px 14px;min-height:52px}}

/* Treatment-page visit panels: keep call and directions usable on narrow phones. */
section[aria-label="진료 문의 및 방문 안내"] a[href^="tel:"],section[aria-label="진료 문의 및 방문 안내"] a[href="/#location"]{box-sizing:border-box;max-width:100%;text-align:center;line-height:1.5;overflow-wrap:anywhere}
section[aria-label="진료 문의 및 방문 안내"] a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){section[aria-label="진료 문의 및 방문 안내"]>div{padding:0 4px}section[aria-label="진료 문의 및 방문 안내"] a[href^="tel:"],section[aria-label="진료 문의 및 방문 안내"] a[href="/#location"]{width:100%;min-height:52px;padding:14px 16px!important}}

/* First-screen visit note: compact, readable and easy to use on phones. */
.hero-visit-note{margin:14px 0 0;padding:13px 16px;border-radius:10px;background:#f2f6ef;border:1px solid #d9e5d8;color:#34574a;font-size:14px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
.hero-visit-note strong{color:#24483f}.hero-visit-note a{color:#245d4b;font-weight:700;text-underline-offset:3px}
.hero-visit-note a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){.hero-visit-note{margin:12px 0 0;padding:13px 14px;font-size:15px;line-height:1.85}.hero-visit-note a{display:inline-block;min-height:44px;padding:7px 2px;vertical-align:middle}}

/* Symptom navigation: consistent reading order and comfortable phone tap targets. */
#symptoms .symptom-grid .card{display:flex;flex-direction:column;align-items:stretch}
#symptoms .symptom-grid .card h3{margin-bottom:8px}
#symptoms .symptom-grid .card p{margin-top:0;line-height:1.8;word-break:keep-all}
#symptoms .symptom-grid .card>a{box-sizing:border-box;min-height:44px;display:flex;align-items:center;word-break:keep-all}
@media(max-width:600px){#symptoms .symptom-grid{gap:14px}#symptoms .symptom-grid .card{padding:20px 18px}#symptoms .symptom-grid .card h3{font-size:19px;line-height:1.45}#symptoms .symptom-grid .card>a{min-height:48px;font-size:15px;line-height:1.6}#symptoms .symptom-contact a{min-height:48px;display:flex;align-items:center;justify-content:center}}

/* Twelve care categories: readable card links and accessible mobile tap areas. */
#care .grid>.card{min-width:0}
#care .grid>.card h3{line-height:1.45;word-break:keep-all}
#care .grid>.card p{line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
#care .grid>.card:not(.care-preservation-feature) p a{display:inline-block;max-width:100%;min-height:44px;box-sizing:border-box;padding:9px 2px;line-height:1.65;text-underline-offset:3px;overflow-wrap:anywhere}
#care .grid>.card a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#care .grid{gap:14px}#care .grid>.card{padding:20px 18px}#care .grid>.card h3{font-size:20px;line-height:1.5}#care .grid>.card:not(.care-preservation-feature) p a{display:block;min-height:48px;padding:11px 0}#care .grid>.card:not(.care-preservation-feature) p br{display:none}#care .care-preservation-feature a{min-height:48px;box-sizing:border-box;display:flex;align-items:center}}

/* Patient education cards: clear reading paths on narrow screens. */
#health-info .grid>.card{min-width:0}
#health-info .grid>.card h3{line-height:1.5;word-break:keep-all}
#health-info .grid>.card p{line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
#health-info .grid>.card p a{display:inline-block;max-width:100%;min-height:44px;box-sizing:border-box;padding:9px 2px;line-height:1.6;text-underline-offset:3px;overflow-wrap:anywhere}
#health-info .grid>.card a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#health-info .grid{gap:14px}#health-info .grid>.card{padding:20px 18px}#health-info .grid>.card h3{font-size:20px}#health-info .grid>.card p a{display:block;min-height:48px;padding:11px 0}}

/* Additional dental knowledge: topic links stay legible and easy to tap. */
#more-health .grid>.card{min-width:0}
#more-health .grid>.card h3{line-height:1.5;word-break:keep-all}
#more-health .grid>.card p{line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
#more-health .grid>.card p a{display:inline-block;max-width:100%;min-height:44px;box-sizing:border-box;padding:9px 2px;line-height:1.6;text-underline-offset:3px;overflow-wrap:anywhere}
#more-health a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#more-health .grid{gap:14px}#more-health .grid>.card{padding:20px 18px}#more-health .grid>.card h3{font-size:20px}#more-health .grid>.card p a{display:block;min-height:48px;padding:11px 0}#more-health .grid>.card p br{display:none}}

/* FAQ: comfortable accordion targets and readable answers on phones. */
#faq .faq-list details{min-width:0}
#faq .faq-list summary{min-height:48px;box-sizing:border-box;word-break:keep-all;overflow-wrap:anywhere}
#faq .faq-list details p{word-break:keep-all;overflow-wrap:anywhere}
#faq .faq-list details p a{display:inline-block;min-height:44px;box-sizing:border-box;padding:9px 2px;line-height:1.6;text-underline-offset:3px}
#faq .faq-list details p a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#faq .faq-list{gap:12px}#faq .faq-list summary{padding:17px 16px;line-height:1.6}#faq .faq-list details p{padding:0 16px 18px;line-height:1.85}#faq .faq-list details p a{min-height:48px;padding:11px 2px}}

/* Visit details: readable alternating Friday/Saturday schedule on small screens. */
#location .hours-box,#location .parking-info{min-width:0}
#location .hours-box .notice{word-break:keep-all;overflow-wrap:anywhere}
#location .hours-box a[href^="tel:"],#location .nearby-location a{display:inline-block;box-sizing:border-box;min-height:44px;padding:9px 2px;line-height:1.6;overflow-wrap:anywhere;text-underline-offset:3px}
#location .hours-box a:focus-visible,#location .nearby-location a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#location .hours-box{padding:20px 17px}#location .hours-box h3{font-size:20px;line-height:1.45}#location .hours-box p{font-size:15px;line-height:1.9}#location .hours-box .notice{font-size:14px;line-height:1.9}#location .hours-box a[href^="tel:"],#location .nearby-location a{min-height:48px;padding:11px 2px}#location .parking-info{padding:19px 17px}#location .parking-info h3{line-height:1.55}}

/* Navigation: keep the expanded section menu scrollable without shrinking tap targets. */
.navlinks a:focus-visible,.mobile-quick a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:760px){.navlinks{max-width:100%;box-sizing:border-box;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:12px}.navlinks a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:8px 4px;scroll-snap-align:start;white-space:nowrap}.mobile-quick a{min-height:44px;box-sizing:border-box}}
@media(max-width:390px){.nav{padding-left:12px;padding-right:12px;column-gap:5px}.mobile-quick{gap:3px}.mobile-quick a{padding:6px 5px;font-size:11px}}

/* Local treatment overview: balanced four-card layout and phone-friendly links. */
#local-care .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#local-care .grid>.card{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#local-care .grid>.card h3{line-height:1.5;word-break:keep-all}
#local-care .grid>.card p{line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}
#local-care .grid>.card p:last-child{margin-top:auto}
#local-care .grid>.card a{box-sizing:border-box;min-height:44px;max-width:100%;overflow-wrap:anywhere;text-underline-offset:3px}
#local-care a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#local-care .grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}#local-care .grid>.card{padding:20px 18px}#local-care .grid>.card h3{font-size:20px}#local-care .grid>.card a{min-height:48px;line-height:1.6}}

/* Clinic philosophy: readable diagnosis and staged-care principles on phones. */
#philosophy .grid>.card{min-width:0;text-align:left}
#philosophy .grid>.card h3{line-height:1.5;word-break:keep-all}
#philosophy .grid>.card p{line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
#philosophy .grid>.card p a{display:inline-block;box-sizing:border-box;min-height:44px;padding:9px 2px;line-height:1.6;text-underline-offset:3px}
#philosophy .grid>.card a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#philosophy .grid{gap:14px}#philosophy .grid>.card{padding:20px 18px}#philosophy .grid>.card h3{font-size:20px}#philosophy .grid>.card p{font-size:16px}#philosophy .grid>.card p a{min-height:48px;padding:11px 2px}}

/* Focused care: consistent mobile cards and accessible treatment links. */
#focus-care .grid>.card{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#focus-care .grid>.card h3{line-height:1.5;word-break:keep-all}
#focus-care .grid>.card p{line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
#focus-care .grid>.card p a,#focus-care .focus-symptom-link a{display:inline-block;box-sizing:border-box;max-width:100%;min-height:44px;padding:9px 2px;line-height:1.6;text-underline-offset:3px;overflow-wrap:anywhere}
#focus-care a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#focus-care .grid{gap:14px}#focus-care .grid>.card{padding:20px 18px}#focus-care .grid>.card h3{font-size:20px}#focus-care .grid>.card p a,#focus-care .focus-symptom-link a{min-height:48px;padding:11px 2px}}

/* Visit section: comfortable tap targets for directions, phone and map on mobile. */
#location .nearby-location a,#location .hours-box a,#location .visit-check a{overflow-wrap:anywhere;text-underline-offset:3px}
#location a:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:5px}
@media(max-width:600px){#location .location-actions{grid-template-columns:minmax(0,1fr);gap:12px}#location .location-actions .btn{width:100%;min-height:52px;padding:14px 16px;white-space:normal;line-height:1.55}#location .nearby-location a,#location .hours-box a,#location .visit-check a{display:inline-block;min-height:44px;padding:9px 0;line-height:1.65}}

/* Readable visit hours and parking notes on narrow screens. */
#location .hours-box,#location .parking-info{min-width:0;overflow-wrap:anywhere}
#location .hours-box p,#location .parking-info p{word-break:keep-all}
@media(max-width:600px){#location .hours-box{padding:20px 18px}#location .hours-box h3{font-size:20px;line-height:1.5;margin-bottom:12px}#location .hours-box p{font-size:16px;line-height:1.9;margin:12px 0}#location .hours-box .notice{font-size:15px;line-height:1.85}#location .parking-info{padding:20px 18px;margin:18px 0}#location .parking-info h3{font-size:18px;line-height:1.5}#location .parking-info p{font-size:16px;line-height:1.85}#location .parking-info .parking-note{font-size:15px;line-height:1.8}}

/* FAQ accordion: clear keyboard focus and larger phone touch targets. */
#faq .faq-list summary{cursor:pointer;position:relative}
#faq .faq-list summary:focus-visible{outline:3px solid #287d60;outline-offset:3px;border-radius:6px}
#faq .faq-list details[open] summary{font-weight:700}
@media(max-width:600px){#faq .faq-list summary{min-height:56px;padding:17px 18px;font-size:16px;line-height:1.6;touch-action:manipulation}#faq .faq-list details p{font-size:15px;line-height:1.85;padding:2px 18px 20px}#faq .faq-list{gap:12px}}

/* Accessibility: keyboard navigation and mobile targets */
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #287d60;outline-offset:3px}
@media(max-width:600px){#nearby-areas .card a,#care-principles .card a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;text-decoration:underline;text-underline-offset:3px}#nearby-areas .card p,#care-principles .card p{overflow-wrap:anywhere}#related-care a{min-height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Four-action mobile navigation layout: prevent overflow on narrow phones. */
@media(max-width:600px){
 .nav{grid-template-columns:minmax(0,1fr);row-gap:8px}
 .nav .logo{grid-column:1;justify-self:start}
 .mobile-quick{grid-column:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:5px}
 .mobile-quick a{min-width:0;min-height:44px;padding:7px 3px;text-align:center;font-size:clamp(10px,2.8vw,12px);line-height:1.35;white-space:normal;overflow-wrap:anywhere}
 .navlinks{grid-column:1;max-width:100%}
}

/* Mobile visit action layout: prominent map and call controls. */
#location .location-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
#location .location-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;text-align:center;overflow-wrap:anywhere}
@media(max-width:600px){#location .location-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}#location .location-actions .btn{width:100%;min-height:52px;padding:12px 14px;line-height:1.5}#location .hours-box{overflow-wrap:anywhere}#location .hours-box a{text-decoration:underline;text-underline-offset:3px}}

/* Keep five mobile quick actions readable without sideways overflow. */
@media(max-width:600px){.mobile-quick a{font-size:clamp(9px,2.55vw,11px);padding:8px 2px;line-height:1.35}.mobile-quick a:focus-visible{outline:3px solid #bc9761;outline-offset:2px}}

/* Account for the sticky two-row header when jumping to clinic sections on phones. */
@media(max-width:600px){html{scroll-padding-top:150px}#philosophy,#focus-care,#symptoms,#care,#doctor,#health-info,#more-health,#stories,#faq,#location{scroll-margin-top:150px}}

/* Mobile quick navigation: accessible touch targets and stable layout. */
@media(max-width:600px){
 .mobile-quick{align-items:stretch}
 .mobile-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border:1px solid #d7e1d9;border-radius:7px;background:#fffdf7;color:#173e35;font-weight:700;text-decoration:none}
 .mobile-quick .mobile-call{background:#173e35;color:#fff;border-color:#173e35}
 .mobile-quick a:active{transform:translateY(1px)}
}

/* Improve Korean text readability and prevent cramped mobile navigation. */
@media(max-width:600px){
 body{font-size:16px;line-height:1.8}
 .hero h1{line-height:1.45;overflow-wrap:anywhere}
 .hero p,.section p{line-height:1.85}
 .mobile-quick a{font-size:clamp(10px,2.65vw,12px);letter-spacing:-.035em;word-break:keep-all;line-height:1.35}
 .footer a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
 .footer .bloglinks{flex-wrap:wrap}
}

/* Clearer location information for mobile visitors. */
@media(max-width:600px){
 #location .visit-check{margin:16px 0!important;padding:18px!important;line-height:1.8!important}
 #location .visit-check strong{display:inline-block;font-size:17px;line-height:1.5}
 #location .visit-check p{margin-top:10px!important;font-size:15px}
 #location .parking-info,#location .hours-box{border-radius:10px}
 #location .location-actions a{border-radius:8px;font-weight:700}
 #location #address{font-size:16px;font-weight:600;overflow-wrap:anywhere}
}

/* Keep the expanded desktop navigation usable on laptop widths. */
@media(min-width:901px) and (max-width:1250px){
 .nav{padding:14px 18px;gap:12px;flex-wrap:wrap}
 .nav .logo{flex:0 0 auto}
 .navlinks{flex:1 1 760px;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px;font-size:12px;line-height:1.5}
 .navlinks a{min-height:36px;display:inline-flex;align-items:center}
}

/* Keep section headings and long treatment links readable on tablets. */
@media(min-width:601px) and (max-width:900px){
 .wrap{padding-left:20px;padding-right:20px}
 .section{padding-top:64px;padding-bottom:64px}
 .section h2{line-height:1.5;overflow-wrap:anywhere}
 .card{min-width:0;overflow-wrap:anywhere}
 .footer a{overflow-wrap:anywhere}
}

/* Preserve comfortable line lengths on wider displays. */
@media(min-width:1251px){
 .section .lead{max-width:760px}
 #location .hours-box p{max-width:70ch}
 #faq .faq-list{max-width:960px;margin-left:auto;margin-right:auto}
}

/* Keep six mobile quick links usable without compressing labels. */
@media(max-width:600px){
 .mobile-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
 .mobile-quick a{min-width:0;min-height:46px;padding:7px 3px;text-align:center}
 #symptom-guide,#visit-guide{scroll-margin-top:150px}
}

/* Make dynamically loaded patient education cards keyboard-friendly. */
#post-list .post-card{min-width:0;overflow-wrap:anywhere}
#post-list .post-card:focus-visible{outline:3px solid #a47837;outline-offset:4px;transform:translateY(-2px)}
#post-list .post-card img{display:block;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(hover:hover){#post-list .post-card:hover{border-color:#a47837;box-shadow:0 8px 22px rgba(23,62,53,.12)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.post-card,.mobile-quick a{transition:none!important;transform:none!important}}

/* Patient-first visual polish: calm spacing, readable calls to action, consistent cards. */
:root{--focus-ring:#a47837}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.section{scroll-margin-top:110px}
.card{transition:border-color .18s ease,box-shadow .18s ease;min-width:0}
@media(hover:hover){.card:hover{border-color:#c9b38b;box-shadow:0 12px 28px rgba(23,62,53,.07)}}
.btn,.navlinks .call{transition:background-color .18s ease,box-shadow .18s ease}
@media(hover:hover){.btn:hover,.navlinks .call:hover{background:#285a4b;color:#fff;box-shadow:0 6px 16px rgba(23,62,53,.17)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-actions .btn{margin-top:12px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:600px){
 .section{padding-top:54px;padding-bottom:54px;scroll-margin-top:155px}
 .section h2{margin-bottom:20px}
 .grid{gap:14px;margin-top:26px}
 .card{min-height:0;padding:24px 20px}
 .hero{padding-top:38px;padding-bottom:44px}
 .hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
 .hero-actions .btn{width:100%;margin-top:0;min-height:48px}
}
@media(prefers-reduced-motion:reduce){.card,.btn,.navlinks .call{transition:none!important}}

/* Final mobile navigation pass: reduce duplicate controls and header height. */
@media(max-width:600px){
 .nav{grid-template-columns:minmax(0,1fr);row-gap:8px}
 .nav .logo{margin:0;font-size:21px;line-height:1.35}
 .mobile-quick{grid-column:1;grid-row:2;margin:0}
 .navlinks{display:none}
 header{backdrop-filter:none}
 html{scroll-padding-top:142px}
 #philosophy,#focus-care,#symptom-guide,#care,#doctor,#health-info,#more-health,#stories,#faq,#location,#neighborhood-guide,#treatment-decisions,#care-pathway,#when-to-call,#appointment-checklist,#visit-guide{scroll-margin-top:142px}
}
@media(min-width:601px) and (max-width:900px){
 .nav{flex-wrap:wrap}
 .navlinks{flex-wrap:wrap;gap:10px 16px}
 .navlinks a{min-height:38px;display:inline-flex;align-items:center}
}

/* Clear clinical hierarchy on the first screen without extra homepage sections. */
.hero-care-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0 4px;max-width:650px}
.hero-care-summary a{display:flex;align-items:center;min-height:58px;padding:13px 16px;border:1px solid #d8dfd3;border-radius:9px;background:#fffdf7;font-size:14px;font-weight:650;line-height:1.55;word-break:keep-all;transition:border-color .18s ease,background-color .18s ease}
.hero-care-summary a:hover{border-color:#8da99a;background:#f1f5ef}
.hero-care-summary a:focus-visible{outline:3px solid #a47837;outline-offset:3px}
.hero-visit-note{font-size:13px!important;line-height:1.75!important;color:#476256;border-left:3px solid #bc9761;padding:8px 0 8px 14px;margin-top:22px}
.hero-visit-note a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.hero-care-summary{max-width:none}}
@media(max-width:600px){
 .hero-care-summary{grid-template-columns:1fr;gap:8px;margin:18px 0 12px}
 .hero-care-summary a{min-height:48px;padding:12px 14px;font-size:14px}
 .hero-visit-note{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.hero-care-summary a{transition:none!important}}

/* Prioritize clinical information over decorative artwork on small screens. */
@media(max-width:600px){
 .hero{gap:18px}
 .hero .art{height:190px;max-width:320px;border-radius:130px 130px 10px 10px;box-shadow:7px 9px 0 #e9e7d9}
 .hero .flower{width:125px;left:30%;top:7%}
 .hero .art .caption{font-size:10px;bottom:12px;right:15px}
 .hero h1{margin:12px 0 14px}
 .hero #intro{margin-bottom:10px}
 .hero-care-summary{margin-top:14px}
}
@media(min-width:601px) and (max-width:800px){
 .hero .art{height:290px}
}

/* Footer visit reminder: practical details instead of an editorial link. */
.footer-visit-note{max-width:370px;padding:11px 14px;border-left:3px solid #bc9761;background:rgba(255,255,255,.06);border-radius:0 7px 7px 0;line-height:1.7;font-size:13px}
.footer a:focus-visible{outline-color:#e5c48d}
@media(max-width:600px){.footer{padding:40px 0}.footer .footgrid{gap:18px}.footer-visit-note{max-width:none}}

/* Show the actual clinic number in the primary call action. */
.hero-call{gap:10px;white-space:normal;text-align:center}
.hero-phone{font-size:13px;font-weight:700;letter-spacing:.015em;font-variant-numeric:tabular-nums}
@media(max-width:600px){.hero-call{flex-wrap:wrap;gap:6px}.hero-phone{font-size:14px}}

/* Long Korean clinical explanations should remain legible at every viewport. */
:where(.hero,.section,.article) :where(p,li,h1,h2,h3){overflow-wrap:break-word}
:where(.hero,.section,.article) :where(h1,h2,h3){text-wrap:balance}
:where(.hero,.section,.article) p{text-wrap:pretty}
@media(max-width:600px){.hero p,.section p{word-break:keep-all}.article .body{overflow-wrap:anywhere}}

/* Four essential mobile actions fit on one row, leaving more room for clinical content. */
@media(max-width:600px){
 .mobile-quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .mobile-quick a{min-height:44px;padding:7px 2px;font-size:clamp(10px,2.65vw,12px);word-break:keep-all}
 .nav{row-gap:6px}
 html{scroll-padding-top:112px}
 #philosophy,#focus-care,#symptom-guide,#care,#doctor,#health-info,#more-health,#stories,#faq,#location,#neighborhood-guide,#treatment-decisions,#care-pathway,#when-to-call,#appointment-checklist,#visit-guide{scroll-margin-top:112px}
}

/* Accessible anchor navigation: account for the sticky mobile header on every section. */
:where(section[id],main[id],article[id]){scroll-margin-top:100px}
@media(max-width:600px){
 :where(section[id],main[id],article[id]){scroll-margin-top:124px}
 .hero-care-summary a,.focus-symptom-link a{overflow-wrap:anywhere}
}
/* Make keyboard navigation obvious on cards, treatment links and primary actions. */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #a96b24;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Small phones: prevent quick actions from overflowing the viewport. */
@media(max-width:420px){
 .nav{grid-template-columns:minmax(0,1fr)!important;row-gap:7px}
 .mobile-quick{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .mobile-quick a{min-width:0;min-height:44px;padding:7px 3px;font-size:11px;letter-spacing:-.035em}
 .navlinks{min-width:0;margin-top:2px}
}
@media(min-width:421px) and (max-width:600px){.mobile-quick a{min-height:44px}}

/* Responsive treatment-guide cross-navigation: added 2026-10-20 */
nav[aria-label="이조은치과 주요 진료 안내"]{box-sizing:border-box;width:min(100% - 32px,960px);margin:32px auto!important;padding:clamp(16px,3vw,26px)!important;overflow-wrap:anywhere}
nav[aria-label="이조은치과 주요 진료 안내"] h2{font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.4;margin:0 0 12px}
nav[aria-label="이조은치과 주요 진료 안내"] ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px 16px;padding-left:0;margin:12px 0;list-style:none}
nav[aria-label="이조은치과 주요 진료 안내"] li{margin:0;min-width:0}
nav[aria-label="이조은치과 주요 진료 안내"] a{display:flex;align-items:center;min-height:44px;padding:9px 12px;border-radius:8px;background:#edf5f0;color:#173e35;line-height:1.5;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
nav[aria-label="이조은치과 주요 진료 안내"] a:focus-visible{outline:3px solid #a96b24;outline-offset:2px}
nav[aria-label="이조은치과 주요 진료 안내"] p{margin:12px 0 0}
@media(max-width:600px){nav[aria-label="이조은치과 주요 진료 안내"]{width:calc(100% - 28px);margin:22px auto!important;padding:16px!important}nav[aria-label="이조은치과 주요 진료 안내"] ul{grid-template-columns:1fr}nav[aria-label="이조은치과 주요 진료 안내"] a{font-size:16px}}

/* Patient education: accessible, uncluttered mobile next steps */
@media(max-width:600px){
  .article .note p:has(> a[href^="/#location"],> a[href^="tel:"]){line-height:1.65}
  .article .note p:has(> a[href^="/#location"],> a[href^="tel:"]) > a[href^="/#location"],
  .article .note p:has(> a[href^="/#location"],> a[href^="tel:"]) > a[href^="tel:"]{
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;min-height:48px;padding:10px 14px;margin:5px 4px 5px 0;
    border:1px solid #b7cdbd;border-radius:9px;background:#fff;color:#174a3a;
    text-decoration:none;font-weight:700;line-height:1.45;overflow-wrap:anywhere
  }
  .article .note p > a[href^="tel:"]{background:#174a3a!important;color:#fff!important;border-color:#174a3a!important}
  .article .note a:focus-visible{outline:3px solid #287d60;outline-offset:3px}
}


/* Consistent patient education reading experience across health articles and hubs. */
main.article{max-width:850px;margin-inline:auto}
main.article h1{font-size:clamp(29px,4.4vw,44px);line-height:1.4;letter-spacing:-.035em;word-break:keep-all;overflow-wrap:break-word;color:#173e35}
main.article h2{font-size:clamp(23px,3vw,29px);line-height:1.5;letter-spacing:-.025em;word-break:keep-all;color:#173e35}
main.article p,main.article li{line-height:1.85;overflow-wrap:break-word}
main.article .note{border-radius:14px}
main.article a:focus-visible{outline:3px solid #a96b24;outline-offset:3px}
@media(max-width:600px){
 main.article{padding:38px 18px 56px}
 main.article h1{font-size:clamp(27px,7vw,34px);line-height:1.4}
 main.article h2{font-size:clamp(22px,5.8vw,27px);margin-top:30px}
 main.article p,main.article li{font-size:16px;line-height:1.8}
 main.article .note{padding:18px;margin:22px 0}
 main.article img,main.article svg,main.article iframe{max-width:100%;height:auto}
}

/* In-article navigation: readable on small screens, usable without JavaScript. */
.article-toc{margin:24px 0 32px;padding:18px 20px;border:1px solid #d4e2d8;border-radius:14px;background:#edf4ed}
.article-toc strong{display:block;margin-bottom:8px;color:#173e35;font-size:16px}
.article-toc ul{margin:0;padding-left:20px;columns:2;column-gap:28px}
.article-toc li{break-inside:avoid;margin:3px 0}
.article-toc a{display:inline-flex;align-items:center;min-height:44px;padding:7px 2px;color:#173e35;text-decoration:underline;text-underline-offset:3px;line-height:1.55;overflow-wrap:anywhere}
.article-toc a:focus-visible{outline:3px solid #a96b24;outline-offset:3px}
main.article h2[id]{scroll-margin-top:100px}
@media(max-width:600px){.article-toc{padding:16px;margin:20px 0 26px}.article-toc ul{columns:1}.article-toc a{padding:8px 2px}main.article h2[id]{scroll-margin-top:85px}}

/* Keyboard navigation for long patient education articles. */
.article-skip-link{position:absolute;left:12px;top:-100px;z-index:1000;background:#173e35;color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none}
.article-skip-link:focus,.article-skip-link:focus-visible{top:12px;color:#fff;outline:3px solid #a96b24;outline-offset:2px}
@media(max-width:600px){.article-skip-link{left:8px;right:8px;text-align:center;max-width:calc(100% - 16px)}}
main.article[id]{scroll-margin-top:85px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Patient-friendly printed health guides: hide navigation and preserve article content. */
@media print{
 @page{margin:16mm}
 body{background:#fff!important;color:#111!important;font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif}
 body>header,body>footer,.article-skip-link,.article-toc,.nav,.navlinks{display:none!important}
 main.article footer,main.article .bottom{display:block!important}
 main.article{max-width:none!important;margin:0!important;padding:0!important;color:#111!important}
 main.article h1{font-size:23pt!important;color:#111!important;line-height:1.3}
 main.article h2{font-size:15pt!important;color:#111!important;break-after:avoid;page-break-after:avoid}
 main.article p,main.article li{font-size:11pt!important;line-height:1.65!important}
 main.article a{color:#111!important;text-decoration:underline!important}
 main.article .note{border:1px solid #999!important;background:#fff!important;break-inside:avoid}
 main.article .bottom,main.article footer{border-top:1px solid #bbb!important;margin-top:20pt!important;padding-top:10pt!important;font-size:9pt!important}
 main.article .bottom small,main.article footer small{display:block!important;font-size:9pt!important;line-height:1.5!important}
 main.article .bottom a,main.article footer a{color:#111!important}
 main.article img,main.article table{max-width:100%!important}
 main.article img{break-inside:avoid}
}

/* Readable, keyboard-accessible contact links in patient guide callouts. */
main.article .note a[href^="tel:"],main.article .note a[href="/#location"]{
 display:inline-flex;align-items:center;min-height:44px;padding:6px 4px;
 text-decoration:underline;text-underline-offset:3px;font-weight:700;
 overflow-wrap:anywhere
}
main.article .note a[href^="tel:"]:focus-visible,
main.article .note a[href="/#location"]:focus-visible{
 outline:3px solid #a96b24;outline-offset:2px;border-radius:4px
}