@font-face{font-family:"Pretendard";font-weight:200;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-ExtraLight.woff2") format("woff2")}@font-face{font-family:"Pretendard";font-weight:300;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Light.woff2") format("woff2")}@font-face{font-family:"Pretendard";font-weight:400;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Regular.woff2") format("woff2")}@font-face{font-family:"Pretendard";font-weight:500;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.woff2") format("woff2")}@font-face{font-family:"Pretendard";font-weight:600;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-SemiBold.woff2") format("woff2")}@font-face{font-family:"Pretendard";font-weight:700;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Bold.woff2") format("woff2")}@font-face{font-family:"Pretendard";font-weight:800;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-ExtraBold.woff2") format("woff2")}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;font-weight:400}html,body{width:100%;height:100%;font-size:62.5%;scroll-behavior:smooth;overscroll-behavior:contain;touch-action:pan-y;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}body,th,td,input,select,textarea,button{font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;line-height:1.5}html,div,body,span,article,canvas,img,header,footer,section,blockquote,hr,p,h1,h2,h3,h4,h5,h6,ol,dl,dt,dd,table,th,tr,td,form,fieldset,legend,input,textarea,button,nav{margin:0;padding:0;border:0;outline:0;vertical-align:middle;-webkit-margin-before:0;-webkit-margin-after:0}h1,h2,h3,h4,h5,h6{font-weight:bold}a{cursor:pointer}a,a:hover{text-decoration:none}img{border:0;margin:0;padding:0}blockquote{font-weight:bold;margin:0;padding:0}ul,li{list-style:none outside none;margin:0;padding:0}address{font-style:normal}section,nav,article,aside,hgroup,footer,header{display:block}input,textarea,select,button,table{font-size:inherit;font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;line-height:inherit}button{cursor:pointer;overflow:visible;background-color:transparent}button,select{text-transform:none}textarea,input,select{background:0;-webkit-apprearance:none}textarea{resize:none}label{cursor:pointer}legend,caption{display:none;clear:both}fieldset{border:0}i{font-style:normal}*:focus,*:hover{outline:none !important}hr{border-top:1px solid #ccc;margin-block-start:.5em;margin-block-end:.5em}:root{--pretendard:"Pretendard",serif;--jrwhite:#fff;--jrsoftwhite:#fcfcfd;--jrblack:#050505;--brown50:#eff8f5;--brown100:#f0d9c3;--brown200:#e8c7a7;--brown300:#dead7e;--brown400:#d79d65;--brown500:#cd853f;--brown600:#bb7939;--brown700:#925e2d;--brown800:#714923;--brown900:#56381a;--gray100:#ebebeb;--gray200:#c1c1c1;--gray300:#d2d2d2;--gray600:#aeaeae;--gray800:#424245}::selection{color:white;background:#cd853f}::-moz-selection{color:white;background:#cd853f}.block{display:block !important}.inline{display:inline-block}.hidden{display:none;font-size:0}@-webkit-keyframes close_spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes close_spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#ebebeb;border-radius:10px}::-webkit-scrollbar-thumb{background:#56381a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#333}html:not(.jr-show-cases-nav) li:has(>a[href="/cases.html"]),html:not(.jr-show-cases-nav) li:has(>a[href$="/cases.html"]){display:none!important}.header .logo{font-weight:800}.header .logo-title{font-weight:800}.header .logo-tagline,.header .logo .logo-subtext{font-weight:700} .header .gnb_menu .gnb_list>li>a:hover{font-weight:700;text-shadow:0 0 8px rgba(255,255,255,.22)} main{background:#fff;scroll-behavior:smooth;overflow-x:hidden;border-top:0}.contents{border-top:0}.lawyer-slider-container{width:100%;position:relative;z-index:2}.visual .swiper{padding-top:50px}.swiper{width:100%;height:100%}.visual .swiper-slide{margin-bottom:-2rem}.swiper-slide{width:100%;height:auto;display:flex;align-items:flex-end;justify-content:center;transition:all .4s ease}.swiper-slide img{width:100%;height:auto;display:block;transform:scale(0.85);filter:opacity(50%);transition:all .4s ease;object-fit:cover;margin-bottom:-2rem}.swiper-slide-active{z-index:10;bottom:2rem}.swiper-slide-active img{transform:scale(1.3);filter:grayscale(0) brightness(100%)}.lawyer-info{position:absolute;bottom:0;left:-4rem;right:-4rem;width:auto;height:auto;padding:2rem;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;color:#fff;opacity:0;transition:.3s;border-radius:0 0 5px 5px;background:linear-gradient(180deg,rgba(146,94,45,0) 0,rgba(25,25,25,0.8) 100%)}.swiper-slide-active .lawyer-info{opacity:1}.lawyer-info p{color:var(--brown100);font-size:1.6rem}.lawyer-info h3{color:var(--jrwhite);font-size:1.8rem;margin-bottom:.5rem}.lawyer-info h3+p{font-size:1.4rem;color:#aeaeae}#jrMember.visual #jr-hero-design-2 .lawyer-slider-others .lawyer-info p:first-child,#jrMember.visual #jr-hero-design-3 .lawyer-slider-others .lawyer-info p:first-child,#jrMember.visual #jr-hero-design-4 .lawyer-slider-others .lawyer-info p:first-child{font-size:4.2rem !important}.visual .lawyer-slider-others .lawyer-info,.visual .lawyer-slider-others .swiper-slide-active .lawyer-info{background:none !important;background-image:none !important}.review-card{background:#fff;border:1px solid #b0a090;border-radius:20px;padding:40px 30px;box-shadow:0 2px 10px rgba(45,36,25,0.07);transition:all .3s ease;transform:scale(0.9);opacity:.8}.section2 .swiper{overflow:visible}.swiper-slide-active .review-card{transform:scale(1.1);opacity:1;z-index:2}.review-card__profile{margin-bottom:20px;display:flex;flex-direction:column;align-items:center}.review-card__img-box{width:8rem;height:8rem;border-radius:50%;overflow:hidden;margin-bottom:15px;background-color:var(--brown100)}.review-card__img-box img{transform:scale(1.1)}.review-card__img{width:100%;height:100%;object-fit:cover}.review-card__name{display:block;font-size:2rem;font-weight:700;color:var(--brown900);margin-bottom:5px}.review-card__category{display:block;font-size:1.8rem;color:var(--brown800)}.review-card__body{border-top:1px solid var(--brown200);padding-top:20px}.review-card__text{font-size:1.6rem;word-break:keep-all;color:var(--brown800);line-height:1.4;letter-spacing:-.04rem}.review-btn{display:none;width:4.5rem;height:4.5rem;background-color:#fff;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,0.1);color:var(--brown800);transition:all .3s ease}.mobilelayout .review-btn{display:inherit}.review-btn::after{font-size:20px;font-weight:bold;display:block;margin-top:1.2rem}.review-btn:hover{background-color:var(--brown800);color:#fff;transform:scale(1.1)}.review-btn--prev{left:20px}.review-btn--next{right:20px}.visual .lawyer-slider-btn{position:absolute !important;z-index:20;display:flex !important;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;top:58%;transform:translateY(-50%);background:rgba(86,56,26,0.88);border:1px solid rgba(255,255,255,0.18);border-radius:50%;box-shadow:0 4px 16px rgba(56,36,18,0.35);color:#fff;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}.visual .lawyer-slider-btn::after{font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2)}.visual .lawyer-slider-btn:hover:not(:disabled):not(.swiper-button-disabled){background:var(--brown900);border-color:rgba(255,255,255,0.25);box-shadow:0 6px 20px rgba(56,36,18,0.45);transform:translateY(-50%) scale(1.05)}.visual .lawyer-slider-btn:active:not(:disabled):not(.swiper-button-disabled){transform:translateY(-50%) scale(0.97)}.visual .lawyer-slider-btn.swiper-button-disabled{opacity:1;cursor:pointer;transform:translateY(-50%);pointer-events:auto}.visual .lawyer-slider-btn--prev{left:12px}.visual .lawyer-slider-btn--next{right:12px}main{position:relative}.innerWrap{margin:0 auto;width:140rem;padding:0 5rem}.header{height:64px;transition:all .4s ease-in-out;position:fixed;top:0;left:0;z-index:100;background-color:#050505;width:100%;border:0;box-sizing:border-box}.header::before,.header::after{display:none !important;content:none !important}.header .innerWrap{display:flex;align-items:center;justify-content:space-between}.header .logo{transition:color .25s ease,opacity .25s ease;display:flex;letter-spacing:-.1rem;font-size:24px;line-height:64px;color:var(--jrwhite);font-weight:700;text-decoration:none}.header .logo .logo-subtext{font-size:80%;font-weight:600}.header .logo:hover{color:var(--jrwhite);opacity:.9}.header .logo:focus-visible{outline:2px solid rgba(201,162,39,0.8);outline-offset:4px;border-radius:2px}.header .logo i{display:inline;margin-right:.5rem}.header .gnb_menu{transition:all .4s ease-in-out;line-height:64px}.header .gnb_menu ul.gnb_list{display:flex;}.header .gnb_menu .gnb_list{display:flex;flex-wrap:wrap;align-items:center;gap:0;}.header .gnb_menu .gnb_list>li{position:relative;}.header .gnb_menu .gnb_list>li>a{font-size:16px;color:var(--jrsoftwhite);font-weight:300;padding:0 12px;height:100%;line-height:64px;display:block;transition:color 0.25s ease;position:relative;text-decoration:none;}.header .gnb_menu .gnb_list>li>a::after{content:"";position:absolute;left:50%;bottom:15px;width:0;height:2px;background:#c9a227;transition:width 0.25s ease,left 0.25s ease;}.header .gnb_menu .gnb_list>li>a:hover{color:#fff;}.header .gnb_menu .gnb_list>li>a:hover::after{width:calc(100% - 24px);left:12px;}.header .gnb_menu .gnb_list>li>a.current{color:#fff;font-weight:500;}.header .gnb_menu .gnb_list>li>a.current::after{width:calc(100% - 24px);left:12px;background:#c9a227;}.header .gnb_menu .gnb_list>li>a:focus-visible{outline:2px solid rgba(201,162,39,0.8);outline-offset:2px;border-radius:2px;}.gnb_seo{position:relative;}.gnb_seo::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;z-index:199;}.gnb_seo_label{font-size:16px;color:var(--jrsoftwhite);font-weight:300;padding:0 12px;line-height:64px;cursor:pointer;display:block;transition:color 0.22s ease;position:relative;user-select:none;}.gnb_seo_label::after{content:"";display:inline-block;margin-left:0.45rem;vertical-align:0.2em;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;border-bottom:none;transition:transform 0.2s ease;}.gnb_seo:hover .gnb_seo_label,.gnb_seo:focus-within .gnb_seo_label{color:#fff;}.gnb_seo:hover .gnb_seo_label::after,.gnb_seo:focus-within .gnb_seo_label::after{transform:rotate(180deg);}.gnb_seo_list{position:absolute;top:calc(100%+6px);left:0;right:auto;min-width:236px;margin:0;padding:8px 0;list-style:none;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;background:linear-gradient(165deg,#1e1e1e 0%,#121212 100%);border:1px solid rgba(255,255,255,0.12);border-top:2px solid #c9a227;border-radius:14px;box-shadow:0 24px 56px rgba(0,0,0,0.55),0 0 0 1px rgba(201,162,39,0.15),inset 0 1px 0 rgba(255,255,255,0.06);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 0.22s ease,visibility 0.22s ease,transform 0.22s ease;z-index:200;}.gnb_seo:hover .gnb_seo_list,.gnb_seo:focus-within .gnb_seo_list{opacity:1;visibility:visible;transform:translateY(0);}.gnb_seo_list li{display:block;margin:0;}.gnb_seo_list li+li{border-top:1px solid rgba(255,255,255,0.07);}.gnb_seo_list a{font-size:15px;font-weight:400;padding:12px 20px !important;line-height:1.45 !important;height:auto !important;display:block;white-space:nowrap;color:rgba(255,255,255,0.9);transition:background 0.18s ease,color 0.18s ease,padding-left 0.18s ease;}.gnb_util{display:flex;align-items:center;gap:0.5rem;margin-left:0.5rem;}.gnb_btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:var(--jrsoftwhite);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:color 0.25s ease,background 0.25s ease;text-decoration:none;}.gnb_btn::after{display:none !important;}.gnb_btn:hover{color:#fff;background:rgba(255,255,255,0.1);}.gnb_btn:focus-visible{outline:2px solid rgba(201,162,39,0.8);outline-offset:2px;}.gnb_btn svg{display:block;color:currentColor;}.gnb_seo_list a:hover{background:rgba(201,162,39,0.16);color:#fff;padding-left:22px !important;}.gnb_seo_list a:focus-visible{outline:2px solid rgba(201,162,39,0.75);outline-offset:-2px;background:rgba(201,162,39,0.12);}.gnb_seo_list li:first-child a{border-radius:12px 12px 0 0;}.gnb_seo_list li:last-child a{border-radius:0 0 12px 12px;}.header .gnb_menu .gnb_seo_list a.current{color:#fff;font-weight:600;background:rgba(201,162,39,0.2);border-left:3px solid #c9a227;padding-left:17px !important;}.header .gnb_menu .gnb_seo .gnb_seo_list{left:50%;right:auto;transform:translate(-50%,-8px);}.header .gnb_menu .gnb_seo:hover .gnb_seo_list,.header .gnb_menu .gnb_seo:focus-within .gnb_seo_list,.header .gnb_menu .gnb_seo.jr-gnb-dd-open .gnb_seo_list{transform:translate(-50%,0);}.gnb_seo.jr-gnb-dd-open .gnb_seo_list{opacity:1;visibility:visible;transform:translateY(0);}.header .gnb_menu .gnb_seo.jr-gnb-dd-open .gnb_seo_list{transform:translate(-50%,0);}.jr-search-overlay{position:fixed;top:0;left:0;right:0;z-index:10000;background:#1e1e1e;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 20px rgba(0,0,0,0.3);transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility .3s ease}.jr-search-overlay.is-open{transform:translateY(0);opacity:1;visibility:visible}.jr-search-overlay .jr-search-form{flex:1;display:flex;align-items:center;gap:.75rem;max-width:600px;margin:0 auto;width:100%}.jr-search-overlay .jr-search-input{flex:1;padding:.75rem 1rem;font-size:1.5rem;border:0;border-radius:10px;background:#333;color:#fff;outline:0;transition:border-color .2s ease,box-shadow .2s ease}.jr-search-overlay .jr-search-input::placeholder{color:#aaa}.jr-search-overlay .jr-search-input:focus{border-color:#c97f3d}.jr-search-overlay .jr-search-btn{padding:.75rem 1.25rem;font-size:1.5rem;font-weight:500;color:#1e1e1e;background:#c97f3d;border:0;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}.jr-search-overlay .jr-search-btn:hover{background:#d48f4d;color:#1e1e1e}.jr-search-overlay .jr-search-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:rgba(255,255,255,0.9);background:transparent;border:0;border-radius:4px;cursor:pointer;transition:color .2s ease,background .2s ease;flex-shrink:0}.jr-search-overlay .jr-search-close:hover{color:#fff;background:rgba(255,255,255,0.1)}.jr-search-overlay .jr-search-results-area{position:absolute;left:0;right:0;top:100%;margin-top:.75rem;background:#faf9f7;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.25);padding:1rem 1.25rem;max-height:70vh;overflow-y:auto}.jr-search-overlay .jr-search-result{font-size:1.6rem;font-weight:600;color:#2d2018;text-align:center;margin-bottom:.75rem;padding:.75rem 0;line-height:1.45;display:flex;align-items:center;justify-content:center;min-height:2.5em}.jr-search-overlay .jr-search-result.jr-search-no-result{color:#8b4513;font-weight:500}.jr-search-overlay .jr-search-other-wrap{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(45,32,24,0.12)}.jr-search-overlay .jr-search-other-heading{display:block;font-size:.72rem;font-weight:700;color:#2d2018;margin-bottom:.6rem;letter-spacing:-.02em}.jr-search-overlay .jr-search-results-list{max-height:45vh;overflow-y:auto;background:#fff;border-radius:10px;padding:.35rem 0;list-style:none;margin:0;border:1px solid rgba(45,32,24,0.08)}.jr-search-overlay .jr-search-results-list li{margin:0;padding:0;border-bottom:1px solid rgba(45,32,24,0.06)}.jr-search-overlay .jr-search-results-list li:last-child{border-bottom:0}.jr-search-overlay .jr-search-results-list a{display:block;padding:.9rem 1rem;color:#1a1a1a;text-decoration:none;font-size:.84rem;font-weight:500;line-height:1.4;transition:background .2s ease,color .2s ease;border-radius:6px;margin:0 .25rem}.jr-search-overlay .jr-search-results-list a:hover{background:rgba(201,127,61,0.12);color:#1a1a1a}.jr-search-overlay .jr-search-results-list .jr-search-result-title{font-weight:600;color:#1a1a1a;display:block}.jr-search-overlay .jr-search-results-list .jr-search-result-url{font-size:.64rem;color:#6b5b4f;margin-top:.25rem;display:block}.jr-side-menu-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9998;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;}.jr-side-menu-backdrop.is-open{opacity:1;visibility:visible;}.jr-side-menu{position:fixed;top:0;right:0;width:min(340px,88vw);max-width:100%;height:100%;background:linear-gradient(180deg,#f5f9ff 0%,#eef4fc 48%,#e8f1fb 100%);box-shadow:-16px 0 48px rgba(15,40,71,0.22),-4px 0 0 rgba(37,99,235,0.25);z-index:9999;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);overflow-y:auto;display:flex;flex-direction:column;}.jr-side-menu.is-open{transform:translateX(0);}.jr-side-menu-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.25rem 1.25rem 1.5rem;flex-shrink:0;border-bottom:1px solid rgba(148,163,184,0.35);background:linear-gradient(135deg,#0f2847 0%,#0a2a63 100%);}.jr-side-menu-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:#e2e8f0;background:transparent;border:none;border-radius:12px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease;}.jr-side-menu-close:hover{background:rgba(255,255,255,0.12);color:#fff;transform:scale(1.02);}.jr-side-menu-close:active{transform:scale(0.98);background:rgba(255,255,255,0.16);}.jr-side-menu-close svg{display:block;}.jr-side-menu-body{padding:1.25rem 0 2.5rem;flex:1;background:transparent;}.jr-side-menu-all{margin:0;padding:0;font-size:2.35rem;font-weight:700;color:#f8fafc;line-height:1.25;letter-spacing:-0.02em;}.jr-side-menu-all a{color:inherit;text-decoration:none;transition:color 0.2s ease,opacity 0.2s ease;}.jr-side-menu-all a:hover{color:#93c5fd;}.jr-side-menu .jr-side-menu-section{padding:0 1.25rem 1.5rem 1.5rem;margin-bottom:0.75rem;}.jr-side-menu .jr-side-menu-section:last-child{margin-bottom:0;padding-bottom:1.5rem;}.jr-side-menu .jr-side-menu-title{position:relative;font-size:2.25rem;font-weight:700;color:#0f172a;margin:0 0 0.9rem 0;padding:0.75rem 1rem 0.75rem 1.25rem;letter-spacing:-0.02em;line-height:1.3;background:rgba(37,99,235,0.1);border-radius:10px;border-bottom:none;}.jr-side-menu .jr-side-menu-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:70%;min-height:1.2em;background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);border-radius:0 3px 3px 0;}.jr-side-menu-subheading{margin:0.35rem 0 0.5rem 0;padding:0 1.25rem 0 1.5rem;font-size:1.45rem;font-weight:700;color:#475569;letter-spacing:-0.02em;}.jr-side-menu .jr-side-menu-list--sub{margin-bottom:0.9rem;margin-left:0.5rem;}.jr-side-menu .jr-side-menu-list--sub li{padding-left:1.75rem;}.jr-side-menu .jr-side-menu-list{list-style:none !important;margin:0;padding:0;padding-left:0;}.jr-side-menu .jr-side-menu-list li{margin:0 0 0.35rem 0;padding:0;position:relative;padding-left:1.5rem;}.jr-side-menu .jr-side-menu-list li::before{content:"•";position:absolute;left:0;top:50%;transform:translateY(-50%);color:#2563eb;font-size:1.15em;font-weight:700;line-height:1;}.jr-side-menu .jr-side-menu-list a{display:block;padding:0.85rem 1rem 0.85rem 0;font-size:1.575rem;font-weight:500;color:#0f172a;text-decoration:none;border-radius:12px;transition:background 0.2s ease,color 0.2s ease;line-height:1.4;}.jr-side-menu .jr-side-menu-list a:hover{background:rgba(37,99,235,0.1);color:#0a2a63;}.jr-side-menu .jr-side-menu-list a:focus-visible{outline:2px solid rgba(37,99,235,0.45);outline-offset:2px;}.jr-side-menu .jr-side-menu-list a:active{background:rgba(37,99,235,0.14);}.breadcrumb{padding:.8rem 0;margin:7rem auto 0;max-width:140rem;padding-left:5rem;padding-right:5rem;font-size:1.35rem;color:var(--brown700,#8b6914)}.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}.breadcrumb li:not(:last-child)::after{content:">";margin-left:.4rem;color:#999}.breadcrumb a{color:var(--brown800,#714923);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.sect{padding:clamp(5rem,3.269rem+7.69vw,10rem) 0}.visual{margin-top:64px;background:url("/images/main_visual.webp") 50% no-repeat;background-size:cover;width:100%;background-attachment:fixed}.visual .innerWrap{margin-top:0;padding:0}.slogan_wrap{text-align:center;padding:7rem 0 1.5rem 0}.visual .title{text-align:left;margin-left:10rem}.visual .title h1{font-size:clamp(2.5rem,1.808rem+3.08vw,4.5rem);line-height:1.2;color:var(--brown900);margin-bottom:1.5rem;letter-spacing:-.1rem}.visual .title .subtxt{font-size:clamp(1.6rem,1.392rem+0.92vw,2.2rem);color:var(--brown800);letter-spacing:-.1rem;line-height:1.4;text-align:left}.visual .btn_group{display:flex;justify-content:center;gap:2rem;padding-top:clamp(1rem,0.308rem+3.08vw,3rem)}.visual .btn_group .btnRsv{color:var(--jrwhite);border:1px solid var(--jrwhite)}.visual .btn_group .btnRsv i{filter:brightness(0) invert(1)}.visual .btn_group .btnCall{display:none !important;background-color:var(--brown500);color:var(--jrwhite)}.visual .btn_group .btncs{display:flex;align-items:center;gap:.5rem;padding:.8rem 4.5rem;font-size:clamp(1.6rem,1.531rem+0.31vw,1.8rem);border-radius:100rem;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;cursor:pointer;position:relative}.visual .btn_group .btnCall:hover{background-color:var(--brown700,#8b5a2b) !important;color:var(--jrwhite);transform:translateY(-2px)}.visual .btn_group .btnRsv:hover{background-color:var(--brown900);color:var(--jrwhite);border-color:var(--brown900);transform:translateY(-2px)}.visual .btn_group .btncs i{display:inline-block;width:2.2rem;height:2.2rem}.sect{text-align:center}.sect h2{font-size:clamp(2rem,1.308rem+3.08vw,3.5rem);color:var(--brown900);line-height:1.2}.sect .innerWrap{display:flex;flex-direction:column;gap:clamp(3rem,1.269rem+7.69vw,8rem)}.jr-cases-preview-head{display:flex;align-items:center;justify-content:space-between;gap:1.6rem}.jr-cases-preview-head h2{text-align:left}.jr-cases-preview-nav{display:flex;align-items:center;gap:.8rem}.jr-cases-preview-btn{width:4.2rem;height:4.2rem;border-radius:50%;border:1px solid rgba(86,56,26,0.28);background:#fff;color:var(--brown900);font-size:2rem;line-height:1;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.jr-cases-preview-btn:hover{background:var(--brown900);color:#fff}.jr-cases-preview-btn:disabled{opacity:.45;cursor:not-allowed}.jr-cases-preview-track-wrap{overflow:hidden;width:100%;position:relative;padding:.9rem 5.2rem 1.6rem;box-sizing:border-box}.jr-cases-preview-section .jr-cases-preview-track-wrap{margin-top:-1.4rem}.jr-cases-preview-btn--prev,.jr-cases-preview-btn--next{position:absolute;top:50%;transform:translateY(-50%);z-index:3}.jr-cases-preview-btn--prev{left:.6rem}.jr-cases-preview-btn--next{right:.6rem}.jr-cases-preview-track{display:flex;gap:1.6rem;will-change:transform;transition:transform .35s ease;padding-top:.15rem;padding-bottom:.35rem}.jr-cases-preview-card{flex:0 0 calc((100% - 4.8rem) / 4);display:block;text-decoration:none;color:inherit;background:#fffdf9;border:1px solid #b0a090;border-radius:2.2rem;overflow:visible;min-height:33rem;padding:1.8rem 1.6rem 1.75rem;position:relative;transition:transform .2s ease,box-shadow .2s ease}.jr-cases-preview-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,0.1)}.jr-cases-preview-card-chip{position:absolute;top:0;right:1.2rem;z-index:4;background:#8b6b49;color:#fff;border-radius:0 0 1.2rem 1.2rem;padding:.65rem 1.2rem .55rem;font-size:1.35rem;font-weight:700;line-height:1}.jr-cases-preview-card-body{text-align:left;padding-top:4.2rem}.jr-cases-preview-card-cat{display:none}.jr-cases-preview-card-title{font-size:3rem;font-weight:800;color:#2d2419;line-height:1.45;letter-spacing:-.02em;margin:0;min-height:8.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.jr-cases-preview-card-summary{margin-top:1.3rem;color:#5a4b3d;font-size:2rem;line-height:1.65;min-height:10.5rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.jr-cases-preview-card-result{margin-top:.9rem;display:inline-flex;align-items:center;background:#f1e8da;color:#6b5235;border:1px solid #d8c5a8;border-radius:999px;padding:.35rem .95rem;font-size:1.25rem;font-weight:700}.jr-cases-preview-lawyers{margin-top:1.5rem;display:flex;gap:1.4rem;position:relative;z-index:1}.jr-cases-preview-lawyer{display:flex;flex-direction:column;align-items:center;gap:.45rem}.jr-cases-preview-lawyer img{width:6.4rem;height:6.4rem;border-radius:1rem;object-fit:contain;object-position:center top;background:#f2efe9;border:1px solid #ddd7cc;transform-origin:center bottom;transition:transform .28s ease,box-shadow .28s ease;will-change:transform}.jr-cases-preview-card:hover .jr-cases-preview-lawyer img{transform:scale(1.18);box-shadow:0 6px 16px rgba(45,36,25,0.12);z-index:2;position:relative}.jr-cases-preview-card:focus-visible .jr-cases-preview-lawyer img{transform:scale(1.18);box-shadow:0 6px 16px rgba(45,36,25,0.12)}@media(prefers-reduced-motion:reduce){.jr-cases-preview-lawyer img{transition:none}.jr-cases-preview-card:hover .jr-cases-preview-lawyer img,.jr-cases-preview-card:focus-visible .jr-cases-preview-lawyer img{transform:none}}.jr-cases-preview-lawyer span{font-size:1.25rem;color:#4b4035}.jr-cases-preview-empty{font-size:1.6rem;color:var(--brown700);margin-top:1.4rem}.jr-cases-preview-section .jr-section-more-wrap{margin-top:-2.8rem}.section1{background-color:#f9f7f2}.section1 .cont{display:flex;align-items:stretch;gap:1rem}.section1 .cont .lst{width:calc(100% / 3);display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--brown100);padding:0 2rem;gap:.5rem}.section1 .cont .lst:last-child{border-right:0}.section1 .cont .lst .icon-scale{transition:all .4s ease-in-out;display:inline-block;width:5rem;height:5rem;background:url("/images/icon_judgements.svg") no-repeat;background-size:contain}.section1 .cont .lst .jr_result{background-color:var(--brown500);font-weight:700;color:var(--jrwhite);font-size:clamp(1.8rem,1.731rem+0.31vw,2rem);padding:.5rem 2rem;border-radius:2rem}.section1 .cont .lst .jr_category{font-size:clamp(1.6rem,1.531rem+0.31vw,1.8rem);font-weight:500;color:var(--brown900)}.section1 .cont .lst .desc_txt{font-size:clamp(1.6rem,1.531rem+0.31vw,1.8rem);color:var(--brown700)}.section2{background-color:#f5efe6}.section2 .innerWrap{overflow:hidden}.section3{background-color:#f9f7f2}.section3 .cont{padding:3rem;border:1px solid rgba(0,0,0,0.2);border-radius:2rem;display:flex;gap:5rem;align-items:center}.section3 .cont .add_info{display:flex;flex-direction:column;gap:2rem;text-align:left;padding:3rem clamp(1.5rem,0.981rem+2.31vw,3rem);background-color:var(--brown500);color:var(--jrwhite);border-radius:1.5rem}.section3 .cont .add_info hr{border-color:var(--brown600)}.section3 .cont .add_info .jrinfo{font-size:clamp(1.6rem,1.531rem+0.31vw,1.8rem)}.section3 .cont .add_info .jrinfo .add{font-weight:300}.section3 .cont .add_info .name{font-size:clamp(1.8rem,1.385rem+1.85vw,3rem);font-weight:700}.section3 .cont .add_info .location_wrap{display:flex;flex-direction:column;gap:1rem}.section3 .cont .add_info .location_wrap li{flex-direction:column;font-size:clamp(1.4rem,1.331rem+0.31vw,1.6rem);display:flex;gap:1rem}.section3 .cont .add_info .location_wrap span{align-items:center;display:flex;gap:.8rem;border-radius:2rem;width:fit-content;background-color:rgba(255,255,255,0.2);font-weight:500;padding:.4rem 1.5rem}.section3 .cont .add_info .location_wrap i{width:2rem;height:2rem;display:inline-block}.section3 .cont .add_info .map_wrap{display:flex}.section3 .cont .add_info .map_wrap li{margin-right:2rem}.section3 .cont .add_info .map_wrap li a{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:500;color:var(--jrwhite)}.section3 .cont .add_info .map_wrap li a img{width:clamp(4rem,3.308rem+3.08vw,6rem);height:clamp(4rem,3.308rem+3.08vw,6rem)}.section3 .cont .map img{max-width:100%}#jrLocation.section3 .cont{align-items:stretch}#jrLocation.section3 .cont .add_info{flex:1 1 38%;min-width:min(100%,28rem)}#jrLocation.section3 .cont .map{flex:1 1 55%;min-width:0}footer.footer,.footer{background-color:#c2a784;color:var(--jrwhite);font-size:calc(1.62rem * 1.3) !important;line-height:1.82;-webkit-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;margin-top:clamp(2.5rem,2rem+3.5vw,calc(1.62rem * 1.82 * 3));padding-top:clamp(1.25rem,0.85rem+1.5vw,2.75rem) !important;padding-bottom:clamp(2.75rem,1.5rem+2.5vw,calc(1.62rem * 1.82 * 3)) !important}footer.footer::before,footer.footer::after{content:"";display:block;width:100%;height:max(0.65rem,calc(clamp(1.75rem, 1.2rem + 2vw, 4.25rem) + 1.25rem * 1.82));min-height:max(0.4rem,calc(1.75rem + 1.25rem * 1.82))}footer.footer button,footer.footer .new-popup-btn{font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;font-size:calc(1.62rem * 1.3) !important;line-height:1.5}footer.footer .center_lst a{font-size:calc(1.62rem * 1.3) !important;line-height:1.5}.footer .innerWrap{display:flex;justify-content:space-between;box-sizing:border-box;padding-top:clamp(1rem,0.65rem+1.4vw,3rem) !important;padding-bottom:clamp(4.25rem,3rem+5vw,8.5rem) !important}.footer .innerWrap.footer-inner--grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2.25rem,1.15rem+3.2vw,4.5rem);row-gap:2.75rem;align-items:start}.footer .footer-inner--grid .sns.sns--footer-top{grid-column:2;grid-row:1;justify-self:end;align-self:start}.footer .footer-inner--grid .footer__grid-left-copy{grid-column:1;grid-row:2}.footer .footer-inner--grid .footer__grid-right-links{grid-column:2;grid-row:2;justify-self:end;max-width:100%}.footer .footer-inner--grid .footer__grid-left-copy>p:first-of-type{margin-top:0}.footer .footer-inner--grid .footer__grid-right-links .center_lst{margin-top:0}.footer .innerWrap.footer-inner--grid .footer__grid-right-links{gap:.75rem !important}.footer .innerWrap.footer-inner--grid .footer__grid-right-links>.copyright-row{margin-top:0 !important;transform:none !important;box-sizing:border-box !important;padding-top:calc(2 * 0.8 * 1.72 * 1.62rem * 1.3) !important}.footer .innerWrap.footer-inner--grid .footer__grid-bottom-line{margin-top:0 !important;box-sizing:border-box !important;padding-top:calc(2 * 0.8 * 1.72 * 1.62rem * 1.3) !important}.footer .innerWrap.footer-inner--grid .footer__grid-bottom-line .copyright-row{margin-top:0 !important;padding-top:0 !important;transform:none !important}.footer .innerWrap:not(.footer-inner--grid){column-gap:clamp(2rem,1.25rem+2.4vw,4.25rem)}.footer .innerWrap:not(.footer-inner--grid) .float_left{gap:0;max-width:min(100%,52rem)}.footer .innerWrap:not(.footer-inner--grid) .ft_info .jrci{margin-bottom:clamp(1.35rem,1.1rem+0.85vw,2rem)}.footer .innerWrap:not(.footer-inner--grid) .ft_info>p:not(.jrci){font-size:80%;line-height:1.72;margin:.38em 0}.footer .innerWrap:not(.footer-inner--grid) .float_right{padding-top:clamp(0.25rem,0.1rem+0.45vw,0.65rem);gap:clamp(1.35rem,1.05rem+1vw,1.95rem)}.footer .innerWrap:not(.footer-inner--grid) .float_right .sns{gap:clamp(1.85rem,1.55rem+0.95vw,2.35rem)}.footer .innerWrap:not(.footer-inner--grid) .float_right .center_lst{justify-content:flex-end;gap:.45rem .7rem;line-height:1.58}.footer .innerWrap:not(.footer-inner--grid) .float_right .center_lst span{color:rgba(255,255,255,0.78);font-weight:300}.footer .innerWrap:not(.footer-inner--grid) .float_right .center_lst .new-popup-btn{background:0;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:500;line-height:inherit;color:var(--jrwhite);vertical-align:baseline}.footer .innerWrap:not(.footer-inner--grid) .float_right .center_lst .new-popup-btn b{font-weight:700}.footer .innerWrap:not(.footer-inner--grid) .copyright-row{margin-top:.45rem;width:100%;justify-content:flex-end;transform:none}.footer .innerWrap:not(.footer-inner--grid) .float_right .copyright-inline{margin:0;text-align:right;font-size:inherit;font-weight:300;color:var(--jrwhite);line-height:1.58;letter-spacing:-.03em;max-width:52rem;margin-left:auto}.footer .float_left{display:flex;flex-direction:column;gap:5rem}.footer .ft_info{font-size:inherit;color:var(--brown100);letter-spacing:-.08rem}.footer .ft_info .jrci,.footer .footer-inner--grid>.jrci{font-size:150%;font-weight:700;margin-bottom:2rem;color:var(--jrwhite);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;line-height:1.25}.footer .ft_info .jrci .jrsymbol,.footer .footer-inner--grid>.jrci .jrsymbol{display:inline-flex;align-items:center;flex-shrink:0;line-height:0}.footer .footer-inner--grid>.jrci{grid-column:1;grid-row:1;margin-bottom:0}.footer .ft_info .jrci img,.footer .footer-inner--grid>.jrci img{display:block;height:1em;width:auto;max-height:1em;margin:0;object-fit:contain}.footer .ft_info p{font-weight:300}.footer .footer__grid-left-copy p{font-size:80%;line-height:1.72;margin:.28em 0}.footer .ft_jrinfo{color:var(--jrsoftwhite);display:flex;flex-wrap:wrap;gap:0 2rem;font-size:inherit;font-weight:200}.footer .ft_jrinfo span{font-weight:200}.footer .ft_jrinfo button{font-weight:200;color:var(--jrsoftwhite)}.footer .ft_jrinfo button b{font-weight:700}.footer .btnFt_rsv{background-color:var(--brown800);color:var(--jrwhite);padding:1rem 3rem;font-size:inherit;font-weight:500;border-radius:.5rem}.footer .center_lst{display:flex;flex-wrap:wrap;gap:.6rem;white-space:normal;line-height:1.5;font-size:inherit}.footer .center_lst a{color:var(--jrwhite);font-weight:500;font-size:inherit;white-space:normal;line-height:1.5}.footer .center_lst.footer-nav-line{display:block;width:100%;text-align:right;line-height:1.45;word-break:keep-all}.footer .center_lst.footer-nav-line .footer-nav-line__primary{display:inline-block;white-space:nowrap;max-width:min(100%,max-content);overflow-x:auto;vertical-align:baseline;-webkit-overflow-scrolling:touch;scrollbar-width:thin;word-break:normal}.footer .center_lst.footer-nav-line>a,.footer .center_lst.footer-nav-line .footer-nav-line__primary a,.footer .center_lst.footer-nav-line>.footer-legal-btn{display:inline;vertical-align:baseline;font-size:inherit;font-weight:500;line-height:1.45;color:var(--jrwhite);text-decoration:none}.footer .center_lst.footer-nav-line .footer-nav-line__primary a{white-space:nowrap}.footer .center_lst.footer-nav-line>.footer-legal-btn{background:0;border:0;padding:0;margin:0;cursor:pointer;font-family:inherit;font-style:inherit;-webkit-appearance:none;appearance:none}.footer .center_lst.footer-nav-line>.ft_sep{display:inline;font-weight:300;opacity:.95;color:var(--jrwhite);font-size:inherit;line-height:1.45}.footer .center_lst.footer-nav-line>.ft_sep.ft_sep--footer-mob-only{display:none}.footer .center_lst.footer-nav-line>a:hover,.footer .center_lst.footer-nav-line>a:focus-visible,.footer .center_lst.footer-nav-line .footer-nav-line__primary a:hover,.footer .center_lst.footer-nav-line .footer-nav-line__primary a:focus-visible,.footer .center_lst.footer-nav-line>.footer-legal-btn:hover,.footer .center_lst.footer-nav-line>.footer-legal-btn:focus-visible{text-decoration:underline}.footer .footer-legal-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:flex-end;width:100%;white-space:normal;font-size:inherit;line-height:1.5;color:var(--jrwhite)}.footer .footer-legal-row>span:not(.ft_sep){font-weight:400}.footer .footer-legal-row .ft_sep{font-weight:300;opacity:.95}.footer .footer-legal-row .footer-legal-btn{background:0;border:0;padding:0;margin:0;cursor:pointer;font:inherit;font-size:inherit;font-weight:700;color:var(--jrwhite)}.footer .footer-legal-row .footer-legal-btn:hover,.footer .footer-legal-row .footer-legal-btn:focus-visible{text-decoration:underline}.footer .float_right{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;padding-top:clamp(4.25rem,2.75rem+3.2vw,6.35rem);box-sizing:border-box}.footer .float_right:has(.sns--footer-top){gap:2rem;padding-top:max(1.25rem,calc(clamp(4.25rem, 2.75rem + 3.2vw, 6.35rem) - 4.5rem))}.footer .sns.sns--footer-top{width:100%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:2rem}.footer .footer-right-links-stack{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;width:100%;margin-top:0;box-sizing:border-box}.footer .copyright{margin-top:2rem;font-size:inherit;color:rgba(255,255,255,0.9)}.footer .copyright-row{margin-top:1.4rem;display:flex;width:100%;align-items:flex-start;justify-content:flex-end;gap:1rem;flex-wrap:wrap;transform:translateY(-0.4rem)}.footer .copyright-inline{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:.55rem .85rem;width:100%;font-size:inherit;color:rgba(255,255,255,0.92);line-height:1.62}.footer .copyright-lead,.footer .copyright-tail{margin:0;font-weight:300;font-size:80%;color:var(--brown100);line-height:1.72;letter-spacing:-.08rem;white-space:nowrap}.footer .copyright-row .copyright{margin-top:0;white-space:nowrap}.footer .footer-region-accordion{min-width:0;max-width:none}.footer .footer-region-accordion--inline{display:inline-block;vertical-align:baseline}.footer .footer-region-accordion>summary{cursor:pointer;list-style:none;user-select:none;border:0;border-radius:.7rem;padding:0;font-size:80%;font-weight:300;color:var(--brown100);line-height:1.72;letter-spacing:-.08rem;white-space:nowrap}.footer .footer-region-accordion>summary::-webkit-details-marker{display:none}.footer .footer-region-accordion[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}.footer .footer-region-list{margin:0;padding:.8rem 1.2rem .9rem 2rem;border:0;border-bottom-left-radius:.7rem;border-bottom-right-radius:.7rem;background:rgba(255,255,255,0.08);text-align:left;max-height:22rem;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:80%;font-weight:300;line-height:1.72;letter-spacing:-.08rem}.footer .footer-region-list li{margin:.25rem 0;color:var(--brown200);text-align:left;font-size:inherit}.footer .footer-region-list a{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:var(--brown200);text-decoration:none;display:inline-block;text-align:left}.footer .footer-region-list a:hover{text-decoration:underline}.footer .sns{display:flex;gap:2rem}.footer .footer-region-links{font-size:inherit;color:var(--brown200);text-align:left;width:auto;margin-top:0;line-height:1.6}.footer .footer-region-links a{font-size:inherit;color:var(--brown200)}.ico_consult{background:url("/images/icon_pencil.svg") no-repeat;background-size:contain}.ico_call{background:url("/images/icon_phone.svg") no-repeat;background-size:contain}.ico_bus{background:url("/images/icon_bus.svg") no-repeat;background-size:contain}.ico_car{background:url("/images/icon_car.svg") no-repeat;background-size:contain}.icon_ctaWrite{background:url("/images/icon_cs.svg") no-repeat;background-size:contain}.icon_ctakakao{background:url("/images/icon_chat.svg") no-repeat;background-size:contain}.icon_ctanaver{background:url("/images/icon_reservation.svg") no-repeat;background-size:contain}.icon_ctacall{background:url("/images/icon_call.svg") no-repeat;background-size:contain}.ctaWrap{width:8rem;top:50%;transform:translateY(calc(-50% - 1.25rem));right:2rem;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;gap:2rem}.ctaWrap .jr-cta-chatbot-slot-wrap{width:100%;margin:0;padding:0 0 .25rem;list-style:none;position:relative;z-index:3}.ctaWrap .jr-cta-chatbot-slot-wrap .jr-cta-chatbot-mount{width:100%;display:flex;justify-content:center;align-items:center;flex-shrink:0;min-height:0}.ctaWrap .ctaCs{width:100%;overflow:visible;background-color:var(--jrwhite);box-shadow:0 8px 28px rgba(0,0,0,0.14);border-radius:3.2rem 3.2rem 10rem 10rem;display:flex;padding-top:2.85rem;padding-bottom:2rem;flex-direction:column;align-items:center;gap:1rem;align-self:stretch}.ctaWrap .ctaCs .jrcall{background-color:var(--brown700);display:flex;border-radius:50%;width:7.35rem;height:7.35rem;min-height:7.35rem;max-width:calc(100% - 0.35rem);margin:-4.65rem auto .35rem;padding:0;flex-direction:column;justify-content:center;align-items:center;align-self:center;flex-shrink:0;box-shadow:0 6px 18px rgba(45,36,25,0.38);position:relative;z-index:2}.ctaWrap .ctaCs .jrcall p{color:var(--jrwhite);font-size:1.35rem;font-weight:600;line-height:1.15;text-align:center}.ctaWrap .ctaCs .jrcall a.jrcall-tel .callnum{white-space:nowrap;line-height:1.1}.ctaWrap .ctaCs .jrcall a.jrcall-tel{color:inherit;text-decoration:none;display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;width:100%;height:100%;min-height:0;padding:.85rem .4rem;box-sizing:border-box;border-radius:50%}.ctaWrap .ctaCs .jrcall a.jrcall-tel:hover{opacity:.94}.ctaWrap .ctaCs .jrcall a.jrcall-tel:focus-visible{outline:2px solid rgba(255,255,255,0.9);outline-offset:2px}.ctaWrap .ctaCs li{display:block;width:100%}.ctaWrap .ctaCs a{width:100%;height:100%;display:flex;padding:5px 0;flex-direction:column;align-items:center;gap:5px;align-self:stretch;text-align:center;color:var(--gray800);font-size:1.4rem;font-weight:600}.ctaWrap .ctaCs a i{display:inline-block;width:3rem;height:3rem}.ctaWrap .btntop{display:flex;width:5rem;height:5rem;flex-direction:column;justify-content:center;align-items:center;border-radius:10rem;background:rgba(255,255,255,0.6);box-shadow:0 0 20px 0 rgba(0,0,0,0.1);font-size:0}.ctaWrap .btntop i{background:url("/images/icon_top.svg") no-repeat;background-size:contain;font-size:0;display:inline-block;width:1.6rem;height:1.6rem}.ctaWrap .jr-cta-info-nav{width:100%;list-style:none;margin:0;padding:0}.ctaWrap .jr-info-nav-details{width:100%;margin:0;padding:0;border:0}.ctaWrap .jr-info-nav-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;padding:.55rem .6rem;margin:0 .2rem;box-sizing:border-box;font-size:1.12rem;font-weight:700;color:var(--gray800);background:linear-gradient(180deg,#f7f3ed 0,#ebe3d8 100%);border:1px solid rgba(45,36,25,0.14);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.75)}.ctaWrap .jr-info-nav-summary::-webkit-details-marker{display:none}.ctaWrap .jr-info-nav-summary::marker{content:""}.ctaWrap .jr-info-nav-label{flex:1;text-align:center;line-height:1.2;letter-spacing:-.03em}.ctaWrap .jr-info-nav-chevron{width:.42rem;height:.42rem;border-right:2px solid var(--brown700);border-bottom:2px solid var(--brown700);transform:rotate(45deg);margin-right:.2rem;flex-shrink:0;transition:transform .2s ease}.ctaWrap .jr-info-nav-details[open] .jr-info-nav-chevron{transform:rotate(-135deg);margin-top:.15rem}.ctaWrap .jr-info-nav-panel{margin:.4rem .15rem 0;padding:.35rem .2rem .45rem;max-height:15rem;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-radius:.9rem;background:rgba(255,255,255,0.98);border:1px solid rgba(45,36,25,0.09);box-shadow:0 5px 16px rgba(0,0,0,0.07)}.ctaWrap .jr-info-nav-list{list-style:none;margin:0;padding:0}.ctaWrap .jr-info-nav-list li{margin:0;padding:0;border-bottom:1px solid rgba(45,36,25,0.07)}.ctaWrap .jr-info-nav-list li:last-child{border-bottom:0}.ctaWrap .jr-info-nav-list a{display:block;padding:.48rem .4rem;font-size:1.05rem;font-weight:500;line-height:1.28;color:var(--brown800);text-decoration:none;text-align:left;word-break:keep-all;overflow-wrap:break-word;min-height:0;height:auto}.ctaWrap .jr-info-nav-list a:hover{background:rgba(139,90,43,0.09);color:#2d2419}.subpage.jr-info-article .seo-cta .jr-cta-more-nav{margin-top:1.35rem;max-width:none;width:100%;margin-left:0;margin-right:0;box-sizing:border-box}.subpage.jr-info-article .jr-info-bottom-select-wrap{position:relative;width:100%}.subpage.jr-info-article .jr-info-bottom-select-wrap--in-cta{max-width:100%;width:100%}.subpage.jr-info-article .jr-info-bottom-select-wrap:has(>.jr-info-bottom-select)::after{content:"";position:absolute;right:1.05rem;top:50%;width:.55rem;height:.55rem;margin-top:-.32rem;border-right:2px solid var(--brown700,#8b5a2b);border-bottom:2px solid var(--brown700,#8b5a2b);transform:rotate(45deg);pointer-events:none;opacity:.85}.subpage.jr-info-article .jr-info-bottom-select{width:100%;max-width:100%;margin:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;padding:.88rem 2.6rem .88rem 1.05rem;font-size:clamp(1.38rem,1.15rem+0.45vw,1.52rem);font-weight:600;font-family:inherit;line-height:1.35;color:#2d2419;letter-spacing:-.02em;background:linear-gradient(180deg,#fffefb 0,#f6f1eb 100%);border:1px solid rgba(45,36,25,0.16);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 2px 10px rgba(45,36,25,0.06);cursor:pointer;word-break:keep-all}.subpage.jr-info-article .jr-info-bottom-select--in-cta{background:rgba(255,255,255,0.94);text-align:center;border-radius:14px;padding:.95rem 2.75rem}.subpage.jr-info-article .jr-info-bottom-select:hover{border-color:rgba(45,36,25,0.24);background:linear-gradient(180deg,#fff 0,#faf5ef 100%)}.subpage.jr-info-article .jr-info-bottom-select--in-cta:hover{background:#fff}.subpage.jr-info-article .jr-info-bottom-select:focus{outline:0;border-color:var(--brown600,#a67c52);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 0 0 3px rgba(139,90,43,0.22)}.subpage.jr-info-article .jr-info-bottom-select option{font-weight:500;padding:.35rem .5rem}.subpage.jr-info-article .jr-info-bottom-details{width:100%;max-width:100%;margin:0;border:0;padding:0}.subpage.jr-info-article .jr-info-bottom-summary{list-style:none;cursor:pointer;position:relative;width:100%;max-width:100%;margin:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;padding:.88rem 2.6rem .88rem 1.05rem;font-size:clamp(1.38rem,1.15rem+0.45vw,1.52rem);font-weight:600;font-family:inherit;line-height:1.35;color:#2d2419;letter-spacing:-.02em;text-align:center;background:linear-gradient(180deg,#fffefb 0,#f6f1eb 100%);border:1px solid rgba(45,36,25,0.16);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 2px 10px rgba(45,36,25,0.06);word-break:keep-all}.subpage.jr-info-article .jr-info-bottom-summary::after{content:"";position:absolute;right:1.05rem;top:50%;width:.55rem;height:.55rem;margin-top:-.32rem;border-right:2px solid var(--brown700,#8b5a2b);border-bottom:2px solid var(--brown700,#8b5a2b);transform:rotate(45deg);pointer-events:none;opacity:.85;transition:transform .2s ease}.subpage.jr-info-article .jr-info-bottom-details[open]>.jr-info-bottom-summary::after{transform:rotate(-135deg);margin-top:.05rem}.subpage.jr-info-article .jr-info-bottom-summary::-webkit-details-marker{display:none}.subpage.jr-info-article .jr-info-bottom-summary::marker{content:""}.subpage.jr-info-article .jr-info-bottom-details--in-cta .jr-info-bottom-summary{background:rgba(255,255,255,0.94);border-radius:14px;padding:.95rem 2.75rem}.subpage.jr-info-article .jr-info-bottom-summary:hover{border-color:rgba(45,36,25,0.24);background:linear-gradient(180deg,#fff 0,#faf5ef 100%)}.subpage.jr-info-article .jr-info-bottom-details--in-cta .jr-info-bottom-summary:hover{background:#fff}.subpage.jr-info-article .jr-info-bottom-summary:focus{outline:0;border-color:var(--brown600,#a67c52);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 0 0 3px rgba(139,90,43,0.22)}.subpage.jr-info-article .jr-info-bottom-panel{margin:.55rem 0 0;padding:.4rem .35rem .5rem;max-height:min(22rem,52vh);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;text-align:left;border-radius:.95rem;background:rgba(255,255,255,0.98);border:1px solid rgba(45,36,25,0.1);box-shadow:0 6px 18px rgba(45,36,25,0.08)}.subpage.jr-info-article .jr-info-bottom-details[open]>.jr-info-bottom-summary{border-bottom-left-radius:0;border-bottom-right-radius:0}.subpage.jr-info-article .jr-info-bottom-list{list-style:none;margin:0;padding:0;text-align:left}.subpage.jr-info-article .jr-info-bottom-list li{margin:0;padding:0;border-bottom:1px solid rgba(45,36,25,0.07);text-align:left}.subpage.jr-info-article .jr-info-bottom-list li:last-child{border-bottom:0}.subpage.jr-info-article .jr-info-bottom-list a{display:block;padding:.52rem .55rem;font-size:clamp(1.22rem,1.05rem+0.35vw,1.38rem);font-weight:500;line-height:1.35;color:var(--brown800,#714923);text-decoration:none;text-align:left;word-break:keep-all;overflow-wrap:break-word}.subpage.jr-info-article .jr-info-bottom-list a:hover{background:rgba(139,90,43,0.09);color:#2d2419}.subpage.jr-info-article .sect>.innerWrap>p.seo-reviewer{max-width:680px;width:100%;margin-left:0;margin-right:auto;box-sizing:border-box}.naviTabbar{display:none;z-index:100;width:100%;bottom:0;position:fixed;border-top:1px solid var(--brown100);background-color:var(--jrwhite)}.naviTabbar .ctaCs{display:flex;align-items:center;align-self:stretch}.naviTabbar .ctaCs li{width:calc(100% / 4)}.naviTabbar .ctaCs a{width:100%;height:100%;display:flex;padding:10px 0;flex-direction:column;align-items:center;flex:1 0 0;align-self:stretch;color:var(--gray800);font-size:1.4rem;font-weight:600;gap:5px}.naviTabbar .ctaCs a i{display:inline-block;width:3rem;height:3rem}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.45);backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center;padding:1rem;box-sizing:border-box}.modal-content{padding:4rem;border-radius:1.2rem;position:relative;text-align:center;animation:slideDown .3s ease-out}.close-btn{position:absolute;top:1rem;right:1.25rem;font-size:1.75rem;cursor:pointer;color:#666;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .2s,background .2s}.close-btn:hover{color:var(--brown800,#714923);background:rgba(113,73,35,0.08)}.csModal,.termModal{width:50rem;max-width:100%;box-sizing:border-box}.csModal{background:#faf8f5;border:1px solid rgba(113,73,35,0.15);box-shadow:0 20px 60px rgba(0,0,0,0.2)}.termModal{background:rgba(29,29,31,0.9);border:1px solid #797979}.csModal h2,.termModal h2{font-size:clamp(1.8rem,1.662rem+0.62vw,2.2rem);font-weight:700;margin:0 0 .5rem 0}.csModal h2{color:var(--brown900,#4a3520)}.termModal h2{color:var(--jrwhite)}.csModal header p{color:#5c4a3a;font-size:1.35rem;line-height:1.5;margin:.35rem 0}.csModal .csModal-header{margin-bottom:.5rem}.csModal .subinfo{margin:.5rem 0 1rem 0;color:#c44;font-size:1.25rem;font-weight:600;letter-spacing:.02em}.csModal .csModal-desc{margin-top:.25rem}.csModal-desc__part{display:inline}.csModal-desc__part+.csModal-desc__part::before{content:" "}.csModal .csForm p{width:100%;margin:0}.csModal .csForm textarea{font-size:1.05rem;width:100%;margin:0 0 1rem 0;padding:1rem 1.25rem;border-radius:12px;border:1px solid rgba(113,73,35,0.25);background:#fff;color:#333;min-height:5rem;resize:vertical;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.csModal .csForm textarea:focus{outline:0;border-color:var(--brown500,#a67c52);box-shadow:0 0 0 3px rgba(113,73,35,0.12)}.csModal .csForm textarea::placeholder{color:#999}.csModal .csForm input{font-size:1.05rem;width:100%;margin:0 0 1rem 0;padding:1rem 1.25rem;border-radius:12px;border:1px solid rgba(113,73,35,0.25);background:#fff;color:#333;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.csModal .csForm input:focus{outline:0;border-color:var(--brown500,#a67c52);box-shadow:0 0 0 3px rgba(113,73,35,0.12)}.csModal .csForm input::placeholder{color:#999}.csModal .csForm{margin:1.75rem 0 1.5rem 0;text-align:left}.csModal .submit{border-radius:12px;background:var(--brown800,#714923);font-size:1.15rem;padding:1rem 3rem;font-weight:600;color:#fff;border:0;cursor:pointer;transition:background .2s,transform .15s;box-shadow:0 4px 14px rgba(113,73,35,0.3)}.csModal .submit:hover{background:var(--brown900,#4a3520);transform:translateY(-1px)}.csModal .submit:active{transform:translateY(0)}.termModal .submit{border-radius:4rem;background:var(--jrsoftwhite);font-size:1.6rem;padding:.8rem 5rem;font-weight:700;color:var(--gray800);border:0;cursor:pointer}.modal-content.termModal{padding:4rem 2rem}.termModal h2{padding-bottom:2rem}.termModal .txt_area{height:50vh;overflow-y:auto;color:var(--gray300);font-size:1.4rem;font-weight:300;text-align:left}.termModal .txt_area b{font-size:1.6rem;font-weight:500}@keyframes slideDown{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.mobilelayout .brMo{display:block}.mobilelayout .header{height:64px;overflow:hidden}.mobilelayout .header .innerWrap{min-height:0;height:100%}.mobilelayout .header .gnb_menu{line-height:64px}.mobilelayout .header .logo{font-size:1.8rem;line-height:64px;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobilelayout .naviTabbar{display:inherit}.mobilelayout .ctaWrap{display:none}.mobilelayout .csModal{width:100%;margin:auto 2rem}@media screen and (max-width:1500px){.innerWrap{width:100%;padding:0 5rem}}@media screen and (max-width:1200px){.innerWrap{padding:0 2rem}.header .innerWrap{gap:1rem}.header .logo{flex:1 1 auto;min-width:0;font-size:2rem;letter-spacing:-.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header .gnb_menu .gnb_list>li>a{font-size:14px;padding:0 8px}}@media screen and (max-width:950px){.innerWrap{width:100%;padding:0 1rem}.header .logo{font-size:1.7rem;line-height:64px;letter-spacing:-.04rem;max-width:calc(100vw - 8.5rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.visual .btn_group .btnCall{display:flex !important}.visual{margin-top:64px}.header .gnb_menu{display:flex !important}.header .gnb_menu .gnb_list>li:not(.gnb_util){display:none !important}.header .gnb_menu .gnb_list{display:flex !important;align-items:center;gap:.25rem}.visual .btn_group .btncs i{height:2rem;width:2rem}.visual .innerWrap{margin-top:0;padding-left:0}.visual .title{margin-left:0}.section1 .cont .lst .icon-scale{width:3rem;height:3rem}.footer .innerWrap{flex-direction:column;padding-top:clamp(0.85rem,0.45rem+1.8vw,2.5rem) !important;padding-bottom:clamp(3.5rem,8vw,6.5rem) !important}footer.footer,.footer{font-size:calc(0.92 * 1.62rem * 1.3) !important;margin-top:clamp(2rem,1.5rem+3vw,calc(0.92 * 1.62rem * 1.82 * 3));padding-top:clamp(1rem,0.65rem+1.8vw,2.25rem) !important;padding-bottom:clamp(2rem,1.25rem+2.5vw,calc(0.92 * 1.62rem * 1.82 * 3)) !important}footer.footer button,footer.footer .new-popup-btn,footer.footer .center_lst a{font-size:calc(0.92 * 1.62rem * 1.3) !important}footer.footer::before,footer.footer::after{height:max(0.55rem,calc(clamp(1.35rem, 3vw, 3.5rem) + 0.85 * 1.62rem * 1.82));min-height:max(0.45rem,calc(1.5rem + 0.85 * 1.62rem * 1.82))}.footer .innerWrap.footer-inner--grid{grid-template-columns:1fr;row-gap:2.75rem}.footer .footer-inner--grid .sns.sns--footer-top{grid-column:1;grid-row:1;justify-self:start}.footer .footer-inner--grid>.jrci{grid-column:1;grid-row:2}.footer .footer-inner--grid .footer__grid-left-copy{grid-column:1;grid-row:3}.footer .footer-inner--grid .footer__grid-right-links{grid-column:1;grid-row:4;align-items:flex-end;justify-self:stretch}.footer .footer-inner--grid .footer__grid-right-links .center_lst.footer-nav-line{text-align:right}.footer .innerWrap:not(.footer-inner--grid) .float_right .center_lst{justify-content:flex-start}.footer .innerWrap:not(.footer-inner--grid) .float_right .copyright-inline{text-align:left;margin-left:0;max-width:none;justify-content:flex-start}.footer .innerWrap:not(.footer-inner--grid) .copyright-row{justify-content:flex-start}.footer .float_right{align-items:flex-start;padding-top:0;gap:.35rem}.footer .float_right:has(.sns--footer-top){gap:2rem;padding-top:0}.footer .sns.sns--footer-top{justify-content:flex-start;width:100%}.footer .footer-right-links-stack{margin-top:0}.footer .footer-legal-row{justify-content:flex-start;align-items:flex-start;gap:.35rem .6rem;line-height:1.45}.footer .center_lst a{line-height:1.45}.footer .center_lst{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.35rem .6rem;line-height:1.45}.footer .center_lst.footer-nav-line{overflow-x:visible;text-align:left;line-height:1.5}.footer .center_lst.footer-nav-line .footer-nav-line__br{display:none}.footer .center_lst.footer-nav-line>.ft_sep.ft_sep--footer-mob-only{display:inline}.footer .center_lst.footer-nav-line>a,.footer .center_lst.footer-nav-line .footer-nav-line__primary a,.footer .center_lst.footer-nav-line>.footer-legal-btn,.footer .center_lst.footer-nav-line>.ft_sep{line-height:1.5}.footer .center_lst::-webkit-scrollbar{display:none}.footer .float_left{gap:2rem;margin-bottom:2rem}.footer .copyright-row{justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:.85rem}.footer .copyright-inline{justify-content:flex-start}.footer .copyright-lead,.footer .copyright-tail{white-space:normal}.footer .copyright-row .copyright{white-space:normal;text-align:left;width:100%;align-self:stretch}.footer .copyright-row .footer-region-accordion:not(.footer-region-accordion--inline){width:100%;max-width:100%}.footer .copyright-row .footer-region-accordion:not(.footer-region-accordion--inline)>summary{text-align:left;white-space:normal}.footer .copyright-row .footer-region-accordion--inline{width:auto;max-width:100%}.footer .copyright-row .footer-region-accordion--inline>summary{text-align:left;white-space:normal}.footer .sns img{width:3rem}.visual .btn_group .btncs{padding:.8rem 3rem}.section1 .cont{flex-direction:column;gap:0}.jr-cases-preview-head{align-items:flex-start;flex-direction:column}.jr-cases-preview-track{gap:1.2rem}.jr-cases-preview-track-wrap{padding:.85rem 4.2rem 1.4rem}.jr-cases-preview-card{flex:0 0 100%;min-height:0;padding-bottom:.1rem}.jr-cases-preview-card-body{padding-top:2.6rem}.jr-cases-preview-card-title{font-size:2.2rem;min-height:6.9rem;-webkit-line-clamp:3;line-clamp:3}.jr-cases-preview-card-summary{margin-top:.45rem;font-size:1.8rem;min-height:6.2rem}.jr-cases-preview-card-result{margin-top:1.95rem}.jr-cases-preview-lawyers{margin-top:.55rem;gap:1rem}.jr-cases-preview-lawyer{gap:.2rem}.jr-cases-preview-btn{width:3.6rem;height:3.6rem;font-size:1.7rem}.jr-cases-preview-btn--prev{left:.2rem}.jr-cases-preview-btn--next{right:.2rem}.jr-cases-preview-nav{width:100%;justify-content:flex-end}.section1 .cont .lst{width:100%;border-right:0;margin-bottom:2rem;border-bottom:1px solid #ccc;padding-bottom:2rem}.swiper-slide-active .review-card{transform:scale(1)}.swiper-wrapper{align-items:flex-start}.ctaWrap{display:none}.modal-content{padding:4rem 2rem}.section1 .cont .lst:last-child{border-bottom:0}}.subpage .page-hero:not(.jr-article-hero){margin-top:64px !important}@media screen and (max-width:640px){.header .logo{font-size:1.45rem;letter-spacing:-.02rem;max-width:calc(100vw - 8rem)}}@media screen and (max-width:480px){.header .logo{font-size:1.28rem;max-width:calc(100vw - 7.2rem)}}@media screen and (max-width:767px){.section3 .cont{flex-direction:column;border:0;border-radius:0;padding:0;gap:2.2rem}.section3 .cont .add_info{width:100%;box-sizing:border-box;border-radius:1.5rem}#jrLocation.section3 .cont .add_info,#jrLocation.section3 .cont .map{flex:0 0 auto;width:100%;max-width:100%}.section3 .cont .map{min-height:0 !important;height:auto !important;overflow:hidden;display:block;padding:0;line-height:0}.section3 .cont .map img{width:100%;max-width:100%;height:auto;transform:none;transform-origin:center center;display:block;object-fit:contain}}@media screen and (min-width:951px){.header .gnb_menu .gnb_list{flex-wrap:nowrap}}@media screen and (min-width:951px) and (max-width:1280px){.header .gnb_menu ul a{font-size:15px;padding:0 9px}}/* index.html page-specific styles */ /* 메인 비주얼: 왼쪽 슬로건+나머지 변호사 슬라이더, 오른쪽 곽윤서 고정 */ .visual .visual_two_col { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; box-sizing: border-box; } .visual .visual_left { flex: 1 1 54%; min-width: 0; } .visual .visual_right { flex: 0 0 auto; width: 100%; } @media (min-width: 900px) { .visual .visual_two_col { display: grid !important; /* 좌측 롤링 열 비중↑·우측 히어로 max 살짝 축소 — PC에서 슬라이드 가로 여유 */ grid-template-columns: minmax(0, 1.15fr) minmax(300px, 600px); /* 디자인 1 히어로: +20% 적용분 대비 세로 10% 축소(=원본 대비 약 +8%) */ grid-template-rows: minmax(clamp(calc(58rem * 1.08), calc(70vh * 1.08), calc(82rem * 1.08)), auto); align-items: end; align-content: stretch; gap: 0 1rem; min-height: clamp(calc(58rem * 1.08), calc(70vh * 1.08), calc(82rem * 1.08)); } .visual .visual_left_stack { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; align-self: stretch; min-width: 0; width: 100%; min-height: 100%; overflow-x: visible; } .visual .visual_left { flex: 0 0 auto; min-width: 0; padding-bottom: 0; } .visual .visual_right { grid-column: 2; grid-row: 1; width: 100%; max-width: 600px; min-width: 0; justify-self: end; align-self: end; overflow: visible; } .visual .lawyer-slider-container { flex: 0 0 auto; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 0; } .visual .lawyer-slider-container .swiper { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } .visual .lawyer-slider-container.lawyer-slider-others { padding-bottom: 0; margin-bottom: 0; } #jrMember.visual .visual_left_stack > .lawyer-slider-container.lawyer-slider-others { --jr-lawyer-bleed-l: clamp(3rem, 9vw, 11rem); --jr-lawyer-bleed-r: clamp(0.75rem, 1.8vw, 2rem); margin-left: calc(-1 * var(--jr-lawyer-bleed-l)); margin-right: calc(-1 * var(--jr-lawyer-bleed-r)); width: calc(100% + var(--jr-lawyer-bleed-l) + var(--jr-lawyer-bleed-r)); max-width: none; box-sizing: border-box; } #jrMember.visual .lawyer-slider-container { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } #jrMember.visual .lawyer-slider-container::-webkit-scrollbar { display: none; width: 0; height: 0; } #jrMember.visual .lawyer-slider-container .swiper { padding-left: 0; padding-right: 0; box-sizing: border-box; overflow: hidden; } .visual .lawyer-slider-others .swiper-slide { box-sizing: border-box; } .visual .title .subtxt .jr-subtxt-nowrap-pc { white-space: nowrap; } .visual .title .subtxt .jr-subtxt-nowrap-pc .jr-subtxt-br-mo { display: none; } } .visual .lawyer-slider-container.lawyer-slider-others { position: relative; } /* PC: 뷰포트 90% 폭(가운데) + 슬라이드 5등분(cqi=swiper) — 5장 정확히, 양끝 걸침 없음 */ /* 파트너 교체 시 과한 확대 없이 우측에서 밀려 들어오는 느낌 */ /* 들어오는 방향(오른쪽) 체감 강화를 위해 파트너 프레임 안에서 슬라이드 */ /* scale(1.3)·transform-origin bottom 시 상단이 잘리지 않게 */ /* 디자인4: 첨부 시안처럼 듀오만 고정 크게 노출 (롤링 없음) */ /* 디자인4: 요청사항 - 상단 문구/설명/버튼 제거 */ /* 디자인4: 좌측 5명 라인업은 비표시, 듀오 컨테이너에 전원을 동일 카드로 배치 */ /* style.css 구 슬라이더 규칙(음수 마진·active bottom) 해제 — 롤링 하단 정렬 */ .visual .lawyer-slider-others .swiper-slide { margin-bottom: 0 !important; } .visual .lawyer-slider-others .swiper-slide img { margin-bottom: 0 !important; } @media (max-width: 899px) { .visual .visual_left_stack { display: contents; } .visual .title .subtxt .jr-subtxt-nowrap-pc .jr-subtxt-br-mo { display: block; content: ""; } .visual .visual_two_col { flex-direction: column; align-items: stretch !important; gap: 0 !important; row-gap: 0 !important; } .visual .jr-hero-fixed { margin-top: 0 !important; } .visual .innerWrap { padding-left: 0 !important; } .visual .slogan_wrap { text-align: center !important; margin-left: 0 !important; width: 100%; display: flex; flex-direction: column; align-items: center; } .visual .title { margin-left: 0 !important; width: 100%; text-align: center !important; } .visual .title h1, .visual .title .subtxt { text-align: center !important; } .visual .btn_group { gap: 1rem; padding-top: 1.2rem !important; } .visual .btn_group .btncs { padding: 0.8rem 2rem !important; } .visual .lawyer-slider-container { order: 3; background: #f5f2ee; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px)) max(0.25rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); box-sizing: border-box; overflow-x: hidden; } } .jr-hero-fixed { position: relative; text-align: right; margin-top: 2rem; } .jr-hero-fixed { cursor: pointer; outline: none; border: none; } .jr-hero-fixed:focus { outline: none; } .jr-hero-fixed .hero-fixed-img { width: 100%; max-width: 420px; height: auto; min-height: 280px; display: block; margin-left: auto; object-fit: cover; object-position: center top; border-radius: 0 0 8px 8px; transition: transform 0.3s ease; } @media (min-width: 900px) { .jr-hero-fixed { margin-top: 0; } .jr-hero-fixed .hero-fixed-img { max-width: min(420px, 100%); max-height: min(72vh, 640px); min-height: 0; width: 100%; object-fit: cover; object-position: center 8%; } } /* 곽윤서 히어로: 배경 그라데이션 없음 — 글자는 그림자로 대비 */ .jr-hero-fixed { overflow: visible; } .jr-hero-fixed.jr-hero-fixed--primary { --jr-hero-primary-badge-w: calc(min(18rem, 42vw) * 0.8); } .jr-hero-fixed--primary .jr-hero-primary-badge { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.56rem; width: var(--jr-hero-primary-badge-w); max-width: var(--jr-hero-primary-badge-w); min-height: 4rem; padding: 0.34rem 1.12rem 0.34rem 0.38rem; border: 1px solid rgba(176, 140, 55, 0.42); border-radius: 999px; background: linear-gradient( 165deg, rgba(255, 252, 245, 0.98) 0%, rgba(250, 236, 205, 0.96) 55%, rgba(238, 218, 175, 0.94) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(90, 65, 20, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; color: #6e5418; font-size: 1.24rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(255, 236, 200, 0.55), 0 1px 2px rgba(40, 28, 5, 0.12); white-space: nowrap; box-sizing: border-box; } /* 역할 배지: 원형 배경 + ::after에서 hero-role-badge 실루엣만 금색 그라데이션(메달 pill과 통일) */ .jr-hero-fixed--primary .jr-hero-primary-badge::before { content: ""; display: inline-block; width: 3.18rem; height: 3.18rem; flex: 0 0 3.18rem; border-radius: 999px; background: linear-gradient(155deg, #fffcf5 0%, #f2e2bc 50%, #e4ce94 100%); border: 1px solid rgba(168, 130, 45, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(100, 75, 25, 0.12); } .jr-hero-fixed--primary .jr-hero-primary-badge::after { content: ""; position: absolute; left: 0.38rem; top: 50%; width: 3.18rem; height: 3.18rem; transform: translateY(-50%); pointer-events: none; background: linear-gradient( 155deg, #c9a33a 0%, #a67c00 35%, #7a5900 65%, #4a3206 100% ); -webkit-mask-image: url("/images/CI_symbol.svg"); -webkit-mask-size: 76%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-image: url("/images/CI_symbol.svg"); mask-size: 76%; mask-position: center; mask-repeat: no-repeat; filter: contrast(1.14) saturate(1.1) drop-shadow(0 0 0.55px rgba(28, 18, 4, 0.65)) drop-shadow(0 0.6px 0.8px rgba(28, 18, 4, 0.4)); } /* 사진 오른쪽: 금메달 배지 + 그 아래 역할 배지(세로 스택) */ .jr-hero-fixed--primary .jr-hero-primary-badge-right-stack { position: absolute; left: 100%; top: 2.25rem; margin-left: 0.45rem; transform: translate(-90px, -100px); z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 0.42rem; pointer-events: none; } .jr-hero-fixed--primary .jr-hero-primary-badge-right { position: static; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.56rem; width: var(--jr-hero-primary-badge-w); max-width: var(--jr-hero-primary-badge-w); min-height: 4rem; padding: 0.34rem 1.12rem 0.34rem 0.38rem; border: 1px solid rgba(176, 140, 55, 0.42); border-radius: 999px; background: linear-gradient( 165deg, rgba(255, 252, 245, 0.98) 0%, rgba(250, 236, 205, 0.96) 55%, rgba(238, 218, 175, 0.94) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(90, 65, 20, 0.08); color: #6e5418; font-size: 1.24rem; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(255, 236, 200, 0.55), 0 1px 2px rgba(40, 28, 5, 0.12); box-sizing: border-box; } .jr-hero-fixed--primary .jr-hero-primary-badge-right__medal { width: auto; height: 3.75rem; max-height: 4.5rem; display: block; flex: 0 0 auto; object-fit: contain; } .jr-hero-fixed--primary .jr-hero-primary-badge-right__inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; line-height: 1.18; flex: 1 1 auto; min-width: 0; } .jr-hero-fixed--primary .jr-hero-primary-badge-right__l1, .jr-hero-fixed--primary .jr-hero-primary-badge-right__l2 { font-size: inherit; font-weight: 700; letter-spacing: inherit; white-space: nowrap; } .jr-hero-fixed--primary.jr-hero-primary--no-kbar-cert .jr-hero-primary-badge-right { display: none !important; } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right__medal { display: none !important; } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right { position: relative; padding-left: calc(0.38rem + 3.18rem + 0.65rem); } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::before { content: ""; position: absolute; left: 0.38rem; top: 50%; width: 3.18rem; height: 3.18rem; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(155deg, #fffcf5 0%, #f2e2bc 50%, #e4ce94 100%); border: 1px solid rgba(168, 130, 45, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(100, 75, 25, 0.12); pointer-events: none; } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::after { content: ""; position: absolute; left: 0.38rem; top: 50%; width: 3.18rem; height: 3.18rem; transform: translateY(-50%); pointer-events: none; background: linear-gradient( 155deg, #c9a33a 0%, #a67c00 35%, #7a5900 65%, #4a3206 100% ); -webkit-mask-image: url("/images/CI_symbol.svg"); mask-image: url("/images/CI_symbol.svg"); -webkit-mask-size: auto 68%; mask-size: auto 68%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: contrast(1.04) saturate(1.02) drop-shadow(0 0 0.35px rgba(28, 18, 4, 0.4)) drop-shadow(0 0.45px 0.55px rgba(28, 18, 4, 0.22)); opacity: 0.94; } .jr-hero-fixed .lawyer-info { position: absolute; top: auto; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; box-sizing: border-box; width: 100%; opacity: 1; background: none; border-radius: 0 0 8px 8px; padding: 2rem 0 4rem max(20px, env(safe-area-inset-left, 0px)); margin: 0; text-align: left; } /* 태블릿: 좌우 여백 유지 */ @media (max-width: 1024px) and (min-width: 900px) { .jr-hero-fixed .lawyer-info { align-items: stretch !important; width: 100% !important; left: 0 !important; right: 0 !important; padding: 1.5rem 0 3.25rem max(20px, env(safe-area-inset-left, 0px)) !important; border-radius: 0 0 8px 8px; } .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { transform: none !important; align-self: center !important; } } /* 모바일: 밴드 가로 끝, 텍스트는 왼쪽 20px(+safe-area)만 */ @media (max-width: 899px) { .jr-hero-fixed.jr-hero-fixed--primary { --jr-hero-primary-badge-w: calc(min(18rem, calc(100vw - 2rem)) * 0.8); } .jr-hero-fixed--primary .jr-hero-primary-badge { min-height: 3.5rem; gap: 0.42rem; font-size: 1.08rem; padding: 0.28rem 0.88rem 0.28rem 0.34rem; width: var(--jr-hero-primary-badge-w); max-width: var(--jr-hero-primary-badge-w); } .jr-hero-fixed--primary .jr-hero-primary-badge::before { width: 2.78rem; height: 2.78rem; flex-basis: 2.78rem; } .jr-hero-fixed--primary .jr-hero-primary-badge::after { left: 0.34rem; width: 2.78rem; height: 2.78rem; } .jr-hero-fixed--primary .jr-hero-primary-badge-right-stack { left: auto; right: 0; top: 1rem; transform: translate(-90px, -100px); margin-left: 0; margin-right: 0; } .jr-hero-fixed--primary .jr-hero-primary-badge-right { width: var(--jr-hero-primary-badge-w); max-width: var(--jr-hero-primary-badge-w); font-size: 1.08rem; min-height: 3.5rem; padding: 0.28rem 0.75rem 0.28rem 0.34rem; gap: 0.42rem; } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right { padding-left: calc(0.34rem + 2.78rem + 0.55rem); } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::before, .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::after { left: 0.34rem; width: 2.78rem; height: 2.78rem; } .jr-hero-fixed--primary .jr-hero-primary-badge-right__medal { height: 3.1rem; max-height: 3.4rem; } .jr-hero-fixed .lawyer-info { align-items: stretch !important; width: 100% !important; left: 0 !important; right: 0 !important; padding: 1.35rem 0 3rem max(20px, env(safe-area-inset-left, 0px)) !important; border-radius: 0 !important; } .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { transform: none !important; align-self: center !important; } } /* 와이드 PC만 좌측 타이포 오프셋(ch) 유지 */ @media (min-width: 1025px) { .jr-hero-fixed .lawyer-info { top: auto !important; bottom: 0 !important; padding: 1.4rem 0 1.2rem max(20px, env(safe-area-inset-left, 0px)) !important; background: none !important; } .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { transform: translateX(-2ch) !important; } } .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { position: static; left: auto; top: auto; transform: translateX(-5ch); align-self: center; margin: 0 0 0.55rem 0; padding: 0.75rem 1.5rem; background: rgba(58, 46, 38, 0.88); backdrop-filter: blur(6px); color: #fffaf6; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.3; border-radius: 10px; border: 1px solid rgba(255, 245, 235, 0.32); box-shadow: 0 4px 20px rgba(48, 36, 28, 0.22); text-shadow: 0 1px 2px rgba(32, 22, 16, 0.35); white-space: nowrap; opacity: 1; transition: box-shadow 0.28s ease; pointer-events: auto; cursor: pointer; z-index: auto; } @media (max-width: 899px) { .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { font-size: 1.35rem; padding: 0.65rem 1.3rem; } } .jr-hero-fixed .lawyer-info > p { align-self: stretch; text-align: left; /* rem으로 통일 — 5ch는 제목(큰 글자)과 경력(작은 글자)마다 폭이 달라 이탈이 생김 */ padding-left: 2.75rem; box-sizing: border-box; } .jr-hero-fixed .lawyer-info > p:first-of-type { font-size: 2.4rem; color: #fffefb !important; margin: 0 0 0.3rem 0; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(20, 14, 10, 0.55); } .jr-hero-fixed .lawyer-info h3 { font-size: 1.8rem; font-weight: 700; color: #fffefb; margin: 0 0 0.35rem 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82), 0 0 16px rgba(0, 0, 0, 0.42); } .jr-hero-fixed .lawyer-info h3 + p, .jr-hero-fixed .lawyer-info p:last-of-type { font-size: 1.4rem; color: rgba(255, 250, 244, 0.98); margin: 0; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.4); } /* PC에서도 전화상담/상담신청 버튼 모두 노출 */ @media (min-width: 951px) { .visual .btn_group .btnCall { display: flex !important; } } /* 롤링: 슬라이드 하단 정렬(히어로 베이스라인) + 활성 시 아래 고정·위로만 확대 */ .visual .lawyer-slider-others .swiper-wrapper { align-items: flex-end !important; } /* 5명 사진: 비율 박스 유지, 이미지는 프레임 하단 기준 */ .visual .lawyer-slider-others .swiper-slide { min-height: 200px; min-width: 0; flex-shrink: 0; align-self: flex-end; position: relative; box-sizing: border-box; /* 카드: 어두운 갈색 + 높은 투명도 — 뒤 배경이 비치며 전체 톤 유지 */ background: rgba(42, 34, 28, 0.12) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 250, 245, 0.16); box-shadow: 0 4px 18px rgba(40, 32, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; border-radius: 12px; overflow: hidden; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .visual .lawyer-slider-others .swiper-slide-active { bottom: auto !important; background: rgba(48, 38, 32, 0.2) !important; border-color: rgba(255, 252, 248, 0.22); box-shadow: 0 6px 22px rgba(40, 32, 26, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } .visual .lawyer-slider-others .swiper-slide::before { content: ""; display: block; padding-top: 143%; width: 100%; } .visual .lawyer-slider-others .swiper-slide img { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100% !important; min-height: 0; object-fit: cover; object-position: center bottom; transform: scale(0.9); transform-origin: bottom center; filter: opacity(55%) brightness(0.9); transition: transform 0.35s ease, filter 0.35s ease; } .visual .lawyer-slider-others .swiper-slide-active img { filter: grayscale(0%) brightness(1); transform: scale(calc(1.12 * 0.9)); transform-origin: bottom center !important; } /* PC: contain 여백도 동일 반투명 톤 */ @media (min-width: 900px) { #jrMember.visual .lawyer-slider-others .swiper-slide { background: rgba(42, 34, 28, 0.12) !important; } #jrMember.visual .lawyer-slider-others .swiper-slide-active { background: rgba(48, 38, 32, 0.2) !important; } #jrMember.visual .lawyer-slider-others .swiper-slide::before { padding-top: 95%; } #jrMember.visual .lawyer-slider-others .swiper-slide img { object-fit: contain; object-position: bottom center; transform: scale(1); transform-origin: bottom center; } #jrMember.visual .lawyer-slider-others .swiper-slide-active img { transform: scale(1); transform-origin: bottom center !important; } } /* 텍스트 밴드: 배경·그라데이션 없음 — text-shadow로만 대비(활성 동일) */ .visual .lawyer-slider-others .lawyer-info { position: absolute; left: 50%; right: auto; bottom: 0; top: auto; transform: translateX(-50%); width: max-content; max-width: 92%; min-height: 0; height: auto; padding: 0.45rem 1rem 0.55rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: transparent !important; background-image: none !important; opacity: 1; transition: opacity 0.3s ease; } .visual .lawyer-slider-others .lawyer-info::before, .visual .lawyer-slider-others .lawyer-info::after { display: none !important; content: none !important; } .visual .lawyer-slider-others .swiper-slide-active .lawyer-info { padding: 0.75rem 1.15rem 0.65rem; border-radius: 0; background: transparent !important; background-image: none !important; box-shadow: none; } /* 비활성: 글자만 그림자로 대비 */ .visual .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.8); } .visual .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info h3 { visibility: hidden; opacity: 0; height: 0; overflow: hidden; margin: 0; padding: 0; font-size: 0; line-height: 0; } /* 대기 상태: pro 한 줄만 — 좁은 박스에 맞게 보정 */ .visual .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info p:first-child { margin-top: -1em !important; } .visual .lawyer-slider-others .lawyer-info p, .visual .lawyer-slider-others .lawyer-info h3 { padding-left: 0; overflow: visible; white-space: normal; color: #c4b8a8 !important; /* 어두운 따뜻한 베이지 */ font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); text-align: center; } .visual .lawyer-slider-others .swiper-slide-active .lawyer-info p, .visual .lawyer-slider-others .swiper-slide-active .lawyer-info h3 { color: #f2ebe3 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .visual .lawyer-slider-others .swiper-slide-active .lawyer-info p:first-child { color: #fff !important; text-align: center; margin-top: 0; } .visual .lawyer-slider-others .lawyer-info p:first-child { color: #c4b8a8 !important; font-size: 2rem !important; font-weight: 600; text-align: center; margin-top: 0; } /* pro 아래 과거 경력 한 줄 (각 프로필 페이지와 맞춤) */ .visual .lawyer-slider-others .jr-lawyer-career-one { font-size: clamp(0.88rem, 2vw, 1.08rem) !important; font-weight: 500 !important; margin: 0.2rem 0 0 !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: #aea090 !important; text-align: center; } .visual .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one { color: #e4d9cc !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } /* 효과(활성) 시: 경력 한 줄을 이름(h3) 아래로 */ .visual .lawyer-slider-others .swiper-slide-active .lawyer-info > p:first-of-type { order: 1; } .visual .lawyer-slider-others .swiper-slide-active .lawyer-info > h3 { order: 2; margin-top: 0.25rem !important; margin-bottom: 0 !important; } .visual .lawyer-slider-others .swiper-slide-active .lawyer-info > .jr-lawyer-career-one { order: 3; margin-top: 0.35rem !important; } .visual .lawyer-slider-others .lawyer-info h3 { font-size: 1.4rem; /* pro와 크기 맞바꿈 */ text-align: center; } .visual .lawyer-slider-others .lawyer-info h3 + p, .visual .lawyer-slider-others .lawyer-info p:last-of-type { color: #b5a898 !important; /* 더 어두운 베이지 */ font-weight: 500; font-size: 1.05rem; text-align: center; } /* 디자인1 활성 카드: 컬러 강조 + 이름/경력 노출 */ /* 요청사항: 맨 왼쪽(active) 카드 단독 강조 제거 */ #jrMember.visual .lawyer-slider-others .swiper-slide-active { background: rgba(42, 34, 28, 0.12) !important; border-color: rgba(255, 250, 245, 0.16) !important; box-shadow: 0 4px 18px rgba(40, 32, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } #jrMember.visual .lawyer-slider-others .swiper-slide-active img { filter: opacity(55%) brightness(0.9) !important; transform: scale(0.9) !important; } #jrMember.visual .lawyer-slider-others .swiper-slide-active .lawyer-info { padding: 0.45rem 1rem 0.55rem !important; } #jrMember.visual .lawyer-slider-others .swiper-slide-active .lawyer-info h3 { visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } #jrMember.visual .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one { display: block !important; color: #aea090 !important; text-shadow: none !important; } /* 디자인1: 현재 active인 카드는 누구든 동일하게 컬러 강조 */ @media (max-width: 899px) { .visual .lawyer-slider-others .jr-lawyer-career-one { color: rgba(255, 255, 255, 0.88) !important; } .visual .lawyer-slider-others .lawyer-info p, .visual .lawyer-slider-others .lawyer-info h3 { color: #fff !important; /* 모바일: 학폭전략센터장과 동일 */ } .visual .lawyer-slider-others .lawyer-info p:first-child, .visual .lawyer-slider-others .lawyer-info h3 + p, .visual .lawyer-slider-others .lawyer-info p:last-of-type { color: #fff !important; } } /* 디자인1 카드 경력 문구: 항상 한 줄 + 말줄임 */ /* 방송 출연 영상 섹션 - 다른 섹션과 동일한 높이감 */ .jr-broadcast-section { min-height: 50vh; } .jr-broadcast-section .innerWrap { gap: var(--jr-section-head-content-gap) !important; } .jr-broadcast-header { text-align: center; margin-bottom: 0; margin-top: 0; } .jr-broadcast-header .jr-broadcast-title { margin-bottom: 0.35rem; } .jr-broadcast-header .jr-broadcast-desc { margin: 0; } .jr-broadcast-badge { display: inline-block; padding: 0.4rem 1rem; border-radius: 6px; background: #050505; color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.8rem; } .jr-broadcast-title { font-size: var(--jr-type-title); font-weight: 700; color: #050505; } .jr-broadcast-desc { font-size: var(--jr-type-section-desc); color: var(--brown700, #050505); font-weight: 400; } /* 섹션 desc 공통: PC는 한 줄 흐름, 모바일·태블릿(≤1199px)에서만 br 표시 */ .jr-broadcast-desc br.jr-desc-br-mo, .jr-press-desc br.jr-desc-br-mo, .jr-blog-desc br.jr-desc-br-mo, .jr-instagram-desc br.jr-desc-br-mo, .jr-naver-reviews-desc br.jr-desc-br-mo { display: none; } @media (max-width: 1199px) { .jr-broadcast-desc br.jr-desc-br-mo, .jr-press-desc br.jr-desc-br-mo, .jr-blog-desc br.jr-desc-br-mo, .jr-instagram-desc br.jr-desc-br-mo, .jr-naver-reviews-desc br.jr-desc-br-mo { display: block; } } .jr-media-width { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; } .jr-broadcast-section .jr-media-width { margin-top: 0 !important; padding-top: 0; margin-bottom: 2rem; } .jr-broadcast-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; } @media (min-width: 768px) { .jr-broadcast-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .jr-broadcast-grid { grid-template-columns: repeat(3, 1fr); } } .jr-broadcast-card { background: #fff; border: 1px solid transparent; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; text-align: left; } .jr-broadcast-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,0.12), 0 0 0 2px rgba(255, 140, 0, 0.45); border-color: rgba(255, 140, 0, 0.6); } .jr-video-wrap { position: relative; aspect-ratio: 16/9; background: #e5e7eb; overflow: hidden; border-radius: 12px 12px 0 0; } .jr-video-thumb { position: absolute; inset: 0; } .jr-video-thumb img { width: 100%; height: 100%; object-fit: cover; } .jr-channel-badge { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.3rem 0.6rem; border-radius: 4px; background: #000000; color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; } .jr-duration-badge { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; background: #000000; color: #fff; font-size: 1.1rem; } .jr-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6.5rem; height: 6.5rem; min-width: 6.5rem; min-height: 6.5rem; border-radius: 50%; background: rgba(51, 51, 51, 0.65); border: 3px solid #B87C48; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, border-width 0.3s ease; } .jr-play-btn svg { width: 2.6rem; height: 2.6rem; fill: #B87C48; transition: fill 0.3s ease; margin-left: 0.15rem; } .jr-broadcast-card:hover .jr-play-btn { background: #333333; border: 5px solid #CD834E; transform: translate(-50%, -50%) scale(1.06); } .jr-broadcast-card:hover .jr-play-btn svg { fill: #CD834E; } .jr-video-iframe-wrap { position: absolute; inset: 0; } .jr-video-iframe-wrap iframe { width: 100%; height: 100%; border: 0; } .jr-broadcast-card-body { padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .jr-broadcast-card-body h3 { font-size: 1.6rem; font-weight: 700; color: #000000; margin: 0; line-height: 1.3; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; } .jr-broadcast-card:hover .jr-broadcast-card-body h3 { color: #000000; } .jr-broadcast-card-body p { font-size: 1.4rem; color: #000000; margin: 0; line-height: 1.4; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jr-broadcast-meta { display: flex; align-items: center; justify-content: space-between; font-size: 1.2rem; color: #666666; margin-top: auto; gap: 0.5rem; flex-wrap: wrap; } .jr-broadcast-meta .jr-meta-date { display: inline-flex; align-items: center; gap: 0.35rem; } .jr-broadcast-meta .jr-meta-views { display: inline-flex; align-items: center; gap: 0.35rem; } .jr-broadcast-meta svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; } .jr-section-more-wrap { margin-top: var(--jr-section-head-content-gap); display: flex; justify-content: center; width: 100%; } /* 하단 여백은 #target .sect padding-bottom으로만 확보 — 더보기 아래 15em은 비대칭·과다 여백 유발 */ .jr-press-section .jr-section-more-wrap { margin-bottom: 0; } .jr-section-more-btn { display: inline-flex; align-items: center; gap: 0.75rem 1rem; padding: 0.85rem 1.75rem; border-radius: 9999px; background: #3d352b; border: 1px solid #6b5d52; color: #fff; font-size: 1.35rem; font-weight: 500; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .jr-section-more-btn:hover { background: #4a4035; border-color: #8b7355; color: #fff; transform: translateY(-1px); } .jr-section-more-btn svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; stroke: currentColor; fill: none; } /* 신문/온라인 보도 섹션 - 방송 섹션과 동일한 제목·표 간격 */ .jr-press-section .jr-media-width { margin-top: var(--jr-section-head-content-gap) !important; } .jr-press-section .innerWrap { gap: 0 !important; } .jr-press-header { text-align: center; margin-bottom: 0; } .jr-press-header .jr-press-desc { margin: 0; } /* 메인 #jrPress: 모바일(≤899px)만 최대 3건 — PC(≥900px)는 5건 */ @media (max-width: 899px) { #jrPress .jr-press-list > .jr-press-card:nth-child(n + 4) { display: none !important; } } .jr-press-badge { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 9999px; background: var(--brown200, #e8c7a7); color: var(--brown800); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.8rem; } .jr-press-title { font-size: var(--jr-type-title); color: var(--brown900); margin-bottom: 0.5rem; } .jr-press-desc { font-size: var(--jr-type-section-desc); color: var(--brown700); } .jr-press-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; width: 100%; } .jr-press-card { display: flex; flex-wrap: wrap; border: 1px solid #eee; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .jr-press-card:hover { transform: translateY(-2px); border-color: var(--brown800); box-shadow: 0 10px 15px rgba(0,0,0,0.08); } .jr-press-card { cursor: pointer; } .jr-press-card.hidden { display: none !important; } .jr-press-card-left { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 1rem 1.25rem; min-width: 0; width: 100%; background: #fafaf9; border-bottom: 1px solid #eee; } @media (min-width: 640px) { .jr-press-card-left { flex-direction: column; align-items: flex-start; min-width: 12rem; width: auto; border-bottom: none; border-right: 1px solid var(--gray100); } } .jr-press-cat { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 9999px; background: #66BB6A; color: #fff; font-size: 1.2rem; font-weight: 600; width: fit-content; } .jr-press-cat svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; stroke: #fff; fill: none; } .jr-press-source { font-size: 1.35rem; color: #333; font-weight: 500; text-align: left; } .jr-press-card-center { flex: 1; padding: 1rem; min-width: 0; text-align: left; } .jr-press-section .jr-press-card-center h3 { font-size: 2.3rem; font-weight: 600; color: var(--brown900); margin: 0 0 0.75rem 0 !important; text-align: left; } .jr-press-section .jr-press-card-center p { font-size: 1.4rem; color: var(--brown700); margin: 0; margin-top: 0.75rem !important; line-height: 1.4; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .jr-press-card-right { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid #eee; width: 100%; } @media (min-width: 640px) { .jr-press-card-right { flex-direction: column; align-items: stretch; justify-content: center; border-top: none; border-left: 1px solid var(--gray100); min-width: 12rem; width: auto; } } @media (min-width: 640px) { .jr-press-card-right .jr-press-date { text-align: left; } } @media (min-width: 640px) { .jr-press-card-right .jr-press-link { align-self: flex-end; } } .jr-press-date { font-size: 1.2rem; color: #333; } .jr-press-link { font-size: 1.4rem; color: var(--brown700); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; } .jr-press-link:hover { color: var(--brown500); } .jr-press-empty { text-align: center; padding: 2rem; color: var(--gray600); font-size: 1.4rem; } /* 기사 보기 모달 */ .jr-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); padding: 1rem; } .jr-modal-content { position: relative; width: 100%; max-width: 56rem; max-height: 90vh; background: transparent; } .jr-modal-close { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 10; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: none; font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .jr-modal-close:hover { background: #000; } .jr-modal-iframe-wrap { position: relative; width: 100%; height: 70vh; background: #fff; border-radius: 12px; overflow: hidden; } .jr-modal-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .jr-modal-caption { margin-top: 0.75rem; color: #fff; font-size: 1.4rem; } .jr-modal-title { font-weight: 600; margin: 0 0 0.25rem 0; } .jr-modal-meta { margin: 0; font-size: 1.2rem; color: rgba(255,255,255,0.8); } .jr-press-modal-panel { width: 100%; max-height: 80vh; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .jr-press-modal-caption { margin: 0; padding: 1rem 1.25rem 0.75rem; color: #2d2419; border-bottom: 1px solid #eee; background: #fff; } .jr-press-modal-title { font-weight: 700; margin: 0.5rem 0 0; font-size: 1.7rem; line-height: 1.35; color: #2d2419; } .jr-press-modal-meta { margin: 0; font-size: 1.2rem; color: #666; } .jr-press-modal-body { padding: 1rem 1.25rem; overflow-y: auto; color: #2d2419; font-size: 1.35rem; line-height: 1.75; background: #fff; } .jr-press-modal-image-wrap { margin-bottom: 1rem; border-radius: 10px; overflow: hidden; background: #f5f5f5; } .jr-press-modal-image { width: 100%; height: auto; display: block; } .jr-press-modal-body p { margin: 0.75rem 0 0; } .jr-press-modal-footer { padding: 0.85rem 1.25rem 1rem; border-top: 1px solid #eee; font-size: 1.2rem; color: #666; background: #fff; } .jr-press-modal-source-link { color: #B87C48; word-break: break-all; text-decoration: none; } .jr-press-modal-source-link:hover { text-decoration: underline; } /* 네이버 학폭 블로그 (Downloads index 동기화) */ .jr-blog-section .jr-media-width { margin-top: var(--jr-section-head-content-gap) !important; } .jr-blog-section .innerWrap { gap: 0 !important; } .jr-blog-header { text-align: center; margin-bottom: 0; margin-top: 0; } .jr-blog-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 1rem; border-radius: 6px; background: #2d2419; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; width: fit-content; min-width: 0; margin-left: auto; margin-right: auto; margin-bottom: 0.8rem; text-transform: uppercase; } .jr-blog-title { font-size: var(--jr-type-title); font-weight: 700; color: var(--brown900, #050505); margin: 0; } .jr-blog-desc { font-size: var(--jr-type-section-desc); color: var(--brown700, #050505); font-weight: 400; margin-top: 0.45rem; } .jr-blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; } @media (min-width: 768px) { .jr-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) and (max-width: 1199px) { .jr-blog-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .jr-blog-grid { grid-template-columns: repeat(4, 1fr); } } .jr-blog-card { background: #fff; border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(45,36,25,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: inherit; appearance: none; -webkit-appearance: none; display: block; width: 100%; text-align: left; cursor: pointer; padding: 0; } .jr-blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0,0,0,0.12); } .jr-blog-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f1ece6; } .jr-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .jr-blog-body { padding: 0.9rem 1rem 1rem; } .jr-blog-body h3 { margin: 0; font-size: 1.55rem; color: #1f1711; line-height: 1.35; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.1rem; } .jr-blog-date { margin-top: 0.6rem; font-size: 1.2rem; color: #6d6357; } .jr-blog-empty { text-align: center; padding: 2rem; color: #6d6357; font-size: 1.4rem; } /* crime index.html 동일 마크업 — 정적 카드(키워드·썸네일 16:9) */ #jrBlog .jr-blog-grid--static .jr-blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; } #jrBlog .jr-blog-grid--static .jr-blog-card__thumb { position: relative; aspect-ratio: 16 / 9; background: #f1ece6; overflow: hidden; } #jrBlog .jr-blog-grid--static .jr-blog-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } #jrBlog .jr-blog-grid--static .jr-blog-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem 1rem; flex: 1 1 auto; } #jrBlog .jr-blog-grid--static .jr-blog-card__keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.4rem; margin: 0; line-height: 1.3; } #jrBlog .jr-blog-grid--static .jr-blog-card__keyword { font-size: 1.2rem; font-weight: 700; color: var(--brown700, #6d4c32); } #jrBlog .jr-blog-grid--static .jr-blog-card__keyword-sep { color: #a89888; font-weight: 400; font-size: 1.2rem; user-select: none; } #jrBlog .jr-blog-grid--static .jr-blog-card__title { margin: 0; font-size: 1.55rem; font-weight: 700; color: #1f1711; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #jrBlog .jr-blog-grid--static .jr-blog-card__desc { margin: 0; font-size: 1.35rem; color: var(--brown700, #4e4438); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* JR 맞춤 변호사 매칭 — 미니멀 · 전문 톤 */ section.lawyer-search-wrap.lawyer-match { background: #f4f6f8; } section.lawyer-search-wrap .innerWrap { gap: var(--jr-section-head-content-gap) !important; } .lawyer-search-wrap.lawyer-match .lawyer-search-head { text-align: center; margin-bottom: 0; } .lawyer-search-wrap.lawyer-match .lawyer-search-badge { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0.6rem; padding: 0.32rem 0.9rem; border-radius: 4px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; color: #475569; background: #fff; border: 1px solid #e2e8f0; } .lawyer-match-title-em { color: #1e3a5f; font-weight: 800; background: none; -webkit-background-clip: unset; background-clip: unset; } .lawyer-search-wrap.lawyer-match .lawyer-search-desc { max-width: 32rem; margin-left: auto; margin-right: auto; color: #64748b; font-weight: 500; } .lawyer-match-outer { max-width: 52rem; margin-left: auto; margin-right: auto; } .lawyer-match-shell.lawyer-search-sect { position: relative; overflow: hidden; margin-bottom: 0; padding: 0; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column; } .lawyer-match-shell.lawyer-search-sect::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #1e3a5f; border-radius: 12px 0 0 12px; pointer-events: none; } .lawyer-match-shell-inner { padding: clamp(0.85rem, 2.2vw, 1.2rem) clamp(1.1rem, 2.5vw, 1.5rem); padding-left: calc(clamp(1.1rem, 2.5vw, 1.5rem) + 3px); } .lawyer-match-stepper { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin-bottom: 0.75rem; padding: 0; } .lawyer-match-step { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex: 0 0 auto; } .lawyer-match-step__num { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.05rem; font-weight: 700; color: #fff; background: #1e3a5f; line-height: 1; } .lawyer-match-step__lab { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; } .lawyer-match-stepper__line { flex: 1 1 2rem; min-width: 1.25rem; max-width: 3.5rem; height: 2px; margin-top: 1rem; background: #e2e8f0; border: none; align-self: flex-start; } .lawyer-match-body { display: flex; flex-direction: column; gap: 0; } .lawyer-match-panel { border-radius: 0; padding: 0; box-sizing: border-box; } .lawyer-match-panel--cats { background: transparent; border: none; padding-bottom: 0.65rem; margin-bottom: 0.65rem; border-bottom: 1px solid #f1f5f9; } .lawyer-match-panel--refine { background: transparent; border: none; padding-bottom: 0; } .lawyer-match-panel-kicker { margin: 0 0 0.45rem; font-size: clamp(1.22rem, 1.08rem + 0.3vw, 1.32rem); font-weight: 700; letter-spacing: -0.02em; color: #0f172a; } .lawyer-match-optional { font-weight: 500; font-size: 0.88em; color: #94a3b8; letter-spacing: 0; text-transform: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lawyer-match-categories { display: flex !important; flex-wrap: nowrap; gap: 0.4rem; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding-bottom: 0.2rem; scrollbar-width: thin; } .lawyer-match-categories::-webkit-scrollbar { height: 4px; } .lawyer-match-categories::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .lawyer-match-categories button.lawyer-match-cat { appearance: none; -webkit-appearance: none; display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: auto; min-width: 7.5rem; max-width: 10.5rem; min-height: 0; margin: 0; padding: 0.4rem 0.5rem; border-radius: 8px; border: 1px solid #e2e8f0; background: #fafbfc; color: #0f172a; cursor: pointer; font-family: inherit; text-align: left; box-sizing: border-box; scroll-snap-align: start; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .lawyer-match-categories button.lawyer-match-cat:hover { border-color: #cbd5e1; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } .lawyer-match-categories button.lawyer-match-cat.is-active { border-color: #1e3a5f; background: #fff; box-shadow: 0 0 0 1px #1e3a5f; } .lawyer-match-categories button.lawyer-match-cat:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; } .lawyer-match-cat__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: 0; margin-right: 0.4rem; border-radius: 6px; background: #f1f5f9; color: #1e3a5f; } .lawyer-match-cat__icon svg { width: 1.1rem; height: 1.1rem; } .lawyer-match-cat__main { display: flex; flex-direction: column; gap: 0.04rem; min-width: 0; flex: 1 1 auto; } .lawyer-match-cat__title { font-size: clamp(1.05rem, 0.98rem + 0.2vw, 1.18rem); font-weight: 700; line-height: 1.2; color: #0f172a; word-break: keep-all; } .lawyer-match-cat__hint { font-size: clamp(0.88rem, 0.82rem + 0.15vw, 0.98rem); font-weight: 500; color: #94a3b8; line-height: 1.2; } .lawyer-match-refine-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; align-items: stretch; } @media (max-width: 520px) { .lawyer-match-refine-row { grid-template-columns: 1fr; } } /* FINAL width override (must be last) */ section.lawyer-search-wrap.lawyer-match > .innerWrap { width: min(210rem, calc(100vw - 4rem)) !important; max-width: none !important; padding-left: 2rem !important; padding-right: 2rem !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-outer { width: min(100%, 150rem) !important; max-width: 150rem !important; margin-left: auto !important; margin-right: auto !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect { width: 100% !important; max-width: none !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-refine-row { width: min(100%, 120rem) !important; max-width: 120rem !important; } @media (max-width: 767px) { section.lawyer-search-wrap.lawyer-match > .innerWrap { width: calc(100vw - 2rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-outer, section.lawyer-search-wrap.lawyer-match .lawyer-match-refine-row { width: 100% !important; max-width: none !important; } } /* ===== Lawyer Match UX Refresh (high readability) ===== */ section.lawyer-search-wrap.lawyer-match { background: #f6f4f1 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-search-head h2 { color: #2f2923 !important; letter-spacing: -0.015em !important; } section.lawyer-search-wrap.lawyer-match .lawyer-search-desc { color: #6a6158 !important; font-weight: 600 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect { background: #ffffff !important; border: 1px solid #ddd6cd !important; box-shadow: 0 8px 18px rgba(50, 42, 33, 0.06) !important; border-radius: 14px !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-label { color: #4a4138 !important; font-weight: 800 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell select { background: #fff !important; border: 1px solid #d3cbc1 !important; color: #2f2923 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-keyword { background: #fff !important; border: 1px solid #d3cbc1 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell input[type="search"], section.lawyer-search-wrap.lawyer-match .lawyer-match-shell input[type="text"] { color: #2f2923 !important; font-weight: 600 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell input::placeholder { color: #8a8074 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell select:focus, section.lawyer-search-wrap.lawyer-match .lawyer-match-keyword:focus-within { border-color: #9b7a56 !important; box-shadow: 0 0 0 3px rgba(155, 122, 86, 0.14) !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-results.lawyer-search-results { border-top: 1px solid #e7dfd5 !important; margin-top: 1.15rem !important; padding-top: 1.1rem !important; background: #faf8f5 !important; border-radius: 10px !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-results-title { color: #2f2923 !important; font-size: clamp(1.85rem, 1.35vw, 2.05rem) !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-results-list.lawyer-search-results-list { gap: 1rem !important; } section.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result { background: #fff !important; border: 1px solid #ddd4c8 !important; border-radius: 12px !important; box-shadow: 0 3px 10px rgba(50, 42, 33, 0.07) !important; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important; } section.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result:hover { transform: translateY(-2px) !important; border-color: #b89b78 !important; box-shadow: 0 8px 16px rgba(82, 66, 47, 0.12) !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { border: 2px solid #e2d8cb !important; box-shadow: 0 2px 6px rgba(50, 42, 33, 0.1) !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-name { color: #2a241e !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-role { color: #6f6457 !important; } /* Search result compact horizontal style (photo + name only) */ section.lawyer-search-wrap.lawyer-match .lawyer-match-results-list.lawyer-search-results-list { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 0.8rem !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 0.3rem !important; } section.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result { width: auto !important; min-width: 16.5rem !important; max-width: 24rem !important; display: inline-flex !important; align-items: center !important; gap: 0.7rem !important; padding: 0.6rem 0.85rem !important; border-radius: 10px !important; box-shadow: none !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-media { width: 4.6rem !important; height: 4.6rem !important; border-right: 0 !important; background: transparent !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { min-height: 4.6rem !important; height: 4.6rem !important; padding: 0 !important; align-items: center !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 4.6rem !important; height: 4.6rem !important; border-radius: 50% !important; object-fit: cover !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-body { padding: 0 !important; min-width: 0 !important; gap: 0 !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-name { font-size: 1.45rem !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-tag, section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-blurb, section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-cta { display: none !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-results.lawyer-search-results { padding-top: 1rem !important; } /* Result readability upgrade: 2x photo + title/field line */ section.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result { min-width: 26rem !important; max-width: 34rem !important; gap: 1rem !important; padding: 0.9rem 1.05rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-media { width: 9.2rem !important; height: 9.2rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { min-height: 9.2rem !important; height: 9.2rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 9.2rem !important; height: 9.2rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-body { gap: 0.28rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-name { font-size: 1.7rem !important; font-weight: 800 !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-role { display: block !important; font-size: 1.28rem !important; font-weight: 600 !important; color: #6e5c4b !important; line-height: 1.35 !important; } @media (max-width: 767px) { section.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result { min-width: 22rem !important; max-width: 30rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-media, section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo, section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 7.2rem !important; height: 7.2rem !important; min-height: 7.2rem !important; } } /* Final hard override: readability/UI fix */ section.lawyer-search-wrap.lawyer-match .lawyer-search-desc { text-align: center !important; max-width: 86rem !important; margin: 0 auto 2rem !important; font-size: clamp(1.34rem, 1.05vw, 1.5rem) !important; line-height: 1.65 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect { max-width: 147rem !important; margin: 0 auto !important; padding: 2.2rem 2.4rem !important; border: 1px solid #e4dbcf !important; border-radius: 12px !important; background: #f6f3ee !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-refine-row { width: min(100%, 117rem) !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.2rem !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-field { width: 100% !important; min-width: 0 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-label { display: block !important; text-align: center !important; margin-bottom: 0.5rem !important; font-size: clamp(1.45rem, 1.15vw, 1.62rem) !important; font-weight: 700 !important; color: #5d5042 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell select, section.lawyer-search-wrap.lawyer-match .lawyer-match-keyword { width: 100% !important; height: 4.6rem !important; min-height: 4.6rem !important; border-radius: 9px !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-results-title { text-align: center !important; margin: 0 0 1.1rem !important; font-size: clamp(1.76rem, 1.4vw, 2rem) !important; font-weight: 800 !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-results-list.lawyer-search-results-list { width: min(100%, 62rem) !important; margin: 0 auto !important; grid-template-columns: 1fr !important; gap: 1rem !important; } section.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result { border-radius: 12px !important; border: 1px solid #ddd2c4 !important; box-shadow: 0 4px 12px rgba(53, 41, 26, 0.07) !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-body { padding: 1.2rem 1.15rem !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-name { font-size: clamp(1.55rem, 1.3vw, 1.78rem) !important; color: #2e2419 !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-blurb { font-size: 1.2rem !important; line-height: 1.5 !important; color: #5c4f42 !important; } @media (max-width: 767px) { section.lawyer-search-wrap.lawyer-match .lawyer-match-refine-row { grid-template-columns: 1fr !important; gap: 0.75rem !important; width: 100% !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect { padding: 1.35rem 1.1rem !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell select, section.lawyer-search-wrap.lawyer-match .lawyer-match-keyword { height: 4.3rem !important; min-height: 4.3rem !important; } } /* Hard width expansion including parent wrapper */ section.lawyer-search-wrap.lawyer-match > .innerWrap { width: min(210rem, calc(100vw - 4rem)) !important; max-width: none !important; padding-left: 2rem !important; padding-right: 2rem !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect { width: 100% !important; max-width: none !important; } section.lawyer-search-wrap.lawyer-match .lawyer-match-refine-row { width: min(100%, 160rem) !important; } @media (max-width: 767px) { section.lawyer-search-wrap.lawyer-match > .innerWrap { width: calc(100vw - 2rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; } } /* Lawyer match readability + UX upgrade */ .lawyer-search-wrap.lawyer-match .lawyer-search-desc { text-align: center; } .lawyer-match-refine-row { width: min(100%, 76rem); gap: 1.2rem; } .lawyer-match-field, .lawyer-match-field--keyword { width: 100%; min-width: 0; } .lawyer-match-select-wrap, .lawyer-match-keyword { width: 100%; box-sizing: border-box; } .lawyer-match-shell select, .lawyer-match-keyword { height: 4.6rem; } .lawyer-match-shell select { border-radius: 9px; line-height: 1.2; } .lawyer-match-keyword { border-radius: 9px; } .lawyer-match-results-title { margin-bottom: 1.1rem; font-weight: 800; } .lawyer-match-results-list.lawyer-search-results-list { width: min(100%, 58rem); margin: 0 auto; grid-template-columns: 1fr; gap: 0.9rem; } a.jr-lawyer-search-result--card.jr-lawyer-search-result { border-radius: 12px; border-color: #dfd5c8; box-shadow: 0 3px 10px rgba(55, 43, 29, 0.06); } .jr-lawyer-search-result-media { width: 10.8rem; background: #f9f5ef; border-right: 1px solid #ece3d7; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { min-height: 10rem; padding: 0.75rem 0.5rem 0; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 7.2rem; height: 7.2rem; border-radius: 10px; border-color: #e2d7c9; } .jr-lawyer-search-result-body { gap: 0.28rem; padding: 1.15rem 1.15rem 1.2rem; } .jr-lawyer-search-result-tag { font-size: 1.05rem; color: #5d5041; background: #efe7dc; } .jr-lawyer-search-result-role { font-size: 1.18rem; color: #7d6c5b; } .jr-lawyer-search-result--card .jr-lawyer-search-result-name { font-size: clamp(1.55rem, 1.35rem + 0.35vw, 1.76rem); color: #2f2418; } .jr-lawyer-search-result-blurb { font-size: 1.2rem; line-height: 1.5; color: #5c4f42; margin-top: 0.16rem; } .jr-lawyer-search-result-cta { font-size: 1.14rem; margin-top: 0.35rem; color: #7e4f1f; } @media (max-width: 767px) { .lawyer-match-refine-row { width: 100%; gap: 0.75rem; } .lawyer-match-shell select, .lawyer-match-keyword { height: 4.3rem; } .lawyer-match-results-list.lawyer-search-results-list { width: 100%; } .jr-lawyer-search-result-media { width: 9.6rem; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { min-height: 8.8rem; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 6.4rem; height: 6.4rem; } } /* Lawyer match section fine tuning */ .lawyer-search-wrap.lawyer-match .lawyer-search-head h2 { font-size: clamp(3rem, 2.35vw, 3.45rem); line-height: 1.24; margin-bottom: 0.5rem; } .lawyer-search-wrap.lawyer-match .lawyer-search-desc { font-size: clamp(1.28rem, 1.02vw, 1.45rem); line-height: 1.55; margin-bottom: 2rem; } .lawyer-match-shell.lawyer-search-sect { padding: 2.25rem 2.4rem 2.1rem; border-radius: 11px; } .lawyer-match-shell-inner { width: 100%; } .lawyer-match-refine-row { width: min(100%, 70rem); gap: 1.15rem; align-items: end; } .lawyer-match-field { width: 100%; } .lawyer-match-label { margin-bottom: 0.52rem; line-height: 1.3; } .lawyer-match-shell select, .lawyer-match-keyword { height: 4.55rem; } .lawyer-match-shell select { border-radius: 9px; font-size: clamp(1.33rem, 1.02vw, 1.48rem); } .lawyer-match-shell input[type="search"], .lawyer-match-shell input[type="text"] { font-size: clamp(1.33rem, 1.02vw, 1.48rem); } .lawyer-match-results.lawyer-search-results { margin-top: 1.45rem; } @media (max-width: 767px) { .lawyer-search-wrap.lawyer-match .lawyer-search-head h2 { font-size: clamp(2.35rem, 6.3vw, 2.8rem); } .lawyer-search-wrap.lawyer-match .lawyer-search-desc { font-size: clamp(1.22rem, 3.4vw, 1.36rem); margin-bottom: 1.4rem; } .lawyer-match-shell.lawyer-search-sect { padding: 1.35rem 1.1rem 1.25rem; } .lawyer-match-refine-row { width: 100%; gap: 0.7rem; } .lawyer-match-label { margin-bottom: 0.4rem; font-size: clamp(1.32rem, 3.6vw, 1.46rem); } .lawyer-match-shell select, .lawyer-match-keyword { height: 4.25rem; } } .lawyer-match-field { margin-bottom: 0; } .lawyer-match-select-wrap { position: relative; height: 100%; } .lawyer-match-select-wrap::after { content: ""; position: absolute; right: 0.75rem; top: 50%; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid #94a3b8; border-bottom: 1.5px solid #94a3b8; transform: translateY(-65%) rotate(45deg); pointer-events: none; } .lawyer-match-shell select { width: 100%; height: 100%; min-height: 3em; padding: 0.5rem 2rem 0.5rem 0.75rem; font-size: clamp(1.18rem, 1.05rem + 0.3vw, 1.32rem); border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; box-sizing: border-box; appearance: none; cursor: pointer; } .lawyer-match-shell select:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.12); } .lawyer-match-keyword { display: flex; align-items: center; gap: 0.45rem; min-height: 3em; padding: 0 0.75rem; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; box-sizing: border-box; } .lawyer-match-keyword:focus-within { border-color: #1e3a5f; box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1); } .lawyer-match-keyword-icon { flex-shrink: 0; color: #94a3b8; } .lawyer-match-shell input[type="search"], .lawyer-match-shell input[type="text"] { flex: 1; min-width: 0; border: none; background: transparent; color: #0f172a; font-size: clamp(1.18rem, 1.05rem + 0.3vw, 1.32rem); } .lawyer-match-shell input::placeholder { color: #cbd5e1; } .lawyer-match-shell input:focus { outline: none; } .lawyer-match-results.lawyer-search-results { padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.2rem, 2.2vw, 1.5rem); padding-left: calc(clamp(1.1rem, 2.2vw, 1.4rem) + 3px); border-top: 1px solid #f1f5f9; background: #fafbfc; } .lawyer-match-results-title { margin: 0 0 0.85rem; font-size: clamp(1.28rem, 1.15rem + 0.35vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; color: #0f172a; } .lawyer-match-results-list.lawyer-search-results-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; } .lawyer-match-results-list[data-count="1"] { grid-template-columns: minmax(0, 36rem); max-width: 36rem; margin: 0 auto; } .lawyer-search-results-list { list-style: none; margin: 0; padding: 0; } .lawyer-search-results-list li { margin: 0; } .lawyer-search-results-empty-wrap { grid-column: 1 / -1; text-align: center; } a.jr-lawyer-search-result--card.jr-lawyer-search-result { display: flex; flex-direction: row; align-items: stretch; width: 100%; max-width: none; padding: 0; overflow: hidden; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } a.jr-lawyer-search-result--card:hover { border-color: #cbd5e1; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07); } a.jr-lawyer-search-result--card:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; } .jr-lawyer-search-result-media { flex-shrink: 0; width: 9rem; background: #f8fafc; border-right: 1px solid #f1f5f9; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { display: flex; align-items: flex-end; justify-content: center; height: 100%; min-height: 9.5rem; padding: 0.6rem 0.45rem 0; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 6.5rem; height: 6.5rem; border-radius: 8px; object-fit: contain; object-position: center top; border: 1px solid #e2e8f0; } .jr-lawyer-search-result-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.18rem; padding: 0.95rem 1rem 1rem; min-width: 0; } .jr-lawyer-search-result-tag { display: inline-block; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.98rem; font-weight: 700; color: #334155; background: #f1f5f9; border: none; } .jr-lawyer-search-result-role { font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.15rem); font-weight: 600; color: #64748b; } .jr-lawyer-search-result--card .jr-lawyer-search-result-name { font-size: clamp(1.32rem, 1.18rem + 0.35vw, 1.48rem); font-weight: 800; color: #0f172a; } .jr-lawyer-search-result-blurb { margin: 0.12rem 0 0.28rem; font-size: clamp(1.08rem, 0.98rem + 0.25vw, 1.18rem); line-height: 1.4; color: #475569; } .jr-lawyer-search-result-cta { margin-top: auto; font-size: clamp(1.05rem, 0.95rem + 0.22vw, 1.12rem); font-weight: 600; color: #1e3a5f; display: inline-flex; align-items: center; gap: 0.2rem; } .jr-lawyer-search-result-cta-arrow { color: #64748b; transition: transform 0.15s ease; } a.jr-lawyer-search-result--card:hover .jr-lawyer-search-result-cta-arrow { transform: translateX(3px); color: #1e3a5f; } @media (max-width: 480px) { a.jr-lawyer-search-result--card.jr-lawyer-search-result { flex-direction: column; } .jr-lawyer-search-result-media { width: 100%; border-right: none; border-bottom: 1px solid #f1f5f9; } .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { min-height: 7.5rem; } } @media (prefers-reduced-motion: reduce) { .lawyer-match-categories button.lawyer-match-cat, a.jr-lawyer-search-result--card, .jr-lawyer-search-result-cta-arrow { transition: none; } } .lawyer-match-shell .lawyer-search-empty { font-size: clamp(1.15rem, 1.05rem + 0.28vw, 1.28rem); color: #64748b; margin: 0; } /* 맞춤변호사 검색 섹션 하단 CTA (Downloads jr-why-credibility-next) — .sect 패딩은 건드리지 않음 */ .lawyer-search-wrap .jr-why-credibility-next { margin-top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem; } .lawyer-search-wrap .jr-why-credibility-next-tagline { margin: 0; max-width: 36rem; color: #34291f; font-size: 1.52rem; font-weight: 600; line-height: 1.55; } .lawyer-search-wrap .jr-why-credibility-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: auto; max-width: 100%; padding: 0.88rem 1.55rem; border-radius: 999px; background: #2f251a; color: #fff; border: 1px solid #2f251a; box-shadow: 0 10px 22px rgba(45, 36, 25, 0.22); font-size: 1.38rem; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .lawyer-search-wrap .jr-why-credibility-link:hover { transform: translateY(-1px); background: #3b3024; box-shadow: 0 12px 26px rgba(45, 36, 25, 0.28); } @media (max-width: 767px) { .lawyer-search-wrap .jr-why-credibility-next { gap: 0.55rem; } .lawyer-search-wrap .jr-why-credibility-next-tagline { font-size: 1.42rem; padding: 0 0.5rem; } .lawyer-search-wrap .jr-why-credibility-link { width: 100%; max-width: 26rem; } } .footer .footer-region-links { font-size: 0.075em; color: #c5a67d; text-align: right; width: 100%; margin-top: 0.5rem; } .footer .footer-region-links a { font-size: 1em; color: #c5a67d; } /* moved from #jr-broadcast-spacing-override */ /* 방송: 섹션 제목과 영상 카드 행 간격 */ section.jr-broadcast-section .innerWrap { gap: var(--jr-section-head-content-gap) !important; } section.jr-broadcast-section .jr-media-width { margin-top: 0 !important; } /* 방송 카드: 영상-제목 간격 최소화 */ section.jr-broadcast-section .jr-broadcast-card .jr-broadcast-card-body { padding: 0 1rem 1rem 1rem !important; gap: 0.25rem !important; } /* moved from #jr-visual-mobile-left */ @media screen and (max-width: 950px) { section.visual .visual_two_col { align-items: stretch !important; } section.visual .jr-hero-fixed { margin-top: 0 !important; } section.visual .visual_left { margin-bottom: 0 !important; } section.visual .innerWrap { padding-left: 0 !important; } section.visual .visual_left { padding-left: 0 !important; margin-left: 0 !important; max-width: 100% !important; } section.visual .slogan_wrap { padding-left: 0 !important; margin-left: 0 !important; text-align: center !important; width: 100%; display: flex; flex-direction: column; align-items: center; } section.visual .title { margin-left: 0 !important; padding-left: 0 !important; width: 100%; text-align: center !important; } section.visual .title h1, section.visual .title .subtxt { text-align: center !important; } .visual .btn_group .btnCall.btncs, .visual .btn_group .btnRsv.btncs.modal-trigger-btn { margin: 0 !important; padding: 0.78rem 1.9rem !important; font-size: 1.55rem !important; min-height: 4.3rem; } .visual .btn_group .btnCall.btncs i, .visual .btn_group .btnRsv.btncs.modal-trigger-btn i { width: 1.9rem; height: 1.9rem; } } @media screen and (max-width: 640px) { .visual .btn_group { gap: 0.8rem !important; padding-top: 0.8rem !important; } .visual .btn_group .btnCall.btncs, .visual .btn_group .btnRsv.btncs.modal-trigger-btn { padding: 0.72rem 1.45rem !important; font-size: 1.4rem !important; min-height: 4rem; } .visual .btn_group .btnCall.btncs i, .visual .btn_group .btnRsv.btncs.modal-trigger-btn i { width: 1.7rem; height: 1.7rem; } } @media screen and (max-width: 480px) { .visual .btn_group { gap: 0.65rem !important; padding-top: 0.65rem !important; } .visual .btn_group .btnCall.btncs, .visual .btn_group .btnRsv.btncs.modal-trigger-btn { padding: 0.65rem 1.2rem !important; font-size: 1.28rem !important; min-height: 3.6rem; border-radius: 999px; } .visual .btn_group .btnCall.btncs i, .visual .btn_group .btnRsv.btncs.modal-trigger-btn i { width: 1.5rem; height: 1.5rem; } } /* —— RISK CHECK (#jrRiskUrgency) —— 다운로드판 index.html 동기화 */ #jrRiskUrgency .innerWrap { gap: 0 !important; } .jr-risk-head { text-align: center; margin-bottom: var(--jr-section-head-content-gap); } .jr-risk-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 1rem; border-radius: 6px; background: #2d2419; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.8rem; } .jr-risk-head h2 { margin: 0; color: #2d2419; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); line-height: 1.3; } /* h2 줄바꿈: 모바일·태블릿만 (데스크톱은 한 줄) */ .jr-risk-head h2 br.jr-risk-title-br-mo { display: none; } @media (max-width: 1199px) { .jr-risk-head h2 br.jr-risk-title-br-mo { display: block; } } .jr-risk-head p { margin: 0.6rem 0 0; color: #555; font-size: 1.55rem; line-height: 1.75; } .jr-risk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.45rem; counter-reset: riskCard; } .jr-risk-card { background: #fff; border: 1px solid #b0a090; border-radius: 12px; padding: 2.2rem 1.8rem; text-align: left; box-shadow: 0 2px 10px rgba(45, 36, 24, 0.07); position: relative; display: flex; flex-direction: column; height: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .jr-risk-card:hover { border-color: #9a8a78; box-shadow: 0 8px 20px rgba(45, 36, 24, 0.1); transform: translateY(-1px); } .jr-risk-card::before { content: none; } .jr-risk-card h3 { margin: 0 0 1.05rem; color: #2d2419; font-size: clamp(1.62rem, 1.28rem + 0.82vw, 2.05rem); line-height: 1.38; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.75rem; } .jr-risk-card h3::before { counter-increment: riskCard; content: "0" counter(riskCard); display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; height: 2.2rem; padding: 0 0.7rem; border-radius: 999px; background: #f4ede4; color: #8a6a49; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; } .jr-risk-card p { margin: 0; color: #534a43; font-size: clamp(1.62rem, 1.45rem + 0.36vw, 1.8rem); line-height: 1.82; letter-spacing: -0.01em; word-break: keep-all; } .jr-risk-card .jr-risk-scenario { margin-top: auto; padding: 1.05rem 1.1rem; border-radius: 8px; background: #faf6f0; border: 1px solid #efe5d8; color: #6a5d50; font-size: clamp(1.56rem, 1.4rem + 0.32vw, 1.72rem); line-height: 1.84; } #jrRiskUrgency.jr-risk-section, #jrWhyCredibility.jr-why-credibility-section, #jrNaverReviews.jr-naver-reviews-section, #jrInstagram.jr-instagram-section, #faq.jr-faq-section { position: relative; overflow: hidden; background: var(--jr-surface-risk-bg) !important; } /* RISK CHECK와 동일: CI 심볼 워터마크 */ #jrRiskUrgency.jr-risk-section::before, #jrWhyCredibility.jr-why-credibility-section::before, #jrNaverReviews.jr-naver-reviews-section::before, #jrInstagram.jr-instagram-section::before, #faq.jr-faq-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.045; background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg"); background-repeat: no-repeat, no-repeat; background-position: 90% 18%, 6% 88%; background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto; } #jrRiskUrgency.jr-risk-section .innerWrap, #jrWhyCredibility.jr-why-credibility-section .innerWrap, #jrNaverReviews.jr-naver-reviews-section .innerWrap, #jrInstagram.jr-instagram-section .innerWrap, #faq.jr-faq-section .innerWrap.jr-faq-inner { position: relative; z-index: 1; } @media (max-width: 1100px) { .jr-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jr-why-core-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .jr-risk-grid { grid-template-columns: 1fr; gap: 0.9rem; } .jr-risk-head p br { display: none; } #jrRiskUrgency.jr-risk-section::before, #jrWhyCredibility.jr-why-credibility-section::before, #jrNaverReviews.jr-naver-reviews-section::before, #jrInstagram.jr-instagram-section::before, #faq.jr-faq-section::before { opacity: 0.035; background-position: 92% 12%, 4% 92%; background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto; } } /* 의뢰인 후기(#jrReview)와 동일 면 — 맞춤변호사 검색·업무사례·방송 출연·NAVER BLOG */ section.sect.lawyer-search-wrap, #jrCasesPreview.jr-cases-preview-section, #jrConsultCases.jr-cases-preview-section, #jrBroadcast.jr-broadcast-section, #jrBlog.jr-blog-section, #jrReview.jr-naver-reviews-section { position: relative; overflow: hidden; background: var(--jr-surface-review-bg) !important; } section.sect.lawyer-search-wrap .innerWrap, #jrCasesPreview.jr-cases-preview-section .innerWrap, #jrConsultCases.jr-cases-preview-section .innerWrap, #jrBroadcast.jr-broadcast-section .innerWrap, #jrBlog.jr-blog-section .innerWrap, #jrReview.jr-naver-reviews-section .innerWrap { position: relative; z-index: 1; background: transparent !important; } @media (max-width: 390px) { #jrRiskUrgency .innerWrap { width: min(100%, calc(100vw - 2.4rem)); margin-left: auto; margin-right: auto; } #jrRiskUrgency .jr-risk-grid { gap: 0.7rem; } } /* RISK 섹션: 다운로드판과 동일한 제목·본문 스케일 */ :root { --jr-type-title: clamp(2.52rem, 1.92rem + 1.45vw, 3.4rem); /* 방송/보도/블로그 섹션 설명: 최소 ~17px, 본문 스케일과 동일 계열 */ --jr-type-section-desc: clamp(1.7rem, 1.52rem + 0.38vw, 1.9rem); --jr-type-subtitle: clamp(1.72rem, 1.52rem + 0.38vw, 1.9rem); --jr-type-card-title: clamp(1.92rem, 1.72rem + 0.52vw, 2.2rem); --jr-type-body: clamp(1.62rem, 1.48rem + 0.32vw, 1.78rem); /* RISK CHECK #jrRiskUrgency .jr-risk-head — 헤더(제목·리드) 아래 ↔ 카드·본문 블록 상단 */ --jr-section-head-content-gap: 4.8rem; /* RISK CHECK .jr-risk-section — 섹션 위·아래 바깥 여백(= style.css .sect clamp 대체) */ --jr-section-vert-pad: 8rem; --jr-section-vert-pad-sm: 6rem; /* RISK CHECK #jrRiskUrgency 면 — 아래 카드형 섹션과 동일 배경에 사용 */ --jr-surface-risk-bg: linear-gradient(180deg, #fcfcfc 0%, #f7f7f6 50%, #f5f5f4 100%); /* 의뢰인 후기 #jrReview 면 — 맞춤변호사·업무사례·방송·블로그와 통일 */ --jr-surface-review-bg: linear-gradient(180deg, #f9f5ef 0%, #f5efe7 100%); } /* 메인 #target: 모든 .sect의 상·하 패딩을 RISK CHECK와 동일하게 (위 공백·아래 공백 통일) */ #target.pclayout .contents > section.sect { padding-top: var(--jr-section-vert-pad); padding-bottom: var(--jr-section-vert-pad); } @media (max-width: 767px) { #target.pclayout .contents > section.sect { padding-top: var(--jr-section-vert-pad-sm); padding-bottom: var(--jr-section-vert-pad-sm); } } /* html 62.5% 기준: 히어로(#jrMember) 아래 섹션은 상속만이면 ~10px로 과소해 보임 — 본문 스케일 고정 */ #target.pclayout .contents > section:not(#jrMember) { font-size: var(--jr-type-body); line-height: 1.65; } #jrRiskUrgency .jr-risk-head h2 { font-size: var(--jr-type-title) !important; line-height: 1.32; letter-spacing: -0.02em; color: var(--brown900) !important; margin: 0 !important; } #jrRiskUrgency .jr-risk-head p { font-size: var(--jr-type-subtitle) !important; line-height: 1.68; letter-spacing: -0.006em; color: var(--brown700) !important; margin-top: 0.45rem !important; } #jrRiskUrgency .jr-risk-card h3 { font-size: var(--jr-type-card-title) !important; line-height: 1.4; } #jrRiskUrgency .jr-risk-card p, #jrRiskUrgency .jr-risk-card .jr-risk-scenario { font-size: var(--jr-type-body) !important; line-height: 1.72; letter-spacing: -0.004em; } /* 맞춤변호사 검색: 제목·설명은 RISK CHECK(.jr-risk-head)와 동일 스케일 */ .lawyer-search-wrap .lawyer-search-head h2 { font-size: var(--jr-type-title) !important; line-height: 1.32; letter-spacing: -0.02em; color: var(--brown900) !important; margin: 0 !important; font-weight: 700; } .lawyer-search-wrap .lawyer-search-head .lawyer-search-desc { font-size: var(--jr-type-subtitle) !important; line-height: 1.68; letter-spacing: -0.006em; color: var(--brown700) !important; margin: 0.45rem 0 0 !important; } /* —— WHY JR (#jrWhyCredibility) —— Downloads index 동기화 */ /* 배경·워터마크는 상단 #jrWhyCredibility 그룹과 RISK CHECK 공통 규칙 사용 */ .jr-why-credibility-section .innerWrap { position: relative; z-index: 1; gap: 0 !important; } .jr-why-credibility-head { text-align: center; max-width: 88rem; margin: 0 auto; } .jr-why-credibility-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.42rem 1.1rem; border-radius: 999px; background: rgba(45, 36, 25, 0.92); color: #fffdf8; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 10px 20px rgba(45, 36, 25, 0.14); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.8rem; } .jr-why-credibility-head h2 { margin: 0; color: #1f1711; font-size: clamp(2rem, 1.308rem + 3.08vw, 3.5rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } .jr-why-credibility-head p { margin: 1.35rem 0 0; color: #4e4438; font-size: 1.62rem; line-height: 1.85; } .jr-why-credibility-head .jr-why-mobile-break { display: none; } .jr-why-core-cards { margin-top: var(--jr-section-head-content-gap); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: whyCore; } .jr-why-core-cards article { position: relative; overflow: hidden; background: #fff; border: 1px solid #b0a090; border-radius: 14px; padding: 1.95rem 1.65rem 1.75rem; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.07), 0 1px 0 rgba(255, 255, 255, 0.6) inset; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .jr-why-core-cards article::before { counter-increment: whyCore; content: "0" counter(whyCore); display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 2.2rem; padding: 0 0.7rem; margin-bottom: 0.85rem; border-radius: 999px; background: #f3ebe1; color: #7f5f3f; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.03em; } .jr-why-core-cards article::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #8e6a45 0%, #c9a86a 100%); opacity: 0.78; } .jr-why-core-cards article:hover { transform: translateY(-3px); border-color: #9a8a78; box-shadow: 0 10px 22px rgba(45, 36, 25, 0.11); } .jr-why-core-cards h3 { margin: 0; color: #2d2419; font-size: clamp(1.62rem, 1.28rem + 0.82vw, 2.05rem); letter-spacing: -0.01em; } .jr-why-core-cards p { margin: 0.7rem 0 0; color: #4b4035; font-size: 1.4rem; line-height: 1.78; } .jr-why-core-cards p strong { color: #7a5833; font-weight: 800; } #jrWhyCredibility .jr-why-credibility-head h2 { font-size: var(--jr-type-title) !important; line-height: 1.32; letter-spacing: -0.02em; color: var(--brown900) !important; margin: 0 !important; } #jrWhyCredibility .jr-why-credibility-head p { font-size: var(--jr-type-subtitle) !important; line-height: 1.68; letter-spacing: -0.006em; color: var(--brown700) !important; margin-top: 0.45rem !important; } #jrWhyCredibility .jr-why-core-cards h3 { font-size: var(--jr-type-card-title) !important; line-height: 1.4; } #jrWhyCredibility .jr-why-core-cards p { font-size: var(--jr-type-body) !important; line-height: 1.72; letter-spacing: -0.004em; } @media (max-width: 767px) { #jrWhyCredibility .jr-why-credibility-head p br:not(.jr-why-mobile-break) { display: none; } #jrWhyCredibility .jr-why-credibility-head .jr-why-mobile-break { display: inline; } #jrWhyCredibility .jr-why-credibility-head h2 { font-size: clamp(2.35rem, 2rem + 0.8vw, 2.95rem) !important; line-height: 1.24; } #jrWhyCredibility .jr-why-credibility-head p { font-size: 1.48rem !important; line-height: 1.78; } #jrWhyCredibility .jr-why-core-cards { grid-template-columns: 1fr; margin-top: var(--jr-section-head-content-gap); gap: 0.95rem; } #jrWhyCredibility .jr-why-core-cards article { padding: 1.45rem 1.2rem 1.2rem; border-radius: 12px; box-shadow: 0 4px 14px rgba(45, 36, 25, 0.08); text-align: left; } #jrWhyCredibility .jr-why-core-cards article::before { content: none; } #jrWhyCredibility .jr-why-core-cards h3 { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; font-size: 1.92rem !important; line-height: 1.35; } #jrWhyCredibility .jr-why-core-cards h3::before { counter-increment: whyCore; content: "0" counter(whyCore); display: inline-flex; align-items: center; justify-content: center; min-width: 2.9rem; height: 2rem; padding: 0 0.65rem; border-radius: 999px; background: #f3ebe1; color: #7f5f3f; font-size: 1.08rem; font-weight: 700; letter-spacing: 0.03em; flex-shrink: 0; } #jrWhyCredibility .jr-why-core-cards p { margin-top: 0.6rem; font-size: 1.36rem !important; line-height: 1.62; color: #4e4338; } } @media (max-width: 390px) { #jrWhyCredibility .jr-why-core-cards article { padding: 1.05rem 0.95rem 0.95rem; } } /* 업무사례 미리보기 #jrCasesPreview / JR 학폭상담사례 #jrConsultCases — Downloads index 동기화 */ #jrCasesPreview.jr-cases-preview-section--paused { display: none !important; } /* 배경은 상단 --jr-surface-review-bg 공통 블록 */ #jrCasesPreview.jr-cases-preview-section .innerWrap, #jrConsultCases.jr-cases-preview-section .innerWrap { position: relative; z-index: 1; } #jrCasesPreview.jr-cases-preview-section .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } #jrConsultCases.jr-cases-preview-section .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } #jrCasesPreview .jr-why-credibility-head h2, #jrConsultCases .jr-why-credibility-head h2 { font-size: var(--jr-type-title) !important; line-height: 1.32; letter-spacing: -0.02em; color: var(--brown900) !important; margin: 0 !important; } #jrCasesPreview .jr-why-credibility-head p, #jrConsultCases .jr-why-credibility-head p { font-size: var(--jr-type-subtitle) !important; line-height: 1.68; letter-spacing: -0.006em; color: var(--brown700) !important; margin-top: 0.45rem !important; } #jrCasesPreview .jr-cases-preview-card-title, #jrConsultCases .jr-cases-preview-card-title { font-size: var(--jr-type-card-title) !important; line-height: 1.4; } #jrCasesPreview .jr-cases-preview-card-summary, #jrConsultCases .jr-cases-preview-card-summary { font-size: var(--jr-type-body) !important; line-height: 1.72; letter-spacing: -0.004em; } #jrCasesPreview .jr-section-more-btn, #jrConsultCases .jr-section-more-btn { display: inline-flex !important; width: 24rem !important; min-width: 24rem !important; max-width: 24rem !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; box-sizing: border-box !important; } #jrCasesPreview .jr-section-more-btn span, #jrConsultCases .jr-section-more-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #jrCasesPreview .jr-section-more-btn svg, #jrConsultCases .jr-section-more-btn svg { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; } /* 업무사례: innerWrap gap만으로 카드↔전체보기 간격 통일(중복 margin 제거) */ #jrCasesPreview.jr-cases-preview-section .jr-section-more-wrap, #jrConsultCases.jr-cases-preview-section .jr-section-more-wrap { margin-top: 0 !important; } #jrCasesPreview .jr-why-credibility-badge, #jrConsultCases .jr-why-credibility-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.42rem 1.1rem !important; border-radius: 999px !important; font-size: 1.12rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; line-height: 1 !important; margin-bottom: 0.8rem !important; } @media (max-width: 767px) { #jrCasesPreview .jr-cases-preview-track-wrap, #jrConsultCases .jr-cases-preview-track-wrap { width: min(100%, calc(100vw - 2.4rem)) !important; max-width: min(100%, calc(100vw - 2.4rem)) !important; margin-left: auto !important; margin-right: auto !important; padding: 0.75rem 0 1.1rem !important; box-sizing: border-box; } #jrCasesPreview .jr-cases-preview-card, #jrConsultCases .jr-cases-preview-card { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } #jrCasesPreview .jr-cases-preview-btn--prev, #jrConsultCases .jr-cases-preview-btn--prev { left: -0.4rem !important; } #jrCasesPreview .jr-cases-preview-btn--next, #jrConsultCases .jr-cases-preview-btn--next { right: -0.4rem !important; } } @media (max-width: 1199px) and (min-width: 951px) { #jrCasesPreview .jr-cases-preview-track, #jrConsultCases .jr-cases-preview-track { gap: 1.6rem; } #jrCasesPreview .jr-cases-preview-card { flex: 0 0 calc((100% - 3.2rem) / 3) !important; width: calc((100% - 3.2rem) / 3) !important; max-width: calc((100% - 3.2rem) / 3) !important; } #jrCasesPreview .jr-cases-preview-btn--prev, #jrConsultCases .jr-cases-preview-btn--prev { left: -0.4rem !important; } #jrCasesPreview .jr-cases-preview-btn--next, #jrConsultCases .jr-cases-preview-btn--next { right: -0.4rem !important; } } @supports (width: 1cqw) { @media (max-width: 1199px) and (min-width: 951px) { #jrCasesPreview .jr-cases-preview-card { flex: 0 0 calc((100cqw - 3.2rem) / 3) !important; width: calc((100cqw - 3.2rem) / 3) !important; max-width: calc((100cqw - 3.2rem) / 3) !important; } } } @media (max-width: 390px) { #jrCasesPreview .jr-cases-preview-track-wrap, #jrConsultCases .jr-cases-preview-track-wrap { padding: 0.6rem 0 1rem !important; } #jrCasesPreview .jr-cases-preview-btn, #jrConsultCases .jr-cases-preview-btn { width: 3.2rem; height: 3.2rem; font-size: 1.55rem; } #jrCasesPreview .jr-cases-preview-btn--prev, #jrConsultCases .jr-cases-preview-btn--prev { left: -0.4rem !important; } #jrCasesPreview .jr-cases-preview-btn--next, #jrConsultCases .jr-cases-preview-btn--next { right: -0.4rem !important; } } /* 네이버 플레이스 방문자 후기 — 뷰포트 + 가로 슬라이드 (Downloads index 동기화) */ .jr-naver-reviews-section .jr-naver-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 1rem; border-radius: 6px; background: #2d2419; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; width: fit-content; min-width: 0; margin-left: auto; margin-right: auto; margin-top: 1.2rem; margin-bottom: 0.8rem; text-transform: uppercase; } .jr-naver-reviews-section .innerWrap { gap: 0; } .jr-naver-reviews-section > .innerWrap > h2:first-of-type { margin-top: 0; margin-bottom: 0; line-height: 1.2; text-align: center; } .jr-naver-reviews-section .jr-naver-reviews-desc { font-size: clamp(1.1rem, 1rem + 0.25vw, 1.35rem); color: var(--brown700); line-height: 1.55; max-width: 38rem; margin: 0.35rem auto 0; text-align: center; } .jr-naver-reviews-section .innerWrap > .cont { margin-top: var(--jr-section-head-content-gap); } .jr-naver-reviews-section .cont.jr-naver-reviews-stage-wrap { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .jr-naver-reviews-stage { position: relative; width: 100%; max-width: calc(1200px + 7rem); padding: 0 clamp(2.75rem, 4vw, 3.5rem); box-sizing: border-box; } .jr-naver-reviews-fade-root { width: 100%; max-width: 1200px; margin: 0 auto; } .jr-naver-reviews-viewport { overflow: hidden; width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 2px; margin-bottom: -2px; } .jr-naver-reviews-grid { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: clamp(1.25rem, 2.5vw, 2rem); width: max-content; min-width: 100%; max-width: none; margin: 0; transition: transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; } .jr-naver-reviews-grid.jr-naver-slide--no-trans { transition: none; } .jr-naver-reviews-grid--single { display: grid; grid-template-columns: 1fr; width: 100%; min-width: 0; max-width: 28rem; margin: 0 auto; transition: none; will-change: auto; } .jr-naver-grid-cell { display: flex; min-width: 0; min-height: 0; flex: 0 0 var(--jr-naver-cell, min(100%, 320px)); box-sizing: border-box; } .jr-naver-reviews-grid--single .jr-naver-grid-cell { flex: 1 1 auto; max-width: 100%; } .jr-naver-grid-cell--empty { visibility: hidden; pointer-events: none; } .jr-naver-fade-controls { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 3; margin: 0; } .jr-naver-fade-btn { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: clamp(3rem, 5vw, 3.5rem); height: clamp(3rem, 5vw, 3.5rem); border-radius: 50%; border: 1px solid rgba(45, 36, 24, 0.12); background: rgba(255, 255, 255, 0.96); color: var(--brown800); box-shadow: 0 4px 14px rgba(45, 36, 24, 0.1); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .jr-naver-fade-btn:hover { background: var(--brown800); color: #fff; border-color: var(--brown800); box-shadow: 0 6px 20px rgba(45, 36, 24, 0.18); transform: scale(1.05); } .jr-naver-fade-btn svg { flex-shrink: 0; } @media (max-width: 767px) { .jr-naver-grid-cell--empty { display: none; } } #jrNaverReviews .review-card { width: 100%; max-width: 100%; box-sizing: border-box; transform: none !important; opacity: 1 !important; height: 100%; display: flex; flex-direction: column; border: 1px solid #b0a090; border-radius: 16px; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.06); } #jrNaverReviews .review-card__profile { flex-shrink: 0; } #jrNaverReviews .review-card__profile .jr-naver-review-idline { margin-top: 0; margin-bottom: 0.5rem; } #jrNaverReviews .review-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; text-align: left; } #jrNaverReviews .review-card__text { color: #7d6e65; font-size: 2rem; line-height: 1.65; text-align: left; flex: 1 1 auto; min-height: 0; margin: 0; padding-bottom: 0.12em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .jr-naver-reviews-grid--single .review-card__text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } #jrNaverReviews .jr-naver-place-link { margin-top: auto; padding-top: 1rem; flex-shrink: 0; display: inline-block; align-self: center; font-size: 1.45rem; font-weight: 600; color: #03a84d; text-decoration: none; } #jrNaverReviews .jr-naver-place-link:hover { text-decoration: underline; color: #038a3d; } #jrNaverReviews .jr-section-more-wrap { margin-top: var(--jr-section-head-content-gap); margin-bottom: 0; } #jrNaverReviews.jr-naver-reviews-section .innerWrap, #jrInstagram.jr-instagram-section .innerWrap { background: transparent !important; } #jrNaverReviews > .innerWrap > h2:first-of-type, #jrReview > .innerWrap > h2:first-of-type, #jrInstagram .jr-instagram-title { font-size: var(--jr-type-title) !important; line-height: 1.32; letter-spacing: -0.02em; color: var(--brown900) !important; margin: 0 !important; } #jrNaverReviews .jr-naver-reviews-desc, #jrReview .jr-naver-reviews-desc, #jrInstagram .jr-instagram-desc { font-size: var(--jr-type-subtitle) !important; line-height: 1.68; letter-spacing: -0.006em; color: var(--brown700) !important; } #jrNaverReviews .review-card__name { font-size: var(--jr-type-card-title) !important; line-height: 1.4; } #jrNaverReviews .jr-naver-badge, #jrNaverReviews .review-card__category, #jrNaverReviews .review-card__text, #jrNaverReviews .jr-naver-place-link { font-size: var(--jr-type-body) !important; line-height: 1.72; letter-spacing: -0.004em; } #jrNaverReviews .jr-section-more-btn { display: inline-flex !important; width: 24rem !important; min-width: 24rem !important; max-width: 24rem !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; box-sizing: border-box !important; } #jrNaverReviews .jr-section-more-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #jrNaverReviews .jr-section-more-btn svg { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; } #jrNaverReviews .jr-naver-badge, #jrReview .jr-naver-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.42rem 1.1rem !important; border-radius: 999px !important; font-size: 1.12rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; line-height: 1 !important; margin-bottom: 0.8rem !important; margin-top: 0 !important; } @media (max-width: 767px) { #jrNaverReviews .jr-naver-reviews-stage { padding: 0 !important; } #jrNaverReviews .jr-naver-reviews-viewport { width: min(100%, calc(100vw - 2.4rem)) !important; max-width: min(100%, calc(100vw - 2.4rem)) !important; margin-left: auto !important; margin-right: auto !important; } #jrNaverReviews .jr-naver-fade-controls { left: -0.8rem !important; right: -0.8rem !important; } } @media (max-width: 390px) { #jrNaverReviews .jr-naver-reviews-stage { padding: 0 !important; } #jrNaverReviews .jr-naver-fade-btn { width: 3.2rem; height: 3.2rem; } } /* JR 인스타그램 (#jrInstagram) */ .jr-instagram-section .jr-media-width { margin-top: var(--jr-section-head-content-gap) !important; } .jr-instagram-header { text-align: center; margin-bottom: 0; margin-top: 0; } .jr-instagram-badge { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 6px; background: #2d2419; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.8rem; } .jr-instagram-title { font-size: clamp(2rem, 1.308rem + 3.08vw, 3.5rem); font-weight: 700; color: #050505; margin: 0; } .jr-instagram-desc { font-size: clamp(1.1rem, 1rem + 0.2vw, 1.25rem); color: #050505; font-weight: 400; margin-top: 0.45rem; } #jrInstagram .innerWrap { gap: clamp(1.2rem, 2.2vw, 2rem) !important; } .jr-instagram-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; } @media (min-width: 640px) { .jr-instagram-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) and (max-width: 1199px) { .jr-instagram-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .jr-instagram-grid { grid-template-columns: repeat(4, 1fr); } } /* 모바일: 인스타 그리드(기본) 3열 — 가로 스크롤 모드(.jr-instagram-grid--scroll)는 temple-theme 에서 덮음 */ @media (max-width: 899px) { .jr-instagram-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.45rem, 2.2vw, 0.85rem); } } .jr-instagram-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #b0a090; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .jr-instagram-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12); border-color: rgba(184, 124, 72, 0.45); } .jr-instagram-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f1ece6; overflow: hidden; } .jr-instagram-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .jr-instagram-card p { margin: 0; padding: 0.85rem 0.95rem 1rem; font-size: 1.25rem; color: #2d2419; line-height: 1.5; text-align: left; min-height: 4.8rem; } #jrInstagram .jr-instagram-card p { font-size: var(--jr-type-body) !important; line-height: 1.72; letter-spacing: -0.004em; } .jr-instagram-card .jr-instagram-card-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; line-height: 1.62; min-height: calc(1.62em * 2 + 0.12em); } #jrInstagram .jr-instagram-card .jr-instagram-card-text { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; word-break: keep-all; overflow: hidden !important; text-overflow: ellipsis; line-height: 1.62 !important; min-height: calc(1.62em * 2 + 0.12em) !important; } .jr-instagram-empty { text-align: center; padding: 2rem; color: #6d6357; font-size: 1.4rem; } .jr-section-more-btn .jr-instagram-more-icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; object-fit: contain; } /* —— 학폭전략센터 FAQ (#faq) —— Downloads index 동기화 */ /* 본문 섹션 상단 구분선 — 의뢰인 후기(#jrReview)와 FAQ(#faq) 사이와 동일 (히어로 직후 RISK CHECK부터 적용) */ #target.pclayout .contents > section.sect { border-top: 1px solid rgba(176, 160, 144, 0.33); } .jr-faq-section { position: relative; text-align: left; } .jr-faq-section .jr-faq-inner { gap: var(--jr-section-head-content-gap) !important; max-width: 1200px; margin-left: auto; margin-right: auto; } .jr-faq-head { text-align: center; } .jr-faq-badge { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 6px; background: #2d2419; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.85rem; } .jr-faq-title { font-size: clamp(2rem, 1.308rem + 3.08vw, 3.5rem); font-weight: 700; color: #050505; margin: 0; letter-spacing: -0.02em; line-height: 1.2; } .jr-faq-lead { margin: 1rem auto 0; max-width: 40rem; font-size: clamp(1.15rem, 1.02rem + 0.35vw, 1.3rem); line-height: 1.65; color: #3d352b; text-align: center; } .jr-faq-lead strong { color: #1f1711; font-weight: 700; } .jr-faq-body { display: grid; gap: 2.5rem; } @media (min-width: 900px) { .jr-faq-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2.5rem; align-items: start; } } .jr-faq-cat-title { font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.55rem); font-weight: 700; color: #1f1711; margin: 0 0 1rem; padding-bottom: 0.65rem; border-bottom: 2px solid rgba(45, 36, 25, 0.12); letter-spacing: -0.02em; } .jr-faq-list { display: flex; flex-direction: column; gap: 0.85rem; } .jr-faq-item { border: 1px solid #b0a090; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.06); overflow: hidden; } .jr-faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 1.15rem 1.2rem 1.15rem 1.35rem; margin: 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease; } .jr-faq-trigger:hover, .jr-faq-trigger:focus-visible { background: rgba(245, 239, 230, 0.55); } .jr-faq-trigger:focus-visible { outline: 2px solid rgba(205, 131, 78, 0.65); outline-offset: -2px; } .jr-faq-q { font-size: clamp(1.28rem, 1.15rem + 0.35vw, 1.48rem); font-weight: 700; color: #15100c; line-height: 1.45; flex: 1; min-width: 0; } .jr-faq-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(45, 36, 25, 0.06); color: #2d2419; } .jr-faq-icon svg { display: block; transition: transform 0.35s ease; } .jr-faq-item.is-open .jr-faq-icon svg { transform: rotate(180deg); } .jr-faq-panel-inner { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; } .jr-faq-item.is-open .jr-faq-panel-inner { max-height: 48rem; } .jr-faq-answer { padding: 0 1.35rem 1rem; border-top: 1px solid rgba(176, 160, 144, 0.35); background: linear-gradient(180deg, rgba(250, 248, 245, 0.9) 0%, #fff 40%); } .jr-faq-answer p { margin: 0; font-size: clamp(1.32rem, 1.18rem + 0.35vw, 1.48rem); line-height: 1.65; color: #2d2419; } .jr-faq-answer p + p { margin-top: 0.85rem; } .jr-faq-cta { display: inline-flex; align-items: center; gap: 0.35rem; margin: 1rem 1.35rem 1.25rem; padding: 0.75rem 1.2rem; border-radius: 9999px; background: linear-gradient(180deg, #4a4035 0%, #2d2419 100%); color: #fff !important; font-size: clamp(1.22rem, 1.1rem + 0.3vw, 1.35rem); font-weight: 600; text-decoration: none !important; line-height: 1.35; box-shadow: 0 4px 14px rgba(45, 36, 25, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; } .jr-faq-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(45, 36, 25, 0.22); color: #fff !important; } .jr-faq-cta:focus-visible { outline: 2px solid #cd834e; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .jr-faq-panel-inner, .jr-faq-icon svg, .jr-faq-cta { transition: none !important; } .jr-faq-item.is-open .jr-faq-panel-inner { max-height: none; } } #faq .jr-faq-title { font-size: var(--jr-type-title) !important; line-height: 1.32; letter-spacing: -0.02em; color: var(--brown900) !important; } #faq .jr-faq-lead, #faq .jr-faq-cat-title, #faq .jr-faq-q { font-size: var(--jr-type-subtitle) !important; line-height: 1.68; letter-spacing: -0.006em; color: var(--brown700) !important; } #faq .jr-faq-lead strong { color: var(--brown700) !important; } #faq .jr-faq-answer p { font-size: var(--jr-type-body) !important; line-height: 1.72; letter-spacing: -0.004em; } #faq .jr-faq-trigger--soft .jr-faq-q { font-size: clamp(1.54rem, 1.38rem + 0.34vw, 1.72rem) !important; font-weight: 500 !important; color: var(--brown900) !important; } /* 히어로: ~899px 이하만 세로 풀뷰포트 — 900px 이상은 .visual_two_col 그리드 유지 */ @media screen and (max-width: 899px) { #jrMember .visual_two_col { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; min-height: 0 !important; } #jrMember .visual_left { width: 100% !important; max-width: 100% !important; order: 1; } #jrMember .lawyer-slider-container.lawyer-slider-others, #jrMember .lawyer-slider-container { order: 3; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px)) max(0.25rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)) !important; box-sizing: border-box !important; background: #f5f2ee !important; overflow-x: hidden !important; position: relative; z-index: 2; } #jrMember .lawyer-slider-container .swiper { max-width: 100% !important; overflow: hidden !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } #jrMember .visual_right { order: 2; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative !important; flex: 0 0 auto !important; align-self: stretch !important; } #jrMember .visual_right .jr-hero-fixed.jr-lawyer-profile-trigger, #jrMember .visual_right .jr-hero-fixed { width: 100% !important; max-width: none !important; box-sizing: border-box !important; /* 모바일: 좌측 공백 제거(translate 제거로 풀블리드에 맞춤) */ transform: translateX(0) !important; transition: transform 0.3s ease !important; } #jrMember .visual_right .jr-hero-fixed .hero-fixed-img { width: 100% !important; max-width: none !important; min-height: 0 !important; max-height: none !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; display: block !important; border-radius: 0 !important; object-fit: contain !important; object-position: center top !important; } #jrMember .slogan_wrap { display: flex !important; flex-direction: column !important; align-items: center !important; } #jrMember .slogan_wrap > .title { align-self: center !important; width: 100% !important; max-width: min(36rem, 100%) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } #jrMember .slogan_wrap > .title h1, #jrMember .slogan_wrap > .title .subtxt { text-align: left !important; } #jrMember .btn_group, .visual .btn_group { display: flex !important; flex-wrap: wrap; justify-content: center !important; align-items: center !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative; left: auto; box-sizing: border-box !important; transform: none !important; padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); } } /* 다운로드판 index 동기화: #jrMember 슬로건·버튼 (모바일) */ @media screen and (max-width: 899px) { #jrMember .visual_two_col { gap: 0 !important; } #jrMember .visual_left { margin-bottom: 0 !important; } #jrMember .slogan_wrap { padding: calc(clamp(5.6rem, 9vw, 6.7rem) + env(safe-area-inset-top, 0px)) 1rem 0.65rem 1rem !important; text-align: left !important; align-items: center !important; } #jrMember .slogan_wrap > .title { align-self: center !important; width: 100% !important; max-width: min(36rem, 100%) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; box-sizing: border-box !important; } #jrMember .title, #jrMember .title h1, #jrMember .title .subtxt { text-align: left !important; } #jrMember .btn_group { margin-top: 2em; margin-top: 2lh; } #jrMember .btn_group .btnCall.btncs, #jrMember .btn_group .btnRsv.btncs.modal-trigger-btn { font-size: clamp(1.42rem, 4.1vw, 1.82rem) !important; min-height: 4.55rem; padding: 0.82rem 2rem !important; } #jrMember .btn_group .btnCall.btncs i, #jrMember .btn_group .btnRsv.btncs.modal-trigger-btn i { width: 2rem; height: 2rem; } #jrMember .visual_right { margin-bottom: 0; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; } #jrMember .visual_right .jr-hero-fixed { overflow: hidden !important; position: relative !important; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 0; } #jrMember .visual_right .jr-hero-fixed .hero-fixed-img { position: relative; z-index: 0; display: block; vertical-align: bottom; margin-bottom: 0; max-width: none; width: 100%; border-radius: 0; } #jrMember .visual_right .jr-hero-fixed .lawyer-info { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; line-height: 1.45 !important; border-radius: 0 !important; width: 100% !important; padding: 1rem max(20px, env(safe-area-inset-right, 0px)) calc(3.5rem + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)) !important; box-sizing: border-box !important; margin: 0 !important; background: none !important; } #jrMember .visual_right .jr-hero-fixed .lawyer-info > p:first-of-type { margin-bottom: 0.2rem !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(20, 14, 10, 0.55) !important; } #jrMember .visual_right .jr-hero-fixed .lawyer-info p:last-of-type { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.4) !important; } #jrMember .visual_right .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { position: static !important; left: auto !important; top: auto !important; transform: none !important; align-self: center !important; margin: 0 auto 0.5rem auto !important; width: fit-content !important; max-width: calc(100% - 0.5rem) !important; text-align: center !important; z-index: auto !important; } } /* index 히어로 lawyer-info: 태블릿·모바일 뷰포트 가로 풀사이즈 (그리드 컬럼·innerWrap 밖으로) */ @media screen and (max-width: 1024px) { #jrMember .visual_right .jr-hero-fixed { overflow-x: visible !important; overflow-y: hidden !important; } #jrMember .visual_right .jr-hero-fixed .lawyer-info { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: auto !important; /* 부모(.jr-hero-fixed) 기준 뷰포트 가로 풀블리드 — 그라데이션 좌·우 끝 정렬 */ margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: max(20px, env(safe-area-inset-left, 0px)) !important; padding-right: max(20px, env(safe-area-inset-right, 0px)) !important; box-sizing: border-box !important; } #jrMember .visual_right .jr-hero-fixed .lawyer-info .jr-hero-profile-hint { transform: none !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; width: fit-content !important; max-width: calc(100% - 0.5rem) !important; text-align: center !important; } } /* 독립 레이어: 디자인3 전용(듀오 + 파트너 교체) */ /* 독립 레이어: 디자인4 전용(정적 전원 배치) */ /* 초소형 모바일: 히어로 슬로건·버튼 정렬 (다운로드판) */ @media (max-width: 390px) { #jrMember .visual_left { transform: translateX(-2rem) !important; } #jrMember .btn_group { transform: translateX(2rem) !important; } #jrMember .slogan_wrap > .title { max-width: min(30.5rem, 100%) !important; } #jrMember .title h1 { word-break: keep-all; line-break: strict; text-wrap: balance; line-height: 1.22 !important; } #jrMember .title h1.jr-hero-title-line2-off { text-wrap: wrap; } #jrMember .title .subtxt { word-break: keep-all; line-break: strict; line-height: 1.55 !important; } #jrMember .title .subtxt > br, #jrMember .title .subtxt .jr-subtxt-br-mo { display: none; } } /* 히어로 제목: lawfirmjr 참고 — Pretendard ExtraBold(800) + 브라운 common.css * { font-weight:400 } 가 h1 내부 span 에 적용되어 굵기가 사라짐 → h1·span 모두 800 고정 */ #jrMember .title h1 { font-weight: 800 !important; color: #4a3c31; } #jrMember .title h1 span#jr-hero-l1, #jrMember .title h1 span#jr-hero-l2 { font-weight: 800 !important; color: inherit; } /* 둘째 줄 전체를 한 덩어리로(‘알려드립니다.’ 등이 음절 단위로 끊기지 않게) */ #jrMember .title h1 [data-hero-role="line2"], #jrMember .title h1 span[id^="jr-hero-l2"] { white-space: nowrap; letter-spacing: -0.04em; } @media (max-width: 520px) { #jrMember .title h1 [data-hero-role="line2"], #jrMember .title h1 span[id^="jr-hero-l2"] { font-size: clamp(0.78em, 3.2vw + 0.45rem, 1em); letter-spacing: -0.06em; } } /* line2 비어 있을 때(한 줄 제목): 줄바꿈 br 숨김 */ #jrMember .title h1.jr-hero-title-line2-off > br { display: none; } /* 고정 헤더(64px)·노치: 앵커·스크롤 스냅 시 히어로 h1이 가려지지 않게 */ #jrMember.visual { scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px)); overflow-x: hidden; } /* PC: 롤링 네거티브 마진·확장 폭이 섹션에서 잘리지 않게 */ @media (min-width: 900px) { #jrMember.visual { overflow-x: visible; } } /* 디자인1 큰 사진 최종 고정값: 다른 중간 규칙 간섭 차단 */ /* 메인 학폭 히어로 롤링: 카드 프레임에 사진 비율 유지·잘림 없음(contain) — 텍스트는 위 레이어 */ /* Lawyer match section override (match screenshot #2) */ section.lawyer-search-wrap.lawyer-match { background: #f5f5f5; } .lawyer-search-wrap.lawyer-match .lawyer-search-badge, .lawyer-match-stepper, .lawyer-match-panel--cats, .lawyer-match-panel-kicker { display: none !important; } .lawyer-search-wrap.lawyer-match .lawyer-search-head h2 { font-size: clamp(3.2rem, 2.6vw, 3.8rem); font-weight: 800; color: #4a3928; margin: 0 0 0.65rem; letter-spacing: -0.02em; } .lawyer-search-wrap.lawyer-match .lawyer-search-desc { max-width: 74rem; margin: 0 auto 1.8rem; color: #857463; font-weight: 500; font-size: clamp(1.35rem, 1.18vw, 1.55rem); } .lawyer-match-outer { max-width: 96rem; } .lawyer-match-shell.lawyer-search-sect { overflow: visible; padding: 2rem 2.2rem; border-radius: 10px; border: 1px solid #e5ddd0; background: #f6f3ee; box-shadow: none; } .lawyer-match-shell.lawyer-search-sect::before { display: none; } .lawyer-match-shell-inner { padding: 0; } .lawyer-match-refine-row { grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 62rem; margin: 0 auto; } .lawyer-match-label { display: block; margin: 0 0 0.42rem; font-size: clamp(1.45rem, 1.2vw, 1.65rem); color: #5f5042; font-weight: 700; text-align: center; } .lawyer-match-select-wrap::after { right: 1rem; width: 0.48rem; height: 0.48rem; border-right: 1.5px solid #7f7368; border-bottom: 1.5px solid #7f7368; } .lawyer-match-shell select { min-height: 4rem; padding: 0.5rem 2rem 0.5rem 1rem; font-size: clamp(1.35rem, 1.15vw, 1.55rem); border: 1px solid #d8d0c4; color: #4f4337; text-align: center; text-align-last: center; } .lawyer-match-shell select:focus { border-color: #ba8348; box-shadow: 0 0 0 2px rgba(186, 131, 72, 0.14); } .lawyer-match-keyword { min-height: 4rem; padding: 0 0.85rem; border: 1px solid #d8d0c4; } .lawyer-match-keyword:focus-within { border-color: #ba8348; box-shadow: 0 0 0 2px rgba(186, 131, 72, 0.14); } .lawyer-match-keyword-icon { color: #a79a8c; } .lawyer-match-shell input[type="search"], .lawyer-match-shell input[type="text"] { color: #4f4337; font-size: clamp(1.35rem, 1.15vw, 1.55rem); } .lawyer-match-shell input::placeholder { color: #9d8f80; } .lawyer-match-results.lawyer-search-results { padding: 1.35rem 0 0; border-top: 1px solid #e5ddd0; background: transparent; } .lawyer-match-results-title { margin: 0 0 0.9rem; font-size: clamp(1.7rem, 1.35vw, 1.95rem); color: #4a3928; text-align: center; } @media (max-width: 520px) { .lawyer-match-refine-row { grid-template-columns: 1fr; } } /* 홈 RISK CHECK(#jrRiskUrgency.jr-risk-section, temple-theme --temple-strip-bg-light) 본문 면 — practice 및 서브페이지 공통 */ /* section 타입 포함: index.min의 section.sect.lawyer-search-wrap 보다 특이도 높게 */ .subpage section.sect.jr-subpage-body-surface, .subpage .sect.jr-subpage-body-surface, .subpage .jr-practices-fallback.jr-subpage-body-surface { position: relative; overflow: hidden; background: var( --temple-strip-bg-light, linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%) ) !important; } .subpage section.sect.jr-subpage-body-surface::before, .subpage .sect.jr-subpage-body-surface::before, .subpage .jr-practices-fallback.jr-subpage-body-surface::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg"); background-repeat: no-repeat, no-repeat; background-position: 90% 18%, 6% 88%; background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto; } .subpage section.sect.jr-subpage-body-surface > .innerWrap, .subpage .sect.jr-subpage-body-surface > .innerWrap, .subpage .sect.jr-subpage-body-surface > .consult-guide-inner, .subpage .jr-practices-fallback.jr-subpage-body-surface > .jr-practices-fallback__inner { position: relative; z-index: 1; } @media (max-width: 767px) { .subpage section.sect.jr-subpage-body-surface::before, .subpage .sect.jr-subpage-body-surface::before, .subpage .jr-practices-fallback.jr-subpage-body-surface::before { opacity: 0.038; background-position: 92% 12%, 4% 92%; background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto; } } /* style.css footer { margin-top } 가 본문(#fff)과 갈색 푸터 사이에 흰 가로 띠를 만듦 → 서브페이지에서 제거 */ .subpage .contents footer.footer { margin-top: 0 !important; } /* HTML #home-logo-emphasis 와 동일 — 원본 head 에서 subpage-body-risk 다음·temple-theme 이전에 위치 */ .header .logo .logo-title { font-weight: 800 !important; letter-spacing: -0.07rem; } .header .logo .logo-tagline { font-weight: 750 !important; opacity: 1 !important; } /** * /docker/temple 전용: 딥블루 메인 컬러, 히어로 배경 이미지 제거 * common.css의 :root 토큰을 블루 팔레트로 재정의하고 구역별 대비 보정 */ :root { --jrwhite: #f8fafc; --jrsoftwhite: #e8eef7; --jrblack: #030712; /* 기존 brown* 토큰명 유지 → 블루 계열로 매핑 (링크·배지·본문에 연쇄 적용) */ --brown50: #eef4fc; --brown100: #d4e4fb; --brown200: #a8c9f5; --brown300: #7eb3f0; --brown400: #4d94e8; --brown500: #2563eb; --brown600: #1d4ed8; --brown700: #1e40af; --brown800: #1e3a8a; --brown900: #172554; /* 히어로·푸터 공통 배경 (동일 톤 유지) */ --temple-hero-bg: linear-gradient( 155deg, rgba(3, 11, 20, 0.88) 0%, rgba(10, 31, 56, 0.74) 38%, rgba(19, 47, 85, 0.66) 72%, rgba(12, 33, 56, 0.84) 100% ); --temple-hero-photo-url: url("/images/hero-school-classroom.png"); /* 섹션·카드용 딥블루 팔레트 (브라운 톤 대체) */ --temple-deep: #0a1628; --temple-deep-2: #0f2847; --temple-surface: #e8f0fc; --temple-surface-2: #dce8f8; --temple-card: #ffffff; --temple-card-muted: #f0f6ff; --temple-border: rgba(30, 64, 175, 0.22); --temple-border-strong: rgba(56, 189, 248, 0.35); --temple-accent: #38bdf8; --temple-accent-2: #2563eb; --temple-text: #0f172a; --temple-text-muted: #334e68; --temple-chip-bg: #dbeafe; --temple-chip-text: #1e3a8a; /* index.min 등 로컬 변수 덮어쓰기 */ --jr-surface-risk-bg: linear-gradient(180deg, #e8f0fc 0%, #dce8f8 50%, #d0e0f4 100%); --jr-surface-review-bg: linear-gradient(180deg, #e4edf9 0%, #d8e4f4 100%); /* 본문 섹션 교차: 밝은 면(CI 워터마크) / 진한 면(로고 없음) */ --temple-strip-bg-light: linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%); --temple-strip-bg-deep: linear-gradient(180deg, #b8cce8 0%, #a3bfe0 48%, #8eb3d8 100%); } /* 홈 main#target: RISK CHECK(#jrRiskUrgency) 리듬 — 세로 패딩·헤더↔본문·카드 안쪽 (index.css / index.min 분기·섹션별 margin 덮어쓰기용) */ main#target { --jr-section-head-to-cards-gap: 4.8rem; --jr-section-head-content-gap: var(--jr-section-head-to-cards-gap); /* .sect 상·하: 기본 8/6rem 대비 1lh 줄인 뒤 반줄(0.5lh) 복구 */ --jr-section-vert-pad: max(4.5rem, calc(8rem - 0.5lh)); --jr-section-vert-pad-sm: max(3.75rem, calc(6rem - 0.5lh)); /* .jr-risk-card padding: 2.2rem 1.8rem */ --jr-risk-card-pad-y: 2.2rem; --jr-risk-card-pad-x: 1.8rem; } /* 본문 .sect: PC·모바일 공통으로 RISK 와 동일 상·하 패딩 (모바일은 index.min 미로드 시에도 적용) */ main#target .contents > section.sect { padding-top: var(--jr-section-vert-pad) !important; padding-bottom: var(--jr-section-vert-pad) !important; } @media (max-width: 767px) { main#target .contents > section.sect { padding-top: var(--jr-section-vert-pad-sm) !important; padding-bottom: var(--jr-section-vert-pad-sm) !important; } } /* RISK CHECK: 헤더 → 자가진단 CTA → 카드 — CTA는 위로 두고, CTA 위·아래 여백은 1줄(1lh)만 */ main#target #jrRiskUrgency.jr-risk-section > .innerWrap { gap: 0 !important; } main#target #jrRiskUrgency .jr-risk-head { margin-bottom: 0 !important; } main#target #jrRiskUrgency .jr-section-more-wrap { margin-top: 1lh !important; margin-bottom: 1lh !important; max-width: 100% !important; } main#target #jrRiskUrgency .jr-risk-card { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; box-sizing: border-box !important; } /* WHY JR: gap:0 + 카드 margin-top 이 RISK 와 달라지는 것 방지 */ main#target #jrWhyCredibility.jr-why-credibility-section > .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } main#target #jrWhyCredibility .jr-why-core-cards { margin-top: 0 !important; } main#target #jrWhyCredibility .jr-why-core-cards article { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; box-sizing: border-box !important; } /* style.css .sect .innerWrap 기본 gap(clamp 3~8rem) 이 배지·제목·부제 사이에도 들어가 과해짐 → 홈 본문은 RISK 스케일로 통일, 예외만 별도 */ main#target .contents > section.sect > .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } /* 네이버·의뢰인 후기: 형제 나열(span,h2,p,…) — gap 끄고 본문·더보기만 한 번씩 */ main#target #jrNaverReviews > .innerWrap, main#target #jrReview > .innerWrap { gap: 0 !important; } main#target #jrNaverReviews > .innerWrap > .cont, main#target #jrReview > .innerWrap > .cont { margin-top: var(--jr-section-head-to-cards-gap) !important; } main#target #jrNaverReviews > .innerWrap > .jr-section-more-wrap, main#target #jrReview > .innerWrap > .jr-section-more-wrap { margin-top: var(--jr-section-head-to-cards-gap) !important; } /* 언론보도: 평면 나열 — gap 0 + 미디어 블록만 부제↔리스트 */ main#target #jrPress > .ll-inner.innerWrap { gap: 0 !important; } main#target #jrPress .jr-media-width { margin-top: var(--jr-section-head-to-cards-gap) !important; } /* 블로그·인스타:
+ .jr-media-width 2단 — innerWrap gap 만 (margin-top 이중 금지) */ main#target #jrBlog > .innerWrap, main#target #jrInstagram > .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } main#target #jrBlog .jr-media-width, main#target #jrInstagram .jr-media-width { margin-top: 0 !important; } /* 방송: innerWrap gap 5.5rem 등 → RISK 스케일 */ main#target section.jr-broadcast-section .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } main#target section.jr-broadcast-section .jr-broadcast-card .jr-broadcast-card-body { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; box-sizing: border-box !important; } main#target #jrBlog .jr-blog-grid--static .jr-blog-card__body { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; box-sizing: border-box !important; } /* 네이버·의뢰인 후기 카드 면 — style.css 40px/scale 과 RISK 2.2rem/1.8rem 통일 */ main#target #jrNaverReviews .review-card, main#target #jrReview .review-card { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; box-sizing: border-box !important; transform: none !important; opacity: 1 !important; } main#target #jrReview .swiper-slide-active .review-card, main#target #jrNaverReviews .swiper-slide-active .review-card { transform: none !important; } /* FAQ: 헤더↔본문 + 리드 상단 여백을 RISK 헤드와 맞춤 */ main#target .jr-faq-section .jr-faq-inner { gap: var(--jr-section-head-to-cards-gap) !important; } main#target .jr-faq-section .jr-faq-lead { margin-top: 0.45rem !important; } @media (max-width: 899px) { :root { /* 모바일 히어로는 오버레이를 옅게 해서 배경 사진 노출 강화 */ --temple-hero-bg: linear-gradient( 155deg, rgba(3, 11, 20, 0.72) 0%, rgba(10, 31, 56, 0.56) 38%, rgba(19, 47, 85, 0.48) 72%, rgba(12, 33, 56, 0.66) 100% ); } } ::selection { background: #2563eb; color: #fff; } ::-moz-selection { background: #2563eb; color: #fff; } /* 헤더: 딥블루 (기존 순흑 대체) */ .header { background: linear-gradient(180deg, #0a1628 0%, #071422 100%) !important; border-bottom: 1px solid rgba(56, 189, 248, 0.12); } .header .gnb_menu .gnb_list > li > a::after, .header .gnb_menu .gnb_list > li > a.current::after { background: #38bdf8 !important; } .header .logo:focus-visible, .header .gnb_menu ul a:focus-visible { outline-color: rgba(56, 189, 248, 0.85) !important; } /* 히어로: 배경 사진 제거 → 딥블루 그라데이션 (--temple-hero-bg) */ .visual, #jrMember.visual, #jrMobileBackupHero.visual, #jrMobileBackupHero { background-image: var(--temple-hero-bg), var(--temple-hero-photo-url) !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; background-size: cover, cover !important; background-attachment: scroll, scroll !important; } /* 히어로 위 어두운 배경 위 가독성 */ .visual .title h1, .visual .title .subtxt, #jrMember.visual .title h1, #jrMember.visual .title .subtxt, #jrMember.visual .visual_left .title h1, #jrMember.visual .visual_left .title .subtxt, #jrMobileBackupHero .title h1, #jrMobileBackupHero .title .subtxt { color: #f1f5ff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .visual .title .subtxt, #jrMember.visual .title .subtxt, #jrMobileBackupHero .title .subtxt { color: #c7d7f5 !important; } /* 홈 히어로 복구: PC=#jrMember · 모바일=#jrMobileBackupHero 전환(다른 규칙 간섭 시에도 표시) */ @media (min-width: 900px) { /* absolute 레이어(#jr-hero-design-1)만 있을 때 섹션 높이가 0으로 붕괴되지 않게(히어로가 문서 전체 높이로 늘어나는 현상 방지) */ main#target .contents #jrMember.visual, #jrMember.visual { display: block !important; visibility: visible !important; position: relative; min-height: min(80.4vh, 720px); overflow-y: visible !important; } /* * hero-design-1.min.css 에서 #jr-hero-design-1 이 .hero-fixed-img 규칙과 잘못 같은 블록으로 묶여 * 이미지용 height/max-height(~80.4vh)가 래퍼에까지 적용되며 하단 변호사 롤링이 잘리는 문제 보정 */ #jrMember.visual #jr-hero-design-1 { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } #jrMobileBackupHero, #jrMobileBackupHero.visual { display: none !important; } } @media (max-width: 899px) { /* * PC용 동적 히어로(#jrMember)만 숨김. 프로필(/members/*.html) 등은 id가 같아도 * #jrMobileBackupHero가 없으므로 전역 #jrMember 숨김을 쓰면 히어로가 통째로 사라짐. * 홈: main#target > .contents. 랜딩: .contents 직계 자식으로 백업 섹션이 앞에 있고 그 뒤에 #jrMember. */ main#target .contents #jrMember.visual, body:not(.profile-page) .contents > #jrMobileBackupHero ~ #jrMember.visual { display: none !important; } #jrMobileBackupHero, #jrMobileBackupHero.visual { display: block !important; } } /* 맞춤 변호사(상담 앵커): 고정 헤더에 가리지 않게 */ #lawyerSearchSect { scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px)); } /* 푸터: 히어로와 동일 배경 */ .footer { background: var(--temple-hero-bg) !important; color: var(--jrwhite) !important; } .footer .ft_info { color: var(--brown100) !important; } /* 푸터 링크색: PC와 모바일을 분리해 상호 영향 방지 */ @media (min-width: 900px) { .footer .center_lst a { color: #93c5fd !important; font-weight: 500; } .footer .center_lst a:hover { color: #bfdbfe !important; } .footer .center_lst .footer-legal-btn { color: #93c5fd !important; font-weight: 500; background: transparent !important; border: none !important; padding: 0 !important; font: inherit !important; font-size: inherit !important; cursor: pointer !important; text-decoration: none !important; box-shadow: none !important; } .footer .center_lst .footer-legal-btn:hover { color: #bfdbfe !important; } /* 구형 푸터(ft_jrinfo) 개인정보·면책 버튼 */ .footer .ft_jrinfo button.new-popup-btn { color: #93c5fd !important; background: transparent !important; border: none !important; padding: 0 !important; font: inherit !important; cursor: pointer !important; } .footer .ft_jrinfo button.new-popup-btn:hover { color: #bfdbfe !important; } /* 모바일 전용 Family site 아코디언은 PC에서 미표시 */ .footer .footer-mobile-family-site { display: none !important; } .footer .footer-mobile-legal-row { display: none !important; } .footer .footer-hakpok-accordions-wrap--mobile-only { display: none !important; } } @media (max-width: 899px) { .footer .footer-hakpok-accordion--desktop-only { display: none !important; } .footer .center_lst, .footer .center_lst a, .footer .center_lst .footer-legal-btn, .footer .ft_jrinfo, .footer .ft_jrinfo span, .footer .ft_jrinfo button.new-popup-btn { color: #93c5fd !important; } .footer .center_lst a:hover, .footer .center_lst .footer-legal-btn:hover, .footer .ft_jrinfo button.new-popup-btn:hover { color: #dbeafe !important; } } .footer .footer-region-list a { color: var(--brown200) !important; } /* 히어로 우측 배지: 크림·금색 → 사이트 딥블루 톤 (PC 우측 대형 + 모바일 롤링 사진 위) */ .jr-hero-fixed--primary .jr-hero-primary-badge, .jr-hero-fixed--primary .jr-hero-primary-badge-right, #jrMobileBackupHero .lawyer-slider-others .jr-mobile-slide-img-wrap .jr-hero-primary-badge { border: 1px solid rgba(56, 189, 248, 0.38) !important; background: linear-gradient( 165deg, rgba(238, 248, 255, 0.98) 0%, rgba(218, 235, 252, 0.96) 52%, rgba(199, 224, 248, 0.94) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(15, 40, 71, 0.14) !important; color: var(--temple-deep-2) !important; text-shadow: none !important; } .jr-hero-fixed--primary .jr-hero-primary-badge::before, .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::before, #jrMobileBackupHero .lawyer-slider-others .jr-mobile-slide-img-wrap .jr-hero-primary-badge::before { background: linear-gradient(155deg, #f0f9ff 0%, #dbeafe 48%, #bfdbfe 100%) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(15, 40, 71, 0.12) !important; } .jr-hero-fixed--primary .jr-hero-primary-badge::after, .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::after, #jrMobileBackupHero .lawyer-slider-others .jr-mobile-slide-img-wrap .jr-hero-primary-badge::after { background: linear-gradient( 155deg, #7dd3fc 0%, #38bdf8 28%, #2563eb 55%, #1e3a8a 85%, #0f2847 100% ) !important; filter: contrast(1.06) saturate(1.08) drop-shadow(0 0 0.5px rgba(15, 23, 42, 0.35)) drop-shadow(0 0.6px 0.85px rgba(15, 23, 42, 0.28)) !important; } .jr-hero-fixed--primary.jr-hero-primary--upper-plain .jr-hero-primary-badge-right::after { left: 0.38rem !important; } /* 모바일 백업 히어로 고정 프로필: 역할·이름 (PC #jrMember 는 아래 별도 팔레트) */ #jrMobileBackupHero .jr-hero-fixed .lawyer-info > p:first-of-type .jr-hero-role-line { color: #7dd3fc !important; font-weight: 700 !important; letter-spacing: -0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important; } #jrMobileBackupHero .jr-hero-fixed .lawyer-info > p:first-of-type .jr-hero-name-line { color: #f1f5ff !important; font-weight: 700 !important; letter-spacing: -0.03em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; } /* 홈 본문 섹션: CI 워터마크(밝음) ↔ 진한 단색(로고 없음) 교차 */ #jrRiskUrgency.jr-risk-section, #jrWhyCredibility.jr-why-credibility-section, #jrNaverReviews.jr-naver-reviews-section, #jrPress.jr-press-section, #jrInstagram.jr-instagram-section, #faq.jr-faq-section { position: relative; overflow: hidden; } /* CI 워터마크: 밝은 스트립 전용(WHY JR은 아래 별도 규칙) */ #jrRiskUrgency.jr-risk-section::before, #jrNaverReviews.jr-naver-reviews-section::before, #jrPress.jr-press-section::before, #jrInstagram.jr-instagram-section::before, #faq.jr-faq-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg"); background-repeat: no-repeat, no-repeat; background-position: 90% 18%, 6% 88%; background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto; } @media (max-width: 767px) { #jrRiskUrgency.jr-risk-section::before, #jrNaverReviews.jr-naver-reviews-section::before, #jrPress.jr-press-section::before, #jrInstagram.jr-instagram-section::before, #faq.jr-faq-section::before { opacity: 0.038; background-position: 92% 12%, 4% 92%; background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto; } #jrWhyCredibility.jr-why-credibility-section::before { opacity: 0.038 !important; background-position: 92% 12%, 4% 92% !important; background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto !important; } } /* 밝은 스트립 + 워터마크가 보이도록 내부 래퍼 배경 투명 */ #jrNaverReviews.jr-naver-reviews-section > .innerWrap, #jrPress.jr-press-section > .innerWrap, #jrPress.jr-press-section > .ll-inner.innerWrap, #jrInstagram.jr-instagram-section > .innerWrap, #faq.jr-faq-section > .innerWrap { background: transparent !important; position: relative; z-index: 1; } /* WHY JR: 워터마크(::before) + 은은한 광원(::after) */ #jrWhyCredibility.jr-why-credibility-section { background: var(--temple-strip-bg-light) !important; } #jrWhyCredibility.jr-why-credibility-section::before { width: auto !important; height: auto !important; inset: 0 !important; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; border-radius: 0 !important; opacity: 0.05 !important; background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg") !important; background-repeat: no-repeat, no-repeat !important; background-position: 90% 18%, 6% 88% !important; background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto !important; } #jrWhyCredibility.jr-why-credibility-section::after { content: "" !important; width: auto !important; height: auto !important; inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; background-image: radial-gradient( closest-side at 88% 6%, rgba(37, 99, 235, 0.18) 0%, transparent 100% ), radial-gradient(closest-side at 8% 94%, rgba(15, 40, 71, 0.1) 0%, transparent 100%) !important; background-repeat: no-repeat, no-repeat !important; background-size: 100% 100%, 100% 100% !important; z-index: 0; pointer-events: none; } #jrRiskUrgency.jr-risk-section { background: var(--temple-strip-bg-light) !important; } #jrNaverReviews.jr-naver-reviews-section { background: var(--temple-strip-bg-light) !important; } /* 네이버 플레이스 후기: 스테이지 래퍼가 row flex면 도트 nav가 우측 좁은 열로 가며 점만 세로로 줄바꿈됨 → 카드 아래 한 줄 */ #jrNaverReviews .jr-naver-reviews-stage-wrap { flex-direction: column; align-items: stretch; } /* 네이버 플레이스 후기: 카드 묶음 아래 점(페이지) 네비 — 가운데 정렬, 점 많으면 가로 스크롤 */ #jrNaverReviews .jr-naver-reviews-dots { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; gap: clamp(0.45rem, 1.85vw, 1.05rem); margin: clamp(1.25rem, 2.8vw, 2rem) 0 0; padding: 0.5rem clamp(0.5rem, 2.25vw, 2.75rem) 0.2rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-inline: 0.75rem; list-style: none; } #jrNaverReviews .jr-naver-reviews-dots.jr-naver-reviews-dots--many { justify-content: center; gap: clamp(0.38rem, 1.1vw, 0.55rem); } #jrNaverReviews .jr-naver-reviews-dots::-webkit-scrollbar { height: 5px; } #jrNaverReviews .jr-naver-reviews-dots::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); border-radius: 999px; } #jrNaverReviews .jr-naver-dot { box-sizing: border-box; flex-shrink: 0; width: 9px; height: 9px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(15, 23, 42, 0.22); transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } #jrNaverReviews .jr-naver-dot:hover, #jrNaverReviews .jr-naver-dot:focus-visible { background: rgba(37, 99, 235, 0.45); outline: none; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); } #jrNaverReviews .jr-naver-dot--active { background: rgba(37, 99, 235, 0.95); transform: scale(1.15); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); } #jrPress.jr-press-section { background: var(--temple-strip-bg-light) !important; } #jrInstagram.jr-instagram-section { background: var(--temple-strip-bg-light) !important; } #faq.jr-faq-section { background: var(--temple-strip-bg-light) !important; } /* 업무사례 미리보기 일시 숨김 — 재표시 시 index.html 에서 --paused 제거 */ #jrCasesPreview.jr-cases-preview-section--paused { display: none !important; } /* 진한 스트립(로고 없음): 워터마크 제거 */ section.sect.lawyer-search-wrap::before, #jrCasesPreview.jr-cases-preview-section::before, #jrConsultCases.jr-cases-preview-section::before, .jr-broadcast-section::before, .jr-blog-section::before, #jrReview.jr-naver-reviews-section::before, #jrLocation.section3::before { content: none !important; display: none !important; } /* 서브페이지 본문(.jr-subpage-body-surface): 홈 RISK CHECK와 동일 CI 워터마크 — lawyer-search-wrap 제거 규칙 복구 */ .subpage section.sect.lawyer-search-wrap.jr-subpage-body-surface::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg"); background-repeat: no-repeat, no-repeat; background-position: 90% 18%, 6% 88%; background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto; } @media (max-width: 767px) { .subpage section.sect.lawyer-search-wrap.jr-subpage-body-surface::before { opacity: 0.038; background-position: 92% 12%, 4% 92%; background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto; } } section.sect.lawyer-search-wrap, #jrCasesPreview.jr-cases-preview-section, #jrConsultCases.jr-cases-preview-section, .jr-broadcast-section, .jr-blog-section, #jrReview.jr-naver-reviews-section, #jrReview.jr-naver-reviews-section > .innerWrap, #jrLocation.section3 { position: relative; overflow: hidden; } /* 서브 jr-subpage-body-surface(구성원 등)는 제외 — 아래 body#target.subpage에서 RISK 밝은 면 */ section.sect.lawyer-search-wrap:not(.jr-subpage-body-surface) { background: var(--temple-strip-bg-deep) !important; } #jrCasesPreview.jr-cases-preview-section, #jrConsultCases.jr-cases-preview-section { background: var(--temple-strip-bg-deep) !important; } #jrBroadcast.jr-broadcast-section, .jr-broadcast-section { background: var(--temple-strip-bg-deep) !important; } #jrBlog.jr-blog-section, .jr-blog-section { background: var(--temple-strip-bg-deep) !important; } #jrBroadcast.jr-broadcast-section > .innerWrap, #jrBlog.jr-blog-section > .innerWrap, .jr-broadcast-section > .innerWrap, .jr-blog-section > .innerWrap { background: var(--temple-strip-bg-deep) !important; position: relative; z-index: 1; } #jrReview.jr-naver-reviews-section, #jrReview.jr-naver-reviews-section > .innerWrap { background: var(--temple-strip-bg-deep) !important; } #jrLocation.section3 { background: var(--temple-strip-bg-deep) !important; } .jr-why-credibility-badge { background: rgba(15, 40, 71, 0.95) !important; border-color: rgba(125, 211, 252, 0.35) !important; box-shadow: 0 10px 20px rgba(15, 40, 71, 0.2) !important; } /* 서브페이지 히어로 (members 등) 베이지 패턴 제거 → 딥블루 */ .subpage .page-hero { background: linear-gradient(135deg, #0f2847 0%, #0a1f38 50%, #071422 100%) !important; } .subpage .page-hero::before, .subpage .page-hero::after { display: none !important; } .subpage .page-hero .hero-pattern { display: none !important; } .subpage .page-hero .page-hero__title, .subpage .page-hero h1 { color: #f1f5ff !important; } .subpage .page-hero .page-hero__lead, .subpage .page-hero p { color: #c7d7f5 !important; } /* 서브 히어로 로고: 어두운 CI 대신 밝은 심볼 + 외곽선으로 선명도 */ .subpage .page-hero .page-hero__logo { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); } .subpage .page-hero .page-hero__logo img { display: block; width: clamp(2.75rem, 5.5vw, 3.5rem) !important; height: auto !important; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.22)) !important; } /* 서브페이지 히어로 오른쪽 JR 심볼 워터마크 (members.html과 동일) */ .subpage .page-hero .page-hero__jr-watermark { position: absolute; z-index: 1; right: clamp(-4rem, -2vw, -1rem); top: 50%; transform: translateY(-50%) rotate(-10deg); width: min(42vw, 22rem); max-width: none; pointer-events: none; opacity: 0.09; mix-blend-mode: screen; -webkit-mask-image: radial-gradient( ellipse 75% 85% at 55% 45%, #000 0%, #000 45%, transparent 78% ); mask-image: radial-gradient( ellipse 75% 85% at 55% 45%, #000 0%, #000 45%, transparent 78% ); } .subpage .page-hero .page-hero__jr-watermark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 2.5rem rgba(56, 189, 248, 0.2)); } .subpage .page-hero .page-hero__jr-watermark--ghost { right: clamp(-5rem, 2vw, 2rem); width: min(52vw, 28rem); transform: translateY(-48%) rotate(-18deg) scale(1.08); opacity: 0.045; mix-blend-mode: soft-light; -webkit-mask-image: radial-gradient( ellipse 90% 90% at 40% 50%, transparent 35%, #000 55%, transparent 80% ); mask-image: radial-gradient( ellipse 90% 90% at 40% 50%, transparent 35%, #000 55%, transparent 80% ); } @media (max-width: 768px) { .subpage .page-hero .page-hero__jr-watermark { width: min(58vw, 14rem); opacity: 0.065; right: -2.5rem; } .subpage .page-hero .page-hero__jr-watermark--ghost { display: none; } } /* ========== 전역 스크롤바 (딥블루) ========== */ html { scrollbar-color: #2563eb #0b1729; scrollbar-width: thin; background: var(--temple-deep); } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #0b1729; border-radius: 999px; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #38bdf8 0%, #1d4ed8 55%, #1e3a8a 100%); border-radius: 999px; border: 2px solid #0b1729; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7dd3fc 0%, #2563eb 100%); } /* 모달·내부 스크롤 영역 */ .jr-press-modal-body, .jr-lawyer-modal-body, .modal-overlay .modal-content, [class*="modal"] [style*="overflow"] { scrollbar-color: #3b82f6 #e8f0fc; scrollbar-width: thin; } .jr-press-modal-body::-webkit-scrollbar, .jr-lawyer-modal-body::-webkit-scrollbar { width: 8px; } .jr-press-modal-body::-webkit-scrollbar-track, .jr-lawyer-modal-body::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 6px; } .jr-press-modal-body::-webkit-scrollbar-thumb, .jr-lawyer-modal-body::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 6px; } /* 메인 래퍼: 쿨 블루 그레이 베이스 */ main#target > .contents { background: linear-gradient(180deg, #dbeafe 0%, #e8f0fc 35%, #eef4fc 100%); } main#target, main#target .contents { --jr-surface-risk-bg: linear-gradient(180deg, #e8f0fc 0%, #dce8f8 50%, #d0e0f4 100%); --jr-surface-review-bg: linear-gradient(180deg, #e4edf9 0%, #d8e4f4 100%); --temple-strip-bg-light: linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%); --temple-strip-bg-deep: linear-gradient(180deg, #b8cce8 0%, #a3bfe0 48%, #8eb3d8 100%); } /* 서브페이지: members.html 등 body#target + .contents (main 없음) — 본문 배경 동일 */ body#target.subpage > .contents, body.subpage > .contents { background: linear-gradient(180deg, #dbeafe 0%, #e8f0fc 35%, #eef4fc 100%); --jr-surface-risk-bg: linear-gradient(180deg, #e8f0fc 0%, #dce8f8 50%, #d0e0f4 100%); --jr-surface-review-bg: linear-gradient(180deg, #e4edf9 0%, #d8e4f4 100%); --temple-strip-bg-light: linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%); --temple-strip-bg-deep: linear-gradient(180deg, #b8cce8 0%, #a3bfe0 48%, #8eb3d8 100%); } /* ========== RISK 섹션 카드·타이포 ========== */ #jrRiskUrgency .jr-risk-head h2, #jrRiskUrgency .jr-risk-head p { color: var(--temple-text) !important; } #jrRiskUrgency .jr-risk-badge { background: var(--temple-deep-2) !important; color: #e0f2fe !important; border: 1px solid var(--temple-border-strong) !important; } .jr-risk-card { background: var(--temple-card) !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 4px 20px rgba(15, 40, 71, 0.08) !important; } .jr-risk-card:hover { border-color: rgba(56, 189, 248, 0.45) !important; box-shadow: 0 10px 28px rgba(30, 64, 175, 0.12) !important; } .jr-risk-card h3 { color: var(--temple-text) !important; } .jr-risk-card h3::before { background: var(--temple-chip-bg) !important; color: var(--temple-chip-text) !important; } .jr-risk-card p { color: var(--temple-text-muted) !important; } .jr-risk-card .jr-risk-scenario { background: var(--temple-card-muted) !important; border: 1px solid var(--temple-border) !important; color: var(--temple-text-muted) !important; } /* ========== WHY JR 코어 카드 ========== */ .jr-why-credibility-head h2 { color: var(--temple-text) !important; } .jr-why-credibility-head p { color: var(--temple-text-muted) !important; } .jr-why-core-cards article { background: var(--temple-card) !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 4px 18px rgba(15, 40, 71, 0.07) !important; } .jr-why-core-cards article::before { background: var(--temple-chip-bg) !important; color: var(--temple-chip-text) !important; } .jr-why-core-cards article::after { background: linear-gradient(90deg, #1e40af 0%, #38bdf8 100%) !important; opacity: 0.9 !important; } .jr-why-core-cards article:hover { border-color: rgba(56, 189, 248, 0.4) !important; box-shadow: 0 12px 28px rgba(30, 64, 175, 0.12) !important; } .jr-why-core-cards h3 { color: var(--temple-text) !important; } .jr-why-core-cards p { color: var(--temple-text-muted) !important; } .jr-why-core-cards p strong { color: #1e40af !important; } /* ========== 방송 / 보도 / 블로그 섹션 배경·카드 ========== */ /* 방송·블로그 섹션 배경은 상단 «교차 스트립»에서 처리 */ .jr-broadcast-title, .jr-broadcast-card-body h3 { color: var(--temple-text) !important; } .jr-broadcast-desc, .jr-broadcast-card-body p { color: var(--temple-text-muted) !important; } .jr-broadcast-card { background: var(--temple-card) !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 4px 16px rgba(15, 40, 71, 0.07) !important; } .jr-broadcast-card:hover { border-color: rgba(56, 189, 248, 0.45) !important; box-shadow: 0 14px 32px rgba(30, 64, 175, 0.14) !important; } .jr-broadcast-card:hover .jr-play-btn { border-color: var(--temple-accent) !important; } .jr-broadcast-card:hover .jr-play-btn svg { fill: var(--temple-accent) !important; } .jr-play-btn { border-color: #2563eb !important; } .jr-play-btn svg { fill: #38bdf8 !important; } .jr-press-card, .jr-blog-card { border-color: var(--temple-border) !important; box-shadow: 0 4px 16px rgba(15, 40, 71, 0.06) !important; } .jr-press-card:hover { border-color: rgba(56, 189, 248, 0.4) !important; } .jr-press-card-left { background: var(--temple-card-muted) !important; border-bottom-color: var(--temple-border) !important; } /* 메인 index #jrPress: 기사별 분리 카드(행마다 독립 박스, 목록은 gap만) */ main#target #jrPress .jr-press-list { display: flex !important; flex-direction: column !important; gap: clamp(0.7rem, 1.5vw, 1.05rem) !important; margin: 0 !important; padding: 0 !important; width: 100% !important; list-style: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } main#target #jrPress .jr-press-empty { font-size: calc(1.4rem * 1.1) !important; } /* 각 행 = 하나의 카드 */ main#target #jrPress .jr-press-card { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: clamp(10px, 1.2vw, 14px) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.06) !important; overflow: hidden !important; cursor: pointer !important; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; } @media (min-width: 640px) { main#target #jrPress .jr-press-card { display: grid !important; grid-template-columns: 12rem minmax(0, 1fr) max-content !important; grid-template-rows: auto !important; align-items: stretch !important; column-gap: 0 !important; row-gap: 0 !important; } } main#target #jrPress .jr-press-card:hover { transform: translateY(-2px) !important; border-color: rgba(148, 163, 184, 0.85) !important; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.1) !important; background: #fff !important; } main#target #jrPress .jr-press-card:hover .jr-press-card-left { background: #f1f5f9 !important; } main#target #jrPress .jr-press-card:hover .jr-press-card-center, main#target #jrPress .jr-press-card:hover .jr-press-card-right { background: #fafbfc !important; } main#target #jrPress .jr-press-card:focus-within { outline: 2px solid rgba(37, 99, 235, 0.45) !important; outline-offset: 2px !important; position: relative !important; z-index: 1 !important; } main#target #jrPress .jr-press-card-left { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0.5rem !important; padding: clamp(1.15rem, 1rem + 0.45vw, 1.65rem) clamp(1rem, 0.88rem + 0.4vw, 1.35rem) !important; min-width: 0 !important; width: 100% !important; background: #f8fafc !important; border: none !important; box-sizing: border-box !important; transition: background-color 0.18s ease !important; } @media (min-width: 640px) { main#target #jrPress .jr-press-card-left { align-self: stretch !important; border-right: 1px solid #e8ecf1 !important; } } main#target #jrPress .jr-press-cat { display: inline-flex !important; align-items: center !important; gap: 0.32rem !important; padding: 0.26rem 0.68rem !important; border-radius: 999px !important; background: #166534 !important; color: #fff !important; font-size: calc(1.08rem * 1.1) !important; font-weight: 600 !important; width: fit-content !important; line-height: 1.2 !important; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12) !important; } main#target #jrPress .jr-press-card[data-category="online"] .jr-press-cat { background: #1d4ed8 !important; } main#target #jrPress .jr-press-card[data-category="broadcast"] .jr-press-cat { background: #6d28d9 !important; } main#target #jrPress .jr-press-cat svg { width: calc(1.05rem * 1.1) !important; height: calc(1.05rem * 1.1) !important; } main#target #jrPress .jr-press-source { font-size: calc(1.2rem * 1.1) !important; color: #334155 !important; font-weight: 600 !important; text-align: left !important; line-height: 1.25 !important; width: 100% !important; } /* 모바일·태블릿(≤899px): 신문 + 매체명 한 줄, 세로 여백 최소화 */ @media (max-width: 899px) { main#target #jrPress .jr-press-card-left { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.35rem 0.5rem !important; justify-content: flex-start !important; } main#target #jrPress .jr-press-source { width: auto !important; min-width: 0 !important; } } main#target #jrPress .jr-press-card-center { padding: clamp(1.2rem, 1rem + 0.45vw, 1.75rem) clamp(1rem, 0.88rem + 0.4vw, 1.45rem) !important; min-width: 0 !important; text-align: left !important; background: #fff !important; transition: background-color 0.18s ease !important; } @media (min-width: 640px) { main#target #jrPress .jr-press-card-center { display: flex !important; flex-direction: column !important; justify-content: center !important; align-self: stretch !important; } } main#target #jrPress .jr-press-card-center h3 { font-size: calc(1.1 * clamp(1.65rem, 1.35rem + 0.45vw, 1.95rem)) !important; font-weight: 700 !important; color: #020617 !important; margin: 0 0 clamp(0.45rem, 0.35rem + 0.25vw, 0.65rem) 0 !important; line-height: 1.35 !important; text-align: left !important; } main#target #jrPress .jr-press-card-center p { font-size: calc(1.28rem * 1.1) !important; color: #475569 !important; margin: 0 !important; line-height: 1.5 !important; display: -webkit-box !important; line-clamp: 2 !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-align: left !important; } main#target #jrPress .jr-press-card-right { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.65rem !important; padding: clamp(1.15rem, 0.95rem + 0.45vw, 1.65rem) clamp(1rem, 0.88rem + 0.4vw, 1.35rem) !important; border-top: 1px solid #e8ecf1 !important; border-left: none !important; width: 100% !important; box-sizing: border-box !important; background: #fff !important; transition: background-color 0.18s ease !important; } @media (min-width: 640px) { main#target #jrPress .jr-press-card-right { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: center !important; gap: 0.55rem !important; border-top: none !important; border-left: 1px solid #e8ecf1 !important; width: auto !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important; } main#target #jrPress .jr-press-card-right .jr-press-date { text-align: right !important; width: auto !important; } main#target #jrPress .jr-press-card-right .jr-press-link { align-self: flex-end !important; } } main#target #jrPress .jr-press-date { font-size: calc(1.12rem * 1.1) !important; color: #64748b !important; line-height: 1.25 !important; font-variant-numeric: tabular-nums !important; flex-shrink: 0 !important; } main#target #jrPress .jr-press-link { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; word-break: keep-all !important; font-size: calc(1.22rem * 1.1) !important; color: #0c3480 !important; font-weight: 600 !important; gap: 0.35rem !important; line-height: 1.25 !important; padding: 0.42rem 0.75rem !important; border-radius: 10px !important; border: 1px solid transparent !important; background: transparent !important; cursor: pointer !important; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } main#target #jrPress .jr-press-link:hover { color: #082654 !important; background: rgba(37, 99, 235, 0.12) !important; border-color: rgba(37, 99, 235, 0.35) !important; } main#target #jrPress .jr-press-link:focus-visible { color: #082654 !important; background: rgba(37, 99, 235, 0.14) !important; border-color: rgba(37, 99, 235, 0.55) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important; } main#target #jrPress .jr-press-link svg { width: 1.05em !important; height: 1.05em !important; flex-shrink: 0 !important; } @media (max-width: 639px) { main#target #jrPress .jr-press-card-center h3 { font-size: calc(1.58rem * 1.1) !important; line-height: 1.38 !important; } main#target #jrPress .jr-press-card-center { padding: clamp(1.1rem, 0.95rem + 0.5vw, 1.65rem) clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem) !important; border-top: 1px solid #e8ecf1 !important; } main#target #jrPress .jr-press-card-left { padding: clamp(1.1rem, 0.95rem + 0.5vw, 1.65rem) clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem) !important; } main#target #jrPress .jr-press-card-right { padding: clamp(1.05rem, 0.9rem + 0.5vw, 1.55rem) clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem) !important; } } /* 모바일(≤899px): 홈 언론 목록 최대 3건 — 위 .jr-press-card display:flex!important 가 index.css nth-child 숨김을 덮어쓰지 않도록 */ @media (max-width: 899px) { main#target #jrPress .jr-press-list > .jr-press-card:nth-child(n + 4) { display: none !important; } } .jr-blog-thumb, .jr-blog-card .jr-blog-thumb { background: var(--temple-surface-2) !important; } /* ========== CTA 버튼 (브라운 계열 → 딥블루) ========== */ .jr-section-more-btn { background: linear-gradient(180deg, #1d4ed8 0%, #0f2847 100%) !important; border: 1px solid rgba(56, 189, 248, 0.38) !important; color: #f8fafc !important; } .jr-section-more-btn:hover { background: linear-gradient(180deg, #2563eb 0%, #172554 100%) !important; border-color: #7dd3fc !important; color: #fff !important; } .jr-why-credibility-link { background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; color: #f8fafc !important; } .jr-why-credibility-link:hover { background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) !important; border-color: #7dd3fc !important; } .lawyer-search-wrap .jr-why-credibility-next-tagline { color: var(--temple-text-muted) !important; } /* ========== 맞춤 변호사 검색 UI ========== */ .lawyer-search-wrap { background: var(--temple-strip-bg-deep) !important; } /* index.min 베이지 «Lawyer Match UX Refresh» 덮어쓰기 — 구성원(.jr-subpage-body-surface)은 제외 */ section.sect.lawyer-search-wrap.lawyer-match:not(.jr-subpage-body-surface) { background: var(--temple-strip-bg-deep) !important; } /* 구성원·서브: 메인 RISK CHECK와 동일 밝은 스트립(index.min section.sect.lawyer-search-wrap 면보다 우선) */ body#target.subpage section.sect.lawyer-search-wrap.jr-subpage-body-surface { background: var(--temple-strip-bg-light) !important; } /* JR Lawyer Search: 부제↔검색 박스 — RISK CHECK·WHY JR과 동일 토큰(PC) */ @media (min-width: 900px) { main#target .contents > section.sect.lawyer-search-wrap.lawyer-match > .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } } section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head h2, section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head .lawyer-search-desc { color: var(--temple-text) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head .lawyer-search-desc { color: var(--temple-text-muted) !important; font-weight: 600 !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect { background: linear-gradient(180deg, #f8fafc 0%, #f0f7ff 55%, #e8f2fc 100%) !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 8px 24px rgba(15, 40, 71, 0.1) !important; border-radius: 14px !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell.lawyer-search-sect::before { background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-panel--cats { border-bottom-color: var(--temple-border) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-panel-kicker { color: var(--temple-text) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-optional { color: var(--temple-text-muted) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-label { color: var(--temple-text) !important; font-weight: 700 !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell select { background: #fff !important; border: 1px solid var(--temple-border) !important; color: var(--temple-text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-keyword { background: #fff !important; border: 1px solid var(--temple-border) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-keyword-icon { color: #64748b !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell input[type="search"], section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell input[type="text"] { color: var(--temple-text) !important; font-weight: 600 !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell input::placeholder { color: var(--temple-text-muted) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell select:focus, section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-keyword:focus-within { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-results.lawyer-search-results { border-top: 1px solid var(--temple-border) !important; background: linear-gradient(180deg, #eef4fc 0%, #e2ebf8 100%) !important; border-radius: 10px !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-results-title { color: var(--temple-text) !important; } section.sect.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result { background: #fff !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 4px 14px rgba(15, 40, 71, 0.08) !important; } section.sect.lawyer-search-wrap.lawyer-match a.jr-lawyer-search-result--card.jr-lawyer-search-result:hover { border-color: rgba(56, 189, 248, 0.55) !important; box-shadow: 0 10px 22px rgba(30, 64, 175, 0.14) !important; } section.sect.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { /* 테두리는 미디어 원에 두고, img 테두리는 원 안쪽 갭(깨진 링)을 만들지 않도록 제거 */ border: none !important; box-shadow: none !important; } section.sect.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-name { color: var(--temple-text) !important; } section.sect.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-role { color: var(--temple-text-muted) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-step__lab { color: var(--temple-text-muted) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-stepper__line { background: var(--temple-border) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-step__num { background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) !important; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-categories { scrollbar-color: #2563eb #e2e8f0; } section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-categories::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%) !important; } .lawyer-search-head h2, .lawyer-search-sect .lawyer-search-results h3 { color: var(--temple-text) !important; } .lawyer-search-head .lawyer-search-desc { color: var(--temple-text-muted) !important; } .lawyer-match-cat { border-color: var(--temple-border) !important; background: var(--temple-card) !important; } .lawyer-match-cat.is-active, .lawyer-match-cat[aria-pressed="true"] { border-color: #2563eb !important; background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important; } .jr-lawyer-search-result--card { border-color: var(--temple-border) !important; background: var(--temple-card) !important; } /* ========== 하드코딩 브라운·골드 (#2d2419, #c5a67d 등) ========== */ .jr-press-modal-caption, .jr-press-modal-title, .jr-press-modal-body { color: var(--temple-text) !important; background: #f0f7ff !important; border-color: var(--temple-border) !important; } .jr-press-modal-source-link { color: #1d4ed8 !important; } .jr-press-iframe-help { margin-top: 10px; text-align: right; } #jrPressModalBody .jr-modal-iframe-wrap { height: 70vh !important; min-height: 520px; } #jrPressModalBody .jr-modal-iframe-wrap iframe { width: 100%; height: 100%; } .jr-press-link:hover { color: #2563eb !important; } .jr-press-url-modal-content { width: min(1080px, 96vw) !important; max-height: 90vh !important; display: flex; flex-direction: column; overflow: hidden; } .jr-press-url-modal-caption { padding-bottom: 0.8rem !important; } .jr-press-url-iframe-wrap { position: relative; width: 100%; height: 72vh; min-height: 520px; border-radius: 10px; overflow: hidden; background: #fff; } .jr-press-url-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } .footer .footer-region-links, .footer .footer-region-links a { color: #93c5fd !important; } @media (max-width: 899px) { .footer .footer-policy-inline { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 2rem; margin-bottom: 0.2rem; color: #f1f5ff; font-size: 1.42rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-align: center; } .footer .footer-policy-inline .footer-legal-btn { color: #f1f5ff !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font: inherit !important; cursor: pointer; text-decoration: none !important; } .footer .footer-policy-inline .footer-legal-btn:hover, .footer .footer-policy-inline .footer-legal-btn:focus-visible { text-decoration: underline !important; } .footer .footer-policy-inline span { color: #dbe7fb; font-weight: 500; } /* 상단 링크 줄은 모바일에서 Family site 아코디언으로 대체 */ .footer .footer-nav-line.footer-nav-line--hide-below-900 { display: none !important; } /* 모바일 푸터 아코디언 UI 복구 (내용 텍스트는 비워둠) */ .footer .footer-mobile-link-accordion { display: block; grid-column: 1; grid-row: 2; width: 100%; margin-top: 0.2rem; margin-bottom: 2rem; border-radius: 12px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.18); overflow: visible; position: relative; z-index: 10; } .footer .footer-mobile-link-accordion > summary { list-style: none; cursor: pointer; padding: 1.08rem 1.28rem; font-size: 1.64rem; font-weight: 700; color: #f8fbff; position: relative; letter-spacing: -0.01em; } .footer .footer-mobile-link-accordion > summary::-webkit-details-marker { display: none; } .footer .footer-mobile-link-accordion > summary::after { content: ""; position: absolute; right: 1.7rem; top: 50%; width: 0.85rem; height: 0.85rem; border-right: 2px solid #d8e6ff; border-bottom: 2px solid #d8e6ff; transform: translateY(-60%) rotate(45deg); } .footer .footer-mobile-link-accordion[open] > summary::after { transform: translateY(-35%) rotate(225deg); } .footer .footer-mobile-link-panel { position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); padding: 0.95rem 1.6rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.18); border-top: 0; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, rgba(90, 109, 132, 0.96) 0%, rgba(79, 98, 122, 0.97) 100%); box-shadow: 0 10px 26px rgba(8, 24, 44, 0.34); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .footer .footer-mobile-link-accordion[open] .footer-mobile-link-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .footer .footer-mobile-link-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; } .footer .footer-mobile-link-list a { display: inline-block; color: #e6f0ff !important; text-decoration: none !important; font-size: 1.52rem; line-height: 1.6; font-weight: 500; letter-spacing: -0.01em; } .footer .footer-mobile-link-list a:hover, .footer .footer-mobile-link-list a:focus-visible { text-decoration: underline !important; color: #ffffff !important; } .footer .footer-mobile-link-list .footer-mobile-link-list__btn { display: inline-block; width: 100%; text-align: left; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; font: inherit !important; font-size: 1.52rem !important; line-height: 1.6 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #e6f0ff !important; cursor: pointer !important; box-shadow: none !important; } .footer .footer-mobile-link-list .footer-mobile-link-list__btn:hover, .footer .footer-mobile-link-list .footer-mobile-link-list__btn:focus-visible { text-decoration: underline !important; color: #ffffff !important; } /* 법적 고지(면책·개인정보) → Family site → SNS → CI → 사업자정보 → 링크·저작권 */ .footer .innerWrap.footer-inner--grid > .footer-mobile-legal-row { grid-column: 1; grid-row: 1; display: flex !important; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; width: 100%; box-sizing: border-box; /* 면책공고 줄 위 여백 ≈ 본문 1줄 (1.44rem × 줄간격 1.35) */ padding: calc(1.44rem * 1.35) 0 0.15rem 0; margin: 0; } .footer .footer-mobile-legal-row__btn { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; font-family: inherit !important; font-size: 1.44rem !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; color: #f8fafc !important; cursor: pointer !important; box-shadow: none !important; text-decoration: none !important; -webkit-appearance: none; appearance: none; } .footer .footer-mobile-legal-row__btn:hover, .footer .footer-mobile-legal-row__btn:focus-visible { color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 0.18em; } .footer .footer-mobile-legal-row__dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.42); flex-shrink: 0; } .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only { grid-column: 1; grid-row: 2; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0.55rem !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .footer .innerWrap.footer-inner--grid > .footer-mobile-link-accordion.footer-mobile-family-site { grid-column: 1; grid-row: 3 !important; /* 학폭 아코디언 간 gap(0.65rem)과 동일하게: 그리드 row-gap 보정 */ margin-top: calc(0.65rem - 1.65rem) !important; margin-bottom: 0 !important; width: 100%; } .footer .innerWrap.footer-inner--grid .footer__grid-left-copy { grid-row: 5; } .footer .innerWrap.footer-inner--grid .footer__grid-right-links { grid-row: 6; } /* 모바일 푸터 좌우 동일 패딩(잘림 방지) */ .footer .innerWrap.footer-inner--grid { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; row-gap: 1.65rem !important; padding-top: clamp(1.35rem, 0.9rem + 1.9vw, 2.6rem) !important; padding-bottom: calc(clamp(2.6rem, 5.4vw, 4.2rem) + env(safe-area-inset-bottom, 0px)) !important; padding-left: clamp(1.6rem, 4.2vw, 2.4rem) !important; padding-right: clamp(1.6rem, 4.2vw, 2.4rem) !important; overflow: visible !important; } /* Family site 등 상단 아코디언 다음 본문 1줄 높이만큼 추가 간격 */ .footer .innerWrap.footer-inner--grid > .jrci { grid-row: 4; margin-top: calc(1.44rem * 1.35) !important; margin-bottom: 0 !important; font-size: 2rem !important; line-height: 1.3 !important; } .footer .innerWrap.footer-inner--grid .footer__grid-left-copy p { font-size: 1.52rem !important; line-height: 1.78 !important; letter-spacing: -0.01em !important; color: #dbe7fb !important; } .footer .innerWrap.footer-inner--grid .footer__grid-right-links { align-items: flex-start !important; justify-self: stretch !important; width: 100% !important; } .footer .innerWrap.footer-inner--grid .footer-right-links-stack { gap: 0.35rem !important; } .footer .innerWrap.footer-inner--grid .footer__grid-right-links > .copyright-row, .footer .innerWrap.footer-inner--grid .copyright-row { margin-top: 0.35rem !important; padding-top: 0 !important; transform: none !important; } .footer .innerWrap.footer-inner--grid .copyright-row { width: 100% !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0.65rem !important; } .footer .innerWrap.footer-inner--grid .copyright-inline { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem 0.65rem !important; width: 100% !important; text-align: left !important; } /* 한 줄 유지하면서 뷰포트 폭에 맞춰 글자 크기 확대(가로를 더 채움) */ .footer .innerWrap.footer-inner--grid .copyright-one-line { display: block !important; width: 100% !important; box-sizing: border-box !important; font-size: clamp(0.9rem, 0.42rem + 3.85vw, 1.28rem) !important; line-height: 1.35 !important; letter-spacing: -0.045em !important; color: #dbe7fb !important; white-space: nowrap !important; flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; } /* Family site(region) 아코디언: PC는 그대로 두고 모바일만 카드형 복구 */ .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; vertical-align: unset !important; border-radius: 12px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.18); overflow: visible; position: relative; z-index: 8; } /* 모바일 학폭 아코디언 2열: 각 50% (플렉스 균등 분할) */ .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline { display: block !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; vertical-align: unset !important; border-radius: 12px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.18); overflow: visible; position: relative; z-index: 8; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline[open], .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline[open] { z-index: 24; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline > summary { list-style: none; cursor: pointer; position: relative; padding: 1.08rem 2.6rem 1.08rem 1.28rem !important; font-size: 1.58rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.01em !important; color: #f8fbff !important; white-space: normal !important; border-radius: 12px; } /* 학폭 2열 아코디언: Family site(.footer-mobile-link-accordion > summary)와 동일 타이포·패딩 */ .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline > summary { list-style: none; cursor: pointer; position: relative; padding: 1.08rem 1.28rem !important; font-size: 1.64rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.01em !important; color: #f8fbff !important; white-space: normal !important; border-radius: 12px; box-sizing: border-box !important; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline > summary::-webkit-details-marker, .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline > summary::-webkit-details-marker { display: none; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline > summary::after { content: ""; position: absolute; right: 1.45rem; top: 50%; width: 0.85rem; height: 0.85rem; border-right: 2px solid #d8e6ff; border-bottom: 2px solid #d8e6ff; transform: translateY(-55%) rotate(45deg); } .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline > summary::after { content: ""; position: absolute; right: 1.7rem; top: 50%; width: 0.85rem; height: 0.85rem; border-right: 2px solid #d8e6ff; border-bottom: 2px solid #d8e6ff; transform: translateY(-60%) rotate(45deg); } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline[open] > summary, .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-region-accordion--inline[open] > summary::after { transform: translateY(-30%) rotate(225deg); } .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion.footer-region-accordion--inline[open] > summary::after { transform: translateY(-35%) rotate(225deg); } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion > .footer-region-list, .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-accordion > .footer-region-list { position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); margin: 0 !important; padding: 0.95rem 1.35rem 1.15rem !important; border: 1px solid rgba(255, 255, 255, 0.18); border-top: 0; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, rgba(90, 109, 132, 0.96) 0%, rgba(79, 98, 122, 0.97) 100%); box-shadow: 0 10px 26px rgba(8, 24, 44, 0.34); max-height: min(55vh, 22rem); overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left !important; font-size: 1.38rem !important; font-weight: 500 !important; line-height: 1.55 !important; letter-spacing: -0.01em !important; z-index: 5; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-list li, .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-list li { color: #e8f1ff !important; } .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-list a, .footer .innerWrap.footer-inner--grid > .footer-hakpok-accordions-wrap--mobile-only .footer-region-list a { color: #e6f0ff !important; font-size: inherit !important; font-weight: inherit !important; } /* 상단 관련 링크 줄: 모바일에서 가로 스크롤·잘림 방지 */ .footer .innerWrap.footer-inner--grid .center_lst.footer-nav-line { text-align: left !important; overflow-x: visible !important; overflow-wrap: anywhere; word-break: keep-all; line-height: 1.58 !important; } .footer .innerWrap.footer-inner--grid .center_lst.footer-nav-line .footer-nav-line__primary { display: inline !important; white-space: normal !important; max-width: 100% !important; overflow-x: visible !important; } .footer .innerWrap.footer-inner--grid .center_lst.footer-nav-line .footer-nav-line__primary a { white-space: normal !important; } /* 저작권 줄의 학폭 아코디언은 상단 스택과 중복 — 카드형 규칙보다 우선 숨김 */ .footer .innerWrap.footer-inner--grid .copyright-row .footer-region-accordion.footer-hakpok-accordion--desktop-only { display: none !important; } } /* 업무사례·학폭상담사례 미리보기 섹션 (style.css 브라운·크림 → 딥블루 팔레트) */ #jrCasesPreview .jr-cases-preview-card, #jrConsultCases .jr-cases-preview-card { background: var(--temple-card) !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 4px 18px rgba(15, 40, 71, 0.08) !important; } /* 상담 카드: 한 줄에서 가장 높은 카드 기준으로 세로 맞춤 */ main#target #jrConsultCases .jr-cases-preview-viewport .jr-cases-preview-track { display: flex !important; align-items: stretch !important; } #jrCasesPreview .jr-cases-preview-card:hover, #jrConsultCases .jr-cases-preview-card:hover { box-shadow: 0 10px 26px rgba(30, 64, 175, 0.14) !important; border-color: rgba(56, 189, 248, 0.45) !important; } /* 업무사례 일반 카드: RISK CHECK .jr-risk-card 와 동일 안쪽 패딩 */ main#target #jrCasesPreview .jr-cases-preview-card:not(.jr-consult-case-card) { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; box-sizing: border-box !important; } #jrConsultCases .jr-cases-preview-card.jr-consult-case-card:hover { transform: none !important; } #jrConsultCases .jr-cases-preview-card.jr-consult-case-card { padding: var(--jr-risk-card-pad-y) var(--jr-risk-card-pad-x) !important; cursor: default !important; /* 칩이 absolute라 플로우 높이는 inner만 담당 — min-height:0 은 flex 1 1 0 과 만나 카드 세로 붕괴 유발, 기본 카드 min-height(33rem 등) 유지 */ min-height: unset !important; } #jrCasesPreview .jr-cases-preview-card-chip, #jrConsultCases .jr-cases-preview-card-chip { background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; color: #f8fafc !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; } #jrCasesPreview .jr-cases-preview-card-title, #jrConsultCases .jr-cases-preview-card-title { color: var(--temple-text) !important; } #jrCasesPreview .jr-cases-preview-card-summary, #jrConsultCases .jr-cases-preview-card-summary { color: var(--temple-text-muted) !important; } #jrCasesPreview .jr-cases-preview-card-result, #jrConsultCases .jr-cases-preview-card-result { background: var(--temple-chip-bg) !important; color: var(--temple-chip-text) !important; border: 1px solid var(--temple-border) !important; } #jrCasesPreview .jr-cases-preview-lawyer img, #jrConsultCases .jr-cases-preview-lawyer img { background: var(--temple-card-muted) !important; border: 1px solid var(--temple-border) !important; } #jrCasesPreview a.jr-cases-preview-lawyer:hover img, #jrCasesPreview a.jr-cases-preview-lawyer:focus-visible img, #jrConsultCases a.jr-cases-preview-lawyer:hover img, #jrConsultCases a.jr-cases-preview-lawyer:focus-visible img { box-shadow: 0 6px 16px rgba(30, 64, 175, 0.18) !important; } #jrCasesPreview .jr-cases-preview-lawyer span, #jrConsultCases .jr-cases-preview-lawyer span { color: var(--temple-text) !important; } #jrCasesPreview .jr-cases-preview-empty { color: var(--temple-text-muted) !important; } #jrCasesPreview .jr-why-credibility-badge, #jrConsultCases .jr-why-credibility-badge { background: var(--temple-deep-2) !important; color: #e0f2fe !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; } #jrCasesPreview .jr-cases-preview-btn, #jrConsultCases .jr-cases-preview-btn { border-color: var(--temple-border) !important; background: var(--temple-card) !important; color: var(--temple-text) !important; } #jrCasesPreview .jr-cases-preview-btn:hover:not(:disabled), #jrConsultCases .jr-cases-preview-btn:hover:not(:disabled) { background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; border-color: rgba(56, 189, 248, 0.45) !important; color: #f8fafc !important; } /* JR 학폭상담사례: 모바일은 좌우 화살표 대신 하단 점 네비(JS가 900px 미만에서 점 표시) */ @media (max-width: 899px) { #jrConsultCases .jr-cases-preview-btn { display: none !important; } main#target #jrConsultCases .jr-consult-cases-dots:not([hidden]) { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; gap: clamp(0.45rem, 1.85vw, 1.05rem); /* 카드 하단과 점 네비 간격 추가 축소 */ margin: clamp(0.28rem, 0.92vw, 0.58rem) 0 0; padding: 0.14rem clamp(0.5rem, 2.25vw, 2.75rem) 0.12rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-inline: 0.75rem; } #jrConsultCases .jr-consult-cases-dots::-webkit-scrollbar { height: 5px; } #jrConsultCases .jr-consult-cases-dots::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); border-radius: 999px; } #jrConsultCases .jr-consult-cases-dot { box-sizing: border-box; width: 1rem; height: 1rem; padding: 0; margin: 0; border: 0; border-radius: 9999px; background: rgba(30, 64, 175, 0.32); cursor: pointer; flex-shrink: 0; transition: width 0.2s ease, background 0.2s ease, opacity 0.2s ease; } #jrConsultCases .jr-consult-cases-dot.is-active { width: 2.7rem; background: #1e40af; } #jrConsultCases .jr-consult-cases-dot:focus-visible { outline: 3px solid rgba(56, 189, 248, 0.85); outline-offset: 3px; } } /* 업무사례 미리보기: 한 줄 2장 보조(cqw). 상담사례(#jrConsultCases) 폭은 JS syncConsultCaseCardWidths가 지정 */ @supports (width: 1cqw) { @media (min-width: 951px) { main#target #jrCasesPreview.jr-cases-preview-section .jr-cases-preview-viewport .jr-cases-preview-track > .jr-cases-preview-card { flex: 0 0 calc(50cqw - 0.8rem) !important; flex-grow: 0 !important; flex-shrink: 0 !important; width: calc(50cqw - 0.8rem) !important; max-width: calc(50cqw - 0.8rem) !important; min-width: 0 !important; box-sizing: border-box !important; min-height: auto !important; } } } /* JR 학폭상담사례: PC 5열일 때 트랙 간격·카드 상단 여백(칩·제목 겹침 방지) */ @media (min-width: 1200px) { main#target #jrConsultCases .jr-cases-preview-viewport .jr-cases-preview-track { gap: 0.55rem !important; column-gap: 0.55rem !important; } main#target #jrConsultCases .jr-consult-case-card-inner { padding-top: 1.55rem !important; } main#target #jrConsultCases .jr-consult-recommended-lawyers { margin-top: auto !important; padding-top: clamp(1.05rem, 0.78rem + 0.85vw, 1.55rem) !important; } main#target #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="2"]::after, main#target #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::before, main#target #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::after { top: clamp(1.55rem, 1.25rem + 0.85vw, 2.25rem) !important; } } @media (min-width: 900px) and (max-width: 1199px) { main#target #jrConsultCases .jr-cases-preview-viewport .jr-cases-preview-track { gap: 0.85rem !important; column-gap: 0.85rem !important; } main#target #jrConsultCases .jr-consult-case-card-inner { padding-top: 1.62rem !important; } } /* JR 학폭상담사례: 카드 내부 타이포 — 메인 :root 토큰과 동일 계열(과대 확대 해제) */ main#target #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-title { font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; line-height: 1.28 !important; margin: 0 !important; padding-bottom: clamp(0.75rem, 0.55rem + 0.55vw, 1.1rem) !important; box-sizing: border-box !important; min-height: 5.05rem !important; } @supports (height: 1lh) { main#target #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-title { min-height: calc(2lh + clamp(0.75rem, 0.55rem + 0.55vw, 1.1rem)) !important; } } main#target #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-summary { font-size: var(--jr-type-body, clamp(1.53rem, 1.41rem + 0.29vw, 1.69rem)) !important; line-height: 1.42 !important; margin-top: clamp(0.55rem, 0.42rem + 0.45vw, 0.95rem) !important; display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; text-overflow: unset !important; } main#target #jrConsultCases .jr-consult-case-card > .jr-cases-preview-card-chip { font-size: clamp(1.56rem, 1.4rem + 0.64vw, 2rem) !important; padding: 0.44rem 1.05rem !important; line-height: 1.05 !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__result-badge.jr-cases-preview-card-result { font-size: clamp(0.74rem, 0.66rem + 0.3vw, 0.9rem) !important; padding: 0.26rem 0.52rem !important; margin-bottom: 0.3rem !important; } main#target #jrConsultCases .jr-consult-lawyers-head { font-size: clamp(1.2rem, 1.08rem + 0.42vw, 1.425rem) !important; margin: 0 !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer span { font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-style: normal !important; word-break: keep-all !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer img { width: clamp(4.35rem, 3.6rem + 2.2vw, 5.35rem) !important; height: clamp(4.35rem, 3.6rem + 2.2vw, 5.35rem) !important; } @media (max-width: 899px) { main#target #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-title { font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; line-height: 1.28 !important; margin: 0 !important; padding-bottom: clamp(0.75rem, 0.55rem + 0.55vw, 1.1rem) !important; box-sizing: border-box !important; min-height: 5.05rem !important; } @supports (height: 1lh) { main#target #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-title { min-height: calc(2lh + clamp(0.75rem, 0.55rem + 0.55vw, 1.1rem)) !important; } } main#target #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-summary { font-size: var(--jr-type-body, clamp(1.53rem, 1.41rem + 0.29vw, 1.69rem)) !important; line-height: 1.42 !important; margin-top: clamp(0.55rem, 0.42rem + 0.45vw, 0.95rem) !important; display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; text-overflow: unset !important; } main#target #jrConsultCases .jr-consult-case-card > .jr-cases-preview-card-chip { font-size: clamp(1.44rem, 1.28rem + 0.76vw, 1.84rem) !important; padding: 0.4rem 0.95rem !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__result-badge.jr-cases-preview-card-result { font-size: clamp(0.68rem, 0.62rem + 0.32vw, 0.86rem) !important; } main#target #jrConsultCases .jr-consult-lawyers-head { font-size: clamp(1.08rem, 0.99rem + 0.48vw, 1.32rem) !important; } /* 모바일: 구분선(추천변호사) ↔ 사진 사이 여유 + 사진·이름 150% 확대 */ main#target #jrConsultCases .jr-consult-recommended-lawyers { gap: clamp(1.05rem, 0.78rem + 1.2vw, 1.55rem) !important; padding-top: clamp(1.25rem, 0.92rem + 1vw, 1.85rem) !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers.jr-cases-preview-lawyers { padding-top: 0.5rem !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer img { width: clamp(6.525rem, 5.4rem + 3.3vw, 8.025rem) !important; height: clamp(6.525rem, 5.4rem + 3.3vw, 8.025rem) !important; } main#target #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer span { font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-style: normal !important; word-break: keep-all !important; } } /* 학폭상담사례: 제목 3줄 높이 고정 후 소폭 패딩 → 요약 시작 위치 통일 */ #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-title { display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; margin: 0 !important; padding-bottom: clamp(0.75rem, 0.55rem + 0.55vw, 1.1rem) !important; box-sizing: border-box !important; min-height: 5.05rem !important; word-break: keep-all !important; } @supports (height: 1lh) { #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-title { min-height: calc(2lh + clamp(0.75rem, 0.55rem + 0.55vw, 1.1rem)) !important; } } #jrConsultCases .jr-consult-case-card .jr-cases-preview-card-summary { display: block !important; -webkit-box-orient: unset !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; min-height: 0 !important; overflow: visible !important; text-overflow: unset !important; word-break: keep-all !important; margin-top: clamp(0.55rem, 0.42rem + 0.45vw, 0.95rem) !important; } /* 학폭상담사례: 카드 세로 플렉스·inner·본문 확장 → 추천변호사 블록은 하단 고정 */ #jrConsultCases .jr-consult-case-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; } #jrConsultCases .jr-consult-case-card-inner { display: flex !important; flex-direction: column !important; /* flex-basis:0 + 세로 불확정이면 inner 높이 0으로 붕괴(칩은 absolute) — auto로 본문·변호사 높이 반영 */ flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; /* 카드 외곽을 RISK 패딩으로 키웠으므로 칩 아래 여백은 inner 에서만 유지 */ padding-top: clamp(1.42rem, 1.18rem + 0.75vw, 1.88rem) !important; box-sizing: border-box !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__copy.jr-cases-preview-card-body, #jrConsultCases .jr-consult-case-card .jr-consult-case-card__copy { flex: 1 1 auto !important; padding-top: 0 !important; min-height: 0 !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__result-badge.jr-cases-preview-card-result { margin-top: 0 !important; margin-bottom: 0.3rem !important; align-self: flex-start !important; } #jrConsultCases .jr-consult-recommended-lawyers { margin-top: auto !important; width: 100% !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: clamp(0.7rem, 0.5rem + 0.55vw, 1.05rem) !important; padding-top: clamp(1.1rem, 0.82rem + 0.8vw, 1.65rem) !important; padding-bottom: 0 !important; box-sizing: border-box !important; } #jrConsultCases .jr-consult-lawyers-head { display: flex !important; align-items: center !important; gap: 0.65rem !important; margin: 0 !important; padding: 0 !important; font-size: 1.83rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: var(--temple-text-muted, #64748b) !important; } #jrConsultCases .jr-consult-lawyers-head span { flex-shrink: 0 !important; white-space: nowrap !important; } #jrConsultCases .jr-consult-lawyers-head::before, #jrConsultCases .jr-consult-lawyers-head::after { content: "" !important; flex: 1 1 auto !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.45), transparent) !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers.jr-cases-preview-lawyers { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; display: grid !important; gap: 0.35rem 0.45rem !important; justify-items: center !important; align-items: start !important; width: 100% !important; position: relative !important; } /* 추천변호사 2·3열일 때 사진 열 사이 구분 점 (현재는 1명 고정으로 비표시) */ #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="2"]::after, #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::before, #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::after { content: "" !important; position: absolute !important; width: 0.48rem !important; height: 0.48rem !important; border-radius: 50% !important; background: rgba(71, 85, 105, 0.58) !important; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22) !important; pointer-events: none !important; z-index: 1 !important; top: 2.25rem !important; transform: translate(-50%, -50%) !important; } #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="2"]::after { left: 50% !important; } #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::before { left: calc(100% / 3) !important; } #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::after { left: calc(200% / 3) !important; } @media (max-width: 899px) { #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="2"]::after, #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::before, #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"]::after { top: clamp(3.45rem, 2.85rem + 2.4vw, 4.65rem) !important; } } #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="1"] { grid-template-columns: minmax(0, 1fr) !important; max-width: 11rem !important; margin-left: auto !important; margin-right: auto !important; } #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #jrConsultCases .jr-consult-case-card__lawyers[data-lawyer-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer { width: 100% !important; max-width: 100% !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer img { width: 8.4rem !important; height: 8.4rem !important; max-width: 100% !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer span { font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-style: normal !important; word-break: keep-all !important; max-width: 100% !important; text-align: center !important; } @media (max-width: 520px) { #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer img { width: min(8rem, 22vw) !important; height: min(8rem, 22vw) !important; } #jrConsultCases .jr-consult-case-card .jr-consult-case-card__lawyers .jr-cases-preview-lawyer span { font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } } /* 인라인/클래스 혼합: 자주 쓰이는 다크 브라운 블록 */ .jr-broadcast-badge, .jr-channel-badge, .jr-duration-badge { background: var(--temple-deep-2) !important; color: #f1f5ff !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; } /* 의뢰인 후기 슬라이드: SVG 아이콘 사용 시 */ #jrReview .review-card__img-box .review-card__img--symbol { object-fit: contain !important; padding: 1.2rem; box-sizing: border-box; transform: none !important; } /* Thanks 고객 후기: 첨부 아바타 PNG(원형 프레임에 맞게 채움) */ #jrReview .review-card__img-box .review-card__img--thanks { object-fit: cover !important; padding: 0 !important; transform: none !important; } /* 고객후기(#jrReview) 모바일: 네이버 플레이스(.jr-naver-fade-btn)와 동일 원형·쉐브론 + 이름 아래 카테고리(제목) 줄 높이에 좌우 배치 */ @media (max-width: 768px) { #jrReview .review-slider-container.swiper .swiper-button-prev::after, #jrReview .review-slider-container.swiper .swiper-button-next::after, #jrReview .review-slider-container.swiper .review-btn::after { display: none !important; content: none !important; } #jrReview .review-slider-container.swiper .review-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: clamp(3rem, 5vw, 3.5rem) !important; height: clamp(3rem, 5vw, 3.5rem) !important; margin-top: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(45, 36, 24, 0.12) !important; background: rgba(255, 255, 255, 0.96) !important; color: var(--brown800, #5c4c3f) !important; box-shadow: 0 4px 14px rgba(45, 36, 24, 0.1) !important; cursor: pointer !important; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; /* 카테고리(.review-card__category) 줄 세로 중앙: 패딩 + 아바타(8rem) + 여백 + 이름(2rem) + 이름 하단 + 카테고리 반줄 */ top: calc( var(--jr-risk-card-pad-y, 2.2rem) + 8rem + 0.94rem + (2rem * 1.32) + 0.35rem + (1.8rem * 0.52) ) !important; bottom: auto !important; transform: translateY(-50%) !important; } #jrReview .review-slider-container.swiper .review-btn:hover:not(.swiper-button-disabled) { background: var(--brown800, #5c4c3f) !important; color: #fff !important; border-color: var(--brown800, #5c4c3f) !important; box-shadow: 0 6px 20px rgba(45, 36, 24, 0.18) !important; transform: translateY(-50%) scale(1.05) !important; } #jrReview .review-slider-container.swiper .review-btn.swiper-button-disabled { opacity: 0.35 !important; pointer-events: none !important; } #jrReview .review-slider-container.swiper .review-btn svg { flex-shrink: 0 !important; display: block !important; } #jrReview .review-slider-container.swiper .review-btn--prev { left: -0.35rem !important; right: auto !important; } #jrReview .review-slider-container.swiper .review-btn--next { right: -0.35rem !important; left: auto !important; } } @media (max-width: 390px) { #jrReview .review-slider-container.swiper .review-btn { width: 3.2rem !important; height: 3.2rem !important; } } /* 고객 후기 부제: 어절 단위 줄바꿈으로 「확인하세」/「요」처럼 끊기지 않게 */ #jrReview.jr-naver-reviews-section > .innerWrap > .jr-naver-reviews-desc { word-break: keep-all !important; overflow-wrap: normal !important; max-width: min(100%, 52rem) !important; } /* FAQ 섹션 */ #jrReview.section2, #jrInstagram.jr-instagram-section, #jrLocation.section3, #faq.jr-faq-section { border-top-color: rgba(56, 189, 248, 0.22) !important; } .jr-faq-badge { background: var(--temple-deep-2) !important; color: #e0f2fe !important; border: 1px solid rgba(56, 189, 248, 0.25) !important; } .jr-faq-title, #faq .jr-faq-title { color: var(--temple-text) !important; } .jr-faq-lead, #faq .jr-faq-lead { color: var(--temple-text-muted) !important; } .jr-faq-lead strong, #faq .jr-faq-lead strong { color: #1e40af !important; } .jr-faq-cat-title, #faq .jr-faq-cat-title { color: var(--temple-text) !important; border-bottom-color: var(--temple-border) !important; } .jr-faq-item { border-color: var(--temple-border) !important; box-shadow: 0 4px 14px rgba(15, 40, 71, 0.06) !important; } .jr-faq-q, #faq .jr-faq-q { color: var(--temple-text) !important; } .jr-faq-answer p, #faq .jr-faq-answer p { color: var(--temple-text-muted) !important; } .jr-faq-cta { background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; color: #f8fafc !important; box-shadow: 0 4px 14px rgba(15, 40, 71, 0.22) !important; } .jr-faq-cta:hover { background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) !important; border-color: #7dd3fc !important; box-shadow: 0 8px 22px rgba(15, 40, 71, 0.28) !important; color: #f8fafc !important; } .jr-faq-cta:focus-visible { outline: 2px solid #38bdf8 !important; outline-offset: 3px !important; } /* 블로그 카드 타이포 */ .jr-blog-body h3, .jr-blog-title { color: var(--temple-text) !important; } .jr-blog-desc { color: var(--temple-text-muted) !important; } /* 보도 섹션 헤더 뱃지: 하단 main#target 섹션 키커 통일 규칙으로 스타일 처리 */ /* ========== 섹션 키커 뱃지·CTA 통일 (#jrCasesPreview 업무사례 라인 기준) ========== */ main#target #jrRiskUrgency .jr-risk-badge, main#target #jrWhyCredibility .jr-why-credibility-badge, main#target #jrCasesPreview .jr-why-credibility-badge, main#target #jrConsultCases .jr-why-credibility-badge, main#target .jr-naver-reviews-section .jr-naver-badge, main#target #jrNaverReviews .jr-naver-badge, main#target #jrReview .jr-naver-badge, main#target .jr-broadcast-header .jr-broadcast-badge, main#target #jrBroadcast .jr-broadcast-header .jr-broadcast-badge, main#target .jr-press-header .jr-press-badge, main#target #jrPress .jr-press-header .jr-press-badge, main#target .jr-blog-header .jr-blog-badge, main#target #jrBlog .jr-blog-header .jr-blog-badge, main#target .jr-instagram-header .jr-instagram-badge, main#target #jrInstagram .jr-instagram-header .jr-instagram-badge, main#target #faq .jr-faq-head .jr-faq-badge, main#target #jrLocation > .innerWrap > .jr-naver-badge, main#target .jr-faq-section .jr-faq-head .jr-faq-badge, main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head .jr-lawyer-search-kicker-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.42rem 1.1rem !important; border-radius: 999px !important; font-size: 1.12rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; line-height: 1 !important; text-transform: uppercase !important; background: var(--temple-deep-2) !important; color: #e0f2fe !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; box-shadow: 0 8px 18px rgba(15, 40, 71, 0.18) !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 0.8rem !important; width: fit-content !important; min-width: 0 !important; box-sizing: border-box !important; } /* JR 인스타그램만: 배지↔「JR 인스타그램」제목 사이 한 줄 여백 제거 */ main#target #jrInstagram .jr-instagram-header > .jr-instagram-badge { margin-bottom: 0 !important; } /* RISK CHECK 배지만: inline-flex면 margin auto가 먹지 않아 왼쪽에 붙음 → 블록 레벨 flex로 가로 중앙 */ main#target #jrRiskUrgency .jr-risk-badge { display: flex !important; margin-left: auto !important; margin-right: auto !important; } main#target .lawyer-search-wrap .lawyer-search-head { display: flex !important; flex-direction: column !important; align-items: center !important; } main#target a.jr-section-more-btn, main#target .jr-section-more-wrap a.jr-section-more-btn, main#target .jr-press-more-wrap a.jr-section-more-btn { display: inline-flex !important; width: min(100%, 24rem) !important; min-width: min(100%, 24rem) !important; max-width: min(100%, 24rem) !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; box-sizing: border-box !important; border-radius: 9999px !important; font-size: 1.35rem !important; font-weight: 600 !important; text-decoration: none !important; } main#target a.jr-section-more-btn > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } main#target a.jr-section-more-btn svg, main#target a.jr-section-more-btn .jr-instagram-more-icon { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; } /* RISK CHECK: 자가진단 CTA 버튼 — 가로 전체(위 블록에서 .jr-section-more-wrap 여백·max-width 처리) */ main#target #jrRiskUrgency .jr-section-more-wrap a.jr-section-more-btn { width: 100% !important; min-width: 0 !important; max-width: none !important; } main#target .lawyer-search-wrap .jr-why-credibility-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; width: min(100%, 24rem) !important; min-width: 0 !important; max-width: min(100%, 24rem) !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; box-sizing: border-box !important; border-radius: 9999px !important; font-size: 1.35rem !important; font-weight: 600 !important; text-decoration: none !important; } /* ========== PC #jrMember 히어로: 딥블루 팔레트 계층 (롤링 + 우측 대형) ========== */ #jrMember.visual, .jr-response-team-hero.visual { --jr-hero-h1: #7dd3fc; --jr-hero-h2: #f8fbff; --jr-hero-body: #cbd5e1; --jr-hero-muted: #94a3b8; --jr-hero-cta-bg: linear-gradient(180deg, #1e40af 0%, #172554 100%); --jr-hero-cta-border: rgba(56, 189, 248, 0.38); } /* 롤링 카드: ①분류(역할/pro) ②이름(호버) ③경력(前) */ #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-rolling-tagline, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-rolling-tagline { color: var(--jr-hero-h1) !important; -webkit-text-fill-color: var(--jr-hero-h1) !important; font-weight: 700 !important; letter-spacing: -0.02em; margin: 0 0 0.15rem !important; font-size: clamp(1.68rem, 1.53rem + 0.48vw, 2.01rem) !important; line-height: 1.26 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-career-one { color: var(--jr-hero-body) !important; margin: 0 !important; font-size: clamp(1.47rem, 1.38rem + 0.27vw, 1.68rem) !important; line-height: 1.28 !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-rolling-name { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: clamp(1.68rem, 1.53rem + 0.54vw, 2.04rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--jr-hero-h2) !important; white-space: nowrap !important; text-overflow: ellipsis !important; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-0.12em); transition: max-height 0.34s ease, opacity 0.28s ease, margin 0.34s ease, transform 0.28s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 0 1px rgba(0, 0, 0, 0.9), 0 0 12px rgba(15, 23, 42, 0.55), 0 0 18px rgba(147, 197, 253, 0.22) !important; -webkit-text-fill-color: var(--jr-hero-h2) !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:hover .lawyer-info .jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:hover .lawyer-info .jr-lawyer-rolling-name, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:focus-within .lawyer-info .jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:focus-within .lawyer-info .jr-lawyer-rolling-name, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active .lawyer-info .jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active .lawyer-info .jr-lawyer-rolling-name { max-height: 4.2em; opacity: 1; margin: 0.22rem 0 0.22rem !important; transform: translateY(0); color: var(--jr-hero-h2) !important; -webkit-text-fill-color: var(--jr-hero-h2) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.74), 0 0 1px rgba(0, 0, 0, 0.92), 0 0 12px rgba(15, 23, 42, 0.58), 0 0 20px rgba(191, 219, 254, 0.28) !important; } /* index.min의 h3 색상 규칙을 확실히 덮어쓰기 */ #jrMember.visual .lawyer-slider-others .swiper-slide .lawyer-info h3.jr-lawyer-rolling-name, .jr-response-team-hero.visual .lawyer-slider-others .swiper-slide .lawyer-info h3.jr-lawyer-rolling-name, #jrMember.visual .lawyer-slider-others .swiper-slide-active .lawyer-info h3.jr-lawyer-rolling-name, .jr-response-team-hero.visual .lawyer-slider-others .swiper-slide-active .lawyer-info h3.jr-lawyer-rolling-name, #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide .lawyer-info h3.jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide .lawyer-info h3.jr-lawyer-rolling-name, #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info h3.jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info h3.jr-lawyer-rolling-name { color: var(--jr-hero-h2) !important; -webkit-text-fill-color: var(--jr-hero-h2) !important; } /* 우측 대형: 동일 계층 — ①역할 ②이름 ③경력 본문 */ #jrMember.visual .jr-hero-fixed--primary .jr-hero-role-line, .jr-response-team-hero.visual .jr-hero-fixed--primary .jr-hero-role-line { color: var(--jr-hero-h1) !important; font-weight: 700 !important; letter-spacing: -0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important; } #jrMember.visual .jr-hero-fixed--primary .jr-hero-name-line, .jr-response-team-hero.visual .jr-hero-fixed--primary .jr-hero-name-line { color: var(--jr-hero-h2) !important; font-weight: 800 !important; letter-spacing: -0.03em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72), 0 0 1px rgba(0, 0, 0, 0.9), 0 0 12px rgba(15, 23, 42, 0.55), 0 0 20px rgba(191, 219, 254, 0.24) !important; } #jrMember.visual .jr-hero-fixed--primary .jr-hero-career-block, .jr-response-team-hero.visual .jr-hero-fixed--primary .jr-hero-career-block { color: var(--jr-hero-body) !important; line-height: 1.65 !important; font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.16rem) !important; font-weight: 500 !important; } /* 프로필 더보기: 브라운형 → 딥블루 CTA 톤 */ #jrMember.visual .jr-hero-fixed--primary .lawyer-info .jr-hero-profile-hint, #jrMember.visual .jr-hero-fixed--primary .jr-hero-primary-photo-shell .jr-hero-profile-hint, .jr-response-team-hero.visual .jr-hero-fixed--primary .lawyer-info .jr-hero-profile-hint, .jr-response-team-hero.visual .jr-hero-fixed--primary .jr-hero-primary-photo-shell .jr-hero-profile-hint { display: inline-flex !important; align-items: center; justify-content: center; margin-bottom: 0.55rem !important; padding: 0.42rem 0.95rem !important; border-radius: 999px !important; background: var(--jr-hero-cta-bg) !important; border: 1px solid var(--jr-hero-cta-border) !important; color: #f8fafc !important; font-size: clamp(1.02rem, 0.95rem + 0.2vw, 1.14rem) !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: 0 4px 14px rgba(15, 40, 71, 0.35) !important; } #jrMember.visual .jr-hero-fixed--primary .lawyer-info .jr-hero-profile-hint:hover, #jrMember.visual .jr-hero-fixed--primary .jr-hero-primary-photo-shell .jr-hero-profile-hint:hover, .jr-response-team-hero.visual .jr-hero-fixed--primary .lawyer-info .jr-hero-profile-hint:hover, .jr-response-team-hero.visual .jr-hero-fixed--primary .jr-hero-primary-photo-shell .jr-hero-profile-hint:hover { border-color: #7dd3fc !important; color: #fff !important; box-shadow: 0 6px 18px rgba(30, 64, 175, 0.4) !important; } /* 롤링 좌우 화살표: 브라운 계열 덮어쓰기 */ #jrMember.visual #jr-hero-design-1 .lawyer-slider-btn, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-btn { background: linear-gradient(180deg, rgba(30, 64, 175, 0.95) 0%, rgba(15, 40, 71, 0.98) 100%) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; color: #e0f2fe !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-btn:hover:not(.swiper-button-disabled), .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-btn:hover:not(.swiper-button-disabled) { border-color: #7dd3fc !important; color: #fff !important; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-btn.swiper-button-disabled, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-btn.swiper-button-disabled { opacity: 0.35 !important; } /* 롤링 카드(테두리/배경): 홈페이지 딥블루 팔레트 통일 */ #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper { gap: 1px !important; column-gap: 1px !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide { border: 1px solid rgba(125, 211, 252, 0.26) !important; border-radius: 14px !important; background: linear-gradient( 180deg, rgba(15, 40, 71, 0.42) 0%, rgba(12, 33, 56, 0.32) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(2, 6, 23, 0.22) !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:hover, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:focus-within, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:focus-within , .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:hover, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:focus-within, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:focus-within { border-color: rgba(125, 211, 252, 0.52) !important; background: linear-gradient( 180deg, rgba(30, 64, 175, 0.34) 0%, rgba(15, 40, 71, 0.4) 100% ) !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active { border-color: rgba(125, 211, 252, 0.68) !important; background: linear-gradient( 180deg, rgba(37, 99, 235, 0.26) 0%, rgba(15, 40, 71, 0.46) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(15, 23, 42, 0.34) !important; } /* index.min «베이지·비활성 h3 숨김» 덮어쓰기 — 롤링만 딥블루 계층 유지 */ #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .lawyer-info p, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .lawyer-info h3 , .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .lawyer-info p, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .lawyer-info h3 { text-align: center !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:not(.swiper-slide-active) .lawyer-info h3.jr-lawyer-rolling-name, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:not(.swiper-slide-active) .lawyer-info h3.jr-lawyer-rolling-name { visibility: visible !important; height: auto !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: clamp(1.12rem, 1.02rem + 0.36vw, 1.36rem) !important; line-height: 1.35 !important; opacity: 0 !important; overflow: hidden !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info p, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info h3 , .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info p, #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info h3 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info p:first-child, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide-active .lawyer-info p:first-child { color: var(--jr-hero-h1) !important; margin-top: 0 !important; } #jrMember.visual #jr-hero-design-1 .jr-baseline-static-wrapper .swiper-slide:not(.swiper-slide-active) .lawyer-info p:first-child, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide:not(.swiper-slide-active) .lawyer-info p:first-child { margin-top: 0 !important; } /* RISK 자가진단 모달: 체크박스 레이아웃/결과 영역 */ #jrRiskSelfCheckModal .csModal, #jrRiskContactGateModal .csModal { max-width: 62rem !important; } #jrRiskSelfCheckModal .csModal-header h2, #jrRiskContactGateModal .csModal-header h2 { font-size: clamp(2.2rem, 1.9rem + 0.55vw, 2.8rem) !important; font-weight: 800 !important; letter-spacing: -0.02em; } #jrRiskSelfCheckModal .csModal-header, #jrRiskContactGateModal .csModal-header { text-align: center !important; } #jrRiskSelfCheckModal .csModal-header .subinfo, #jrRiskContactGateModal .csModal-header .subinfo { font-size: clamp(1.5rem, 3.825vw + 0.48rem, 2.07rem) !important; font-weight: 700 !important; color: #dc2626 !important; line-height: 1.3 !important; letter-spacing: -0.04em !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 899px) { #jrRiskSelfCheckModal .csModal-header .subinfo, #jrRiskContactGateModal .csModal-header .subinfo { font-size: clamp(1.32rem, 3.525vw + 0.42rem, 1.725rem) !important; letter-spacing: -0.05em !important; } } @media (max-width: 360px) { #jrRiskSelfCheckModal .csModal-header .subinfo, #jrRiskContactGateModal .csModal-header .subinfo { font-size: clamp(1.23rem, 3.15vw + 0.33rem, 1.575rem) !important; } } #jrRiskSelfCheckModal .csForm, #jrRiskContactGateModal .csForm { margin-top: 0.8rem; } /* 게이트 「다음」— .submit 미사용(전역 submit 바인딩과 분리), 스타일은 .csModal .submit 과 동일 계열 */ #jrRiskContactGateModal .jr-risk-gate-next { border-radius: 12px; background: var(--brown800, #714923); font-size: 1.15rem; padding: 1rem 3rem; font-weight: 600; color: #fff; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 14px rgba(113, 73, 35, 0.3); } #jrRiskContactGateModal .jr-risk-gate-next:hover { background: var(--brown900, #4a3520); transform: translateY(-1px); } #jrRiskContactGateModal .jr-risk-gate-next:active { transform: translateY(0); } #jrRiskContactGateModal .jr-risk-gate-next:disabled { opacity: 0.75; cursor: not-allowed; transform: none; } #jrRiskSelfCheckModal .jr-risk-selfcheck-role { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; gap: 0.8rem; margin-bottom: 0.95rem; } #jrRiskSelfCheckModal .jr-risk-selfcheck-role[hidden] { display: none !important; } #jrRiskSelfCheckModal .jr-risk-role-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 4.6rem; padding: 0.6rem 1rem; border-radius: 14px; border: 1px solid rgba(29, 78, 216, 0.24); background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%); color: #1e3a8a; font-size: 1.52rem; font-weight: 800; cursor: pointer; transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } #jrRiskSelfCheckModal .jr-risk-role-btn:hover { transform: translateY(-1px); border-color: rgba(37, 99, 235, 0.45); } #jrRiskSelfCheckModal .jr-risk-role-btn.is-active { border-color: rgba(37, 99, 235, 0.62); background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%); color: #f8fafc; box-shadow: 0 8px 18px rgba(30, 64, 175, 0.22); } #jrRiskSelfCheckModal .jr-risk-selfcheck-list { display: grid; gap: 0.75rem; margin-bottom: 0.2rem; } #jrRiskSelfCheckModal .jr-risk-selfcheck-list[hidden] { display: none !important; } /* ========== 섹션 제목/부제목 타이포 통일 (업무사례 기준) ========== */ main#target #jrRiskUrgency .jr-risk-head h2, main#target #jrWhyCredibility .jr-why-credibility-head h2, main#target #jrCasesPreview .jr-why-credibility-head h2, main#target #jrConsultCases .jr-why-credibility-head h2, main#target #jrNaverReviews > .innerWrap > h2, main#target #jrReview > .innerWrap > h2, main#target #jrBroadcast .jr-broadcast-title, main#target #jrPress .jr-press-title, main#target #jrBlog .jr-blog-title, main#target #jrInstagram .jr-instagram-title, main#target #faq .jr-faq-title, main#target #jrLocation > .innerWrap > h2, main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head h2 { font-size: var(--jr-type-title, clamp(2.42rem, 1.87rem + 1.45vw, 3.32rem)) !important; line-height: 1.32 !important; letter-spacing: -0.02em !important; color: #172554 !important; font-weight: 700 !important; } main#target #jrRiskUrgency .jr-risk-head p, main#target #jrWhyCredibility .jr-why-credibility-head p, main#target #jrCasesPreview .jr-why-credibility-head p, main#target #jrConsultCases .jr-why-credibility-head p, main#target #jrNaverReviews .jr-naver-reviews-desc, main#target #jrReview .jr-naver-reviews-desc, main#target #jrBroadcast .jr-broadcast-desc, main#target #jrPress .jr-press-desc, main#target #jrBlog .jr-blog-desc, main#target #jrInstagram .jr-instagram-desc, main#target #faq .jr-faq-lead, main#target #jrLocation > .innerWrap > .jr-naver-reviews-desc, main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head .lawyer-search-desc { font-size: var(--jr-type-subtitle, clamp(1.62rem, 1.45rem + 0.34vw, 1.82rem)) !important; line-height: 1.68 !important; letter-spacing: -0.006em !important; color: #4f6482 !important; font-weight: 500 !important; } /* 본문 섹션: 제목·부제 가운데 (PC·모바일 공통) — 방송·JR언론은 헤더 블록을 세로 스택으로 통일 */ main#target #jrBroadcast .jr-broadcast-header, main#target #jrPress .jr-press-header { display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; align-items: center !important; } main#target #jrRiskUrgency .jr-risk-head, main#target #jrWhyCredibility .jr-why-credibility-head, main#target #jrCasesPreview .jr-why-credibility-head, main#target #jrConsultCases .jr-why-credibility-head, main#target #jrBlog .jr-blog-header, main#target #jrInstagram .jr-instagram-header, main#target #faq .jr-faq-head { text-align: center !important; align-items: center !important; } main#target #jrRiskUrgency .jr-risk-head h2, main#target #jrWhyCredibility .jr-why-credibility-head h2, main#target #jrCasesPreview .jr-why-credibility-head h2, main#target #jrConsultCases .jr-why-credibility-head h2, main#target #jrNaverReviews > .innerWrap > h2:first-of-type, main#target #jrReview > .innerWrap > h2:first-of-type, main#target #jrBroadcast .jr-broadcast-title, main#target #jrPress .jr-press-title, main#target #jrBlog .jr-blog-title, main#target #jrInstagram .jr-instagram-title, main#target #faq .jr-faq-title, main#target #jrLocation > .innerWrap > h2 { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } main#target #jrRiskUrgency .jr-risk-head p, main#target #jrWhyCredibility .jr-why-credibility-head p, main#target #jrCasesPreview .jr-why-credibility-head p, main#target #jrConsultCases .jr-why-credibility-head p, main#target #jrNaverReviews > .innerWrap > .jr-naver-reviews-desc, main#target #jrReview > .innerWrap > .jr-naver-reviews-desc, main#target #jrBroadcast .jr-broadcast-desc, main#target #jrPress .jr-press-desc, main#target #jrBlog .jr-blog-desc, main#target #jrInstagram .jr-instagram-desc, main#target #faq .jr-faq-lead, main#target #jrLocation > .innerWrap > .jr-naver-reviews-desc { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; } /* 네이버 플레이스 부제만 좁은 폭 — Thanks 등은 아래 한 줄 규칙 */ main#target #jrNaverReviews > .innerWrap > .jr-naver-reviews-desc { max-width: 38rem !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 홈 Thanks: 부제 한 줄 고정(index #target) — 가로 스크롤바(파란 막대로 보일 수 있음) 방지는 오시는 길과 분리 */ main#target #jrReview > .innerWrap > .jr-naver-reviews-desc { white-space: nowrap !important; width: max-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* 오시는 길: 부제는 패딩 폭 안에서 줄바꿈(한·영 혼합 긴 문장) */ main#target #jrLocation > .innerWrap > .jr-naver-reviews-desc { white-space: normal !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; overflow-x: visible !important; overflow-y: visible !important; word-break: keep-all !important; overflow-wrap: break-word !important; } main#target #jrNaverReviews > .innerWrap > .jr-naver-badge, main#target #jrPress > .ll-inner.innerWrap > .jr-press-header .jr-press-badge, main#target #jrReview > .innerWrap > .jr-naver-badge, main#target #jrLocation > .innerWrap > .jr-naver-badge { text-align: center !important; } /* RISK CHECK 헤더: PC/모바일 카피 span — 이 파일이 index.css·index.min.css 이후 로드되어 전환·타이포를 최종 확정 */ main#target #jrRiskUrgency .jr-risk-head h2 .jr-risk-head-title-pc, main#target #jrRiskUrgency .jr-risk-head h2 .jr-risk-head-title-mo { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; color: inherit !important; } main#target #jrRiskUrgency .jr-risk-head p .jr-risk-head-lead-pc, main#target #jrRiskUrgency .jr-risk-head p .jr-risk-head-lead-mo { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; color: inherit !important; } @media (max-width: 899px) { main#target #jrRiskUrgency .jr-risk-head-title-pc, main#target #jrRiskUrgency .jr-risk-head-lead-pc { display: none !important; } main#target #jrRiskUrgency .jr-risk-head-title-mo, main#target #jrRiskUrgency .jr-risk-head-lead-mo { display: block !important; } } @media (min-width: 900px) { main#target #jrRiskUrgency .jr-risk-head-title-mo, main#target #jrRiskUrgency .jr-risk-head-lead-mo { display: none !important; } main#target .lawyer-search-desc-mo { display: none !important; } } /* RISK CHECK 우선 적용: 딥블루 팔레트 */ #jrRiskSelfCheckModal .jr-risk-selfcheck-list label { display: grid; grid-template-columns: 1.6rem 1fr; align-items: flex-start; gap: 0.65rem; font-size: 1.42rem; line-height: 1.5; color: #1f2937; text-align: left; cursor: pointer; } #jrRiskSelfCheckModal .jr-risk-selfcheck-list input[type="checkbox"] { width: 1.35rem !important; height: 1.35rem !important; margin-top: 0.1rem; accent-color: #1d4ed8; } @keyframes jr-risk-submit-pulse-1 { 0%, 100% { box-shadow: 0 5px 18px rgba(244, 63, 94, 0.42), 0 0 0 0 rgba(251, 113, 133, 0.35); } 50% { box-shadow: 0 7px 24px rgba(244, 63, 94, 0.52), 0 0 0 9px rgba(251, 113, 133, 0); } } @keyframes jr-risk-submit-pulse-2 { 0%, 100% { box-shadow: 0 6px 22px rgba(220, 38, 38, 0.52), 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 8px 28px rgba(220, 38, 38, 0.62), 0 0 0 10px rgba(239, 68, 68, 0); } } @keyframes jr-risk-submit-pulse-3 { 0%, 100% { box-shadow: 0 6px 24px rgba(127, 29, 29, 0.55), 0 0 0 0 rgba(185, 28, 28, 0.48); } 50% { box-shadow: 0 9px 30px rgba(127, 29, 29, 0.68), 0 0 0 11px rgba(185, 28, 28, 0); } } @keyframes jr-risk-submit-pulse-4 { 0%, 100% { box-shadow: 0 8px 26px rgba(69, 10, 10, 0.62), 0 0 0 0 rgba(127, 29, 29, 0.52); } 50% { box-shadow: 0 12px 36px rgba(69, 10, 10, 0.78), 0 0 0 14px rgba(127, 29, 29, 0); } } @media (prefers-reduced-motion: reduce) { #jrRiskSelfCheckModal .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn { animation: none !important; box-shadow: 0 6px 20px rgba(185, 28, 28, 0.45); } } /* 1단계(연한 레드) → 4단계(찐한 적·거의 적흑): data-risk-result-tier 는 jr-risk-selfcheck.js 에서 설정 */ #jrRiskSelfCheckModal[data-risk-result-tier="1"] { --jr-risk-border-w: 2px; --jr-risk-result-border: #fb7185; --jr-risk-result-bg1: #fffbfb; --jr-risk-result-bg2: #fff1f3; --jr-risk-result-shadow: 0 4px 14px rgba(251, 113, 133, 0.22); --jr-risk-banner-side: #e11d48; --jr-risk-banner-mid: #f43f5e; --jr-risk-title: #9f1239; --jr-risk-stage: #be123c; --jr-risk-text: #500724; --jr-risk-guide-color: #9f1239; --jr-risk-guide-bg: rgba(255, 251, 251, 0.98); --jr-risk-guide-border: #fb7185; --jr-risk-submit-1: #fb7185; --jr-risk-submit-2: #e11d48; --jr-risk-submit-border: #fecdd3; } #jrRiskSelfCheckModal[data-risk-result-tier="2"] { --jr-risk-border-w: 2px; --jr-risk-result-border: #ef4444; --jr-risk-result-bg1: #fff1f2; --jr-risk-result-bg2: #ffe4e6; --jr-risk-result-shadow: 0 5px 18px rgba(239, 68, 68, 0.26); --jr-risk-banner-side: #b91c1c; --jr-risk-banner-mid: #dc2626; --jr-risk-title: #991b1b; --jr-risk-stage: #dc2626; --jr-risk-text: #450a0a; --jr-risk-guide-color: #991b1b; --jr-risk-guide-bg: rgba(254, 242, 242, 0.96); --jr-risk-guide-border: #ef4444; --jr-risk-submit-1: #ef4444; --jr-risk-submit-2: #b91c1c; --jr-risk-submit-border: #fca5a5; } #jrRiskSelfCheckModal[data-risk-result-tier="3"] { --jr-risk-border-w: 3px; --jr-risk-result-border: #991b1b; --jr-risk-result-bg1: #ffe4e6; --jr-risk-result-bg2: #fecdd3; --jr-risk-result-shadow: 0 6px 22px rgba(153, 27, 27, 0.32); --jr-risk-banner-side: #7f1d1d; --jr-risk-banner-mid: #991b1b; --jr-risk-title: #7f1d1d; --jr-risk-stage: #991b1b; --jr-risk-text: #450a0a; --jr-risk-guide-color: #7f1d1d; --jr-risk-guide-bg: rgba(254, 226, 226, 0.98); --jr-risk-guide-border: #991b1b; --jr-risk-submit-1: #dc2626; --jr-risk-submit-2: #7f1d1d; --jr-risk-submit-border: #f87171; } #jrRiskSelfCheckModal[data-risk-result-tier="4"] { --jr-risk-border-w: 3px; --jr-risk-result-border: #450a0a; --jr-risk-result-bg1: #fecaca; --jr-risk-result-bg2: #f87171; --jr-risk-result-shadow: 0 8px 28px rgba(69, 10, 10, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35); --jr-risk-banner-side: #450a0a; --jr-risk-banner-mid: #7f1d1d; --jr-risk-title: #450a0a; --jr-risk-stage: #450a0a; --jr-risk-text: #2a0505; --jr-risk-guide-color: #450a0a; --jr-risk-guide-bg: rgba(254, 202, 202, 0.97); --jr-risk-guide-border: #7f1d1d; --jr-risk-submit-1: #991b1b; --jr-risk-submit-2: #450a0a; --jr-risk-submit-border: #991b1b; } #jrRiskSelfCheckModal .jr-risk-selfcheck-result { margin-top: 1rem; padding: 0; border-radius: 12px; border-style: solid; border-width: var(--jr-risk-border-w, 2px); border-color: var(--jr-risk-result-border, #dc2626); background: linear-gradient( 180deg, var(--jr-risk-result-bg1, #fff1f2) 0%, var(--jr-risk-result-bg2, #ffe4e6) 100% ); box-shadow: var(--jr-risk-result-shadow, 0 4px 18px rgba(185, 28, 28, 0.18)); overflow: hidden; } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-urgent-banner { margin: 0; padding: 0.55rem 1rem; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); background: linear-gradient( 90deg, var(--jr-risk-banner-side, #b91c1c) 0%, var(--jr-risk-banner-mid, #dc2626) 50%, var(--jr-risk-banner-side, #b91c1c) 100% ); } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-body { padding: 0.85rem 1rem 1rem; } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-title { margin: 0 0 0.4rem; font-size: 1.32rem; font-weight: 800; color: var(--jr-risk-title, #991b1b); } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-text { margin: 0; font-size: 1.32rem; line-height: 1.58; font-weight: 600; color: var(--jr-risk-text, #450a0a); } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-stage { margin: 0 0 0.45rem; font-size: 1.26rem; font-weight: 800; line-height: 1.45; color: var(--jr-risk-stage, #b91c1c); } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-guide { margin: 0.75rem 0 0; padding: 0.65rem 0.75rem; font-size: 1.38rem; line-height: 1.52; font-weight: 800; color: var(--jr-risk-guide-color, #991b1b); background: var(--jr-risk-guide-bg, rgba(254, 242, 242, 0.95)); border: 2px dashed var(--jr-risk-guide-border, #dc2626); border-radius: 10px; } #jrRiskSelfCheckModal .jr-risk-selfcheck-result-btn { margin-top: 0.9rem; } #jrRiskSelfCheckModal .jr-risk-selfcheck-submit { margin-top: 1rem; } #jrRiskSelfCheckModal .jr-risk-selfcheck-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-width: 14rem; min-height: 4.6rem; padding: 0.72rem 1.4rem; border: 2px solid #fecaca; border-radius: 14px; background: linear-gradient(180deg, #1e40af 0%, #172554 100%); color: #f8fafc; font-size: 1.58rem; font-weight: 800; box-shadow: 0 6px 16px rgba(15, 40, 71, 0.24); cursor: pointer; } #jrRiskSelfCheckModal .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn { min-width: min(100%, 18rem); min-height: 5.1rem; padding: 0.85rem 1.35rem; border-color: var(--jr-risk-submit-border, #fca5a5); font-size: 1.72rem; letter-spacing: -0.02em; background: linear-gradient( 180deg, var(--jr-risk-submit-1, #dc2626) 0%, var(--jr-risk-submit-2, #991b1b) 100% ); animation: jr-risk-submit-pulse-2 2s ease-in-out infinite; } #jrRiskSelfCheckModal[data-risk-result-tier="1"] .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn { animation-name: jr-risk-submit-pulse-1; } #jrRiskSelfCheckModal[data-risk-result-tier="3"] .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn { animation-name: jr-risk-submit-pulse-3; } #jrRiskSelfCheckModal[data-risk-result-tier="4"] .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn { animation-name: jr-risk-submit-pulse-4; } #jrRiskSelfCheckModal .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn:hover { filter: brightness(1.06); } #jrRiskSelfCheckModal .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn:active { filter: brightness(0.95); } #jrRiskSelfCheckModal .jr-risk-selfcheck-submit.jr-risk-selfcheck-btn:disabled { animation: none; opacity: 0.72; } #jrRiskSelfCheckModal .jr-risk-submit-main { display: block; line-height: 1.2; } #jrRiskSelfCheckModal .jr-risk-submit-sub { display: block; font-size: 1.05rem; font-weight: 700; opacity: 0.95; } /* hidden 속성은 기본 display:none 인데, 위 .jr-risk-selfcheck-btn 의 inline-flex 가 덮어씀 */ #jrRiskSelfCheckModal .jr-risk-selfcheck-btn[hidden] { display: none !important; } /* ─── JR 인스타그램: IG 스타일 카드 + 모바일 점·스와이프 / 데스크톱 좌우 네비(트랙 스크롤바 숨김) ─── */ #jrInstagram .jr-instagram-grid.jr-instagram-grid--scroll { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0 0 0.25rem; grid-template-columns: initial; gap: 0; overflow: visible; box-sizing: border-box; } #jrInstagram .jr-instagram-carousel-shell { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; min-width: 0; margin-top: 0.15rem; } #jrInstagram .jr-instagram-carousel-track-wrap { display: flex; flex-direction: row; align-items: stretch; gap: clamp(0.35rem, 1.2vw, 0.65rem); width: 100%; min-width: 0; } /* 스크롤 영역 + 모바일 스와이프 힌트(카드 위에 겹침) */ #jrInstagram .jr-instagram-clip-wrap { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; } #jrInstagram .jr-instagram-scroll-clip { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0 4px; box-sizing: border-box; container-type: inline-size; container-name: jrig; } #jrInstagram .jr-instagram-scroll-clip::-webkit-scrollbar { width: 0; height: 0; display: none; } #jrInstagram .jr-instagram-nav { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: clamp(2.35rem, 5vw, 2.85rem); height: clamp(2.35rem, 5vw, 2.85rem); margin: 0; padding: 0; border: 1px solid rgba(45, 36, 24, 0.14); border-radius: 50%; background: rgba(255, 255, 255, 0.98); color: #1e3a5f; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } #jrInstagram .jr-instagram-nav:hover { background: #1e3a5f; color: #fff; border-color: #1e3a5f; } #jrInstagram .jr-instagram-nav:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* 모바일·태블릿(≤899px): 학폭상담사례(#jrConsultCases)와 동일 — 좌우 화살표 숨김·하단 점 네비 */ @media (max-width: 899px) { #jrInstagram .jr-instagram-nav { display: none !important; } main#target #jrInstagram .jr-instagram-carousel-track-wrap, #jrInstagram .jr-instagram-carousel-track-wrap { width: min(100%, calc(100vw - 2.4rem)) !important; max-width: min(100%, calc(100vw - 2.4rem)) !important; margin-left: auto !important; margin-right: auto !important; padding: 0.75rem 0 1.1rem !important; box-sizing: border-box; } main#target #jrInstagram .jr-instagram-grid.jr-instagram-grid--scroll, #jrInstagram .jr-instagram-grid.jr-instagram-grid--scroll { padding: 0 !important; } main#target #jrInstagram .jr-instagram-scroll-clip, #jrInstagram .jr-instagram-scroll-clip { padding: 0 !important; } main#target #jrInstagram .jr-instagram-dots:not([hidden]), #jrInstagram .jr-instagram-dots:not([hidden]) { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; gap: clamp(0.45rem, 1.85vw, 1.05rem); margin: clamp(0.28rem, 0.92vw, 0.58rem) 0 0; padding: 0.14rem clamp(0.5rem, 2.25vw, 2.75rem) 0.12rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-inline: 0.75rem; min-height: 0; } #jrInstagram .jr-instagram-dots::-webkit-scrollbar { height: 5px; } #jrInstagram .jr-instagram-dots::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); border-radius: 999px; } #jrInstagram .jr-instagram-dot { box-sizing: border-box; width: 1rem; height: 1rem; padding: 0; margin: 0; border: 0; border-radius: 9999px; background: rgba(30, 64, 175, 0.32); cursor: pointer; flex-shrink: 0; transition: width 0.2s ease, background 0.2s ease, opacity 0.2s ease; } #jrInstagram .jr-instagram-dot:hover { background: rgba(30, 64, 175, 0.5); } #jrInstagram .jr-instagram-dot.is-active { width: 2.7rem; background: #1e40af; box-shadow: none; transform: none; } #jrInstagram .jr-instagram-dot:focus-visible { outline: 3px solid rgba(56, 189, 248, 0.85); outline-offset: 3px; } } @media (min-width: 900px) { #jrInstagram .jr-instagram-dots { display: none !important; } } #jrInstagram .jr-instagram-dots { display: none; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; box-sizing: border-box; min-height: 0; } #jrInstagram .jr-instagram-scroll-clip .jr-instagram-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; --jr-ig-gap: clamp(0.85rem, 2.2vw, 1.35rem); gap: var(--jr-ig-gap); width: max-content; box-sizing: border-box; } /* 기본(좁은 트랙·모바일): 스크롤 클립 폭에 맞춰 한 장만 보이게(옆 카드 피크·세로 길쭉함 완화) */ #jrInstagram .jr-instagram-scroll-clip .jr-instagram-card { flex: 0 0 100cqi; scroll-snap-align: start; max-width: 100cqi; box-sizing: border-box; } /* cqi 미지원 브라우저: 뷰포트 기준 한 장 폭(모바일은 화살표 제거로 여백 축소) */ @supports not (width: 100cqi) { @media (max-width: 899px) { #jrInstagram .jr-instagram-scroll-clip .jr-instagram-card { flex: 0 0 calc(100vw - 2.4rem); max-width: calc(100vw - 2.4rem); } } } /* 640px 이상 트랙: 3열 */ @container jrig (min-width: 640px) { #jrInstagram .jr-instagram-scroll-clip .jr-instagram-card { flex: 0 0 calc((100cqi - 2 * var(--jr-ig-gap)) / 3); max-width: none; } } /* 900px 이상 트랙: 정확히 4열 */ @container jrig (min-width: 900px) { #jrInstagram .jr-instagram-scroll-clip .jr-instagram-card { flex: 0 0 calc((100cqi - 3 * var(--jr-ig-gap)) / 4); max-width: none; } } /* IG형 카드 본문 */ #jrInstagram a.jr-instagram-card { /* 제목 2줄 블록 높이 + 아래(구분선 직전) 여백 — index.css p 패딩과 충돌 시에도 잘리지 않게 */ --jr-ig-caption-line-block: calc(1.55rem * 1.35 * 2); --jr-ig-caption-pad-y: 0.55rem; /* 툴바~제목: 아래쪽보다 살짝 더 넓게 */ --jr-ig-caption-pad-top: calc(var(--jr-ig-caption-pad-y) + 0.15rem); display: flex; flex-direction: column; text-decoration: none !important; color: #262626; background: #fff; border: 1px solid #dbdbdb; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } #jrInstagram a.jr-instagram-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); border-color: rgba(30, 58, 95, 0.22); } #jrInstagram .jr-instagram-card__head { display: flex; flex-direction: row; align-items: center; gap: 0.65rem; padding: 0.85rem 0.9rem; border-bottom: 1px solid #efefef; min-height: 0; box-sizing: border-box; } #jrInstagram .jr-instagram-card__avatar { width: calc(2.45rem * 1.5); height: calc(2.45rem * 1.5); border-radius: 50%; flex-shrink: 0; background: linear-gradient(145deg, #2563eb 0%, #1e40af 38%, #0f172a 100%); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); } #jrInstagram .jr-instagram-card__avatar-initials { font-size: calc(0.74rem * 1.5); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; } #jrInstagram .jr-instagram-card__user { flex: 1; min-width: 0; font-size: calc(0.98rem * 1.5); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #jrInstagram .jr-instagram-card__follow { font-size: calc(0.78rem * 1.5); font-weight: 600; color: #0095f6; border: 1px solid rgba(0, 149, 246, 0.45); border-radius: 5px; padding: 0.36rem 0.68rem; line-height: 1.2; flex-shrink: 0; } #jrInstagram .jr-instagram-card__more { font-size: calc(1.1rem * 1.5); font-weight: 700; letter-spacing: 0.06em; color: #262626; line-height: 1; padding: 0 0.1rem; flex-shrink: 0; } #jrInstagram .jr-instagram-card__media { position: relative; width: 100%; /* 세로 릴 비율(9:16) 대비 미디어 블록 세로 높이 약 80% — 9:(16×0.8) = 45:64 */ aspect-ratio: 45 / 64; background: #0f0f0f; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* 모바일: 4:5 대비 세로 높이 약 80% — 4:(5×0.8) = 1:1 */ @media (max-width: 767px) { #jrInstagram .jr-instagram-card__media { aspect-ratio: 1 / 1; align-items: center; justify-content: center; } } #jrInstagram .jr-instagram-card__media img { display: block; width: 80% !important; max-width: 80%; height: 100%; margin-left: auto; margin-right: auto; /* 프레임 높이에 맞춤 늘림 — 가로는 80%로 왜곡 완화 */ object-fit: fill !important; object-position: center !important; } /* 모바일 스와이프 힌트 — 배경 없음, SVG 이중 쉐브론만 */ #jrInstagram .jr-instagram-next-hint { display: none; position: absolute; z-index: 3; top: 41%; right: max(0.25rem, env(safe-area-inset-right)); transform: translateY(-50%); margin: 0; padding: 0; border: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: center; justify-content: center; line-height: 0; pointer-events: none; color: #e0f2fe; transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease; } @media (max-width: 899px) { #jrInstagram .jr-instagram-next-hint:not([hidden]) { display: inline-flex; } } #jrInstagram .jr-instagram-carousel-shell.jr-instagram--hint-dismissed .jr-instagram-next-hint { opacity: 0; visibility: hidden; transform: translateY(-50%) scale(0.96); } @keyframes jr-ig-next-hint-chev { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(0.55rem); opacity: 0.88; } } #jrInstagram .jr-instagram-next-hint__chev { display: inline-flex; align-items: center; justify-content: center; margin: 0; line-height: 0; animation: jr-ig-next-hint-chev 1.15s ease-in-out infinite; } #jrInstagram .jr-instagram-next-hint__chev .jr-ig-hint-chevron-svg { display: block; width: clamp(3.1rem, 11.5cqi, 3.85rem); height: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(56, 189, 248, 0.55)); } #jrInstagram .jr-instagram-card__toolbar { display: flex; flex-direction: row; align-items: center; gap: 0.65rem; padding: 0.35rem 0.75rem 0.12rem; color: #262626; } #jrInstagram .jr-instagram-card__toolbar .jr-ig-ico { display: block; flex-shrink: 0; width: 1.35rem; height: 1.35rem; } #jrInstagram .jr-instagram-card__toolbar-spacer { flex: 1; min-width: 0; } #jrInstagram .jr-instagram-card__body { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; /* 툴바 바로 아래 본문 — 제목 위 간격(아래 여백보다 살짝 넓음) */ padding-top: var(--jr-ig-caption-pad-top); padding-left: var(--jr-risk-card-pad-x); padding-right: var(--jr-risk-card-pad-x); padding-bottom: 0; /* 본문 기준: 학폭 블로그 카드 `.jr-blog-body h3` 와 동일 (1.55rem / 1.35) */ font-size: 1.55rem; line-height: 1.35; text-align: left; } #jrInstagram .jr-instagram-card__caption { margin: 0; box-sizing: border-box; /* 제목 2줄 + 아래 패딩(구분선 직전 여백) — index .jr-instagram-card p 패딩은 !important 블록에서 제거 */ flex: 0 0 auto; min-height: calc(var(--jr-ig-caption-line-block) + var(--jr-ig-caption-pad-y)); max-height: calc(var(--jr-ig-caption-line-block) + var(--jr-ig-caption-pad-y)); word-break: break-word; } /* index.css 의 `.jr-instagram-card p` 무력화 — 캡션은 2줄 고정 + 하단 패딩이 max-height 안에서 보이도록 */ #jrInstagram a.jr-instagram-card .jr-instagram-card__caption { box-sizing: border-box !important; min-height: calc(var(--jr-ig-caption-line-block) + var(--jr-ig-caption-pad-y)) !important; max-height: calc(var(--jr-ig-caption-line-block) + var(--jr-ig-caption-pad-y)) !important; padding: 0 !important; padding-bottom: var(--jr-ig-caption-pad-y) !important; padding-left: 0 !important; padding-right: 0 !important; font-size: inherit !important; line-height: inherit !important; } #jrInstagram a.jr-instagram-card .jr-instagram-card__reaction-hint { min-height: 0 !important; padding-left: 0 !important; padding-right: 0 !important; font-size: inherit !important; line-height: inherit !important; } /* 학폭 대응 전략 블로그 카드 제목 `.jr-blog-body h3` 와 동일 타이포 (index.min.css + 본 테마 색) */ #jrInstagram .jr-instagram-card__caption-txt { font-family: "Pretendard", "Pretendard Variable", ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--temple-text, #1f1711) !important; line-height: 1.35; letter-spacing: normal; font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; overflow-wrap: anywhere; } #jrInstagram .jr-instagram-card__reaction-hint { flex-shrink: 0; --jr-ig-reaction-inner-gap: 0.42rem; /* 제목~선 간격은 캡션 padding-bottom 으로 통일 */ margin: 0; padding: var(--jr-ig-reaction-inner-gap) 0 var(--jr-ig-reaction-inner-gap); border-top: 1px solid rgba(15, 23, 42, 0.08); font-family: "Pretendard", "Pretendard Variable", ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.184rem, 3.84cqi, 1.408rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: #4b5563; text-align: left; } #jrInstagram .jr-instagram-card__reaction-hint-ico { margin-right: 0.28rem; color: #e11d48; font-size: 0.92em; vertical-align: 0.05em; } #jrInstagram .jr-instagram-tag { color: #0c4a6e; font-weight: 400; letter-spacing: -0.03em; } /* JR 인스타: 하단 «인스타그램 바로가기» CTA — 딥블루 (#ll-main 랜딩·서브페이지 동일) */ #jrInstagram .jr-section-more-wrap a.jr-section-more-btn, .jr-instagram-section .jr-section-more-wrap a.jr-section-more-btn, #ll-main #jrInstagram .jr-section-more-wrap a.jr-section-more-btn { background: linear-gradient(180deg, #1d4ed8 0%, #0f2847 100%) !important; border: 1px solid rgba(56, 189, 248, 0.42) !important; color: #f8fafc !important; } #jrInstagram .jr-section-more-wrap a.jr-section-more-btn:hover, .jr-instagram-section .jr-section-more-wrap a.jr-section-more-btn:hover, #ll-main #jrInstagram .jr-section-more-wrap a.jr-section-more-btn:hover { background: linear-gradient(180deg, #2563eb 0%, #172554 100%) !important; border-color: #7dd3fc !important; color: #fff !important; } /* 컨테이너 쿼리 미지원: 대략 4열 */ @supports not (container-type: inline-size) { @media (min-width: 1024px) { #jrInstagram .jr-instagram-scroll-clip .jr-instagram-card { flex: 0 0 calc(23.5% - 0.5rem); max-width: none; } } } /* ========== JR 학폭상담사례 (#jrConsultCases): 부제↔카드 — FAQ .jr-faq-inner gap 과 동일 + PC에서 track-wrap 음수 margin 제거 ========== */ main#target #jrConsultCases.jr-cases-preview-section > .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } main#target #jrConsultCases .jr-cases-preview-track-wrap { margin-top: 0 !important; } @media (min-width: 900px) { main#target #jrWhyCredibility.jr-why-credibility-section > .innerWrap, main#target #jrCasesPreview.jr-cases-preview-section > .innerWrap, main#target #jrConsultCases.jr-cases-preview-section > .innerWrap { gap: var(--jr-section-head-to-cards-gap) !important; } } /* ========== 오시는 길 (#jrLocation): inner — 대치 랜딩(.jr-local-daechi #ll-main #jrLocation)과 동일 최대폭·좌우 패딩 ========== */ main#target #jrLocation > .innerWrap.jr-location-inner { margin-left: auto; margin-right: auto; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0 !important; padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } main#target #jrLocation > .innerWrap > .jr-naver-reviews-desc { margin-top: 0.12rem !important; } main#target #jrLocation > .innerWrap > .cont.jr-location-cont { margin-top: calc(var(--jr-section-head-to-cards-gap) - clamp(1.35rem, 1.1rem + 0.65vw, 1.7rem)) !important; } @media (min-width: 900px) { main#target #jrLocation > .innerWrap.jr-location-inner { max-width: min(1120px, calc(100% - 3rem)); padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); } } @media (min-width: 1200px) { main#target #jrLocation > .innerWrap.jr-location-inner { max-width: min(1180px, calc(100% - 4rem)); } } /* 주소 2줄 + 복사 버튼: 첫 줄에서 522, 두 칸 뒤 인라인 */ #jrLocation .jrinfo .jr-location-address-row { display: block !important; } #jrLocation .jrinfo .jr-location-address-text { display: inline-block !important; width: 100% !important; max-width: 100% !important; vertical-align: top !important; } #jrLocation .jrinfo .jr-location-copy-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer !important; line-height: 1 !important; -webkit-tap-highlight-color: transparent; } #jrLocation .jrinfo .jr-location-copy-btn img { display: block !important; width: clamp(1.6rem, 1.4rem + 0.5vw, 2rem) !important; height: auto !important; } /* 약도 이미지: 높이 120% 확장 + 가운데 기준 130% 확대 · 테두리 크롭 */ #jrLocation .jr-location-map-figure { overflow: hidden !important; position: relative !important; min-height: clamp(20.8rem, 52vw, 36rem) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #jrLocation .jr-location-map-figure img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; transform: scale(1.5) !important; transform-origin: center center !important; flex-shrink: 0 !important; } /* ========== 오시는 길 (#jrLocation): 하단 Location CTA · 여백 · 가독성 ========== */ #jrLocation.jr-location-section { /* 섹션 하단 본문 약 2줄 분량 여백(푸터 전) */ padding-bottom: clamp(3rem, 2rem + 2.5vw, 5rem); } #jrLocation .jr-location-more-wrap { margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 2rem); display: flex; justify-content: center; width: 100%; } #jrLocation .jr-location-add-info { gap: 1.75rem !important; /* style.css .add_info 상단 3rem + .jrinfo padding-top 이 겹쳐 과함 → 상단만 한 줄 분량 축소 */ padding-top: clamp(1.85rem, 1.35rem + 1.15vw, 2.45rem) !important; /* 좌우: .section3 .cont .add_info 가로 패딩과 동일 → 좌측 치우침 보정, 좌측만 +10px */ padding-left: calc(clamp(1.5rem, 0.981rem + 2.31vw, 3rem) + 10px) !important; padding-right: clamp(1.5rem, 0.981rem + 2.31vw, 3rem) !important; /* 하단: 지도 라벨 아래 한 줄(1lh) 제거 → 한 줄 타이트 */ padding-bottom: clamp(2.25rem, 1.75rem + 1.25vw, 3rem) !important; } #jrLocation .jr-location-add-info > .jrinfo { padding-top: 0; } #jrLocation .jr-location-hr { /* 텍스트 블록 폭에 맞춤: 카드 내부 가로 전체 */ width: 100% !important; max-width: 100%; margin: 0.45rem 0 !important; opacity: 0.88; box-sizing: border-box; } #jrLocation .jr-location-transport { gap: 1.5rem !important; } #jrLocation .jr-location-transport li { gap: 0.65rem !important; align-items: flex-start; } #jrLocation .jr-location-transport li > p { margin: 0; padding-left: 0.15rem; line-height: 1.62; max-width: 40rem; } #jrLocation .jr-location-map-apps { display: flex !important; flex-wrap: wrap; justify-content: center !important; align-items: flex-start; gap: 1.25rem 1.75rem; width: 100%; padding: 0.35rem 0 0.35rem; margin: 0 auto; list-style: none; } #jrLocation .jr-location-map-apps li { margin-right: 0 !important; flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-start; } #jrLocation .jr-location-map-apps li a { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start; gap: 0.45rem; width: 100%; max-width: 12rem; margin-left: auto; margin-right: auto; /* style.css 1.4rem 기준 80% × 70% — 카드 내 텍스트 전체 축소 */ font-size: calc(1.4rem * 0.8 * 0.7) !important; line-height: 1.45 !important; } /* 홈(main#target): 파란 카드 본문·법무법인명·지도 라벨 — 텍스트 70% 스케일 */ main#target #jrLocation .jr-location-add-info .jrinfo, main#target #jrLocation .jr-location-add-info .jrinfo .add, main#target #jrLocation .jr-location-add-info .jrinfo .jr-location-address-text, main#target #jrLocation .jr-location-add-info .jrinfo .tel, main#target #jrLocation .jr-location-transport li, main#target #jrLocation .jr-location-transport li > span, main#target #jrLocation .jr-location-transport li > p { font-size: calc(1.76rem * 1.2 * 0.7) !important; line-height: 1.75 !important; } main#target #jrLocation .jr-location-add-info .jrinfo .name { font-weight: 700 !important; font-size: calc(1.76rem * 1.2 * 1.2 * 0.7) !important; line-height: 1.75 !important; } main#target #jrLocation .jr-location-map-apps li a { font-size: calc(1.76rem * 1.2 * 0.8 * 0.7) !important; line-height: 1.45 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; gap: 0.45rem !important; } main#target #jrLocation .jr-location-map-apps li a img { display: block !important; margin: 0 auto !important; flex-shrink: 0 !important; } #jrLocation .jr-location-map-apps li a img { display: block; margin-left: auto; margin-right: auto; flex-shrink: 0; } @media (min-width: 900px) { #jrLocation .jr-location-map-apps { gap: 1.75rem 2.5rem; } } @media (max-width: 599px) { #jrLocation .jr-location-map-apps { justify-content: center !important; gap: 1rem 1.5rem; } #jrLocation .jr-location-map-apps li { flex: 0 0 auto; max-width: none; } #jrLocation .jr-location-map-apps li a { width: auto; } } /* ========== 구성원 members.html: RISK CHECK(#jrRiskUrgency) 면·타이포·카드 톤 동기 ========== */ body#target.subpage .jr-members-section .jr-divorce-info-header { border-bottom: none !important; padding-bottom: 1rem !important; } body#target.subpage .jr-members-section .jr-divorce-info-eyebrow { color: var(--temple-chip-text) !important; } body#target.subpage .jr-members-section .jr-divorce-info-eyebrow::before { background: linear-gradient(90deg, #2563eb, rgba(37, 99, 235, 0.2)) !important; } body#target.subpage .jr-members-section .jr-divorce-info-title { color: #172554 !important; } body#target.subpage .jr-members-section .jr-divorce-info-desc { color: #4f6482 !important; white-space: normal !important; overflow: visible !important; } body#target.subpage .jr-members-section .member-intro-wrap { background: linear-gradient(90deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.02) 100%) !important; border-left-color: var(--temple-accent-2) !important; box-shadow: 0 2px 12px rgba(15, 40, 71, 0.06) !important; } body#target.subpage .jr-members-section .member-intro-list li { color: var(--temple-text-muted) !important; } body#target.subpage .jr-members-section .member-intro-list li strong { color: var(--temple-text) !important; } body#target.subpage .jr-members-section .member-card:focus-visible { outline-color: rgba(37, 99, 235, 0.75) !important; } body#target.subpage .jr-members-section .member-card { border-radius: 16px !important; overflow: hidden !important; background: #ffffff !important; border: 2px solid rgba(51, 65, 85, 0.35) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 12px 28px rgba(15, 23, 42, 0.14), 0 28px 56px rgba(30, 64, 175, 0.12) !important; } body#target.subpage .jr-members-section .member-card:hover { transform: translateY(-5px) !important; border-color: rgba(37, 99, 235, 0.55) !important; box-shadow: 0 4px 8px rgba(15, 23, 42, 0.1), 0 18px 40px rgba(15, 23, 42, 0.16), 0 36px 72px rgba(30, 64, 175, 0.18) !important; } /* 사진이 cover로 영역을 채우므로 배경만으론 대비 불가 → 슬레이트 매트(패딩)로 프레임 노출 */ body#target.subpage .jr-members-section .member-card .member-card__img-wrap { padding: 10px 10px 0 !important; background: linear-gradient(180deg, #64748b 0%, #475569 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; box-sizing: border-box !important; } body#target.subpage .jr-members-section .member-card .member-card__img-wrap > img { border-radius: 10px 10px 0 0 !important; box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.25) !important; } body#target.subpage .jr-members-section .member-card:hover .member-card__img-wrap { box-shadow: none !important; border-color: transparent !important; } body#target.subpage .jr-members-section .member-card .member-card__text { background: #f1f5f9 !important; border: none !important; border-top: 2px solid rgba(71, 85, 105, 0.45) !important; border-radius: 0 !important; box-shadow: none !important; } body#target.subpage .jr-members-section .member-card .member-card__name-wrap h3 { color: #0f172a !important; font-weight: 800 !important; } body#target.subpage .jr-members-section .member-card .member-card__name-wrap .member-card__title { color: #334e68 !important; font-weight: 600 !important; } body#target.subpage .jr-members-section .member-card .member-card__badge { color: #e0f2fe !important; background: var(--temple-deep-2) !important; border: 1px solid var(--temple-border-strong) !important; text-shadow: none !important; } body#target.subpage .jr-members-section .member-card:hover .member-card__badge { background: #1e40af !important; color: #f8fafc !important; border-color: rgba(56, 189, 248, 0.55) !important; box-shadow: 0 4px 14px rgba(30, 64, 175, 0.2) !important; } body#target.subpage .jr-members-section .member-cta-wrap { border-top-color: rgba(30, 64, 175, 0.18) !important; } body#target.subpage .jr-members-section .lawyer-search-head h2 { color: #172554 !important; } body#target.subpage .jr-members-section .lawyer-search-head .lawyer-search-desc { color: #4f6482 !important; } body#target.subpage .jr-members-section .lawyer-search-wrap.lawyer-match .lawyer-search-badge { color: var(--temple-chip-text) !important; border-bottom-color: var(--temple-accent-2) !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat { border: 2px solid rgba(30, 64, 175, 0.32) !important; background: rgba(255, 255, 255, 0.82) !important; color: #0f172a !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat:hover { background: var(--temple-deep-2) !important; color: #e0f2fe !important; box-shadow: none !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat.is-active { background: var(--temple-chip-bg) !important; border-color: #2563eb !important; color: #0f172a !important; box-shadow: 0 4px 14px rgba(30, 64, 175, 0.15) !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat.is-active:hover { color: #0f172a !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat:focus-visible { outline-color: rgba(37, 99, 235, 0.55) !important; } body#target.subpage .jr-members-section .lawyer-match-cat__icon { background: rgba(30, 64, 175, 0.1) !important; color: #1e3a8a !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat:hover .lawyer-match-cat__icon { background: rgba(224, 242, 254, 0.2) !important; color: #e0f2fe !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat.is-active .lawyer-match-cat__icon { background: rgba(30, 64, 175, 0.14) !important; color: #0f172a !important; } body#target.subpage .jr-members-section .lawyer-match-cat__hint { color: #4f6482 !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat:hover .lawyer-match-cat__hint { color: rgba(224, 242, 254, 0.9) !important; } body#target.subpage .jr-members-section .lawyer-match-categories button.lawyer-match-cat.is-active .lawyer-match-cat__hint { color: #334e68 !important; } body#target.subpage .jr-members-section .lawyer-match-shell select { border-color: var(--temple-border) !important; } body#target.subpage .jr-members-section .lawyer-match-keyword { border-color: var(--temple-border) !important; } body#target.subpage .jr-members-section .lawyer-match-select-wrap::after { border-right-color: rgba(30, 64, 175, 0.45) !important; border-bottom-color: rgba(30, 64, 175, 0.45) !important; } body#target.subpage .jr-members-section .lawyer-match-keyword-icon { color: rgba(30, 64, 175, 0.45) !important; } body#target.subpage .jr-members-section .lawyer-match-shell input::placeholder { color: rgba(51, 78, 104, 0.55) !important; } body#target.subpage .jr-members-section .lawyer-search-results.lawyer-match-results { border-top-color: var(--temple-border) !important; } body#target.subpage .jr-members-section .lawyer-match-results-title { color: #1e3a8a !important; letter-spacing: 0.12em !important; } body#target.subpage .jr-members-section .lawyer-match-results.lawyer-search-results.lm-results-dock { background: transparent !important; color: var(--temple-text) !important; box-shadow: none !important; } body#target.subpage .jr-members-section .lm-results-dock .lawyer-match-results-title { color: #1e3a8a !important; } body#target.subpage .jr-members-section .lm-results-dock a.jr-lawyer-search-result--card.jr-lawyer-search-result { background: var(--temple-card) !important; border: 1px solid var(--temple-border) !important; box-shadow: 0 4px 20px rgba(15, 40, 71, 0.08) !important; } body#target.subpage .jr-members-section .lm-results-dock a.jr-lawyer-search-result--card:hover { border-color: rgba(56, 189, 248, 0.45) !important; box-shadow: 0 10px 28px rgba(30, 64, 175, 0.12) !important; } body#target.subpage .jr-members-section .lm-results-dock .jr-lawyer-search-result-media { background: var(--temple-card-muted) !important; border-right-color: var(--temple-border) !important; } body#target.subpage .jr-members-section .lm-results-dock .jr-lawyer-search-result-cta { color: #1e40af !important; } body#target.subpage .jr-members-section .lm-results-dock .jr-lawyer-search-result-cta-arrow { color: #2563eb !important; } body#target.subpage .jr-members-section .lm-results-dock a.jr-lawyer-search-result--card:hover .jr-lawyer-search-result-cta-arrow { color: #1d4ed8 !important; } body#target.subpage .jr-members-section .lawyer-match-shell .lawyer-search-empty { color: #4f6482 !important; } @media (max-width: 899px) { /* 모바일에서도 '상황별 맞춤변호사 검색'은 PC와 동일한 단순 검색 레이아웃 유지 */ #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-stepper, #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-panel--cats { display: none !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell-inner { padding: 1.6rem 1.6rem 1.2rem !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-body { display: block !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-panel--refine { border: 0 !important; padding: 0 !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-refine-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.2rem !important; align-items: end !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-label { font-size: 1.7rem !important; margin-bottom: 0.35rem !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell select, #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell input[type="search"], #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell input[type="text"] { font-size: 1.7rem !important; height: 5.2rem !important; } #target.pclayout section.sect.lawyer-search-wrap.lawyer-match .lawyer-match-shell input::placeholder { font-size: 1.6rem !important; } /* Force PC-like layout on mobile for lawyer search */ main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-stepper, main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-panel--cats, main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-panel-kicker, main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-optional { display: none !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-shell.lawyer-search-sect { padding: 1.8rem !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-shell-inner { padding: 0 !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-body { display: block !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-panel--refine { padding: 0 !important; border: 0 !important; background: transparent !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-refine-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.2rem !important; align-items: end !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-field { min-width: 0 !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-label { display: block !important; font-size: 1.6rem !important; font-weight: 700 !important; margin-bottom: 0.4rem !important; text-align: center !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-shell select, main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-shell input[type="search"], main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-shell input[type="text"] { height: 5.2rem !important; min-height: 5.2rem !important; font-size: 1.7rem !important; } main#target.pclayout section.sect.lawyer-search-wrap.lawyer-match #lawyerSearchSect .lawyer-match-keyword-icon { width: 2rem !important; height: 2rem !important; } /* Fallback: broaden selectors to beat legacy mobile rules */ #target .lawyer-match-stepper, #target .lawyer-match-panel--cats, #target .lawyer-match-panel-kicker, #target .lawyer-match-optional { display: none !important; } #target #lawyerSearchSect .lawyer-match-refine-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 1rem !important; align-items: end !important; } #target #lawyerSearchSect .lawyer-match-field, #target #lawyerSearchSect .lawyer-match-field--keyword { min-width: 0 !important; width: 100% !important; } #target #lawyerSearchSect .lawyer-match-shell select, #target #lawyerSearchSect .lawyer-match-shell input[type="search"], #target #lawyerSearchSect .lawyer-match-shell input[type="text"] { width: 100% !important; height: 4.8rem !important; min-height: 4.8rem !important; font-size: 1.45rem !important; line-height: 1.25 !important; } #target #lawyerSearchSect .lawyer-match-shell input::placeholder { font-size: 1.35rem !important; } } @media (max-width: 899px) { /* 헤더(배지·제목·소제목) ↔ 본문 블록 간격 — 맞춤변호사 검색 innerWrap 기준으로 모든 본문 섹션 통일 */ main#target { --jr-head-to-body-gap: clamp(2.65rem, 2rem + 1.9vw, 3.55rem); /* 카드·폼 내부: 소제목(h3/라벨) ↔ 본문(p/필드) — RISK .jr-risk-card h3 margin-bottom과 동일 */ --jr-card-title-body-gap: 1.05rem; /* RISK CHECK 부제↔카드와 동일 스케일 — 전 카드형 섹션·index.min --jr-section-head-content-gap 과 동기 */ --jr-section-head-to-cards-gap: var(--jr-head-to-body-gap); --jr-section-head-content-gap: var(--jr-section-head-to-cards-gap); } main#target .contents > section.sect > .innerWrap { gap: var(--jr-head-to-body-gap) !important; } /* * 네이버 플레이스·의뢰인 후기·JR 언론보도: innerWrap flex gap 이 제목↔부제 사이에도 들어가 한 줄처럼 벌어짐. * → gap:0. JR 언론은 방송과 동일한 .jr-press-header 블록으로 헤더 정렬; 카드 블록(.jr-media-width) 간격은 temple 기본 margin-top. */ main#target #jrNaverReviews > .innerWrap, main#target #jrReview > .innerWrap, main#target #jrPress > .ll-inner.innerWrap, main#target #jrLocation > .innerWrap.jr-location-inner { gap: 0 !important; } main#target #jrNaverReviews > .innerWrap > .jr-naver-reviews-desc, main#target #jrReview > .innerWrap > .jr-naver-reviews-desc { margin-top: 0.35rem !important; } main#target #jrLocation > .innerWrap > .jr-naver-reviews-desc { margin-top: 0.12rem !important; } main#target #jrNaverReviews > .innerWrap > .cont, main#target #jrReview > .innerWrap > .cont { margin-top: var(--jr-head-to-body-gap) !important; } main#target #jrLocation > .innerWrap > .cont.jr-location-cont { margin-top: calc(var(--jr-head-to-body-gap) - clamp(1.35rem, 1.1rem + 0.65vw, 1.7rem)) !important; } main#target #jrNaverReviews > .innerWrap > .jr-section-more-wrap, main#target #jrReview > .innerWrap > .jr-section-more-wrap { margin-top: var(--jr-head-to-body-gap) !important; } /* JR 학폭상담사례: 네이버 플레이스와 동일 — innerWrap gap 끄고 카드↔점↔더보기 간격을 margin 으로만(점 상단 = .jr-naver-reviews-dots 와 동일) */ main#target #jrConsultCases.jr-cases-preview-section > .innerWrap { gap: 0 !important; } main#target #jrConsultCases > .innerWrap > .jr-cases-preview-track-wrap { margin-top: var(--jr-head-to-body-gap) !important; } main#target #jrConsultCases > .innerWrap > .jr-section-more-wrap { margin-top: var(--jr-head-to-body-gap) !important; } /* JR 인스타그램: 학폭상담사례와 동일 — innerWrap gap 0, 헤더↔캐러셀·더보기 간격 */ main#target #jrInstagram.jr-instagram-section > .innerWrap { gap: 0 !important; } main#target #jrInstagram > .innerWrap > .jr-media-width { margin-top: var(--jr-head-to-body-gap) !important; } main#target #jrInstagram > .innerWrap > .jr-section-more-wrap { margin-top: var(--jr-head-to-body-gap) !important; } /* * index.css 패턴: innerWrap gap:0 + 헤더 margin-bottom / 첫 블록 margin-top 으로 간격 생성 * → flex gap 과 누적되어 섹션마다 간격이 달라짐. 모바일은 margin 끄고 gap만 사용. */ main#target #jrRiskUrgency .jr-risk-head { margin-bottom: 0 !important; } main#target #jrWhyCredibility .jr-why-core-cards { margin-top: 0 !important; } main#target .jr-blog-section .jr-media-width { margin-top: 0 !important; } /* 카드·폼 내부 간격 통일 (style.css / index.css에 흩어진 margin·gap 덮어쓰기) */ main#target .jr-risk-card h3 { margin-bottom: var(--jr-card-title-body-gap) !important; } /* #jrWhyCredibility 767px 블록의 p { margin-top:0.6rem } 보다 구체적으로 */ main#target #jrWhyCredibility .jr-why-core-cards article > p:first-of-type { margin-top: var(--jr-card-title-body-gap) !important; } main#target #jrCasesPreview .jr-cases-preview-card-summary, main#target #jrConsultCases .jr-cases-preview-card-summary { margin-top: var(--jr-card-title-body-gap) !important; } /* style.css: .jr-cases-preview-section .jr-cases-preview-track-wrap { margin-top: -1.4rem } 가 innerWrap gap 을 깎아 먹음 — 업무사례(#jrCasesPreview)만 0 유지 */ main#target #jrCasesPreview .jr-cases-preview-track-wrap { margin-top: 0 !important; } main#target .jr-broadcast-card-body, main#target section.jr-broadcast-section .jr-broadcast-card .jr-broadcast-card-body { gap: var(--jr-card-title-body-gap) !important; } main#target #jrBlog .jr-blog-grid--static .jr-blog-card__body { gap: var(--jr-card-title-body-gap) !important; } /* 모바일/태블릿: 변호사 검색을 PC 기능형 UI로 강제 고정 */ #target #lawyerSearchSect .lawyer-match-stepper, #target #lawyerSearchSect .lawyer-match-panel--cats, #target #lawyerSearchSect .lawyer-match-panel-kicker, #target #lawyerSearchSect .lawyer-match-optional { display: none !important; } #target #lawyerSearchSect .lawyer-match-shell.lawyer-search-sect { padding: 1.6rem !important; } #target #lawyerSearchSect .lawyer-match-shell-inner { padding: 0 !important; } #target #lawyerSearchSect .lawyer-match-panel--refine { border: 0 !important; padding: 0 !important; background: transparent !important; } #target #lawyerSearchSect .lawyer-match-refine-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.9rem !important; align-items: end !important; } #target #lawyerSearchSect .lawyer-match-field, #target #lawyerSearchSect .lawyer-match-field--keyword { min-width: 0 !important; width: 100% !important; } #target #lawyerSearchSect .lawyer-match-label { display: block !important; text-align: center !important; font-size: 1.95rem !important; font-weight: 700 !important; margin-bottom: var(--jr-card-title-body-gap) !important; } #target #lawyerSearchSect .lawyer-match-shell select, #target #lawyerSearchSect .lawyer-match-shell input[type="search"], #target #lawyerSearchSect .lawyer-match-shell input[type="text"] { width: 100% !important; height: 5rem !important; min-height: 5rem !important; font-size: 1.65rem !important; line-height: 1.25 !important; } #target #lawyerSearchSect .lawyer-match-shell select { font-size: 1.45rem !important; line-height: 1.2 !important; } #target #lawyerSearchSect .lawyer-match-shell select option { font-size: 1.35rem !important; line-height: 1.25 !important; } #target #lawyerSearchSect .lawyer-match-shell select { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #target #lawyerSearchSect .lawyer-match-keyword { display: block !important; position: relative !important; height: 5rem !important; min-height: 5rem !important; padding: 0 !important; overflow: hidden !important; } #target #lawyerSearchSect .lawyer-match-shell input[type="search"], #target #lawyerSearchSect .lawyer-match-shell input[type="text"] { display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 0.95rem 0 3.2rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 1.5rem !important; line-height: 1.1 !important; text-align: left !important; } #target #lawyerSearchSect .lawyer-match-shell input::placeholder { font-size: 1.45rem !important; letter-spacing: -0.01em !important; text-align: left !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; } #target #lawyerSearchSect .lawyer-match-keyword-icon { position: absolute !important; left: 1rem !important; top: 50% !important; transform: translateY(-50%) !important; width: 2.2rem !important; height: 2.2rem !important; pointer-events: none !important; } #target #lawyerSearchSect .lawyer-match-results.lawyer-search-results { display: block !important; min-height: 0 !important; padding: 1.1rem 1rem !important; } #target #lawyerSearchSect .lawyer-match-results-list, #target #lawyerSearchSect #lawyerSearchResultsList { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.8rem !important; margin: 0 !important; } #target #lawyerSearchSect .lawyer-match-results-list li, #target #lawyerSearchSect #lawyerSearchResultsList li { margin: 0 !important; } #target #lawyerSearchSect a.jr-lawyer-search-result--card.jr-lawyer-search-result { display: flex !important; align-items: center !important; gap: 1rem !important; min-height: 10.5rem !important; padding: 0.85rem 1rem !important; overflow: hidden !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--temple-border, #e2e8f0) !important; box-shadow: 0 4px 14px rgba(15, 40, 71, 0.08) !important; } #target #lawyerSearchSect .jr-lawyer-search-result-media { flex: 0 0 9.25rem !important; width: 9.25rem !important; height: 9.25rem !important; border-radius: 50% !important; overflow: hidden !important; isolation: isolate !important; border: 1px solid rgba(148, 163, 184, 0.45) !important; background: linear-gradient(165deg, #e8f1fb 0%, #dbeafe 55%, #eff6ff 100%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.06) !important; } #target #lawyerSearchSect .jr-lawyer-search-result-photo { display: block !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; overflow: hidden !important; } #target #lawyerSearchSect .jr-lawyer-search-result-photo img { display: block !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; object-position: center 18% !important; transform: none !important; transform-origin: center center !important; } #target #lawyerSearchSect .jr-lawyer-search-result-body { min-width: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 0.25rem !important; align-items: flex-start !important; justify-content: center !important; } #target #lawyerSearchSect .jr-lawyer-search-result-tag, #target #lawyerSearchSect .jr-lawyer-search-result-blurb, #target #lawyerSearchSect .jr-lawyer-search-result-cta { display: none !important; } #target #lawyerSearchSect .jr-lawyer-search-result-name { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 1.65rem !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--temple-text, #0f172a) !important; } #target #lawyerSearchSect .jr-lawyer-search-result-role { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 1.28rem !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--temple-text-muted, #64748b) !important; } /* 모바일 본문 섹션 헤더: 배지·제목·부제 가운덌 정렬 */ #target #jrRiskUrgency .jr-risk-head, #target #jrWhyCredibility .jr-why-credibility-head, #target #jrCasesPreview .jr-why-credibility-head, #target #jrConsultCases .jr-why-credibility-head, #target #jrBroadcast .jr-broadcast-header, #target #jrPress .jr-press-header, #target #jrBlog .jr-blog-header, #target #jrInstagram .jr-instagram-header, #target #faq .jr-faq-head { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; /* innerWrap gap(--jr-head-to-body-gap)만 사용 — 여기 margin-bottom 을 두면 gap 과 합쳐져 간격이 2배로 보임 */ margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; box-sizing: border-box !important; } #target #jrRiskUrgency .jr-risk-badge, #target #jrWhyCredibility .jr-why-credibility-head > .jr-why-credibility-badge, #target #jrCasesPreview .jr-why-credibility-head > .jr-why-credibility-badge, #target #jrConsultCases .jr-why-credibility-head > .jr-why-credibility-badge, #target #jrNaverReviews > .innerWrap > .jr-naver-badge, #target #jrReview > .innerWrap > .jr-naver-badge, #target #jrBroadcast .jr-broadcast-header > .jr-broadcast-badge, #target #jrPress .jr-press-header > .jr-press-badge, #target #jrBlog .jr-blog-header > .jr-blog-badge, #target #jrInstagram .jr-instagram-header > .jr-instagram-badge, #target #faq .jr-faq-head > .jr-faq-badge, #target #jrLocation > .innerWrap > .jr-naver-badge, #target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head > .jr-lawyer-search-kicker-badge { align-self: center !important; display: flex !important; width: fit-content !important; max-width: calc(100% - 0.1px) !important; margin-left: auto !important; margin-right: auto !important; } #target #jrRiskUrgency .jr-risk-head h2, #target #jrWhyCredibility .jr-why-credibility-head h2, #target #jrCasesPreview .jr-why-credibility-head h2, #target #jrConsultCases .jr-why-credibility-head h2, #target #jrNaverReviews > .innerWrap > h2, #target #jrReview > .innerWrap > h2, #target #jrBroadcast .jr-broadcast-title, #target #jrPress .jr-press-title, #target #jrBlog .jr-blog-title, #target #jrInstagram .jr-instagram-title, #target #faq .jr-faq-title, #target #jrLocation > .innerWrap > h2 { font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif !important; font-size: var(--jr-type-title, clamp(2.42rem, 1.87rem + 1.45vw, 3.32rem)) !important; line-height: 1.32 !important; letter-spacing: -0.02em !important; font-weight: 700 !important; color: #172554 !important; text-align: center !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } #target #jrRiskUrgency .jr-risk-head p, #target #jrWhyCredibility .jr-why-credibility-head p, #target #jrCasesPreview .jr-why-credibility-head p, #target #jrConsultCases .jr-why-credibility-head p, /* 네이버·의뢰인 부제 margin-top 은 위 .jr-naver-reviews-desc 규칙(0.35rem) — JR 언론은 .jr-press-desc(0.45rem) */ #target #jrBroadcast .jr-broadcast-desc, #target #jrPress .jr-press-desc, #target #jrBlog .jr-blog-desc, #target #jrInstagram .jr-instagram-desc, #target #faq .jr-faq-lead { font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif !important; font-size: var(--jr-type-subtitle, clamp(1.62rem, 1.45rem + 0.34vw, 1.82rem)) !important; line-height: 1.68 !important; letter-spacing: -0.006em !important; font-weight: 500 !important; color: #4f6482 !important; text-align: center !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0.45rem !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* 오시는 길: 제목에 더 붙이고(타 섹션 부제 0.45rem과 분리) */ #target #jrLocation > .innerWrap > .jr-naver-reviews-desc { margin-top: 0.12rem !important; } /* 맞춤변호사 검색(모바일): 제목·부제 가운데 — 부제는 모바일 전용 문구(.lawyer-search-desc-mo) — 섹션 간격은 위 --jr-head-to-body-gap 공통 적용 */ main#target .lawyer-search-wrap .lawyer-search-head { align-items: center !important; } main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head { text-align: center !important; margin: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head h2 { font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif !important; font-size: var(--jr-type-title, clamp(2.42rem, 1.87rem + 1.45vw, 3.32rem)) !important; line-height: 1.32 !important; letter-spacing: -0.02em !important; font-weight: 700 !important; color: #172554 !important; text-align: center !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-head .lawyer-search-desc { font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif !important; font-size: var(--jr-type-subtitle, clamp(1.62rem, 1.45rem + 0.34vw, 1.82rem)) !important; line-height: 1.68 !important; letter-spacing: -0.006em !important; font-weight: 500 !important; color: #4f6482 !important; text-align: center !important; padding: 0 !important; margin-top: 0.45rem !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; max-width: none !important; width: 100% !important; word-break: keep-all !important; overflow-wrap: normal !important; } main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-desc .lawyer-search-desc-pc { display: none !important; } main#target section.sect.lawyer-search-wrap.lawyer-match .lawyer-search-desc .lawyer-search-desc-mo { display: block !important; text-align: center !important; } } @media (max-width: 767px) { /* 의뢰인 후기: 부제 ↔ 슬라이드 카드 사이 한 줄 정도 여백 */ main#target #jrReview > .innerWrap > .jr-naver-reviews-desc { margin-bottom: 1.5rem !important; } /* 오시는 길: 부제↔카드는 본문 margin-top으로만 간격(부제 하단 여백 제거) */ main#target #jrLocation > .innerWrap > .jr-naver-reviews-desc { margin-bottom: 0 !important; } /* FAQ: 카테고리 제목(학교폭력위원회·심의 등) 왼쪽 여백 — 화면 가장자리와 간격 */ main#target #faq .jr-faq-cat-title, #faq .jr-faq-cat-title { padding-left: 0.5em !important; box-sizing: border-box; } /* 오시는 길: 제목↔부제 타이트(부제를 위로) */ main#target #jrLocation > .innerWrap > h2 { margin-bottom: 0 !important; } /* (구) 대치 ll-h2--line 전용 타이포 제거 — 섹션 제목은 상위 @media(899px) 규칙으로 통일 */ } @media (max-width: 899px) { /* 모바일 전용 강제 적용: 오시는 길 약도 높이 확대 + 중앙 강확대 */ main#target #jrLocation .jr-location-map-figure, body#target #jrLocation .jr-location-map-figure, main#target #jrLocation.section3 .cont .map, body#target #jrLocation.section3 .cont .map { overflow: hidden !important; position: relative !important; height: clamp(30rem, 75vw, 52rem) !important; min-height: clamp(30rem, 75vw, 52rem) !important; } main#target #jrLocation .jr-location-map-figure img, body#target #jrLocation .jr-location-map-figure img, main#target #jrLocation.section3 .cont .map img, body#target #jrLocation.section3 .cont .map img { display: block !important; width: 170% !important; max-width: 170% !important; height: 150% !important; object-fit: cover !important; object-position: center center !important; margin-left: -10% !important; margin-top: -25% !important; transform: none !important; } } /* 추천변호사 검색 — 프로필: 원형 프레임 통일 + 과확대 제거(상단 갭/깨진 원 방지) */ section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-media, section.sect.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result-media { position: relative !important; border-radius: 50% !important; overflow: hidden !important; isolation: isolate !important; border: 1px solid rgba(148, 163, 184, 0.45) !important; background: linear-gradient(165deg, #e8f1fb 0%, #dbeafe 55%, #eff6ff 100%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.06) !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo, section.sect.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { border-radius: 50% !important; overflow: hidden !important; } section.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img, section.sect.lawyer-search-wrap.lawyer-match .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { border-radius: 50% !important; object-fit: cover !important; object-position: center 18% !important; transform: none !important; transform-origin: center center !important; } /* PC(≥900px): 추천변호사 카드 프로필 더 크게 — index.min 기본(9.2rem) 덮어쓰기 */ @media (min-width: 900px) { #lawyerSearchSect.lawyer-match-outer .jr-lawyer-search-result-media { width: 10.75rem !important; height: 10.75rem !important; } #lawyerSearchSect.lawyer-match-outer .jr-lawyer-search-result--card .jr-lawyer-search-result-photo { min-height: 10.75rem !important; height: 10.75rem !important; } #lawyerSearchSect.lawyer-match-outer .jr-lawyer-search-result--card .jr-lawyer-search-result-photo img { width: 10.75rem !important; height: 10.75rem !important; } } /* —— 모바일(≤899px) 공통: 가로 스크롤·노치·터치 —— */ @media (max-width: 899px) { body { overflow-x: clip; } .header .innerWrap { box-sizing: border-box; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } .header .gnb_menu .gnb_list > li.gnb_util { display: inline-flex; align-items: center; gap: 0.12rem; flex-shrink: 0; } .header .gnb_menu .gnb_list > li.gnb_util .gnb_btn { box-sizing: border-box; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .header .logo { align-items: center; min-width: 0; } } /* ========== 오시는 길(#jrLocation): 모바일(≤899px) 통합 안내 박스·지도 버튼·하단 도식 ========== */ main#target #jrLocation .jr-location-mo-layout { display: none; } @media (max-width: 899px) { main#target #jrLocation.section3 .cont.jr-location-cont { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; gap: 0 !important; } main#target #jrLocation .jr-location-mo-layout { --jr-loc-mo-pad: 0.85rem; --jr-loc-mo-gap: 0.4rem; --jr-loc-mo-radius: 18px; --jr-loc-mo-border: 1px solid #e8eaed; --jr-loc-mo-vline: #e2e5ea; --jr-loc-mo-blue: #1d4ed8; --jr-loc-mo-blue-title: #1e40af; --jr-loc-mo-text: #111827; --jr-loc-mo-muted: #6b7280; /* 오시는 길 부제(.jr-naver-reviews-desc)와 동일 계단 */ --jr-loc-mo-type: var(--jr-type-subtitle, clamp(1.62rem, 1.45rem + 0.34vw, 1.82rem)); display: flex !important; flex-direction: column; width: 100%; gap: var(--jr-loc-mo-gap); box-sizing: border-box; } main#target #jrLocation .jr-location-add-info, main#target #jrLocation .jr-location-map-figure { display: none !important; } main#target #jrLocation .jr-loc-mo-card { background: #fff; border: var(--jr-loc-mo-border); border-radius: var(--jr-loc-mo-radius); padding: var(--jr-loc-mo-pad); box-sizing: border-box; box-shadow: none; } /* 주소·교통·주차 한 박스: 동일 아이콘 거터 + 구분선 + 본문, 구간은 가로 구분선 */ main#target #jrLocation .jr-loc-mo-card--bundle { padding: 0.875rem 0.8125rem 0.8125rem; border-radius: var(--jr-loc-mo-radius); } main#target #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-row { display: grid; grid-template-columns: 2.5rem 1px minmax(0, 1fr); column-gap: 0.65rem; align-items: center; margin: 0; padding: 0; border: 0; } main#target #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-row + .jr-loc-mo-row { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--jr-loc-mo-vline); } main#target #jrLocation .jr-loc-mo-vrule { width: 1px; align-self: stretch; min-height: 2.125rem; background: var(--jr-loc-mo-vline); justify-self: center; } main#target #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-row--address .jr-loc-mo-vrule { min-height: 2.5rem; } main#target #jrLocation .jr-loc-mo-card__icons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--jr-loc-mo-blue); justify-self: center; } main#target #jrLocation .jr-loc-mo-ico { display: flex; align-items: center; justify-content: center; line-height: 0; } main#target #jrLocation .jr-loc-mo-ico svg { display: block; } main#target #jrLocation .jr-loc-mo-iconcircle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e8f1ff; color: var(--jr-loc-mo-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } main#target #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-iconcircle { width: 2.35rem; height: 2.35rem; justify-self: center; } main#target #jrLocation .jr-loc-mo-iconcircle svg { display: block; } main#target #jrLocation .jr-loc-mo-card__body { min-width: 0; text-align: left; } main#target #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-ico svg { width: 1.3125rem; height: 1.3125rem; } main#target #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-iconcircle svg { width: 1.125rem; height: 1.125rem; } main#target #jrLocation .jr-loc-mo-addr-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; font-weight: 700; font-size: var(--jr-loc-mo-type); line-height: 1.38; letter-spacing: -0.006em; color: var(--jr-loc-mo-blue-title); word-break: keep-all; } main#target #jrLocation .jr-loc-mo-copy { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; } main#target #jrLocation .jr-loc-mo-copy img { display: block; width: 1em; height: auto; opacity: 0.75; } main#target #jrLocation .jr-loc-mo-addr-subline { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.35em; margin: 0.2rem 0 0; min-width: 0; font-size: var(--jr-loc-mo-type); line-height: 1.38; letter-spacing: -0.006em; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } main#target #jrLocation .jr-loc-mo-addr-subline::-webkit-scrollbar { display: none; } main#target #jrLocation .jr-loc-mo-addr-floor { flex: 0 0 auto; font-weight: 500; color: var(--jr-loc-mo-muted); white-space: nowrap; word-break: keep-all; } main#target #jrLocation .jr-loc-mo-tel-inline.jr-loc-mo-info-title { margin: 0; display: inline-flex; align-items: center; gap: 0.22em; text-decoration: none; -webkit-tap-highlight-color: transparent; } main#target #jrLocation .jr-loc-mo-tel-emoji { font-style: normal; line-height: 1; flex-shrink: 0; } main#target #jrLocation .jr-loc-mo-info-title { margin: 0 0 0.1rem; font-size: var(--jr-loc-mo-type); font-weight: 700; line-height: 1.38; letter-spacing: -0.006em; color: var(--jr-loc-mo-blue-title); } main#target #jrLocation .jr-loc-mo-info-desc { margin: 0; font-size: var(--jr-loc-mo-type); font-weight: 500; line-height: 1.38; color: var(--jr-loc-mo-muted); word-break: keep-all; } main#target #jrLocation .jr-loc-mo-map-shell { width: 100%; margin: 0; padding: 0.2rem 0 0; display: flex; justify-content: center; box-sizing: border-box; } main#target #jrLocation .jr-loc-mo-map-links { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.28em 0.42em; max-width: 100%; font-size: calc(0.88 * var(--jr-loc-mo-type)); font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; color: var(--jr-loc-mo-muted); } main#target #jrLocation .jr-loc-mo-map-sep { color: #c4cad4; font-weight: 400; user-select: none; padding: 0 0.06em; } main#target #jrLocation .jr-loc-mo-maplink { display: inline-flex; align-items: center; gap: 0.3em; color: var(--jr-loc-mo-blue); text-decoration: none; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent; } main#target #jrLocation .jr-loc-mo-maplink__ico { display: block; width: 1.05em; height: 1.05em; object-fit: contain; flex-shrink: 0; } main#target #jrLocation .jr-loc-mo-maplink:hover, main#target #jrLocation .jr-loc-mo-maplink:focus-visible { text-decoration: none; } main#target #jrLocation .jr-loc-mo-maplink:hover .jr-loc-mo-maplink__txt, main#target #jrLocation .jr-loc-mo-maplink:focus-visible .jr-loc-mo-maplink__txt { text-decoration: underline; text-underline-offset: 0.12em; } main#target #jrLocation .jr-loc-mo-route-wrap { position: relative; margin: 0; border-radius: var(--jr-loc-mo-radius); overflow: hidden; border: var(--jr-loc-mo-border); background: #fff; box-shadow: none; } main#target #jrLocation .jr-loc-mo-route-wrap .jr-loc-mo-route { margin: 0; padding: 0; border: none; border-radius: 0; overflow: visible; background: transparent; } main#target #jrLocation .jr-loc-mo-route-wrap .jr-loc-mo-route img { display: block; width: 100%; height: auto; } } @media (min-width: 900px) { main#target #jrLocation .jr-location-mo-layout { display: none !important; } } /* ---------- /members/*.html 프로필: 모바일 히어로 좌우 여백 = 본문 .sect·breadcrumb(1.5rem) ---------- */ @media (max-width: 899px) { body.profile-page #jrMember.visual > .innerWrap.visual_two_col { padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box; } body.profile-page #jrMember.visual .visual_left { padding-left: 0 !important; padding-right: 0 !important; } body.profile-page #jrMember.visual .slogan_wrap { padding-left: 0 !important; } /* 상단 칩·인용 블록도 동일 gutter (페이지 인라인 3rem·0 과 엇갈림 방지) */ body.profile-page .jr-intro > .innerWrap { padding-left: 1.5rem !important; padding-right: 1.5rem !important; box-sizing: border-box; } } /** * 서브페이지 공통: 학폭전략센터 표준(딥블루 히어로) 기준 * 로드 순서: style(min).css → subpage-body-risk.css → temple-theme.css → 본 파일 */ .jr-seo-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 본문 공백 미세 조정: 기존 대비 위/아래 한 줄(약 1.6rem) 증가 */ body#target.subpage { --jr-section-vert-pad: 9.6rem; --jr-section-vert-pad-sm: 7.6rem; } /* ---------- 히어로: 학폭전략센터 표준 딥블루 톤 ---------- */ body#target.subpage .page-hero { margin-top: 7rem; padding: clamp(5rem, 12vw, 8rem) 1.5rem; min-height: 28vh; display: flex; align-items: center; justify-content: flex-start; text-align: left; background: linear-gradient(135deg, #0f2847 0%, #0a1f38 50%, #071422 100%) !important; position: relative; overflow: hidden; } body#target.subpage .page-hero::before { display: none !important; } body#target.subpage .page-hero::after { display: none !important; } body#target.subpage .page-hero .hero-pattern { display: none !important; } body#target.subpage .page-hero .innerWrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; box-sizing: border-box; text-align: left; } body#target.subpage .page-hero .page-hero__title { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.4em; position: relative; } body#target.subpage .page-hero .page-hero__logo { display: inline-flex; align-items: center; font-style: normal; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto; } body#target.subpage .page-hero h1 { font-size: clamp(3rem, 6vw, 4.2rem); font-weight: 700; color: #f1f5ff !important; margin: 0; letter-spacing: -0.02em; line-height: 1.25; text-shadow: none; } body#target.subpage .page-hero .page-hero__logo img { width: clamp(2.75rem, 5.5vw, 3.5rem); min-width: clamp(2.75rem, 5.5vw, 3.5rem); height: auto; display: block; visibility: visible !important; opacity: 1 !important; /* 전역 로고: 색상 틴트 제거(무채색) */ filter: grayscale(1) brightness(2.15) contrast(1.05) !important; } body#target.subpage .page-hero .hero-sub, body#target.subpage .page-hero p.hero-sub { font-size: clamp(1.65rem, 2.4vw, 2rem); color: #c7d7f5 !important; margin: 0; line-height: 1.7; letter-spacing: -0.01em; text-align: left; } /* SEO 서브페이지: 리드 문단에 class 없을 때 */ body#target.subpage .page-hero .innerWrap > p:not(.hero-sub) { font-size: clamp(1.65rem, 2.4vw, 2rem); color: #c7d7f5 !important; margin: 0; line-height: 1.7; letter-spacing: -0.01em; text-align: left; } /* 모바일에서도 인위적 줄바꿈(brMo) 비표시 — 문장이 자연스럽게 줄바꿈 */ body#target.subpage .page-hero br.brMo { display: none !important; } @media (max-width: 899px) { body#target.subpage .page-hero { padding: 3rem 1.5rem; min-height: 0; border-bottom: none !important; box-shadow: none !important; } body#target.subpage .page-hero h1 { font-size: clamp(2.2rem, 5vw, 2.8rem); } body#target.subpage .page-hero .hero-sub, body#target.subpage .page-hero p.hero-sub { font-size: clamp(1.45rem, 3.6vw, 1.72rem); word-break: keep-all; overflow-wrap: break-word; } body#target.subpage .page-hero .page-hero__logo img { width: clamp(2.2rem, 6vw, 2.8rem); } .subpage .sect { padding: clamp(3rem, 6vw, 5rem) 0; } .subpage .sect .innerWrap { padding: 0 3rem !important; } } .subpage .sect { padding-top: 2rem; } /* 히어로 직후 첫 본문 섹션 시작점을 전역으로 통일 */ body#target.subpage .contents > section.page-hero + section.sect { padding-top: 0 !important; } /* 오시는길/24h전문상담: 히어로 직후 첫 섹션 상단 여백(한 줄) 부여 */ body#target.subpage .contents.loc-contents > section.page-hero + section.sect, body#target.subpage .contents > section.page-hero + section.consult-reserve-sect { padding-top: 6.4rem !important; } /* 첫 본문 섹션의 시작 리듬을 고정 (페이지별 개별 규칙보다 우선) */ body#target.subpage .contents > section.page-hero + section.sect > .innerWrap { margin-top: 0 !important; } body#target.subpage .contents > section.page-hero + section.consult-reserve-sect > .innerWrap { margin-top: 0 !important; } /* members 기준: 소개 헤더 블록 위치 통일 */ body#target.subpage .contents > section.page-hero + section.sect .jr-divorce-info-header { margin-top: 3.2rem !important; } /* 페이지별 lead 래퍼 편차 제거 */ body#target.subpage .contents > section.page-hero + section.sect :is( .jr-members-page-lead, .jr-broadcast-page-lead, .jr-press-page-lead ) { margin-top: 0 !important; } /* 업무사례/업무분야: 첫 소개 블록 위치와 폭을 members 기준으로 통일 */ body#target.subpage .jr-cases-section > .innerWrap, body#target.subpage .jr-practices-fallback__inner { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } /* practice 전용 상단 오프셋 제거 (cases와 시작점 동기화) */ body#target.subpage .jr-practices-fallback { padding-top: 0 !important; } /* practice 전용 구조 보정: 하단 여백을 members 기준으로 통일 */ body#target.subpage .contents > section.sect.jr-practices-embed { padding-bottom: clamp(2.2rem, 4vw, 3.2rem) !important; background: linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%) !important; } body#target.subpage .jr-practices-fallback { padding-bottom: clamp(3rem, 6vw, 5rem) !important; background: transparent !important; } /* ---------- JR 리드 블록 (구성원·업무분야·방송 등 공통) ---------- */ .jr-divorce-info-header { text-align: center; margin: 3.2rem 0 2rem 0; padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: 1.5rem; border-bottom: 1px solid rgba(45, 36, 25, 0.08); } body#target.subpage .jr-divorce-info-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; /* members.html JR Lawyers 배지색과 동일 */ color: var(--temple-chip-text) !important; margin: 0 0 0.6rem 0; } body#target.subpage .jr-divorce-info-eyebrow::before { content: ""; width: 2.4rem; height: 2px; background: linear-gradient(90deg, #2563eb, rgba(37, 99, 235, 0.2)) !important; border-radius: 1px; } .jr-divorce-info-title { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.85rem); font-weight: 700; color: #2d2419; margin: 0 0 0.85rem 0; letter-spacing: -0.03em; line-height: 1.2; text-align: center; } .jr-divorce-info-desc { text-align: center; font-size: clamp(1.25rem, 1rem + 0.55vw, 1.55rem); color: #4f6482 !important; margin: 0 0 1.5em 0; line-height: 1.55; white-space: normal; overflow-x: visible; overflow-y: visible; max-width: 100%; word-break: keep-all; overflow-wrap: break-word; } .jr-members-section .jr-members-page-lead .jr-divorce-info-header, .jr-broadcast-section .jr-broadcast-page-lead .jr-divorce-info-header { margin-bottom: 1rem !important; } .jr-members-page-lead, .jr-broadcast-page-lead, .jr-press-page-lead { display: flex; flex-direction: column; width: 100%; align-items: stretch; } .subpage .sect .sect-intro { font-size: clamp(1.65rem, 2.4vw, 2rem); line-height: 1.7; max-width: 56ch; margin-left: auto; margin-right: auto; } /* ---------- temple-theme 스트립: innerWrap 단독 면 제거 → 본문 한 면 ---------- */ body#target.subpage .jr-broadcast-section.jr-subpage-body-surface { background: linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%) !important; } body#target.subpage .jr-broadcast-section.jr-subpage-body-surface > .innerWrap, body#target.subpage .jr-blog-section.jr-subpage-body-surface > .innerWrap { background: transparent !important; } /* ---------- 푸터: 본문·갈색 푸터 사이 간격 (subpage-body-risk와 동일 목표) ---------- */ body#target.subpage .contents > footer.footer { margin-top: 0 !important; } /* ---------- 본문 하단 패딩 통일 (members 기준) ---------- */ body#target.subpage .contents > section.sect:last-of-type { padding-bottom: clamp(2.2rem, 4vw, 3.2rem) !important; } body#target.subpage .contents > section.sect:last-of-type > .innerWrap { padding-bottom: clamp(3rem, 6vw, 5rem) !important; } /* ---------- 서브페이지 버튼 톤 통일 (members 기준) ---------- */ body#target.subpage { --jr-btn-bg: #1e40af; --jr-btn-bg-hover: #1d4ed8; --jr-btn-text: #f8fafc; --jr-btn-border: rgba(30, 64, 175, 0.45); --jr-btn-shadow: 0 8px 18px rgba(30, 64, 175, 0.22); } /* 주요 CTA 버튼 */ body#target.subpage .contents :is( .consult-brand-submit, .consult-members-cta-btn, .jr-broadcast-list-btn, .submit ) { background: var(--jr-btn-bg) !important; color: var(--jr-btn-text) !important; border: 1px solid var(--jr-btn-border) !important; border-radius: 12px !important; box-shadow: var(--jr-btn-shadow) !important; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } body#target.subpage .contents :is( .consult-brand-submit, .consult-members-cta-btn, .jr-broadcast-list-btn, .submit ):hover { background: var(--jr-btn-bg-hover) !important; transform: translateY(-1px); } /* 보도자료 필터 버튼 */ body#target.subpage .contents .jr-filter-btn { border-radius: 999px !important; border: 1px solid rgba(30, 64, 175, 0.28) !important; color: #1e3a8a !important; background: #eef4ff !important; } body#target.subpage .contents .jr-filter-btn:hover { border-color: rgba(30, 64, 175, 0.5) !important; background: #e2ebff !important; } body#target.subpage .contents .jr-filter-btn.active { background: var(--jr-btn-bg) !important; color: var(--jr-btn-text) !important; border-color: var(--jr-btn-border) !important; } /** * 지역 SEO 랜딩 (/info/local/) — JR 학교폭력전략센터 * 네이비·아이보리·차분한 블루, 모바일 우선 */ :root { --ll-navy: #1a2f4d; --ll-navy-mid: #2e5fa1; --ll-blue-soft: #4d7fbe; --ll-ivory: #faf8f4; --ll-surface: #f4f7fb; --ll-text: #263a54; --ll-muted: #5a6d85; --ll-border: rgba(46, 95, 161, 0.14); --ll-radius: 14px; --ll-shadow: 0 8px 32px rgba(26, 47, 77, 0.08); --ll-safe-bottom: env(safe-area-inset-bottom, 0px); } .ll-skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .ll-skip:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: var(--ll-navy-mid); color: #fff; z-index: 10000; border-radius: 6px; } .ll-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 4.6rem; padding: 0.95rem 1.6rem; font-size: 1.48rem; font-weight: 700; border-radius: 999px; text-decoration: none; line-height: 1.25; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; text-align: center; } .ll-btn--primary { background: linear-gradient(180deg, #4d7fbe 0%, #2e5fa1 50%, #224a80 100%); color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 4px 20px rgba(46, 95, 161, 0.28); } .ll-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(46, 95, 161, 0.34); color: #fff !important; } .ll-btn--secondary { background: rgba(255, 255, 255, 0.95); color: var(--ll-navy-mid) !important; border: 2px solid var(--ll-navy-mid); } .ll-btn--secondary:hover { background: #fff; color: var(--ll-navy) !important; border-color: var(--ll-navy); } /* Sections */ .ll-section { padding: clamp(2.5rem, 5vw, 3.75rem) 1.25rem; } .ll-section--alt { background: var(--ll-ivory); } .ll-section--surface { background: linear-gradient(180deg, #f8fbff 0%, #eef4fc 100%); } .ll-inner { max-width: 1120px; margin: 0 auto; } .ll-section h2 { font-size: clamp(1.72rem, 1.25rem + 1.1vw, 2.05rem); font-weight: 800; color: var(--ll-navy); margin: 0 0 1.25rem; letter-spacing: -0.03em; line-height: 1.35; } .ll-section h2.ll-h2--line { padding-bottom: 0.65rem; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--ll-navy-mid), rgba(46, 95, 161, 0.25)) 1; } .ll-lead { font-size: clamp(1.42rem, 1.15rem + 0.55vw, 1.55rem); line-height: 1.65; color: var(--ll-text); margin: 0 0 0.75rem; max-width: 65ch; } /* Problem grid */ .ll-problem-grid { display: grid; gap: 0.85rem; } @media (min-width: 700px) { .ll-problem-grid { grid-template-columns: repeat(2, 1fr); } } .ll-problem-card { background: #fff; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); padding: 1.1rem 1.15rem 1.15rem; box-shadow: 0 2px 12px rgba(26, 47, 77, 0.05); } .ll-problem-card p { margin: 0; font-size: 1.45rem; line-height: 1.68; color: var(--ll-text); } /* Case cards */ .ll-card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .ll-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ll-card-grid--6 { grid-template-columns: repeat(3, 1fr); } } .ll-case-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); padding: 1.25rem 1.2rem 1.35rem; box-shadow: 0 4px 18px rgba(26, 47, 77, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .ll-case-card:hover { box-shadow: 0 10px 36px rgba(46, 95, 161, 0.12); transform: translateY(-2px); border-color: rgba(46, 95, 161, 0.28); } .ll-case-card h3 { font-size: 1.52rem; font-weight: 800; color: var(--ll-navy-mid); margin: 0 0 0.55rem; line-height: 1.35; } .ll-case-card p { flex: 1; margin: 0 0 1rem; font-size: 1.38rem; line-height: 1.62; color: var(--ll-text); } .ll-case-card .ll-btn { min-height: 3.8rem; font-size: 1.32rem; margin-top: auto; } /* Steps */ .ll-steps { display: grid; gap: 0; counter-reset: llstep; } .ll-step { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.15rem; padding: 1.15rem 0; border-bottom: 1px dashed rgba(46, 95, 161, 0.2); } .ll-step:last-child { border-bottom: none; } .ll-step::before { counter-increment: llstep; content: counter(llstep); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(145deg, var(--ll-blue-soft), var(--ll-navy-mid)); color: #fff; font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.15rem; } .ll-step h3 { margin: 0 0 0.35rem; font-size: 1.52rem; font-weight: 800; color: var(--ll-navy); } .ll-step p { margin: 0; font-size: 1.4rem; line-height: 1.65; color: var(--ll-text); } /* Why grid */ .ll-why-grid { display: grid; gap: 0.9rem; } @media (min-width: 600px) { .ll-why-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ll-why-grid { grid-template-columns: repeat(3, 1fr); } } .ll-why-card { background: #fff; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); padding: 1.2rem 1.15rem; box-shadow: 0 2px 14px rgba(26, 47, 77, 0.05); } .ll-why-card strong { display: block; font-size: 1.45rem; font-weight: 800; color: var(--ll-navy-mid); margin-bottom: 0.45rem; } .ll-why-card span { font-size: 1.35rem; line-height: 1.58; color: var(--ll-muted); } /* Checklist */ .ll-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .ll-checklist li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid var(--ll-border); border-radius: 10px; font-size: 1.4rem; line-height: 1.55; color: var(--ll-text); } .ll-checklist input { width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; accent-color: var(--ll-navy-mid); flex-shrink: 0; } .ll-checklist label { flex: 1; cursor: pointer; } /* FAQ accordion */ .ll-faq-list { display: flex; flex-direction: column; gap: 0.65rem; } .ll-faq-item { background: #fff; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); overflow: hidden; box-shadow: 0 2px 12px rgba(26, 47, 77, 0.05); } .ll-faq-item summary { padding: 1.1rem 1.2rem; font-size: 1.45rem; font-weight: 700; color: var(--ll-navy); cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.45; } .ll-faq-item summary::-webkit-details-marker { display: none; } .ll-faq-item summary::before { content: "+"; flex-shrink: 0; width: 1.65rem; height: 1.65rem; border-radius: 6px; background: var(--ll-navy-mid); color: #fff; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; } .ll-faq-item[open] summary::before { content: "−"; } .ll-faq-a { padding: 0 1.2rem 1.15rem 3.45rem; margin: 0; font-size: 1.38rem; line-height: 1.68; color: var(--ll-text); } /* CTA band */ .ll-cta-band { text-align: center; padding: 2rem 1.25rem; background: linear-gradient(165deg, #eaf2fb 0%, #dde8f7 100%); border-top: 1px solid var(--ll-border); border-bottom: 1px solid var(--ll-border); } .ll-cta-band p { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; color: var(--ll-navy); } .ll-cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .ll-cta-final { padding: clamp(2.5rem, 5vw, 3.5rem) 1.25rem; background: linear-gradient(155deg, #1a2f4d 0%, #2e5fa1 55%, #224a80 100%); color: #fff; text-align: center; } .ll-cta-final h2 { color: #fff; margin-bottom: 0.65rem; border: none; } .ll-cta-final .ll-lead { color: rgba(255, 255, 255, 0.92); margin-bottom: 1.35rem; } .ll-cta-final .ll-btn--primary { background: #fff; color: var(--ll-navy-mid) !important; border: none; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18); } .ll-cta-final .ll-btn--primary:hover { background: var(--ll-ivory); color: var(--ll-navy) !important; } /* Internal links */ .ll-link-grid { display: grid; gap: 1.5rem; } @media (min-width: 600px) { .ll-link-grid { grid-template-columns: repeat(2, 1fr); } } .ll-link-block { background: #fff; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); padding: 1.15rem 1.2rem 1.25rem; } .ll-link-block h3 { margin: 0 0 0.65rem; font-size: 1.42rem; font-weight: 800; color: var(--ll-navy-mid); } .ll-link-block ul { margin: 0; padding: 0; list-style: none; } .ll-link-block li { margin-bottom: 0.45rem; } .ll-link-block a { font-size: 1.35rem; color: var(--ll-navy-mid); text-decoration: underline; text-underline-offset: 0.2em; } .ll-link-block a:hover { color: var(--ll-navy); } /* Sticky mobile CTA */ .ll-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; gap: 0; padding: 0.55rem 0.65rem calc(0.55rem + var(--ll-safe-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--ll-border); box-shadow: 0 -6px 24px rgba(26, 47, 77, 0.1); } .ll-sticky-cta a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3.35rem; font-size: 1.38rem; font-weight: 700; text-decoration: none; border-radius: 10px; } .ll-sticky-cta__tel { background: var(--ll-surface); color: var(--ll-navy-mid) !important; border: 1px solid var(--ll-border); margin-right: 0.45rem; } .ll-sticky-cta__go { background: linear-gradient(180deg, #4d7fbe 0%, #2e5fa1 100%); color: #fff !important; } @media (min-width: 900px) { .ll-sticky-cta { display: none; } } @media (prefers-reduced-motion: reduce) { .ll-case-card, .ll-btn { transition: none; } .ll-case-card:hover { transform: none; } } @media screen and (max-width: 768px) { .subpage.jr-local-landing.mobilelayout .contents { padding-bottom: calc(5.5rem + var(--ll-safe-bottom)); } .ll-section { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } } /** * 대치 지역 랜딩: 커스텀 히어로(.dae-v2-hero) 배경 * 메인과 동일한 푸른 오버레이 var(--temple-hero-bg) + 대치 전용 사진 */ body.jr-local-daechi .dae-v2-hero { background-color: var(--temple-deep, #0a1628); background-image: var(--temple-hero-bg), url("/images/daechi-school-violence-landing-bg.png") !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; background-size: cover, cover !important; background-attachment: scroll, scroll !important; } /* 목업: 카피·우측 카드 주변 블루 라디얼 글로우 + 상하 비네트 가독성 */ body.jr-local-daechi .dae-v2-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 95% 75% at 30% 42%, rgba(46, 91, 255, 0.32) 0%, transparent 58%), radial-gradient(ellipse 70% 60% at 82% 36%, rgba(37, 99, 235, 0.22) 0%, transparent 52%), linear-gradient( 180deg, rgba(0, 0, 0, 0.45) 0%, transparent 28%, transparent 72%, rgba(0, 0, 0, 0.38) 100% ); } /* 1그룹 지역 랜딩: 히어로 배경 (body.jr-local-daechi.jr-local-hero-{slug}) */ body.jr-local-daechi.jr-local-hero-gangnam .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/gangnam-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-seocho .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/seocho-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-banpo .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/banpo-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-jamsil .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/jamsil-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-songpa .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/songpa-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-apgujeong .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/apgujeong-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-cheongdam .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/cheongdam-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-dogok .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/dogok-school-violence-landing-bg.png") !important; } body.jr-local-daechi.jr-local-hero-gaepo .dae-v2-hero { background-image: var(--temple-hero-bg), url("/images/gaepo-school-violence-landing-bg.png") !important; } /* 학폭정보 허브(info/index.html) — 히어로·타이포는 css/temple-theme.css + subpage-unified.css(딥블루 표준)에 맡김. 그리드·검색·칩·카드만 정의. */ .jr-divorce-info-section .innerWrap { display: flex; flex-direction: column; align-items: stretch; max-width: 1220px; margin: 0 auto; gap: 0; padding-bottom: clamp(3rem, 6vw, 5rem); } body#target.subpage.jr-info-hub .jr-divorce-info-header { border-bottom-color: var(--temple-border, rgba(30, 64, 175, 0.22)); } body#target.subpage.jr-info-hub .jr-divorce-info-title { color: var(--temple-text, #0f172a); } /* 데스크톱: 건수는 툴바 .jr-info-meta(표시 N건)만 사용 */ body#target.subpage.jr-info-hub .jr-hub-title-count { display: none; } /* JR Insight 바로 아래 소개: 모바일에서만 짧은 카피 */ body.jr-info-hub .jr-hub-desc--mobile { display: none; } @media (max-width: 768px) { body.jr-info-hub .jr-hub-desc--desktop { display: none; } body.jr-info-hub .jr-hub-desc--mobile { display: block; } } .jr-info-hub { width: 100%; } .jr-info-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.75rem; } .jr-info-search-wrap { flex: 1 1 16rem; min-width: 12rem; max-width: 28rem; } .jr-info-search { width: 100%; box-sizing: border-box; padding: 1rem 1.15rem 1rem 2.85rem; border: 1px solid var(--temple-border, rgba(30, 64, 175, 0.22)); border-radius: 12px; background: var(--temple-card, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23334e68' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 1rem 50% no-repeat; font-size: 1.45rem; color: var(--temple-text, #0f172a); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); transition: border-color 0.2s, box-shadow 0.2s; } .jr-info-search::placeholder { color: var(--temple-text-muted, #64748b); } .jr-info-search:focus { outline: none; border-color: var(--brown500, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(15, 23, 42, 0.08); } .jr-info-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .jr-info-chip { cursor: pointer; border: 1px solid var(--temple-border, rgba(30, 64, 175, 0.22)); background: var(--temple-card, #fff); color: var(--temple-text-muted, #334e68); padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 1.28rem; font-weight: 600; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; } .jr-info-chip:hover { border-color: var(--brown400, #4d94e8); color: var(--temple-text, #0f172a); } .jr-info-chip.is-active { background: linear-gradient(180deg, var(--brown700, #1e40af) 0%, var(--brown800, #1e3a8a) 100%); color: #f8fafc; border-color: var(--brown600, #1d4ed8); } .jr-info-chip:focus-visible { outline: 2px solid var(--temple-accent, #38bdf8); outline-offset: 2px; } .jr-info-meta { margin-left: auto; font-size: 1.25rem; color: var(--temple-text-muted, #475569); font-weight: 500; } @media (max-width: 720px) { .jr-info-meta { width: 100%; margin-left: 0; } } .jr-info-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .jr-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } @media (min-width: 1024px) { .jr-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; } } .jr-info-card { margin: 0; } .jr-info-card.is-hidden { display: none !important; } .jr-info-card--featured { grid-column: 1 / -1; } @media (min-width: 1024px) { .jr-info-card--featured { grid-column: span 3; } } /* ----- 카드 공통 ----- */ .jr-info-card__link { display: flex; flex-direction: row; align-items: stretch; text-align: left; height: 100%; min-height: 11.5rem; box-sizing: border-box; gap: 1rem 1.15rem; padding: 1.45rem 1.35rem 1.4rem 1.25rem; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.97) 52%, rgba(241, 248, 255, 0.98) 100% ); border: 1px solid rgba(99, 124, 176, 0.22); border-radius: 20px; text-decoration: none; color: inherit; box-shadow: 0 10px 28px rgba(15, 35, 71, 0.07), 0 1px 0 rgba(255, 255, 255, 0.85) inset; position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.2s ease, background 0.22s ease; } .jr-info-card__link::before { display: none; } .jr-info-card__link::after { content: ""; position: absolute; right: -30%; top: -40%; width: 55%; height: 140%; background: radial-gradient( ellipse at center, rgba(56, 189, 248, 0.09) 0%, rgba(56, 189, 248, 0) 65% ); pointer-events: none; z-index: 0; transition: opacity 0.25s ease, transform 0.25s ease; } .jr-info-card__accent { flex: 0 0 5px; width: 5px; min-height: 3.5rem; align-self: stretch; border-radius: 999px; background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 48%, #93c5fd 100%); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12); z-index: 1; position: relative; } .jr-info-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; z-index: 1; position: relative; } .jr-info-card__tail { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.35rem; padding-top: 0.15rem; z-index: 1; position: relative; } .jr-info-card__hint { display: inline-flex; align-items: center; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: #1e3a8a; white-space: nowrap; padding: 0.32rem 0.72rem; border-radius: 999px; background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid rgba(37, 99, 235, 0.28); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1); } .jr-info-card__chev { color: var(--brown600, #2563eb); flex-shrink: 0; transition: transform 0.22s ease, color 0.2s ease; filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.15)); } .jr-info-card__link:hover .jr-info-card__chev { transform: translateX(4px); color: var(--brown700, #1d4ed8); } .jr-info-card__link:hover { border-color: rgba(59, 130, 246, 0.45); box-shadow: 0 16px 36px rgba(30, 64, 175, 0.12), 0 0 0 1px rgba(56, 189, 248, 0.12), 0 1px 0 rgba(255, 255, 255, 0.95) inset; background: linear-gradient( 145deg, #ffffff 0%, rgba(239, 246, 255, 0.98) 55%, rgba(224, 242, 254, 0.45) 100% ); transform: translateY(-4px); } .jr-info-card__link:hover::after { opacity: 1.15; transform: translate3d(4px, 0, 0); } .jr-info-card__link:focus-visible { outline: 2px solid var(--temple-accent, #38bdf8); outline-offset: 3px; } .jr-info-card__badge { display: inline-flex; align-items: center; align-self: flex-start; padding: 0.32rem 0.78rem; border-radius: 999px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; background: linear-gradient(180deg, #edf4ff 0%, #dbeaff 100%); color: #1e4a8c; border: 1px solid rgba(67, 113, 191, 0.28); margin-bottom: 0.05rem; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1); } .jr-info-card__title { font-size: clamp(1.48rem, 1.22rem + 0.55vw, 1.78rem); font-weight: 800; color: #0c192d; line-height: 1.42; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .jr-info-card__subtitle { margin: 0; font-size: clamp(1.22rem, 1.05rem + 0.35vw, 1.38rem); font-weight: 500; color: #3d4f68; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jr-info-card__subtitle--muted { color: #64748b; font-weight: 500; } /* 주제별 포인트 컬러 */ .jr-info-card[data-category="학폭위·절차"] .jr-info-card__accent { background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%); } .jr-info-card[data-category="생기부·징계"] .jr-info-card__accent { background: linear-gradient(180deg, #4f46e5 0%, #818cf8 100%); } .jr-info-card[data-category="증거·초기대응"] .jr-info-card__accent { background: linear-gradient(180deg, #0284c7 0%, #38bdf8 100%); } .jr-info-card[data-category="피해자·보호"] .jr-info-card__accent { background: linear-gradient(180deg, #059669 0%, #34d399 100%); } .jr-info-card[data-category="불복·구제"] .jr-info-card__accent { background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 100%); } .jr-info-card[data-category="기타"] .jr-info-card__accent { background: linear-gradient(180deg, #475569 0%, #94a3b8 100%); } .jr-info-card[data-category="학폭위·절차"] .jr-info-card__badge { background: linear-gradient(180deg, #e8f0ff 0%, #d5e5ff 100%); color: #1f4c93; } .jr-info-card[data-category="생기부·징계"] .jr-info-card__badge { background: linear-gradient(180deg, #eef2ff 0%, #e1e8ff 100%); color: #35438b; } .jr-info-card[data-category="증거·초기대응"] .jr-info-card__badge { background: linear-gradient(180deg, #e8f7ff 0%, #d6efff 100%); color: #1c5f8e; } .jr-info-card[data-category="피해자·보호"] .jr-info-card__badge { background: linear-gradient(180deg, #ecfbf6 0%, #d9f7ed 100%); color: #1f6c57; } .jr-info-card[data-category="불복·구제"] .jr-info-card__badge { background: linear-gradient(180deg, #f3f0ff 0%, #e8e2ff 100%); color: #4f3d91; } .jr-info-card[data-category="기타"] .jr-info-card__badge { background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); color: #475569; } /* ----- 피처드(전체 목록) 배너 ----- */ .jr-info-card--featured .jr-info-card__link, .jr-info-card__link--featured { min-height: 0; flex-wrap: wrap; align-items: center; padding: 1.5rem 1.65rem; gap: 1rem 1.5rem; background: linear-gradient( 125deg, var(--temple-deep-2, #0f2847) 0%, var(--brown800, #1e3a8a) 46%, #0c4a6e 100% ); border-color: rgba(56, 189, 248, 0.32); box-shadow: 0 14px 40px rgba(8, 24, 48, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .jr-info-card--featured .jr-info-card__link:hover, .jr-info-card__link--featured:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(8, 24, 48, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); border-color: rgba(56, 189, 248, 0.5); } .jr-info-card--featured .jr-info-card__title { color: #f8fafc; font-weight: 700; -webkit-line-clamp: 3; } .jr-info-card__subtitle--featured { color: rgba(226, 242, 255, 0.92) !important; font-weight: 500; -webkit-line-clamp: 2; } .jr-info-card--featured .jr-info-card__hint { color: #bae6fd; } .jr-info-card--featured .jr-info-card__chev { color: #e0f2fe; } .jr-info-card__tail--featured { flex-direction: row; align-items: center; gap: 0.65rem; padding-top: 0; } .jr-info-card__cta-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.62rem 1.15rem; border-radius: 999px; background: rgba(56, 189, 248, 0.22); color: #f0f9ff; font-size: 1.22rem; font-weight: 700; border: 1px solid rgba(56, 189, 248, 0.42); white-space: nowrap; transition: background 0.2s ease; } .jr-info-card--featured .jr-info-card__link:hover .jr-info-card__cta-pill { background: rgba(56, 189, 248, 0.35); } .jr-info-cta-strip { margin-top: 2.5rem; padding: 1.5rem 1.5rem; border-radius: 14px; background: var( --temple-strip-bg-light, linear-gradient(180deg, #f2f7fd 0%, #e8f1fb 42%, #ddeaf8 100%) ); border: 1px solid var(--temple-border, rgba(30, 64, 175, 0.22)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .jr-info-cta-strip p { margin: 0; font-size: clamp(1.25rem, 1rem + 0.45vw, 1.55rem); color: var(--temple-text, #0f172a); font-weight: 600; line-height: 1.45; flex: 1 1 auto; min-width: 0; white-space: normal; overflow: visible; text-decoration: none; } .jr-info-cta-strip a { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.6rem; border-radius: 10px; background: linear-gradient(180deg, var(--brown600, #1d4ed8) 0%, var(--brown700, #1e40af) 100%); color: #fff; font-size: 1.45rem; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(30, 64, 175, 0.28); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .jr-info-cta-strip a:hover { background: linear-gradient(180deg, var(--brown500, #2563eb) 0%, var(--brown600, #1d4ed8) 100%); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(30, 64, 175, 0.34); } .jr-info-cta-strip a:focus-visible { outline: 2px solid var(--temple-accent, #38bdf8); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media screen and (max-width: 768px) { .subpage.jr-info-hub.mobilelayout .contents { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); } /* 건수: 제목 옆 (총 N건) · 툴바 표시 문구 숨김 · 피처 배너 카드 숨김 */ body#target.subpage.jr-info-hub .jr-divorce-info-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 0.35rem; text-align: center; } body#target.subpage.jr-info-hub .jr-hub-title-count { display: inline; font-weight: 700; font-size: clamp(1.22rem, 4vw, 1.48rem); color: var(--temple-text-muted, #64748b); letter-spacing: -0.02em; } .jr-info-meta { display: none !important; } .jr-info-card--featured { display: none !important; } /* 주제 필터 칩: 크기 축소 + 4열 그리드로 7개를 2줄(4+3) 배치 */ .jr-info-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem 0.35rem; width: 100%; align-items: stretch; } .jr-info-chip { width: 100%; box-sizing: border-box; margin: 0; padding: 0.38rem 0.42rem; font-size: 1.08rem; font-weight: 600; line-height: 1.28; text-align: center; white-space: normal; min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; hyphens: auto; word-break: keep-all; } .jr-info-grid { gap: 0; padding: 0; } .jr-info-card--featured { margin-bottom: 0.75rem; } .jr-info-card__link { flex-wrap: wrap; min-height: 0; padding: 1.25rem 1.1rem 1.15rem; border-radius: 17px; gap: 0.85rem 0.75rem; } .jr-info-card__accent { min-height: 2.75rem; } /* 리치 카드: 세로 막대를 카드 좌측이 아니라 제목 바로 왼쪽으로 */ .jr-info-card__link--rich > .jr-info-card__accent { display: none; } .jr-info-card__link--rich .jr-info-card__title { position: relative; padding-left: 0.82rem; } .jr-info-card__link--rich .jr-info-card__title::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 999px; background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 48%, #93c5fd 100%); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12); } .jr-info-card[data-category="학폭위·절차"] .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%); } .jr-info-card[data-category="생기부·징계"] .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #4f46e5 0%, #818cf8 100%); } .jr-info-card[data-category="증거·초기대응"] .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #0284c7 0%, #38bdf8 100%); } .jr-info-card[data-category="피해자·보호"] .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #059669 0%, #34d399 100%); } .jr-info-card[data-category="불복·구제"] .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 100%); } .jr-info-card[data-category="기타"] .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #475569 0%, #94a3b8 100%); } .jr-info-card__tail { width: 100%; flex-direction: row; justify-content: flex-end; align-items: center; padding-top: 0.35rem; border-top: 1px dashed rgba(148, 163, 184, 0.35); margin-left: 0; } .jr-info-card--featured .jr-info-card__tail.jr-info-card__tail--featured { border-top: 1px solid rgba(56, 189, 248, 0.28); } .jr-info-card__hint { margin-right: auto; } .jr-info-card__title, .jr-info-card--featured .jr-info-card__title { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; font-size: 1.56rem; } .jr-info-card__subtitle, .jr-info-card__subtitle--featured { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; font-size: 1.34rem; } .jr-info-card--featured .jr-info-card__link, .jr-info-card__link--featured { flex-direction: column; align-items: stretch; } .jr-info-card__tail--featured { width: 100%; justify-content: space-between; border-top: 1px solid rgba(56, 189, 248, 0.22); padding-top: 0.85rem; margin-top: 0.25rem; } .jr-info-cta-strip { justify-content: center; text-align: center; align-items: center; gap: 1rem; } .jr-info-cta-strip p { width: 100%; text-align: center; font-size: 1.45rem; } .jr-info-cta-strip a { margin: 0 auto; } /* ── 모바일: 학폭정보 글 목록 = 플랫 리스트 (구분선·무그림자) ── */ .jr-info-card:not(.jr-info-card--featured) { margin: 0; } .jr-info-card__link--rich { padding: 0.62rem 1rem; margin: 0; min-height: 0; border-radius: 0; border: none; border-bottom: 1px solid rgba(148, 163, 184, 0.38); box-shadow: none !important; background: transparent; gap: 0; align-items: flex-start; transform: none !important; } .jr-info-card__link--rich::after { display: none !important; } .jr-info-card__link--rich:hover { transform: none !important; box-shadow: none !important; border-color: transparent; background: rgba(241, 245, 249, 0.92); } .jr-info-card__link--rich:active { background: rgba(226, 232, 240, 0.75); } .jr-info-card__link--rich .jr-info-card__body { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 0.35rem 0.55rem; width: 100%; min-width: 0; } .jr-info-card__link--rich .jr-info-card__title { order: 1; flex: 1 1 auto; min-width: 0; font-size: 1.32rem; font-weight: 700; line-height: 1.42; letter-spacing: -0.03em; color: #0f172a; padding-left: 0.72rem; } .jr-info-card__link--rich .jr-info-card__title::before { width: 3px; border-radius: 4px; top: 0.08em; bottom: 0.08em; } .jr-info-card__link--rich .jr-info-card__badge { order: 2; flex: 0 0 auto; align-self: flex-start; margin-bottom: 0; margin-top: 0.1rem; font-size: 0.76rem; font-weight: 600; padding: 0.18rem 0.46rem; max-width: 38%; text-align: center; white-space: normal; line-height: 1.28; border-radius: 7px; box-shadow: none !important; border-width: 1px; border-style: solid; border-color: rgba(148, 163, 184, 0.45); background: rgba(248, 250, 252, 0.98); color: #475569; } .jr-info-card[data-category="학폭위·절차"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(239, 246, 255, 0.98); border-color: rgba(147, 197, 253, 0.55); color: #1d4ed8; } .jr-info-card[data-category="생기부·징계"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(238, 242, 255, 0.98); border-color: rgba(165, 180, 252, 0.55); color: #4338ca; } .jr-info-card[data-category="증거·초기대응"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(240, 249, 255, 0.98); border-color: rgba(125, 211, 252, 0.55); color: #0369a1; } .jr-info-card[data-category="피해자·보호"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(236, 253, 245, 0.98); border-color: rgba(110, 231, 183, 0.5); color: #047857; } .jr-info-card[data-category="불복·구제"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(245, 243, 255, 0.98); border-color: rgba(196, 181, 253, 0.55); color: #6d28d9; } .jr-info-card[data-category="기타"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(248, 250, 252, 0.98); border-color: rgba(148, 163, 184, 0.45); color: #475569; } .jr-info-card__link--rich .jr-info-card__subtitle { display: none !important; } .jr-info-card__link--rich .jr-info-card__tail { display: none !important; } /* 목록 마지막 행: 하단선 제거 */ .jr-info-grid > li:last-child .jr-info-card__link--rich { border-bottom: none; } } /** * 대치 지역 랜딩 전용 히어로 v2 (목업: 좌 카피·태그·CTA / 우 글래스 체크리스트 / 하단 3카드) * body.jr-local-daechi */ /* 앵커 링크 시 헤더에 가리지 않도록 */ #dae-checklist { scroll-margin-top: 6rem; } .jr-local-daechi .dae-v2-hero { position: relative; margin-top: 64px; padding: clamp(2.5rem, 5vw, 3.5rem) 1.25rem clamp(2rem, 4vw, 3rem); overflow: hidden; isolation: isolate; } .jr-local-daechi .dae-v2-hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; } .jr-local-daechi .dae-v2-hero__main-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: start; /* 좌측 H1과 우측 카드 상단 정렬 공통 기준 */ --dae-h1-size: clamp(3.2rem, 2.2rem + 3.6vw, 5.6rem); --dae-h1-line: 1.16; /* 부제목·히어로 CTA 버튼 글자 크기 공통 */ --dae-hero-lead-fs: clamp(1.65rem, 1.45rem + 0.55vw, 2.15rem); } @media (min-width: 900px) { .jr-local-daechi .dae-v2-hero__main-grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 450px); gap: 2.25rem 2.75rem; align-items: stretch; } } /* 사이트 공통: html 62.5% → 1rem ≈ 10px. 목업 대비 큰 위계로 rem 설정 */ .jr-local-daechi .dae-v2-hero__copy h1 { margin: 0 0 1.75rem; /* 제목 위 = 본인 글자 0.5줄(line-box) 분량 */ padding-top: calc(var(--dae-h1-size) * var(--dae-h1-line) * 0.5); font-size: var(--dae-h1-size); font-weight: 800; line-height: var(--dae-h1-line); letter-spacing: -0.04em; color: #f8fafc; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .jr-local-daechi .dae-v2-hero__lead { margin: 0 0 1.65rem; font-size: var(--dae-hero-lead-fs); /* 제목(h1)과 동일 줄간격 — 그리드에 정의된 --dae-h1-line 상속 */ line-height: var(--dae-h1-line); font-weight: 500; color: #f1f5f9; max-width: none; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } /* 대치 랜딩: 리드 줄간격·CTA 전 여백 확대 */ body.jr-local-landing.jr-local-daechi .dae-v2-hero__lead { line-height: 1.58; margin-bottom: 2.35rem; } .jr-local-daechi .dae-v2-hero__tags { display: flex; flex-wrap: wrap; gap: 0.7rem 0.85rem; margin: 0 0 2.15rem; padding: 0; list-style: none; } .jr-local-daechi .dae-v2-hero__tags li { display: inline-flex; align-items: center; padding: 0.6rem 1.1rem; font-size: clamp(1.4rem, 1.25rem + 0.25vw, 1.55rem); font-weight: 600; color: rgba(248, 250, 252, 0.95); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(56, 189, 248, 0.28); border-radius: 999px; backdrop-filter: blur(8px); } .jr-local-daechi .dae-v2-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.3rem; align-items: center; } /* 대치 랜딩: 히어로 CTA 줄은 부제목과 왼쪽 정렬 · 각 버튼 안 콘텐츠는 가운데 */ body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.55rem; width: min(100%, calc(80% * 1.1)); max-width: 100%; min-width: 0; margin-left: 0; margin-right: auto; margin-bottom: 1.15rem; } body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta .dae-v2-btn { white-space: normal; flex: 1 1 0; min-width: 0; width: 0; /* flex와 함께 동일 분배 */ } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn { font-size: var(--dae-hero-lead-fs); flex-direction: column; align-items: center; justify-content: center; gap: 0.12em; text-align: center; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__stack { display: grid; grid-template-columns: auto auto; column-gap: 0.42em; align-items: center; width: max-content; max-width: 100%; min-width: 0; margin-left: auto; margin-right: auto; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__emoji { grid-column: 1; grid-row: 1; font-size: clamp(1.42em, 4.2vw, 1.85em); line-height: 1; flex-shrink: 0; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__col { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1em; min-width: 0; width: auto; text-align: center; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__area { font-size: 0.62em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; opacity: 0.92; width: auto; max-width: 100%; white-space: nowrap; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__label { font-size: 1em; font-weight: 700; line-height: 1.18; white-space: nowrap; width: auto; max-width: 100%; } /* 모바일·태블릿: PC 한 줄 라벨 숨김(스택만 표시) */ body.jr-local-landing.jr-local-daechi .dae-v2-btn__pc-label { display: none; } .jr-local-daechi .dae-v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 5rem; padding: 0.85rem 1.65rem; font-size: clamp(1.55rem, 1.4rem + 0.35vw, 1.75rem); font-weight: 700; text-decoration: none; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .jr-local-daechi .dae-v2-btn--primary { color: #fff !important; background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 45%, #1e40af 100%) !important; border: 1px solid rgba(147, 197, 253, 0.35); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15), 0 8px 28px rgba(37, 99, 235, 0.45); } .jr-local-daechi .dae-v2-btn--primary:hover { transform: translateY(-2px); background: linear-gradient(180deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%) !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 12px 36px rgba(37, 99, 235, 0.5); color: #fff !important; } .jr-local-daechi .dae-v2-btn--primary svg, .jr-local-daechi .dae-v2-btn--outline svg { flex-shrink: 0; opacity: 0.95; width: 1.15em; height: 1.15em; } .jr-local-daechi .dae-v2-btn--outline { color: #f1f5f9 !important; background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(248, 250, 252, 0.45); backdrop-filter: blur(10px); } .jr-local-daechi .dae-v2-btn--outline:hover { background: rgba(30, 41, 59, 0.55); border-color: rgba(248, 250, 252, 0.65); color: #fff !important; } /* 우측 열: 카드 상단 = 제목 첫 줄, 카드 하단 = 전화 상담 버튼 하단 */ .jr-local-daechi .dae-v2-hero__card-slot { display: flex; flex-direction: column; min-width: 0; } .jr-local-daechi .dae-v2-hero__card-spacer { flex: 0 0 auto; } /* 우측 체크리스트 카드 (목업: 배지 + 3줄 타이틀 + 점선 구분 리스트 + 장식 구분선 + 전폭 CTA) */ .jr-local-daechi .dae-v2-hero__card--checklist { padding: clamp(3rem, 4vw, 4rem); border-radius: 2.8rem; background: linear-gradient(165deg, rgba(10, 25, 47, 0.78) 0%, rgba(6, 18, 38, 0.88) 100%); border: 1px solid rgba(0, 102, 255, 0.65); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 24px rgba(0, 102, 255, 0.45), 0 0 48px rgba(0, 102, 255, 0.18), 0 28px 56px rgba(0, 0, 0, 0.45); backdrop-filter: blur(16px); } /* 데스크톱 2열: 좌측 블록 높이 = 우측 슬롯 높이 → 카드가 세로로 늘어나 하단 CTA를 전화 버튼과 같은 선상에 */ @media (min-width: 900px) { .jr-local-daechi .dae-v2-hero__copy { align-self: start; } .jr-local-daechi .dae-v2-hero__card-slot { align-self: stretch; min-height: 0; } .jr-local-daechi .dae-v2-hero__card-spacer { flex: 0 0 calc(var(--dae-h1-size) * var(--dae-h1-line) * 0.5); width: 100%; } .jr-local-daechi .dae-v2-hero__card--checklist { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: clamp(2.2rem, 2.8vw, 3rem); border-radius: 2.4rem; } .jr-local-daechi .dae-v2-card__footer { margin-top: auto; flex-shrink: 0; } /* 행 높이가 카드 최소 높이에 끌려 올라가지 않도록 카드 내부 소폭 압축 */ .jr-local-daechi .dae-v2-card__badge { margin-bottom: 0.95rem; padding: 0.38rem 0.95rem; } .jr-local-daechi .dae-v2-card__headline { margin-bottom: calc(1.1rem - 10px); font-size: clamp(1.95rem, 1.55rem + 0.85vw, 2.65rem); line-height: 1.28; } .jr-local-daechi .dae-v2-card__list li { --dae-check-pad-y: 0.6rem; padding: var(--dae-check-pad-y) 0 var(--dae-check-pad-y) calc(2rem + 1ch); font-size: clamp(1.32rem, 1.18rem + 0.22vw, 1.52rem); line-height: 1.42; } /* 랜딩 PC: CTA 행 80%·글자 80%·한 줄 라벨(📞 … / 📅 …) */ body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 80%; max-width: 80%; gap: 0.75rem 1.15rem; min-width: 0; margin-left: 0; margin-right: auto; margin-bottom: 1.35rem; box-sizing: border-box; } body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta .dae-v2-btn { flex: 1 1 0; min-width: 0; width: auto; max-width: calc(50% - 0.375rem); box-sizing: border-box; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__pc-label { display: inline; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__stack { display: none !important; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn { font-size: calc(var(--dae-hero-lead-fs) * 0.8); flex-direction: row; align-items: center; justify-content: center; gap: 0; min-height: calc(5rem * 0.8); padding: calc(0.85rem * 0.8) calc(1.65rem * 0.8); line-height: 1.38; text-align: center; white-space: nowrap; } } @media (max-width: 899px) { .jr-local-daechi .dae-v2-hero__card-spacer { display: none; } /* 대치 지역 랜딩(daechi-school-violence-lawyer) 모바일: 히어로 H1만 기존 대비 80% */ body.jr-local-landing.jr-local-daechi .dae-v2-hero__main-grid { --dae-h1-size: calc(0.8 * clamp(3.2rem, 2.2rem + 3.6vw, 5.6rem)); } } /* 홈(index)과 동일 토큰 + 대치 랜딩만: 모바일에서 왼쪽 여백 2배 */ @media screen and (max-width: 899px) { body.jr-local-landing.jr-local-daechi .dae-v2-hero { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); padding-left: calc(2 * var(--jr-page-padding-inline-start, max(1rem, env(safe-area-inset-left, 0px)))); padding-right: calc(2 * var(--jr-page-padding-inline-end, max(1rem, env(safe-area-inset-right, 0px)))); } } .jr-local-daechi .dae-v2-card__badge { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1.35rem; padding: 0.45rem 1.05rem; font-size: clamp(1.3rem, 1.15rem + 0.25vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; color: #f1f5f9; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(125, 211, 252, 0.45); border-radius: 999px; } .jr-local-daechi .dae-v2-card__badge-icon { flex-shrink: 0; color: #e0f2fe; } .jr-local-daechi .dae-v2-card__headline { margin: 0 0 calc(1.65rem - 10px); font-size: clamp(2.2rem, 1.75rem + 1.1vw, 3rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: #ffffff; word-break: keep-all; overflow-wrap: break-word; } .jr-local-daechi .dae-v2-hero__lead { word-break: keep-all; overflow-wrap: break-word; } .jr-local-daechi .dae-v2-card__list { margin: 0; padding: 0; list-style: none; } .jr-local-daechi .dae-v2-card__list li { --dae-check-pad-y: 1rem; position: relative; padding: var(--dae-check-pad-y) 0 var(--dae-check-pad-y) calc(2.15rem + 1ch); margin: 0; font-size: clamp(1.45rem, 1.28rem + 0.3vw, 1.65rem); font-weight: 600; line-height: 1.48; color: rgba(248, 250, 252, 0.97); border-bottom: 1px dashed rgba(148, 163, 184, 0.38); } .jr-local-daechi .dae-v2-card__list li:last-child { border-bottom: none; /* 다른 행과 동일한 아래 여백 → 마지막 행~하단 장식 구분선 간격 확보 */ padding-bottom: var(--dae-check-pad-y); } /* 첫 줄 텍스트 세로 중앙과 동일 비율로 이동 (고정 em → 줄·패딩 변화 시 어긋남 방지) */ .jr-local-daechi .dae-v2-card__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--dae-check-pad-y) + 0.74em - 0.56em); width: 1.12em; height: 1.12em; border-radius: 50%; background: linear-gradient(145deg, #0066ff 0%, #1a73e8 100%); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35); } .jr-local-daechi .dae-v2-card__list li::after { content: ""; position: absolute; left: 0.31em; top: calc(var(--dae-check-pad-y) + 0.74em - 0.56em + 0.23em); width: 0.28em; height: 0.48em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @supports (height: 1lh) { .jr-local-daechi .dae-v2-card__list li::before { top: calc(var(--dae-check-pad-y) + 0.5lh - 0.56em); } .jr-local-daechi .dae-v2-card__list li::after { top: calc(var(--dae-check-pad-y) + 0.5lh - 0.56em + 0.23em); } } /* 목록과 하단 장식 구분선·CTA 사이 여백 */ .jr-local-daechi .dae-v2-card__footer { padding-top: 15px; } .jr-local-daechi .dae-v2-card__divider { display: flex; align-items: center; gap: 0.85rem; margin: 1.65rem 0 1.5rem; } .jr-local-daechi .dae-v2-card__footer .dae-v2-card__divider { margin: 0 0 1rem; } .jr-local-daechi .dae-v2-card__divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.35), transparent); } .jr-local-daechi .dae-v2-card__divider-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(148, 163, 184, 0.65); box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12); } .jr-local-daechi .dae-v2-card__cta { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; gap: 0.5rem; min-height: 5rem; padding: 0.85rem 1.35rem; font-size: clamp(1.55rem, 1.38rem + 0.35vw, 1.75rem); font-weight: 800; text-decoration: none; color: #fff !important; border-radius: 1.4rem; border: 1px solid rgba(147, 197, 253, 0.4); background: linear-gradient(165deg, #1a8cff 0%, #0066ff 42%, #0958d9 100%); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 10px 32px rgba(0, 102, 255, 0.45); transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; } .jr-local-daechi .dae-v2-card__cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.22), 0 14px 40px rgba(0, 102, 255, 0.52); color: #fff !important; } .jr-local-daechi .dae-v2-card__cta svg { flex-shrink: 0; width: 1.1em; height: 1.1em; opacity: 0.95; } /* 히어로 하단: 학폭정보 캐러셀 — 체크리스트 카드와 톤 통일(다크 글래스) */ .jr-local-daechi .dae-v2-hero__info-hub { width: 100%; margin-top: clamp(1.75rem, 4vw, 2.75rem); } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__intro { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; /* 첫 카드 열과 동일: 이전 버튼 폭 + viewport column gap */ padding-left: calc(clamp(2.65rem, 6.5vw, 3.35rem) + clamp(0.45rem, 1.8vw, 0.95rem)); padding-right: 0.15rem; padding-top: 0; padding-bottom: 0; } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__intro-line { flex: 0 0 3px; width: 3px; height: 1.1em; border-radius: 999px; background: linear-gradient(180deg, #38bdf8 0%, #0066ff 55%, #6366f1 100%); box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__intro-label { font-size: clamp(1.28rem, 1.1rem + 0.45vw, 1.48rem); font-weight: 700; letter-spacing: -0.02em; color: rgba(248, 250, 252, 0.95); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel { padding: 0; border: none; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__viewport { gap: clamp(0.45rem, 1.8vw, 0.95rem); align-items: center; } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__btn { border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.35); background: linear-gradient(180deg, rgba(15, 35, 62, 0.9) 0%, rgba(8, 22, 42, 0.95) 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 6px 22px rgba(0, 102, 255, 0.2); width: clamp(2.65rem, 6.5vw, 3.35rem); height: clamp(2.65rem, 6.5vw, 3.35rem); } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__btn:hover { background: linear-gradient(180deg, rgba(30, 58, 95, 0.95) 0%, rgba(15, 40, 72, 0.98) 100%); border-color: rgba(125, 211, 252, 0.65); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2) inset, 0 10px 28px rgba(37, 99, 235, 0.35); } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__rail-wrap { margin-top: 0.5rem; } /* 히어로 학폭정보 카드: 부제·카드뉴스 줄 제거, 주제 뱃지 → 제목 순서 고정 */ .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__subtitle { display: none !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__tail { display: none !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__body { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 0.45rem !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__badge { order: 0 !important; margin-top: 0 !important; max-width: none !important; } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__rail-track { height: 5px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(56, 189, 248, 0.12); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45); } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel__rail-fill { box-shadow: 0 0 16px rgba(56, 189, 248, 0.55); } /* 카드: 라이트 패널 제거 → 히어로 체크리스트와 같은 남색 글래스 */ .jr-local-daechi .dae-v2-hero__info-hub a.jr-info-card__link--rich { min-height: 0; padding: clamp(1rem, 3vw, 1.35rem) clamp(1rem, 3vw, 1.3rem) !important; border-radius: clamp(1rem, 2.8vw, 1.35rem) !important; border: 1px solid rgba(0, 102, 255, 0.5) !important; border-bottom: 1px solid rgba(0, 102, 255, 0.45) !important; background: linear-gradient(165deg, rgba(10, 25, 47, 0.88) 0%, rgba(6, 18, 38, 0.94) 100%) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 28px rgba(0, 102, 255, 0.28), 0 12px 32px rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); gap: 0.65rem 0.75rem !important; transform: none !important; } .jr-local-daechi .dae-v2-hero__info-hub a.jr-info-card__link--rich:hover { border-color: rgba(56, 189, 248, 0.55) !important; background: linear-gradient(165deg, rgba(14, 32, 58, 0.94) 0%, rgba(8, 22, 44, 0.98) 100%) !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15) inset, 0 0 36px rgba(0, 102, 255, 0.38), 0 16px 40px rgba(0, 0, 0, 0.4) !important; } .jr-local-daechi .dae-v2-hero__info-hub a.jr-info-card__link--rich:active { transform: scale(0.99) !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__badge { border-width: 1px; border-style: solid; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__title { order: 1 !important; color: #f8fafc !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__title::before { background: linear-gradient(180deg, #38bdf8 0%, #0066ff 100%) !important; box-shadow: 0 0 10px rgba(56, 189, 248, 0.35); } /* 주제 뱃지: 어두운 패널용 고대비 */ .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card[data-category="학폭위·절차"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(30, 64, 175, 0.55) !important; border-color: rgba(147, 197, 253, 0.45) !important; color: #e0f2fe !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card[data-category="생기부·징계"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(67, 56, 202, 0.45) !important; border-color: rgba(165, 180, 252, 0.4) !important; color: #eef2ff !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card[data-category="증거·초기대응"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(3, 105, 161, 0.5) !important; border-color: rgba(56, 189, 248, 0.45) !important; color: #e0f2fe !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card[data-category="피해자·보호"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(5, 122, 85, 0.45) !important; border-color: rgba(52, 211, 153, 0.4) !important; color: #ecfdf5 !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card[data-category="불복·구제"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(91, 33, 182, 0.45) !important; border-color: rgba(196, 181, 253, 0.4) !important; color: #f5f3ff !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card[data-category="기타"] .jr-info-card__link--rich .jr-info-card__badge { background: rgba(51, 65, 85, 0.65) !important; border-color: rgba(148, 163, 184, 0.45) !important; color: #f1f5f9 !important; } .jr-local-daechi .dae-v2-hero__info-hub .dae-v2-info-carousel .jr-info-grid.dae-v2-info-carousel__grid { gap: clamp(0.75rem, 2vw, 1.1rem); } /* 가로 슬라이드 v2: 글래스 화살표 + 하단 진행 레일(스크롤바 숨김) */ .jr-local-daechi .dae-v2-info-carousel { width: 100%; min-width: 0; } .jr-local-daechi .dae-v2-info-carousel__viewport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(0.65rem, 2vw, 1.35rem); width: 100%; min-width: 0; } .jr-local-daechi .dae-v2-info-carousel__btn { display: inline-flex; align-items: center; justify-content: center; align-self: center; flex-shrink: 0; width: clamp(2.85rem, 7.5vw, 3.65rem); height: clamp(2.85rem, 7.5vw, 3.65rem); padding: 0; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: rgba(226, 232, 240, 0.95); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 28px rgba(15, 23, 42, 0.35); transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .jr-local-daechi .dae-v2-info-carousel__btn:hover { transform: translateY(-1px); background: rgba(56, 189, 248, 0.14); border-color: rgba(125, 211, 252, 0.55); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 12px 36px rgba(37, 99, 235, 0.28); } .jr-local-daechi .dae-v2-info-carousel__btn:active { transform: translateY(0) scale(0.97); } .jr-local-daechi .dae-v2-info-carousel__btn:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.85); outline-offset: 3px; } .jr-local-daechi .dae-v2-info-carousel__btn-icon { width: 1.45rem; height: 1.45rem; opacity: 0.92; } .jr-local-daechi .dae-v2-info-carousel__btn:hover .dae-v2-info-carousel__btn-icon { opacity: 1; } .jr-local-daechi .dae-v2-info-carousel__track-wrap { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; outline: none; padding-bottom: 0.2rem; scrollbar-width: none; -ms-overflow-style: none; /* 카드 폭을 트랙(가시 영역) 기준 3등분 — 고정 rem 때문에 2장만 보이던 문제 방지 */ container-type: inline-size; container-name: dae-v2-info-carousel; } .jr-local-daechi .dae-v2-info-carousel__track-wrap::-webkit-scrollbar { display: none; } .jr-local-daechi .dae-v2-info-carousel__rail-wrap { margin-top: 0.65rem; } .jr-local-daechi .dae-v2-info-carousel__rail { padding: 0 1px; } .jr-local-daechi .dae-v2-info-carousel__rail-track { position: relative; height: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); overflow: hidden; } .jr-local-daechi .dae-v2-info-carousel__rail-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient( 90deg, #22d3ee 0%, #38bdf8 22%, #6366f1 58%, #c084fc 100% ); box-shadow: 0 0 20px rgba(56, 189, 248, 0.35); transition: width 0.14s ease-out; } @media (prefers-reduced-motion: reduce) { .jr-local-daechi .dae-v2-info-carousel__rail-fill { transition: none; } .jr-local-daechi .dae-v2-info-carousel__btn { transition: none; } } .jr-local-daechi .dae-v2-info-carousel__rail-wrap:not(.is-overflow) .dae-v2-info-carousel__rail-track { opacity: 0.4; } .jr-local-daechi .dae-v2-info-carousel__track-wrap:focus-visible { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45); border-radius: 12px; } .jr-local-daechi .dae-v2-info-carousel .jr-info-grid.dae-v2-info-carousel__grid { display: flex !important; flex-wrap: nowrap !important; gap: 1.35rem; width: max-content; min-width: 100%; padding: 0.15rem 0 0.35rem; margin: 0; } /* 원래 info-hub 그리드와 동일: 1 / 2 / 3열 — 폭은 트랙(cqi) 기준이라 화살표 옆에도 3장 배치 */ .jr-local-daechi .dae-v2-info-carousel .jr-info-card { flex: 0 0 auto; scroll-snap-align: start; } @media (max-width: 639px) { .jr-local-daechi .dae-v2-info-carousel .jr-info-card { flex-basis: min(100cqi, 100%); max-width: 100%; } } @media (min-width: 640px) and (max-width: 1023px) { .jr-local-daechi .dae-v2-info-carousel .jr-info-grid.dae-v2-info-carousel__grid { gap: 1.25rem; } .jr-local-daechi .dae-v2-info-carousel .jr-info-card { flex-basis: calc((100cqi - 1.25rem) / 2); } } @media (min-width: 1024px) { .jr-local-daechi .dae-v2-info-carousel .jr-info-card { flex-basis: calc((100cqi - 2 * 1.35rem) / 3); } } @media (max-width: 899px) { .jr-local-daechi .dae-v2-hero__card-slot { max-width: 460px; margin-left: auto; margin-right: auto; } } /* 대치 랜딩 모바일: CTA 한 줄 · 동일 너비 유지 */ @media screen and (max-width: 899px) { body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta { overflow-x: visible; } body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta .dae-v2-btn { min-height: 5.15rem; padding: 0.45rem 0.45rem; font-size: var(--dae-hero-lead-fs); flex: 1 1 0; min-width: 0; width: 0; white-space: normal; } body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__area, body.jr-local-landing.jr-local-daechi .dae-v2-hero .dae-v2-btn__label { letter-spacing: -0.03em; } } /* 히어로 학폭정보: 모바일 카드 형태만 보정(부제·tail은 전역 규칙으로 숨김) */ @media screen and (max-width: 768px) { .jr-local-daechi .dae-v2-hero__info-hub a.jr-info-card__link--rich { flex-direction: column !important; align-items: stretch !important; margin: 0 !important; border-radius: clamp(1rem, 2.8vw, 1.35rem) !important; border-bottom: 1px solid rgba(0, 102, 255, 0.38) !important; } .jr-local-daechi .dae-v2-hero__info-hub .jr-info-card__link--rich .jr-info-card__title { width: 100%; font-size: clamp(1.26rem, 3.6vw, 1.44rem) !important; line-height: 1.36 !important; } } /* PC 전용: 전화상담·상담예약 CTA 아래 대치 학폭 특화 해시태그 */ body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta-hashtags { display: none; list-style: none; margin: 0; padding: 0; } @media screen and (min-width: 900px) { body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta-hashtags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.75rem; margin-top: 1.35rem; margin-bottom: 2.1rem; max-width: 80%; width: 80%; margin-left: 0; margin-right: auto; } body.jr-local-landing.jr-local-daechi .dae-v2-hero__cta-hashtags li { display: inline-flex; align-items: center; margin: 0; padding: 0.35rem 0.75rem; font-size: clamp(1.171rem, 0.912rem + 0.336vw, 1.325rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.42; color: rgba(226, 232, 240, 0.92); background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(56, 189, 248, 0.22); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); } } #jrMember.visual #jr-hero-design-1, .jr-response-team-hero.visual #jr-hero-design-response-team{--jr-lawyer-rolling-card-scale:.8}@media(min-width:900px){#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo{--jr-duo-img-w:min(336px,52.8vw);--jr-duo-img-h:min(80.4vh,720px);--jr-duo-overlap:clamp(1.4rem,calc(var(--jr-duo-img-w) * 0.16 + 0.2rem),2.8rem);display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;width:100%;max-width:100%;position:relative;pointer-events:auto;overflow:visible}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary{flex:0 0 auto;width:var(--jr-duo-img-w);max-width:var(--jr-duo-img-w);position:relative;align-self:flex-end;overflow:visible}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--partner{z-index:1;margin-right:calc(-1 * var(--jr-duo-overlap))}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary{z-index:2;margin-left:calc(-1 * var(--jr-duo-overlap))}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child{margin-left:0 !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child .hero-fixed-img{border-radius:0 0 8px 8px}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .hero-fixed-img,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .hero-fixed-img,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .hero-fixed-img--partner{width:100% !important;max-width:100% !important;height:var(--jr-duo-img-h) !important;max-height:var(--jr-duo-img-h) !important;min-height:0 !important;object-fit:contain !important;object-position:bottom center !important;display:block;margin:0;border-radius:0 0 8px 8px}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner{border-radius:0 0 0 8px;filter:drop-shadow(0 4px 14px rgba(40,28,18,0.18))}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--primary .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .hero-fixed-img{border-radius:0 0 8px 0}#jrMember.visual #jr-hero-design-1 .visual_right .lawyer-info--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .lawyer-info--partner{padding:.85rem .6rem 2.75rem .75rem !important;align-items:flex-start !important;background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(32,22,14,0.55) 42%,rgba(28,18,12,0.82) 100%) !important;border-radius:0 0 0 8px !important}#jrMember.visual #jr-hero-design-1 .visual_right .lawyer-info--partner .jr-hero-partner-name, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .lawyer-info--partner .jr-hero-partner-name{font-size:clamp(1.35rem,1.05rem+0.9vw,1.65rem);font-weight:800;color:#fffaf6;margin:0 0 .2rem 0;padding-left:0 !important;text-shadow:0 1px 3px rgba(0,0,0,0.65)}#jrMember.visual #jr-hero-design-1 .visual_right .lawyer-info--partner .jr-hero-partner-tag, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .lawyer-info--partner .jr-hero-partner-tag{font-size:clamp(1.1rem,0.95rem+0.35vw,1.25rem);font-weight:600;color:rgba(255,248,240,0.95);margin:0;padding-left:0 !important;text-shadow:0 1px 2px rgba(0,0,0,0.55)}#jrMember.visual #jr-hero-design-1 .jr-design4-lineup[hidden], .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-lineup[hidden]{display:none !important}#jrMember.visual #jr-hero-design-1 .jr-design4-lineup, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-lineup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;width:100%;align-content:start}#jrMember.visual #jr-hero-design-1 .jr-design4-card, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card{position:relative;border-radius:12px;overflow:hidden;background:rgba(44,34,27,0.16);border:1px solid rgba(255,248,241,0.17);cursor:pointer}#jrMember.visual #jr-hero-design-1 .jr-design4-card__img-wrap, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__img-wrap{position:relative;width:100%;padding-top:128%;background:linear-gradient(180deg,rgba(255,255,255,0.03) 0,rgba(26,18,14,0.42) 100%)}#jrMember.visual #jr-hero-design-1 .jr-design4-card__img, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;transform:scale(1.02)}#jrMember.visual #jr-hero-design-1 .jr-design4-card__info, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__info{position:absolute;left:0;right:0;bottom:0;padding:.6rem .7rem .75rem;background:linear-gradient(180deg,rgba(0,0,0,0.04) 0,rgba(23,15,11,0.68) 72%,rgba(23,15,11,0.82) 100%);text-align:left}#jrMember.visual #jr-hero-design-1 .jr-design4-card__name, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__name{margin:0;color:#fff6ef;font-size:clamp(1.18rem,0.85rem+0.48vw,1.45rem);font-weight:700;line-height:1.25}#jrMember.visual #jr-hero-design-1 .jr-design4-card__tag, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__tag{margin:.2rem 0 0;color:rgba(245,233,222,0.94);font-size:clamp(1rem,0.8rem+0.24vw,1.14rem);font-weight:500;line-height:1.28}@media(max-width:1200px){#jrMember.visual #jr-hero-design-1 .jr-design4-lineup, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}}@media(max-width:899px){#jrMember.visual #jr-hero-design-1 .jr-design4-lineup, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-lineup{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:.4rem .65rem .7rem;box-sizing:border-box}#jrMember.visual #jr-hero-design-1 .jr-design4-card__img-wrap, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__img-wrap{padding-top:122%}#jrMember.visual #jr-hero-design-1 .jr-design4-card__info, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-card__info{padding:.5rem .55rem .62rem}}#jrMember.visual #jr-hero-design-1 .visual_left_stack>.lawyer-slider-container.lawyer-slider-others, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left_stack>.lawyer-slider-container.lawyer-slider-others{--jr-lawyer-bleed-l:clamp(9rem,18vw,22rem);--jr-lawyer-bleed-r:clamp(7rem,14vw,16rem);margin-left:calc(-1 * var(--jr-lawyer-bleed-l) + 10rem + 50px) !important;margin-right:calc(-1 * var(--jr-lawyer-bleed-r)) !important;width:calc(100% + var(--jr-lawyer-bleed-l) + var(--jr-lawyer-bleed-r));max-width:none;box-sizing:border-box;transform:translateX(-72px) translateY(-3rem) scale(var(--jr-lawyer-rolling-card-scale)) !important;transform-origin:center bottom}}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track{overflow-x:visible !important;overflow:visible !important;padding-inline-end:clamp(0,0.35vw,6px);box-sizing:border-box}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box;overflow:hidden;overflow-x:clip}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper{display:flex;align-items:flex-end;justify-content:flex-start;gap:0 !important;column-gap:0 !important;row-gap:0 !important}@media(min-width:900px){#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper{container-type:inline-size;padding-inline-end:0}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper{will-change:transform;transition:transform .38s cubic-bezier(0.22,0.65,0.28,1);justify-content:flex-start}@media(prefers-reduced-motion:reduce){#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper{transition:none}}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide{flex:0 0 calc(100cqi / 5);width:calc(100cqi / 5) !important;max-width:calc(100cqi / 5) !important;min-height:0;margin-left:0 !important;margin-right:0 !important}}@media(max-width:899px){#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper{container-type:inline-size;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper::-webkit-scrollbar, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper::-webkit-scrollbar{display:none}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-wrapper.jr-baseline-static-wrapper{width:max-content;min-width:100%;gap:0;transform:none !important;transition:none !important;padding-inline-end:clamp(12px,3.5vw,28px);box-sizing:border-box}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide{flex:0 0 calc(100cqi / 5);width:calc(100cqi / 5) !important;max-width:calc(100cqi / 5) !important;margin-left:0 !important;margin-right:0 !important}}@media(max-width:899px){#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track{transform:translateX(-100px) scale(var(--jr-lawyer-rolling-card-scale)) !important;transform-origin:center bottom}}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--partner .jr-partner-ghost, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--partner .jr-partner-ghost{position:absolute;inset:0;z-index:3;pointer-events:none}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--primary .jr-partner-ghost, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-partner-ghost{position:absolute;inset:0;z-index:3;pointer-events:none}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--partner{overflow:hidden !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary{overflow:visible !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--partner .jr-partner-ghost .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--partner .jr-partner-ghost .hero-fixed-img--partner{width:100% !important;height:100% !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed--partner.jr-partner-updating .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--partner.jr-partner-updating .hero-fixed-img--partner{filter:brightness(1.06) saturate(1.04)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .lawyer-slider-container.lawyer-slider-others, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .lawyer-slider-container.lawyer-slider-others{display:none !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static{--jr-design4-card-h:calc((100vh - 64px) * 0.9);overflow:visible !important}#jrMember.visual #jr-hero-design-1 .jr-design4-left-lineup[hidden], .jr-response-team-hero.visual #jr-hero-design-response-team .jr-design4-left-lineup[hidden]{display:none !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_two_col, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_two_col{display:block !important;grid-template-columns:minmax(0,1fr) !important;gap:0 !important;align-items:end !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_left_stack, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_left_stack{display:none !important;min-width:0 !important;min-height:0 !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right{width:100% !important;max-width:none !important;justify-self:stretch !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_left, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_left{display:flex !important;flex-direction:column !important;justify-content:flex-end !important;width:100% !important;max-width:none !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_left .slogan_wrap, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_left .slogan_wrap{display:none !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-lineup, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-lineup{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end !important;gap:.16rem !important;width:100% !important;margin-top:.75rem;overflow:hidden}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card{width:100% !important;max-width:100% !important;min-width:0 !important;position:relative;border-radius:0;overflow:hidden;background:transparent;border:0;box-shadow:none;cursor:pointer}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__img-wrap, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__img-wrap{position:relative;width:100%;height:min(34vh,305px)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__img, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__info, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__info{position:absolute;left:0;right:0;bottom:0;padding:.45rem .34rem .62rem;background:linear-gradient(180deg,rgba(0,0,0,0.04) 0,rgba(23,15,11,0.68) 72%,rgba(23,15,11,0.82) 100%);text-align:left}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__name, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__name{margin:0;color:#fff6ef;font-size:clamp(0.78rem,0.62rem+0.16vw,0.9rem);font-weight:800;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,0.65)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__tag, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__tag{margin:.2rem 0 0;color:rgba(245,233,222,0.94);font-size:clamp(0.66rem,0.54rem+0.12vw,0.76rem);font-weight:500;line-height:1.18;text-shadow:0 1px 2px rgba(0,0,0,0.55)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo{transform:none !important;width:100% !important;max-width:none !important;justify-content:flex-start !important;align-items:flex-end !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-lineup, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-lineup{display:none !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all{display:grid !important;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 !important;align-items:stretch !important;overflow:hidden !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed{width:100% !important;max-width:100% !important;min-width:0 !important;height:var(--jr-design4-card-h) !important;margin:0 !important;transform:none !important;overflow:hidden !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img{height:var(--jr-design4-card-h) !important;max-height:var(--jr-design4-card-h) !important;object-fit:cover !important;object-position:center top !important;border-radius:0 !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner{border-radius:0 !important;padding:.5rem .3rem .65rem !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-name, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-name{font-size:clamp(0.8rem,0.66rem+0.16vw,0.94rem) !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-tag, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-partner-tag{font-size:clamp(0.64rem,0.56rem+0.1vw,0.74rem) !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--primary{width:100% !important;max-width:100% !important;margin:0 !important;transform:none !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .hero-fixed-img--partner{height:var(--jr-design4-card-h) !important;max-height:var(--jr-design4-card-h) !important;object-fit:cover !important;object-position:center top !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--partner .hero-fixed-img--partner{border-radius:0 !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed--primary .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--primary .hero-fixed-img{border-radius:0 !important}@media(max-width:899px){#jrMember.visual #jr-hero-design-1.jr-hero-design4-static, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static{--jr-design4-card-h:calc((100svh - 56px) * 0.9)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_two_col, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_two_col{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-lineup, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-lineup{display:flex !important;flex-wrap:nowrap !important;gap:0 !important;margin-top:.65rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card{flex:0 0 44% !important;max-width:44% !important;min-width:44% !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__img-wrap, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__img-wrap{height:var(--jr-design4-card-h)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right{width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed--primary{width:100% !important;max-width:100% !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .jr-hero-fixed{width:100% !important;max-width:100% !important;min-width:0 !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .lawyer-info--partner{padding:.42rem .24rem .52rem !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img--partner,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed-duo.jr-design4-duo-all .hero-fixed-img{height:var(--jr-design4-card-h) !important;max-height:var(--jr-design4-card-h) !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .jr-hero-fixed .hero-fixed-img,.jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .visual_right .hero-fixed-img--partner{height:var(--jr-design4-card-h) !important;max-height:var(--jr-design4-card-h) !important;object-fit:cover !important;object-position:center top !important}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__info, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__info{padding:.75rem .55rem 1.45rem}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__name, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__name{font-size:clamp(1.2rem,0.96rem+0.42vw,1.45rem)}#jrMember.visual #jr-hero-design-1.jr-hero-design4-static .jr-design4-left-card__tag, .jr-response-team-hero.visual #jr-hero-design-response-team.jr-hero-design4-static .jr-design4-left-card__tag{font-size:clamp(1rem,0.82rem+0.26vw,1.15rem)}}@media(min-width:900px){#jrMember.visual #jr-hero-design-1 .visual_right, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right{max-width:700px}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo{transform:translate(4.25rem,-5.4rem) !important;transition:transform .3s ease}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed{transform:none}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner{transform:translateX(calc(clamp(1rem, 2.1vw, 2.4rem) + 40px))}}@media(min-width:900px){#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide::before, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide::before{padding-top:112%}}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active{background:linear-gradient(180deg,rgba(118,78,34,0.34) 0,rgba(74,48,24,0.52) 100%) !important;border-color:rgba(244,214,170,0.46) !important;box-shadow:0 10px 28px rgba(56,36,18,0.24),inset 0 1px 0 rgba(255,240,214,0.22) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active img{filter:grayscale(0) brightness(1.02) !important;transform:scale(1.03) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info{padding:.7rem 1.1rem .85rem !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info h3{visibility:visible !important;opacity:1 !important;height:auto !important;overflow:visible !important;margin:.18rem 0 0 !important;padding:0 !important;font-size:1.42rem !important;line-height:1.28 !important;color:#fff4e4 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one{display:block !important;color:#f0dfca !important;text-shadow:0 1px 2px rgba(0,0,0,0.28) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:1.2 !important;font-size:.96rem !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active{background:linear-gradient(180deg,rgba(118,78,34,0.34) 0,rgba(74,48,24,0.52) 100%) !important;border-color:rgba(244,214,170,0.46) !important;box-shadow:0 10px 28px rgba(56,36,18,0.24),inset 0 1px 0 rgba(255,240,214,0.22) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active img{filter:grayscale(0) brightness(1.02) !important;transform:scale(1.03) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info{padding:.7rem 1.1rem .85rem !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info h3{visibility:visible !important;opacity:1 !important;height:auto !important;overflow:visible !important;margin:.18rem 0 0 !important;padding:0 !important;font-size:1.42rem !important;line-height:1.28 !important;color:#fff4e4 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one{display:block !important;color:#f0dfca !important;text-shadow:0 1px 2px rgba(0,0,0,0.28) !important;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.28 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak), .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak){background:rgba(42,34,28,0.12) !important;border-color:rgba(255,250,245,0.16) !important;box-shadow:0 4px 18px rgba(40,32,26,0.12),inset 0 1px 0 rgba(255,255,255,0.1) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img{filter:opacity(55%) brightness(0.9) !important;transform:scale(1) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info{padding:.45rem 1rem .55rem !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info h3{visibility:hidden !important;opacity:0 !important;height:0 !important;overflow:hidden !important;margin:0 !important;padding:0 !important;font-size:0 !important;line-height:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .jr-lawyer-career-one{color:#aea090 !important;text-shadow:none !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak{background:linear-gradient(180deg,rgba(118,78,34,0.34) 0,rgba(74,48,24,0.52) 100%) !important;border-color:rgba(244,214,170,0.46) !important;box-shadow:0 10px 28px rgba(56,36,18,0.24),inset 0 1px 0 rgba(255,240,214,0.22) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak::after, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(29,20,13,0) 0,rgba(29,20,13,0.24) 24%,rgba(29,20,13,0.78) 100%);pointer-events:none;z-index:1}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak img{filter:grayscale(0) brightness(1) !important;transform:scale(1) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info{z-index:2;padding:.7rem 1.1rem .85rem !important;display:flex !important;flex-direction:column !important;text-shadow:0 2px 10px rgba(0,0,0,0.82),0 1px 2px rgba(0,0,0,0.6)}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info h3{visibility:visible !important;opacity:1 !important;height:auto !important;overflow:visible !important;margin:.18rem 0 0 !important;padding:0 !important;font-size:1.42rem !important;line-height:1.28 !important;color:#fff8ef !important;font-weight:800 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak .jr-lawyer-career-one{display:block !important;color:#fff1df !important;text-shadow:0 2px 8px rgba(0,0,0,0.82),0 1px 2px rgba(0,0,0,0.58) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:1.2 !important;font-size:.96rem !important;order:3}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak .lawyer-info h3{order:2}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active), .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active){background:rgba(42,34,28,0.12) !important;border-color:rgba(255,250,245,0.16) !important;box-shadow:0 4px 18px rgba(40,32,26,0.12),inset 0 1px 0 rgba(255,255,255,0.1) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active)::after, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active)::after{display:none !important;content:none !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) img{filter:opacity(55%) brightness(0.9) !important;transform:scale(1) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info{z-index:auto;padding:.45rem 1rem .55rem !important;text-shadow:0 1px 3px rgba(0,0,0,0.9),0 0 1px rgba(0,0,0,0.8) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info h3{visibility:hidden !important;opacity:0 !important;height:0 !important;overflow:hidden !important;margin:0 !important;padding:0 !important;font-size:0 !important;line-height:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info p:first-child, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .lawyer-info p:first-child{color:#c4b8a8 !important;margin-top:-1em !important;font-weight:600 !important;text-shadow:0 1px 1px rgba(0,0,0,0.25) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) .jr-lawyer-career-one{display:block !important;color:#aea090 !important;text-shadow:none !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak), .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak){background:linear-gradient(180deg,rgba(118,78,34,0.34) 0,rgba(74,48,24,0.52) 100%) !important;border-color:rgba(244,214,170,0.46) !important;box-shadow:0 10px 28px rgba(56,36,18,0.24),inset 0 1px 0 rgba(255,240,214,0.22) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img{filter:grayscale(0) brightness(1.02) !important;transform:scale(1.03) !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info{padding:.7rem 1.1rem .85rem !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .lawyer-info h3{visibility:visible !important;opacity:1 !important;height:auto !important;overflow:visible !important;margin:.18rem 0 0 !important;padding:0 !important;font-size:1.42rem !important;line-height:1.28 !important;color:#fff4e4 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) .jr-lawyer-career-one{color:#f0dfca !important;text-shadow:0 1px 2px rgba(0,0,0,0.28) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:1.2 !important;font-size:.96rem !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info{display:flex !important;flex-direction:column !important;align-items:stretch !important;text-align:center !important;text-shadow:0 2px 10px rgba(0,0,0,0.82),0 1px 2px rgba(0,0,0,0.6)}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info>p:first-of-type, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info>p:first-of-type{color:#ffe2b3 !important;margin-top:0 !important;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important;font-weight:800 !important;font-size:clamp(1.45rem,1.12rem+0.72vw,1.95rem) !important;line-height:1.22 !important;letter-spacing:-.02em !important;text-shadow:0 2px 8px rgba(0,0,0,0.78),0 1px 2px rgba(0,0,0,0.52) !important;order:1 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info h3, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info h3{order:2 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide-active .lawyer-info .jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info .jr-lawyer-career-one{order:3 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-career-one,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .lawyer-info p.jr-lawyer-career-one,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info p.jr-lawyer-career-one, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-career-one,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .lawyer-info p.jr-lawyer-career-one,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .jr-lawyer-career-one,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info p.jr-lawyer-career-one{display:block !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;white-space:nowrap !important;word-break:keep-all !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:1.18 !important;font-size:1.26rem !important;font-weight:700 !important;letter-spacing:-.01em !important}@media screen and (max-width:899px){#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo{--jr-duo-img-w:min(50.4vw,264px);--jr-duo-img-h:min(64.8vh,600px);--jr-duo-overlap:clamp(1rem,calc(var(--jr-duo-img-w) * 0.14 + 0.1rem),2rem);display:flex !important;flex-direction:row !important;align-items:flex-end !important;justify-content:center !important;width:100% !important;max-width:100% !important;transform:translateX(0) !important;padding:0 max(0,env(safe-area-inset-right,0)) 0 max(0,env(safe-area-inset-left,0));box-sizing:border-box !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary{flex:0 0 auto !important;width:var(--jr-duo-img-w) !important;max-width:var(--jr-duo-img-w) !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner{margin-right:calc(-1 * var(--jr-duo-overlap)) !important;z-index:1 !important;transform:translateX(calc(clamp(0.7rem, 1.8vw, 1.6rem) + 40px)) !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary{margin-left:calc(-1 * var(--jr-duo-overlap)) !important;z-index:2 !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child{margin-left:0 !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo>.jr-hero-fixed--primary:only-child .hero-fixed-img{border-radius:0 0 8px 8px !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed.jr-lawyer-profile-trigger,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed.jr-lawyer-profile-trigger,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed{width:auto !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed .hero-fixed-img{width:100% !important;max-width:100% !important;height:var(--jr-duo-img-h) !important;max-height:var(--jr-duo-img-h) !important;min-height:0 !important;object-fit:cover !important;object-position:bottom center !important;border-radius:0 0 8px 8px !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner .hero-fixed-img--partner, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--partner .hero-fixed-img--partner{border-radius:0 0 0 8px !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img{border-radius:0 0 8px 0 !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo{width:min(380px,92%) !important;max-width:min(380px,92%) !important;margin-left:auto !important;margin-right:0 !important;justify-content:flex-end !important;transform:translateY(-7rem) !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary{width:min(380px,100%) !important;max-width:min(380px,100%) !important;margin-left:auto !important;transform:translateX(-60px)}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img{width:100% !important;max-width:min(380px,100%) !important;max-height:min(60vh,520px) !important;height:auto !important;object-fit:contain !important;object-position:center top !important}}@media screen and (max-width:899px){#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed{overflow:visible !important}}@media screen and (max-width:1024px){#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo,#jrMember #jr-hero-design-1,.jr-response-team-hero #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed{overflow:visible !important}}@media(min-width:900px){#jrMember.visual #jr-hero-design-1 .visual_right, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right{display:flex !important;align-items:flex-start !important;justify-content:flex-end !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo{width:min(360px,88%) !important;max-width:min(360px,88%) !important;margin:0 0 0 auto !important;transform:translateY(0) !important;justify-content:flex-end !important;overflow:visible !important}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary{width:min(360px,100%) !important;max-width:min(360px,100%) !important;margin-left:auto !important;overflow:visible !important;transform:translateX(-60px)}#jrMember.visual #jr-hero-design-1 .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary .hero-fixed-img{width:100% !important;max-width:min(360px,100%) !important;max-height:min(50vh,420px) !important;height:auto !important;object-fit:contain !important;object-position:center top !important;transform:scale(1.3);transform-origin:bottom center}}@media(min-width:900px){#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper .swiper-slide{margin:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide+.swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide+.swiper-slide{margin-left:-1px !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide{position:relative !important;overflow:hidden !important;min-height:0 !important;aspect-ratio:1 / 1;align-self:flex-end !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide::before, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide::before{display:none !important;content:none !important;padding:0 !important;height:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active:not(.jr-lawyer-card--kwak) img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak img,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-card--kwak:not(.swiper-slide-active) img{position:absolute !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-height:0 !important;margin:0 !important;object-fit:cover !important;object-position:center top !important;transform:none !important;transform-origin:center center !important;display:block !important;z-index:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide .lawyer-info{z-index:2 !important}}@media(max-width:899px){#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper.jr-baseline-static-swiper .swiper-slide{margin:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide+.swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track .swiper-slide+.swiper-slide{margin-left:-1px !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide{position:relative !important;overflow:hidden !important;min-height:0 !important;aspect-ratio:1 / 1}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide::before, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide::before{display:none !important;content:none !important;padding:0 !important;height:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide img, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide img{position:absolute !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;width:100% !important;height:100% !important;margin:0 !important;object-fit:cover !important;object-position:center top !important;transform:none !important;display:block !important;z-index:0 !important}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide .lawyer-info, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide .lawyer-info{z-index:2 !important}}#jrMember.visual #jr-hero-design-1 .slogan_wrap, .jr-response-team-hero.visual #jr-hero-design-response-team .slogan_wrap{text-align:center;padding:7rem 0 1.5rem 0;margin-left:0 !important;width:100%;max-width:none;box-sizing:border-box;--jr-d1-head-fs:clamp(5.625rem,3.15rem+6.3vw,15.75rem);--jr-d1-sub-fs:clamp(2.53125rem,1.4175rem+2.6325vw,6.075rem);--jr-d1-btn-fs:clamp(14.4px,1.04vw,39.2px);--jr-d1-sub-lh:1.35}#jrMember.visual #jr-hero-design-1 .visual_left .title, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title{text-align:left;margin-left:10rem;margin-right:auto;max-width:min(98vw,200rem)}#jrMember.visual #jr-hero-design-1 .visual_left .title h1, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1{font-size:var(--jr-d1-head-fs) !important;line-height:1.12 !important;color:var(--brown900);margin-bottom:clamp(1rem,2vh,3rem);letter-spacing:-.06em;font-weight:800 !important}#jrMember.visual #jr-hero-design-1 .visual_left .title .subtxt, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title .subtxt{font-size:var(--jr-d1-sub-fs) !important;color:var(--brown800);letter-spacing:-.04em;line-height:1.38 !important;text-align:left;font-weight:500}#jrMember.visual #jr-hero-design-1 .visual_left .title h1 span[data-hero-role="line1"],.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span#jr-hero-l1, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span[data-hero-role="line1"],.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span#jr-hero-l1{font-size:inherit !important;line-height:inherit !important;font-weight:800 !important;color:inherit}#jrMember.visual #jr-hero-design-1 .visual_left .title h1 span[data-hero-role="line2"],.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span#jr-hero-l2,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span[id^="jr-hero-l2"], .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span[data-hero-role="line2"],.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span#jr-hero-l2,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1 span[id^="jr-hero-l2"]{line-height:inherit !important;font-weight:800 !important;color:inherit}#jrMember.visual #jr-hero-design-1 .visual_left .title .subtxt span[data-hero-role="subline1"],.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title .subtxt span[data-hero-role="subline2"], .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title .subtxt span[data-hero-role="subline1"],.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title .subtxt span[data-hero-role="subline2"]{font-size:inherit !important;line-height:inherit !important}#jrMember.visual #jr-hero-design-1 .slogan_wrap>.btn_group, .jr-response-team-hero.visual #jr-hero-design-response-team .slogan_wrap>.btn_group{padding-top:clamp(2rem,4vh,5rem) !important;margin-top:0 !important}#jrMember.visual #jr-hero-design-1 .slogan_wrap>.btn_group .btncs, .jr-response-team-hero.visual #jr-hero-design-response-team .slogan_wrap>.btn_group .btncs{font-size:var(--jr-d1-btn-fs) !important;line-height:1.35 !important;font-weight:600 !important;font-family:"Pretendard","Pretendard Variable",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important}@media(max-width:1280px){#jrMember.visual #jr-hero-design-1 .visual_left .title, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title{margin-left:clamp(1.5rem,5vw,8rem)}}@media(max-width:899px){#jrMember.visual #jr-hero-design-1 .slogan_wrap, .jr-response-team-hero.visual #jr-hero-design-response-team .slogan_wrap{padding:calc(clamp(5.6rem, 9vw, 6.7rem) + env(safe-area-inset-top, 0px)) 1rem .65rem 1rem !important;--jr-d1-head-fs:clamp(2.475rem,5.4vw+0.675rem,7.2rem);--jr-d1-sub-fs:clamp(1.11375rem,2.6325vw+0.324rem,3.24rem);--jr-d1-btn-fs:clamp(9.6px,1.56vw,12.8px)}#jrMember.visual #jr-hero-design-1 .visual_left .title, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title{margin-left:auto !important;margin-right:auto !important;max-width:min(36rem,100%) !important;padding-left:20px !important;padding-right:1rem !important;box-sizing:border-box !important}#jrMember.visual #jr-hero-design-1 .visual_left .title h1,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title .subtxt, .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title h1,.jr-response-team-hero.visual #jr-hero-design-response-team .visual_left .title .subtxt{text-align:center !important}}@media(max-width:390px){#jrMember.visual #jr-hero-design-1 .title h1:not(.jr-hero-title-line2-off)>br, .jr-response-team-hero.visual #jr-hero-design-response-team .title h1:not(.jr-hero-title-line2-off)>br{display:block !important}}#jrMember.visual #jr-hero-design-1 .jr-hero-fixed--primary .jr-hero-primary-badge::after, .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .jr-hero-primary-badge::after{-webkit-mask-image:url("/images/CI_symbol.svg");mask-image:url("/images/CI_symbol.svg");-webkit-mask-size:auto 68%;mask-size:auto 68%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;filter:contrast(1.04) saturate(1.02) drop-shadow(0 0 0.35px rgba(28,18,4,0.4)) drop-shadow(0 0.45px 0.55px rgba(28,18,4,0.22));opacity:0.94}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .lawyer-info>p:first-of-type, .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .lawyer-info>p:first-of-type{white-space:normal!important;word-break:keep-all;max-width:100%;box-sizing:border-box}#jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges { position: absolute; left: 50%; transform: translateX(-50%); width: min(100%, 15rem); max-width: 94%; bottom: clamp(4.6rem, 36%, 7rem); z-index: 4; display: none; flex-direction: column; align-items: stretch; gap: 0.26rem; pointer-events: none; box-sizing: border-box; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide.swiper-slide-active .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .swiper-slide.swiper-slide-active .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .swiper-slide.swiper-slide-active .jr-lawyer-hero-active-badges , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide.swiper-slide-active .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .swiper-slide.swiper-slide-active .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .swiper-slide.swiper-slide-active .jr-lawyer-hero-active-badges { display: flex; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-1,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2 , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-1,.jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2 { display: block; text-align: center; font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; line-height: 1.22; letter-spacing: -0.02em; padding: 0.2rem 0.42rem; border-radius: 999px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1 , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1 { font-size: clamp(0.56rem, 1.28vw, 0.72rem); font-weight: 700; color: #2a1f0f; background: linear-gradient( 165deg, rgba(255, 252, 245, 0.98) 0%, rgba(250, 236, 205, 0.96) 55%, rgba(238, 218, 175, 0.94) 100% ); border: 1px solid rgba(176, 140, 55, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(32, 22, 16, 0.12); text-shadow: 0 1px 0 rgba(255, 252, 245, 0.35); } #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2 , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2 { font-size: clamp(0.6rem, 1.38vw, 0.8rem); font-weight: 800; color: #fff8ef; background: linear-gradient(165deg, rgba(72, 56, 44, 0.92) 0%, rgba(42, 34, 28, 0.96) 100%); border: 1px solid rgba(244, 214, 170, 0.38); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } @media (max-width: 899px) { #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .swiper-slide .jr-lawyer-hero-active-badges { width: min(100%, 13rem); bottom: clamp(3.85rem, 32%, 5.75rem); gap: 0.2rem; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1 , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line1 { font-size: clamp(0.52rem, 2.6vw, 0.68rem); padding: 0.16rem 0.36rem; white-space: normal; word-break: keep-all; text-overflow: clip; } #jrMember.visual #jr-hero-design-1 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2 , .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-3 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2, #jrMember.visual #jr-hero-design-4 .lawyer-slider-others .jr-lawyer-hero-active-badges__line2 { font-size: clamp(0.56rem, 2.85vw, 0.74rem); padding: 0.18rem 0.38rem; white-space: normal; word-break: keep-all; text-overflow: clip; } } /* 대치 랜딩: JR 학교폭력전략센터 대응팀 — 롤링·우측 대형 프로필 * 섹션 면은 밝은 서피스, 큰 변호사 카드는 메인 히어로와 동일(우상단 배지 2 + 하단 역할·이름·경력 오버레이). * PC: index.min.css 로 배지·lawyer-info 기본 규칙 로드 후 본 파일에서 보정. */ /* 세로 패딩: daechi-ui-enhance.css `#ll-main > section` 공통 규칙. 가로는 섹션 전폭 유지 */ .jr-local-daechi .jr-response-team-hero { padding-left: 0 !important; padding-right: 0 !important; } /* 좌우 패딩·max-width: daechi-ui-enhance.css #ll-main .ll-inner 규칙과 통일 */ .jr-local-daechi .jr-response-team-hero > .ll-inner { container-type: inline-size; container-name: jr-response-team-inner; } /* 제목 블록: 제목 위 한 줄(1lh) + 여유 한 줄 = 상단 2lh, 하단 1lh */ .jr-local-daechi .jr-response-team-head { padding-top: 2lh; padding-bottom: 1lh; box-sizing: border-box; } .jr-local-daechi .jr-response-team-head .ll-h2--line { margin: 0 0 clamp(1.75rem, 3vw, 2.75rem); max-width: none; text-align: left; color: var(--ll-navy, #1a2f4d); border-bottom: none !important; border-image: none !important; } .jr-local-daechi .jr-response-team-head .ll-h2--line::after { content: ""; display: block; width: 100%; /* 공통 제목 바보다 한 단계 강조(두께·채도) */ height: 3px; margin-top: 0.65rem; border-radius: 999px; background: linear-gradient( 90deg, rgba(46, 95, 161, 0.55) 0%, rgba(46, 95, 161, 0.28) 42%, rgba(46, 95, 161, 0.1) 100% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 3px rgba(26, 47, 77, 0.12); } /* 제목 구분선: `.ll-inner` 패딩 안쪽 오른쪽 끝까지 전폭(공통 calc(-1cm)·PC min 폭 규칙 덮어쓰기) */ .jr-local-daechi #ll-main .jr-response-team-hero .jr-response-team-head #jr-response-team-title.ll-h2--line::after { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* 큰 사진 열 직전까지 — 기준에서 우측 여유 1cm 완화 후 +8cm 연장 → calc 끝 +7cm */ @media (min-width: 900px) { .jr-local-daechi .jr-response-team-head .ll-h2--line::after { width: min( 100%, calc(100% - clamp(280px, 38vw, 420px) - 2.25rem + 7cm) ); } } @container jr-response-team-inner (min-width: 600px) { .jr-local-daechi .jr-response-team-head .ll-h2--line::after { width: min( 100%, calc(100% - clamp(280px, 37.5cqw, 420px) - 2.25rem + 7cm) ); } } .jr-local-daechi .jr-response-team-hero.visual { position: relative; isolation: isolate; /* * overflow-x: clip 만 두면 CSS 오버플로 페어링으로 overflow-y 가 visible 이어도 auto 로 취급되어, * PC·모바일에서 duo/primary translateY 로 위로 올린 큰 프로필 머리가 섹션 상단에서 잘림. * 가로 스크롤이 생기면 ll-inner·롤링 쪽 margin 을 조정하는 편이 안전. */ overflow: visible; background: linear-gradient(180deg, #f8fbff 0%, #eef4fc 100%) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team { position: relative; z-index: 1; } /* 좌측 롤링 상단: 변호사별 스포트라이트 카피(JS 동기화) — 기본 2×clamp, 전역 90% 축소는 아래 font-size 에 반영 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-rolling-spotlight { margin: 0; padding: 0 0 clamp(0.85rem, 2.2vw, 1.35rem); max-width: 100%; overflow-wrap: anywhere; word-break: keep-all; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-role { margin: 0 0 clamp(0.55rem, 1.2vw, 0.85rem); font-size: calc(0.9 * 2 * clamp(1.42rem, 1.08rem + 1.25vw, 2.08rem)); font-weight: 800; letter-spacing: -0.035em; line-height: 1.18; color: #1e4a8c; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line1, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line2 { margin: 0; font-size: calc(0.9 * 2 * clamp(1.08rem, 0.92rem + 0.65vw, 1.48rem)); font-weight: 700; letter-spacing: -0.028em; line-height: 1.38; color: var(--ll-navy, #142238); } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line2 { margin-top: clamp(0.42rem, 1.1vw, 0.68rem); font-weight: 650; color: #1e3a5f; opacity: 0.96; } @media (min-width: 900px) { /* PC: 기존 2.5× 대비 추가 90% → 2.25×. 줄 박스는 큰 사진 translateY 와 동기화 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team { --jr-pc-spotlight-line-fs: clamp(1.08rem, 0.92rem + 0.65vw, 1.48rem); --jr-pc-spotlight-one-line-box: calc(1.35 * 2.25 * var(--jr-pc-spotlight-line-fs)); --jr-pc-spotlight-2lines-up: calc(2 * var(--jr-pc-spotlight-one-line-box)); } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-role { margin: 0 0 clamp(0.5rem, 1vw, 0.925rem); font-size: calc(0.9 * 2.5 * clamp(1.42rem, 1.08rem + 1.25vw, 2.08rem)); line-height: 1.15; letter-spacing: -0.04em; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line1, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line2 { font-size: calc(0.9 * 2.5 * clamp(1.08rem, 0.92rem + 0.65vw, 1.48rem)); line-height: 1.35; letter-spacing: -0.034em; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line2 { margin-top: clamp(0.42rem, 0.9vw, 0.775rem); } } /* ─── 모바일(~899px): index.min 미로드 시에도 배지·텍스트 오버레이 동작 ─── */ @media (max-width: 899px) { .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed { overflow: visible; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed.jr-hero-fixed--primary { position: relative; } } /* 롤링: 바깥 컨테이너는 카드처럼 보이지 않게(개별 슬라이드 카드만 노출) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 899px) { .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* 모바일: 카드 스케일 제거 — 한 줄 썸네일 레이아웃(아래 모바일 롤링 블록)과 충돌 방지 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-container.lawyer-slider-others.jr-baseline-static-track { transform: none !important; transform-origin: initial; } } @media (min-width: 900px) { .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider.lawyer-slider-others { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } /* * hero-design PC: bleed/translate 제거 후에도 scale(0.8)+center 기준으로 첫 카드가 구분선보다 안쪽으로 들어가 보임 * → transform-origin: left bottom 으로 좌측을 구분선 시작과 일치시킴. */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider.lawyer-slider-others { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; transform: translate(0, -3rem) scale(var(--jr-lawyer-rolling-card-scale)) !important; transform-origin: left bottom; } /* * index.min `.visual .visual_two_col`: 히어로용 거대 min-height + 좌측 space-between → * 슬로건 없는 대응팀에서는 롤링만 상단에 붙고 우측만 하단 정렬되어 깨짐. * 행 높이를 콘텐츠에 맞추고, 좌측 스택은 하단 정렬로 우측 큰 사진 하단과 맞춤. */ .jr-response-team-hero.visual #jr-hero-design-response-team .innerWrap.visual_two_col { display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(280px, 420px); grid-template-rows: auto auto; min-height: 0 !important; align-items: end !important; align-content: start !important; gap: 2rem 2.25rem; } .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left_stack { grid-column: 1; grid-row: 1; justify-content: flex-end !important; align-self: start !important; min-height: 0 !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider { grid-column: 1; grid-row: 2; margin-top: 0 !important; align-self: end; } .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: stretch; overflow: visible !important; } /* * 좌측 상단 스포트라이트 + 하단 롤링: 그리드 행 높이를 채우고 롤링은 우측 프로필 하단과 맞춤. */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .innerWrap.visual_two_col { align-items: stretch !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_left_stack { justify-content: flex-start !important; align-self: stretch !important; align-items: stretch !important; width: 100%; min-height: 0; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right { align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-rolling-spotlight { padding: clamp(0.15rem, 0.6vw, 0.55rem) 0 clamp(1rem, 2.2vw, 1.75rem); } } @media (max-width: 899px) { /* * 스포트라이트 본문(line1)과 동일한 글자·행간으로 「한 줄 박스 높이」를 정의 → 2줄 = 정확히 2배만큼 위로. */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team { --jr-mo-spotlight-line-fs: calc(0.8 * clamp(1.08rem, 0.92rem + 0.65vw, 1.48rem)); --jr-mo-spotlight-one-line-box: calc(1.38 * 0.9 * 2 * var(--jr-mo-spotlight-line-fs)); --jr-mo-spotlight-2lines-up: calc(2 * var(--jr-mo-spotlight-one-line-box)); margin-top: -0.15rem; } /* 스포트라이트: 센터장 역할 + 부제 두 문장 글자 80%, 부제는 한 줄 흐름(문장 사이 강제 줄바꿈 없음) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-role { font-size: calc(0.8 * 0.9 * 2 * clamp(1.42rem, 1.08rem + 1.25vw, 2.08rem)) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line1, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line2 { display: inline !important; margin: 0 !important; margin-top: 0 !important; font-size: calc(0.9 * 2 * var(--jr-mo-spotlight-line-fs)) !important; vertical-align: baseline; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-spotlight-line2::before { content: " "; } /* 모바일: 섹션 제목 밑 구분선과 변호사 카드 행 사이 여백 최소화 */ .jr-local-daechi .jr-response-team-hero .jr-response-team-head { padding-top: 1lh; padding-bottom: 0.2lh; } .jr-local-daechi .jr-response-team-head .ll-h2--line { margin-bottom: 0.45rem !important; } .jr-response-team-hero.visual #jr-hero-design-response-team .innerWrap.visual_two_col { display: flex; flex-direction: column; /* stretch 시 visual_right 가 스포트라이트 높이만큼 늘어나 사진 아래 빈 면이 생김 → 콘텐츠 높이만 */ align-items: flex-start; gap: 1.25rem; } /* 스포트라이트와 사진 사이: 기본 여백에서 약 2줄(~2.7rem) 축소 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right { margin-top: max(0.5rem, calc(clamp(2.75rem, 9vw, 5rem) + 1.35rem - 2.7rem)); display: flex; flex-direction: column; align-items: stretch; width: 100%; flex: 0 0 auto; min-height: 0; box-sizing: border-box; } /* 카드 행 ↔ 스포트라이트 제목: 본문 1줄 높이만큼 추가 간격(패딩 상쇄·flex gap 보강) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .innerWrap.visual_two_col .visual_left_stack { margin-top: 0 !important; padding-top: calc(1.38 * var(--jr-mo-spotlight-line-fs, 1.08rem)) !important; width: 100%; box-sizing: border-box; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-lawyer-rolling-spotlight { padding-top: 0 !important; } } @media (min-width: 900px) { .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide { background: rgba(236, 242, 255, 0.94) !important; border: 1px solid rgba(46, 95, 161, 0.14) !important; border-radius: 12px; box-shadow: 0 2px 10px rgba(26, 47, 77, 0.06) !important; } /* 활성(롤링 포커스): 흰색 대신 딥블루 틴트로 카드·텍스트 대비 통일 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active { background: rgba(23, 37, 84, 0.38) !important; border-color: rgba(125, 211, 252, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 28px rgba(15, 23, 42, 0.28) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide img, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active img { filter: none !important; opacity: 1 !important; transform: scale(1) !important; transform-origin: bottom center !important; } } /* * 롤링 카드 하단 카피: 남색 밴드 없음 — text-shadow 로만 대비(index.min 시각 히어로와 동일 계열) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide .lawyer-info { left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; padding: 0.55rem 0.4rem 0.58rem !important; box-sizing: border-box !important; align-items: center !important; text-align: center !important; background: transparent !important; background-image: none !important; border-radius: 0 !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide-active .lawyer-info { padding: 0.62rem 0.45rem 0.65rem !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-rolling-tagline { color: #7dd3fc !important; -webkit-text-fill-color: #7dd3fc !important; font-weight: 700 !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 1px rgba(0, 0, 0, 0.85) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-mo-pro-only { display: none; } /* 활성 슬라이드에서만 이름 노출(index.min 비활성은 h3 접힘 + 첫 p -1em) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active .lawyer-info .jr-lawyer-rolling-name { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; font-weight: 800 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(15, 23, 42, 0.65) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-lawyer-career-one { color: #e2e8f0 !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.85) !important; } /* 비활성: 이름 숨김을 다른 규칙이 깨지 않도록 재확인 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info h3.jr-lawyer-rolling-name { visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .lawyer-slider-others .swiper-slide:not(.swiper-slide-active) .lawyer-info p:first-child { margin-top: -1em !important; } /* ─── 큰 변호사: 섹션 변수 오염 방지 → 메인 히어로 청백 팔레트(temple-theme 와 동일 계열) ─── */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary { --jr-hero-h1: #7dd3fc; --jr-hero-h2: #f8fbff; --jr-hero-body: #cbd5e1; --jr-hero-muted: #94a3b8; --jr-hero-cta-bg: linear-gradient(180deg, #1e40af 0%, #172554 100%); --jr-hero-cta-border: rgba(56, 189, 248, 0.38); } /* * 배지 스택(PC): 프로필 박스 오른쪽 바깥 + translate 로 머리 옆에만 얹음. * (모바일은 위 max-width:899 블록에서 transform:none + 퍼센트 기준) */ @media (min-width: 900px) { .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .jr-hero-primary-badge-right-stack { position: absolute !important; bottom: auto !important; z-index: 4 !important; display: flex !important; flex-direction: column !important; gap: 0.42rem !important; pointer-events: none !important; left: 100% !important; right: auto !important; top: clamp(0.75rem, 2.4vw, 1.45rem) !important; margin-left: 0.28rem !important; transform: translate(calc(-50px - 2.8rem), -8.4rem) !important; align-items: stretch !important; } /* PC: 모바일용 힌트(사진 셸) 숨김 — PC는 lawyer-info 상단 힌트만 표시 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .jr-hero-primary-photo-shell .jr-hero-profile-hint--dae-mo { display: none !important; } /* PC: 프로필 더보기 — 하단 밴드에서 역할(학교폭력전략센터장) 텍스트 바로 위 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .lawyer-info .jr-hero-profile-hint--dae-pc { display: inline-flex !important; align-self: center !important; width: auto !important; max-width: 100% !important; margin: 0 auto 0.55rem auto !important; transform: translateX(-30px) !important; z-index: 6 !important; /* 이전 대비 글자 50% (큰 PC 힌트 clamp 절반) */ font-size: clamp(1.02rem, 0.93rem + 0.225vw, 1.14rem) !important; padding: 0.39rem 0.78rem !important; line-height: 1.2 !important; box-sizing: border-box !important; } /* 좁은 프로필 폭에 맞춰 배지 가로도 살짝 축소 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary { --jr-hero-primary-badge-w: min(13rem, 11.2vw + 7rem); } } /* * 큰 변호사 lawyer-info: index.min `.jr-hero-fixed .lawyer-info` 의 패딩·배경·타이포를 그대로 쓰고, * 대치에서만 swiper 관련 opacity 이슈를 막음. */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .lawyer-info { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } @media (max-width: 899px) { /* * 큰 변호사 카드: 회색 판·24px 라운드·썸네일형 사진·하단 흰 텍스트 밴드·우상단 배지 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo { display: flex !important; justify-content: stretch !important; align-items: flex-end !important; width: 100%; max-width: 100%; transform: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; position: relative !important; transform: translate( 0px, calc(-1 * var(--jr-mo-spotlight-2lines-up, calc(2 * 1.38 * 0.9 * 2 * 1.08rem)) + var(--jr-mo-spotlight-one-line-box, calc(1.38 * 0.9 * 2 * 1.08rem))) ) !important; /* 모바일 백업 히어로와 동일 폭(작은 배지) */ --jr-hero-primary-badge-w: min(11.6rem, 54vw); border-radius: 24px !important; overflow: hidden !important; background: linear-gradient(180deg, #f3f4f6 0%, #e8eaee 42%, #e2e5ea 100%) !important; border: 0 !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important; isolation: isolate; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary::after { display: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .hero-fixed-img { width: 100% !important; max-width: 100% !important; max-height: min(52vh, 30.8rem) !important; height: auto !important; margin: 0 auto !important; display: block !important; position: relative !important; z-index: 0 !important; flex: 0 0 auto !important; object-fit: contain !important; object-position: center bottom !important; background: #e5e7eb !important; border-radius: 0 !important; vertical-align: bottom; filter: grayscale(0) brightness(1) !important; } /* 우상단 스택 위치: 홈 모바일 백업과 동일 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-hero-primary-badge-right-stack { position: absolute !important; top: 0.48rem !important; right: 0.42rem !important; left: auto !important; margin: 0 !important; transform: none !important; z-index: 4 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 0.28rem !important; pointer-events: none !important; } /* 배지 pill: mobile-backup-hero.css 소형(원상) — 색은 temple-theme */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-hero-primary-badge { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0.36rem !important; width: auto !important; max-width: min(11.6rem, 54vw) !important; min-width: 0 !important; min-height: 2.52rem !important; padding: 0.16rem 0.62rem 0.16rem 0.2rem !important; border-radius: 999px !important; font-size: clamp(0.86rem, 2.85vw, 1.02rem) !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; white-space: nowrap !important; box-sizing: border-box !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-hero-primary-badge::before { content: "" !important; display: inline-block !important; width: 2.08rem !important; height: 2.08rem !important; flex: 0 0 2.08rem !important; border-radius: 999px !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-hero-primary-badge::after { content: "" !important; position: absolute !important; left: 0.2rem !important; top: 50% !important; width: 2.08rem !important; height: 2.08rem !important; transform: translateY(-50%) !important; pointer-events: none !important; -webkit-mask-image: url("/images/CI_symbol.svg") !important; -webkit-mask-size: 58% !important; -webkit-mask-position: center !important; -webkit-mask-repeat: no-repeat !important; mask-image: url("/images/CI_symbol.svg") !important; mask-size: 58% !important; mask-position: center !important; mask-repeat: no-repeat !important; filter: contrast(1.06) saturate(1.08) drop-shadow(0 0 0.45px rgba(15, 23, 42, 0.35)) drop-shadow(0 0.5px 0.7px rgba(15, 23, 42, 0.26)) !important; } /* 큰 변호사: 모바일만 — 사진 아래 흰 밴드 + 직함/이름 한 줄, 힌트는 사진 하단 중앙(크기 축소) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-hero-primary-photo-shell { position: relative !important; z-index: 1 !important; /* 하단 잘림: 기존 3줄(4.05rem) + 추가 5줄(6.75rem) — 전역 line-height:0 때문에 lh 대신 rem */ overflow: hidden !important; max-height: max(5.5rem, calc(min(52vh, 30.8rem) - 10.8rem)) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .jr-hero-primary-photo-shell .jr-hero-profile-hint--dae-mo { position: absolute !important; left: 50% !important; right: auto !important; bottom: 1lh !important; top: auto !important; margin: 0 !important; margin-bottom: 0 !important; transform: translate(-50%, 10px) !important; z-index: 6 !important; align-self: center !important; font-size: calc(clamp(1.16rem, 1rem + 0.64vw, 1.36rem) * 0.9) !important; padding: 0.36rem 0.84rem !important; line-height: 1.3 !important; pointer-events: none !important; } /* 모바일: PC 전용 힌트(lawyer-info)는 숨김 — 사진 셸 힌트만 사용 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info .jr-hero-profile-hint--dae-pc { display: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info { position: relative !important; left: 0 !important; right: 0 !important; bottom: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: 0 !important; padding: 1.35rem max(20px, env(safe-area-inset-right, 0px)) 1.25rem max(20px, env(safe-area-inset-left, 0px)) !important; box-sizing: border-box !important; border-radius: 0 !important; transform: none !important; text-align: left !important; align-items: stretch !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; z-index: 2 !important; border-top: 1px solid rgba(148, 163, 184, 0.28) !important; background: #fff !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info > p:first-of-type { white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; max-width: 100% !important; font-size: clamp(0.65rem, 0.18rem + 3.85vw, 1.72rem) !important; color: #0f172a !important; margin: 0 0 0.3rem 0 !important; font-weight: 600 !important; text-shadow: none !important; align-self: stretch !important; text-align: left !important; line-height: 1.15 !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info > p:first-of-type br { display: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info .jr-hero-role-line { color: #1e40af !important; -webkit-text-fill-color: #1e40af !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-shadow: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info .jr-hero-role-line::after { content: " / "; color: #1e40af !important; -webkit-text-fill-color: #1e40af !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-shadow: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info .jr-hero-name-line { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 800 !important; letter-spacing: -0.03em !important; text-shadow: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed--primary .lawyer-info .jr-hero-career-block { color: #475569 !important; line-height: 1.65 !important; /* PC temple 경력 대비 150% */ font-size: clamp(1.53rem, 1.44rem + 0.3vw, 1.74rem) !important; font-weight: 500 !important; margin: 0 !important; text-shadow: none !important; } } @media (min-width: 900px) { .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo { /* 표시 크기 ×0.8 (이전 duo 기준 대비 한 단계 더 축소) */ --jr-duo-img-w: min(calc(240px * 0.8), calc(34vw * 0.8 * 0.8)); --jr-duo-img-h: min(calc(52vh * 0.8 * 0.8), calc(416px * 0.8)); --jr-duo-overlap: clamp(1rem, calc(var(--jr-duo-img-w) * 0.14), 2rem); /* * 가로: 왼쪽 정렬 보정(translateX 음수). -180px → -160px(PC만 추가 20px 우측). * 세로 보정은 duo transform 에 함께 유지. */ margin-left: 0 !important; /* 세로: 스포트라이트 보정 + 롤링(translateY -3rem)과 시각 하단을 맞추기 위해 PC만 추가 하강 */ transform: translate( -160px, calc( clamp(-0.4rem, calc(-4.5vh + 1.35rem), -2.15rem) - var(--jr-pc-spotlight-2lines-up) + var(--jr-pc-spotlight-one-line-box) + 3rem ) ) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary { transform: translateX(0) !important; } } /* * 모바일(~899px) · 대치 JR 대응팀 롤링: 구분선 직후(order), 변호사 6명 한 줄(균등 폭), * 태그라인은 사진 하단 오버레이, 터치 시 카드 배경 전환. */ @media (max-width: 899px) { .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .innerWrap.visual_two_col .jr-response-team-lawyer-slider.lawyer-slider-container { order: -1; align-self: center; width: 100% !important; max-width: 100% !important; margin-top: -0.35rem !important; margin-bottom: 0 !important; padding-bottom: calc(1.35 * var(--jr-mo-spotlight-line-fs, 1.08rem)); overflow: visible; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-swiper.swiper { display: block !important; width: 100% !important; max-width: 100% !important; position: relative; overflow: visible !important; box-sizing: border-box; padding-top: 0 !important; height: auto !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper.swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; align-content: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; transform: none !important; transition: none !important; gap: 3px !important; column-gap: 3px !important; row-gap: 0 !important; box-sizing: border-box !important; } /* 6명 한 줄(균등), 사진 + 하단 타이틀 오버레이 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active { position: relative !important; flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; margin-bottom: 0 !important; bottom: auto !important; top: auto !important; z-index: auto !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 12px !important; box-sizing: border-box !important; border: 1px solid rgba(46, 95, 161, 0.16) !important; background: rgba(219, 234, 254, 0.94) !important; box-shadow: 0 2px 10px rgba(26, 47, 77, 0.07) !important; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active { background: rgba(241, 223, 196, 0.98) !important; border-color: rgba(160, 110, 60, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 16px rgba(120, 53, 15, 0.14) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide:not(.swiper-slide-active):hover, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide:not(.swiper-slide-active):focus-within { background: rgba(219, 234, 254, 0.98) !important; border-color: rgba(46, 95, 161, 0.26) !important; box-shadow: 0 2px 12px rgba(26, 47, 77, 0.1) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active:hover, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active:focus-within { background: rgba(248, 232, 208, 1) !important; border-color: rgba(160, 110, 60, 0.45) !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide img, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; object-position: center top !important; display: block !important; margin: 0 !important; margin-bottom: 0 !important; filter: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* 사진 하단: 태그라인만(참고 시안과 유사한 하늘색 + 외곽 대비) */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .lawyer-info { display: flex !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0.22rem 0.08rem 0.26rem !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; text-align: center !important; opacity: 1 !important; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.72) 100%) !important; border-radius: 0 !important; pointer-events: none; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .lawyer-info .jr-mo-pro-only { display: none !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .lawyer-info .jr-lawyer-rolling-name, .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .lawyer-info .jr-lawyer-career-one { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .lawyer-info .jr-lawyer-rolling-tagline { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; font-size: clamp(0.4rem, 0.95vw + 0.1rem, 0.58rem) !important; line-height: 1.12 !important; max-height: 2.35em; overflow: hidden; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #7dd3fc !important; -webkit-text-fill-color: #7dd3fc !important; text-align: center !important; text-shadow: 0 0 1px rgba(15, 23, 42, 1), 0 1px 2px rgba(0, 0, 0, 0.92), 0 -1px 1px rgba(15, 23, 42, 0.75) !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .swiper-slide.swiper-slide-active .lawyer-info .jr-lawyer-rolling-tagline { color: #bae6fd !important; -webkit-text-fill-color: #bae6fd !important; } /* * 모바일 롤링: index.min 이 (max-width:899)에서 비로드라 전역 힌트 스타일 없음 → 여기서 정의. * 글자: 일반 가독 기준 대비 약 80%, 버튼: 하단 밴드 직 위로 살짝 내려 얼굴 영역 가림 완화. */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide .lawyer-info .jr-slider-profile-hint { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; margin-bottom: 0 !important; transform: translate(-50%, 22px) !important; padding: 0.32rem 0.68rem !important; border-radius: 999px !important; font-size: calc(0.9rem * 0.8 * 0.9) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1.25 !important; white-space: nowrap !important; box-sizing: border-box !important; z-index: 4 !important; cursor: inherit !important; pointer-events: none !important; background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; color: #f8fafc !important; text-shadow: none !important; box-shadow: 0 3px 10px rgba(15, 40, 71, 0.32) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.22s ease, visibility 0.22s ease !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .jr-baseline-static-wrapper .swiper-slide.swiper-slide-active .lawyer-info .jr-slider-profile-hint { opacity: 1 !important; visibility: visible !important; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-response-team-lawyer-slider .lawyer-slider-btn { display: none !important; } } /* 큰 변호사 카드: 사진 셸 */ .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .jr-hero-primary-photo-shell { position: relative; display: block; width: 100%; line-height: 0; overflow: visible; } .jr-local-daechi .jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed--primary .jr-hero-primary-photo-shell .hero-fixed-img { display: block; width: 100%; height: auto; vertical-align: top; } /** * 대치동 로컬 랜딩 UI 보강 (jr-local-daechi 전용) * 모바일: 좁은 읽기 폭 유지 / PC(900px+): 폭 확장 + 2열 그리드 */ /* ─── #ll-main 본문: 섹션 테두리 안쪽 여백 = 상·하 동일 / 내부 컬럼도 상·하 동일 ─── * (h2 padding-top 만으로는 보더박스 기준 여백이 잡히지 않아 .ll-inner/.innerWrap 에 동일값 부여) */ .jr-local-daechi #ll-main { --dae-section-pad-y: clamp(2.75rem, 6vw, 4rem); --dae-inner-pad-y: calc(max(1lh, 1.75rem) + 1lh); --dae-bg-pattern-1: linear-gradient(180deg, #f0f6fd 0%, #d9e6f2 100%); /* 패턴 2: 순백이 아닌 ‘딥블루 기운 살짝’ 쿨 화이트 — 상·하 명도 차는 최소(다음 섹션 경계 유지) */ --dae-bg-pattern-2: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%); /* 섹션 사이: 날선 대신 아주 옅은 상단 그림자만 */ --dae-inset-sep: inset 0 22px 30px -20px rgba(26, 47, 77, 0.065); /* 가로 구분(제목 밑줄): #ll-main 내 .ll-h2--line 공통 — 대비 확보 */ --dae-title-rule-h: 4px; --dae-title-rule-bg: linear-gradient( 90deg, #1a3a5c 0%, #224a80 18%, #2e5fa1 45%, #4d7fbe 78%, rgba(46, 95, 161, 0.38) 100% ); --dae-line-muted: rgba(46, 95, 161, 0.09); --dae-line-muted-2: rgba(26, 47, 77, 0.078); --dae-line-accent: rgba(46, 95, 161, 0.11); } /* 인접 섹션 경계: 1px 실선 없음 → 부드러운 상단 앰비언트만 * (#ll-main 안에 모달 div 등이 끼이면 `section+section` 이 깨지므로 `section~section` 사용) */ .jr-local-daechi #ll-main > section ~ section { border-top: none; box-shadow: var(--dae-inset-sep); } .jr-local-daechi #ll-main > section { padding-top: var(--dae-section-pad-y) !important; padding-bottom: var(--dae-section-pad-y) !important; } .jr-local-daechi #ll-main > section > .ll-inner, .jr-local-daechi #ll-main > section > .innerWrap { padding-top: var(--dae-inner-pad-y) !important; padding-bottom: var(--dae-inner-pad-y) !important; } /* 홈 `.visual` 에 붙은 margin-top(64px)이 대응팀 섹션(class*=visual)에도 적용되어 B↔C 사이 흰 띠 발생 → 제거 */ .jr-local-daechi #ll-main > section.jr-response-team-hero.visual { margin-top: 0 !important; } /* JR 대응팀: 제목 위 여백 한 줄(1lh)만큼 축소 — 공통 inner 상단 패딩과 중복 체감 완화 */ .jr-local-daechi #ll-main > section.jr-response-team-hero > .ll-inner { padding-top: max(0.65rem, calc(var(--dae-inner-pad-y) - 1lh)) !important; } /* index: 방송 블록 하단 margin-bottom(2rem 등)이 inner 하단 패딩 위에 더해져 보였던 것 제거 */ .jr-local-daechi #ll-main .jr-broadcast-section .jr-media-width { margin-bottom: 0 !important; } /* ─── 사건 유형(.ll-section--dae-case-types): 면 배경은 `#ll-main > section:nth-of-type(even)` 에서 통일 ─── */ /* 같은 행이라도 카드 높이는 각각 콘텐츠만큼만(접이 펼침 시 옆 카드가 같이 늘어나지 않음) */ .jr-local-daechi .ll-section--dae-case-types .ll-card-grid { align-items: start; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card { height: auto; align-self: start; min-height: 0; box-sizing: border-box; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(0.375rem, 1vw, 0.75rem); } /* 사건 유형 헤드 부제: 방송(#jrBroadcast) `.dae-media-head .ll-lead` 와 동일 하단 여백 → 부제↔카드 그리드 간격 통일 */ .jr-local-daechi .ll-section--dae-case-types .dae-media-head .ll-lead { max-width: none; margin: 0 0 max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)) !important; font-size: calc(1.76rem * 1.2); line-height: 1.75; color: #5c6b7d; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__example { margin: 0.85rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--dae-line-muted); font-size: calc(1.66rem * 1.2); line-height: 1.74; color: #64748b; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro > h3, .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro-copy > h3 { font-size: calc(1.56rem * 1.2) !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.4 !important; color: #1a2f4d !important; margin-top: 0 !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card > .ll-btn { font-size: calc(1.56rem * 1.2) !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__divider { border: none; border-top: 1px solid var(--dae-line-muted); margin: 0.85rem 0 0.75rem; padding: 0; height: 0; } /* 초기 진술 카드: 사례 접이식(details) — 본문은 훅보다 한 단계 가벼운 굵기 */ .jr-local-daechi .ll-section--dae-case-types .dae-risk-stories { margin: 0 0 1.15rem; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion { padding: 0; border-bottom: 1px solid var(--dae-line-muted); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion:last-child { border-bottom: none; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion .dae-risk-story__body { margin: 0 0 0.85rem; padding: 0 0 0 0.15rem; border-left: 3px solid var(--dae-line-accent); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__summary { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.65rem; list-style: none; cursor: pointer; padding: 0.75rem 0 0.85rem; margin: 0; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__summary::-webkit-details-marker { display: none; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__summary-text { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__chevron { flex-shrink: 0; width: 1.45rem; height: 1.45rem; margin-top: 0; align-self: center; border-radius: 50%; background: rgba(46, 95, 161, 0.12); position: relative; transition: transform 0.2s ease; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__chevron::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0.42rem; height: 0.42rem; border-right: 2px solid #2e5fa1; border-bottom: 2px solid #2e5fa1; transform: translate(-55%, -35%) rotate(45deg); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion[open] .dae-risk-story__chevron { transform: rotate(180deg); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion[open] .dae-risk-story__chevron::after { top: 55%; } /* 사례 라벨: 그라데이션 ‘버튼’ 대신 본문 톤에 맞는 플랫 번호 칩(가로) */ .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__label { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; gap: 0.3em; padding: 0.28rem 0.65rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em; color: #1a4a7a; background: rgba(46, 95, 161, 0.07); border: 1px solid rgba(46, 95, 161, 0.2); border-radius: 999px; line-height: 1.2; box-shadow: none; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__label-line { display: inline; white-space: nowrap; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__label-line:last-child { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: 0.06em; } /* 유형별 모바일 UI: 하단 「dae-case-types-mo-redesign」블록 */ .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__hook { flex: 1; min-width: 0; font-size: calc(1.56rem * 1.2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: #1a2f4d; } /* 펼친 본문: 훅보다 한 단계 작게·넓은 행간·문단 간격 */ .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__body p { margin: 0 0 0.85rem; padding-left: 0; font-size: calc(1.5rem * 1.2); font-weight: 400; letter-spacing: -0.02em; line-height: 1.62; color: #3d4f63; word-break: keep-all; } /* 유형 카드 상단 한 줄 설명 = .dae-guide-step-body (래퍼 안으로 이동, flex:1 상속 방지) */ .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro > p, .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro-copy > p { flex: 0 1 auto !important; margin-bottom: 0.5rem !important; font-size: calc(1.76rem * 1.2) !important; line-height: 1.78 !important; color: #475569 !important; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__body p:last-child { margin-bottom: 0; } @media (min-width: 900px) { .jr-local-daechi #ll-main .dae-media-head .ll-lead { font-size: calc(1.82rem * 1.2); max-width: none; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro > h3 { font-size: calc(1.62rem * 1.2) !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card > .ll-btn { font-size: calc(1.62rem * 1.2) !important; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__hook { font-size: calc(1.62rem * 1.2); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__body p { font-size: calc(1.62rem * 1.2); font-weight: 400; letter-spacing: -0.025em; line-height: 1.4; color: #1a2f4d; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro > p { font-size: calc(1.8rem * 1.2) !important; line-height: 1.78 !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__example { font-size: calc(1.7rem * 1.2); line-height: 1.74; } } /* ─── 우선 확인(.ll-section--dae-guide): 면 배경·CI는 `#ll-main > section:nth-of-type(odd)` 에서 통일 ─── */ /* ─── 단계별 대응 절차 워터마크: A~E 중 섹션에 클래스 하나만 추가 ─── * wm-a : 우하단 소형 단일 로고 * wm-b : 좌상단 소형 * wm-c : 화면 중앙 극저명도 단일 대형 * wm-d : JR 로고 미세 반복 타일 * wm-e : 우측 대형 단일 로고 · 비스듬히(회전) */ .jr-local-daechi .ll-section--dae-steps { position: relative; isolation: isolate; overflow: hidden; } .jr-local-daechi .ll-section--dae-steps .ll-inner { position: relative; z-index: 1; } .jr-local-daechi .ll-section--dae-steps-wm-a::before, .jr-local-daechi .ll-section--dae-steps-wm-b::before, .jr-local-daechi .ll-section--dae-steps-wm-c::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/images/CI_symbol_dark.svg"); background-repeat: no-repeat; } /* A: 우하단 소형 */ .jr-local-daechi .ll-section--dae-steps-wm-a::before { background-position: right 1rem bottom 1rem; background-size: clamp(56px, 8vw, 88px) auto; opacity: 0.032; } @media (max-width: 767px) { .jr-local-daechi .ll-section--dae-steps-wm-a::before { opacity: 0.026; background-size: clamp(48px, 12vw, 72px) auto; } } /* B: 좌상단 소형 (본문 단계 리스트와 거리 둠) */ .jr-local-daechi .ll-section--dae-steps-wm-b::before { background-position: max(1rem, env(safe-area-inset-left)) 2.25rem; background-size: clamp(48px, 7vw, 68px) auto; opacity: 0.034; } @media (max-width: 767px) { .jr-local-daechi .ll-section--dae-steps-wm-b::before { opacity: 0.028; background-position: max(1rem, env(safe-area-inset-left)) 1.85rem; } } /* C: 중앙 단일 대형·극저명도 (타일 없음, 텍스트 위에 겹치지 않도록 거의 유령 수준) */ .jr-local-daechi .ll-section--dae-steps-wm-c::before { background-position: 50% 56%; background-size: min(320px, 52vw) auto; opacity: 0.017; } @media (max-width: 767px) { .jr-local-daechi .ll-section--dae-steps-wm-c::before { opacity: 0.014; background-size: min(260px, 70vw) auto; background-position: 50% 58%; } } /* D: 반복 격자(기존 큰 패턴과 동일 구조) — 타일 극소 + 저명도로 텍스트 가독성 우선 */ .jr-local-daechi .ll-section--dae-steps-wm-d::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("/images/CI_symbol_dark.svg"); background-repeat: repeat; background-size: clamp(11px, 1.55vw, 15px) auto; background-position: -3px -2px; opacity: 0.02; } @media (max-width: 767px) { .jr-local-daechi .ll-section--dae-steps-wm-d::before { background-size: clamp(10px, 2.4vw, 13px) auto; opacity: 0.017; } } /* E: 우측 큼직한 단일 로고 · 비스듬히 (텍스트 열과 겹치지 않게 우측 여백에 배치) */ .jr-local-daechi .ll-section--dae-steps.ll-section--dae-steps-wm-e { overflow: visible; } .jr-local-daechi .ll-section--dae-steps-wm-e::before { content: ""; position: absolute; top: 50%; right: clamp(0.35rem, 3vw, 2rem); z-index: 0; pointer-events: none; width: clamp(220px, 36vw, 400px); height: clamp(220px, 36vw, 400px); background-image: url("/images/CI_symbol_dark.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.07; transform: translateY(-50%) rotate(-17deg); transform-origin: center center; } @media (max-width: 900px) { .jr-local-daechi .ll-section--dae-steps-wm-e::before { width: clamp(160px, 42vw, 280px); height: clamp(160px, 42vw, 280px); right: clamp(0.15rem, 2vw, 1rem); opacity: 0.055; transform: translateY(-50%) rotate(-14deg); } } @media (max-width: 767px) { .jr-local-daechi .ll-section--dae-steps-wm-e::before { width: clamp(110px, 36vw, 200px); height: clamp(110px, 36vw, 200px); right: -0.35rem; opacity: 0.042; transform: translateY(-50%) rotate(-11deg); } } .jr-local-daechi .ll-inner--dae-guide { position: relative; z-index: 1; max-width: 38rem; margin: 0 auto; padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } .jr-local-daechi .dae-guide-head { /* 리드↔본문: margin 겹침 없이 — 아래 `.dae-guide-steps` 의 padding-top 과 한 쌍 */ margin-bottom: 0; padding-bottom: max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)); border-bottom: 1px solid var(--dae-line-muted-2); } .jr-local-daechi .dae-guide-kicker { margin: 0 0 0.65rem; font-size: calc(1.34rem * 1.2); font-weight: 600; letter-spacing: 0.02em; color: #64748b; } .jr-local-daechi .dae-guide-title { margin: 0 0 1rem; font-size: clamp(1.88rem, 1.45rem + 1.05vw, 2.22rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.32; color: #15273d; } .jr-local-daechi .dae-guide-lead { margin: 0; font-size: calc(1.76rem * 1.2); line-height: 1.75; color: #5c6b7d; } .jr-local-daechi .dae-guide-steps { list-style: none; margin: 0; padding: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) 0 0; } .jr-local-daechi .dae-guide-step { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--dae-line-muted-2); } .jr-local-daechi .dae-guide-step:last-child { border-bottom: none; padding-bottom: 0; } .jr-local-daechi .dae-guide-article { margin: 0; } /* 우선 확인 단계: 모바일(<900px)에서 제목만 보이고 본문은 details로 접기 · 넓은 화면은 스크립트로 항상 open */ .jr-local-daechi .dae-guide-step-details { margin: 0; padding: 0; border: 0; } .jr-local-daechi .dae-guide-step-summary { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.65rem; list-style: none; cursor: pointer; margin: 0; padding: 0; } .jr-local-daechi .dae-guide-step-summary::-webkit-details-marker, .jr-local-daechi .dae-guide-step-summary::marker { display: none; } .jr-local-daechi .dae-guide-step-summary:focus-visible { outline: 2px solid #2e5fa1; outline-offset: 3px; border-radius: 4px; } .jr-local-daechi .dae-guide-step-panel { margin: 0.45rem 0 0; padding: 0; } .jr-local-daechi .dae-guide-step-summary__chevron { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 0.12rem; border-radius: 50%; background: rgba(46, 95, 161, 0.1); position: relative; transition: transform 0.2s ease; } .jr-local-daechi .dae-guide-step-summary__chevron::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0.38rem; height: 0.38rem; border-right: 2px solid #2e5fa1; border-bottom: 2px solid #2e5fa1; transform: translate(-55%, -35%) rotate(45deg); } .jr-local-daechi .dae-guide-step-details[open] .dae-guide-step-summary__chevron { transform: rotate(180deg); } .jr-local-daechi .dae-guide-step-title { margin: 0; font-size: calc(1.56rem * 1.2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; color: #1a2f4d; } .jr-local-daechi .dae-guide-index { display: inline-block; min-width: 2.15em; margin-right: 0.35rem; font-size: calc(1.24rem * 1.2); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #94a3b8; vertical-align: 0.05em; } .jr-local-daechi .dae-guide-step-body { margin: 0; padding-left: 0; font-size: calc(1.76rem * 1.2); line-height: 1.78; color: #475569; } @media (min-width: 640px) { .jr-local-daechi .dae-guide-step-title { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; } .jr-local-daechi .dae-guide-index { flex: 0 0 auto; margin-right: 0; } .jr-local-daechi .dae-guide-step-body { padding-left: calc(2.15em + 0.65rem); margin-top: -0.15rem; } } /* 모바일: 우선 확인 섹션 — 글자 밀도·여백 (아코디언 접힘 기준) */ @media (max-width: 899px) { .jr-local-daechi #ll-main .ll-section--dae-guide { --dae-lead-to-body-stack: 1.1rem; } .jr-local-daechi .ll-section--dae-guide { padding-top: clamp(1.65rem, 4.5vw, 2.1rem); padding-bottom: clamp(1.65rem, 4.5vw, 2.1rem); } /* 우선 확인 섹션만: 좌우 여백 +20px (하단 #ll-main 열 통일 규칙보다 뒤에서 재정의) */ body.jr-local-landing.jr-local-daechi .ll-section--dae-guide > .ll-inner--dae-guide, body#target.jr-local-daechi .ll-section--dae-guide > .ll-inner--dae-guide { padding-left: calc(2 * var(--jr-page-padding-inline-start, max(1rem, env(safe-area-inset-left, 0px))) + 20px) !important; padding-right: calc(2 * var(--jr-page-padding-inline-end, max(1rem, env(safe-area-inset-right, 0px))) + 20px) !important; } .jr-local-daechi .dae-guide-head { padding-bottom: 0.75rem; } .jr-local-daechi .dae-guide-kicker { margin-bottom: 0.35rem; font-size: 1.2rem; letter-spacing: 0.03em; } .jr-local-daechi .dae-guide-title { margin-bottom: 0.6rem; font-size: clamp(1.92rem, 5vw, 2.08rem); line-height: 1.34; } .jr-local-daechi .dae-guide-lead { font-size: 1.42rem; line-height: 1.62; color: #3d4f63; } body#target.jr-local-daechi .ll-inner--dae-guide .dae-guide-steps { display: block; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0.95rem; box-sizing: border-box; } .jr-local-daechi .dae-guide-step { padding: 0.85rem 0; } .jr-local-daechi .dae-guide-step-summary { align-items: center; gap: 0.45rem; } .jr-local-daechi .dae-guide-step-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; flex: 1; min-width: 0; font-size: clamp(1.58rem, 4.6vw, 1.76rem); font-weight: 800; line-height: 1.36; color: #15273d; } .jr-local-daechi .dae-guide-index { min-width: auto; margin-right: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.2; color: #5c6b7d; } .jr-local-daechi .dae-guide-step-summary__chevron { margin-top: 0; width: 1.25rem; height: 1.25rem; } .jr-local-daechi .dae-guide-step-panel { margin-top: 0.6rem; padding: 0.95rem 1rem 1.05rem; border-top: none; border-radius: 12px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 10px rgba(26, 47, 77, 0.07); } .jr-local-daechi .dae-guide-step-body { padding-left: 0; margin: 0; font-size: 1.46rem; font-weight: 400; line-height: 1.72; letter-spacing: -0.01em; color: #1a3354; word-break: keep-all; overflow-wrap: break-word; } .jr-local-daechi .dae-guide-note-wrap { margin-top: 1.25rem; padding-top: 1rem; } .jr-local-daechi .dae-guide-note { font-size: 1.36rem; line-height: 1.62; color: #3d4f63; } .jr-local-daechi .dae-guide-note__br-mo { display: block !important; } /* ─── 우선 확인: 모바일 체크리스트 UI (첨부 시안) ─── */ .jr-local-daechi .ll-section--dae-guide { background: linear-gradient(180deg, #f3f8fd 0%, #f8fbfe 42%, #fff 100%) !important; } .jr-local-daechi .ll-section--dae-guide::before { opacity: 0 !important; } .jr-local-daechi .dae-guide-checklist-mo[hidden], .jr-local-daechi .dae-guide-legacy-pc[hidden] { display: none !important; } /* 우선 확인 모바일 헤드: 유형별 리스크와 동일 — .dae-media-head + .ll-h2--line + .ll-lead */ .jr-local-daechi .ll-section--dae-guide .dae-guide-checklist-mo > .dae-media-head { display: block !important; margin-bottom: 0 !important; padding-bottom: max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)); } .jr-local-daechi .ll-section--dae-guide .dae-media-head .ll-h2--line, .jr-local-daechi .ll-section--dae-guide .dae-media-head .ll-lead { text-align: left !important; max-width: none !important; } .jr-local-daechi .dae-guide-checklist-mo__steps { list-style: none; margin: 0; padding: var(--dae-lead-to-body-stack, 1.1rem) 0 16px; position: relative; } .jr-local-daechi .dae-guide-checklist-mo__steps::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 22px; border-left: 2px dashed #c5d9ef; pointer-events: none; } .jr-local-daechi .dae-guide-checklist-mo__item { margin: 0; padding: 0; } .jr-local-daechi .dae-guide-checklist-mo__details { margin: 0; padding: 0; border: 0; } .jr-local-daechi .dae-guide-checklist-mo__step { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) 16px; align-items: center; gap: 10px 8px; padding: 12px 0; list-style: none; cursor: pointer; } .jr-local-daechi .dae-guide-checklist-mo__step::-webkit-details-marker, .jr-local-daechi .dae-guide-checklist-mo__step::marker { display: none; } .jr-local-daechi .dae-guide-checklist-mo__step:focus-visible { outline: 2px solid #0056f3; outline-offset: 3px; border-radius: 8px; } .jr-local-daechi .dae-guide-checklist-mo__track { position: relative; z-index: 1; display: flex; justify-content: center; } .jr-local-daechi .dae-guide-checklist-mo__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #0056f3; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .jr-local-daechi .dae-guide-checklist-mo__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e3edf7; color: #2f6fd6; box-shadow: 0 2px 8px rgba(15, 39, 68, 0.06); } .jr-local-daechi .dae-guide-checklist-mo__icon svg { display: block; } .jr-local-daechi .dae-guide-checklist-mo__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; } .jr-local-daechi .dae-guide-checklist-mo__step-title { display: block; margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; color: #0f2744; } .jr-local-daechi .dae-guide-checklist-mo__step-desc { display: block; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; color: #5c6b7d; word-break: keep-all; } .jr-local-daechi .dae-guide-checklist-mo__panel { margin: 0 0 4px auto; padding: 0 0 10px; width: 90%; max-width: 90%; box-sizing: border-box; } .jr-local-daechi .dae-guide-checklist-mo__step-body { margin: 0; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(15, 39, 68, 0.07); font-size: 14px; font-weight: 400; line-height: 1.62; letter-spacing: -0.02em; color: #1a3354; word-break: keep-all; } .jr-local-daechi .dae-guide-checklist-mo__details[open] .dae-guide-checklist-mo__chev::after { transform: translateY(-35%) rotate(45deg); } .jr-local-daechi .dae-guide-checklist-mo__chev { position: relative; width: 10px; height: 10px; justify-self: end; } .jr-local-daechi .dae-guide-checklist-mo__chev::after { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-right: 1.75px solid #b8c5d6; border-bottom: 1.75px solid #b8c5d6; transform: translateY(-60%) rotate(-45deg); } .jr-local-daechi .dae-guide-checklist-mo__cta { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 14px 14px 16px; border-radius: 16px; border: 1px solid #b8d4f0; background: #eef5fc; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(0, 86, 243, 0.06); } .jr-local-daechi .dae-guide-checklist-mo__cta:focus-visible { outline: 2px solid #0056f3; outline-offset: 3px; } .jr-local-daechi .dae-guide-checklist-mo__cta-icon { flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0056f3; box-shadow: 0 2px 8px rgba(0, 86, 243, 0.12); } .jr-local-daechi .dae-guide-checklist-mo__cta-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .jr-local-daechi .dae-guide-checklist-mo__cta-title { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: #0f2744; } .jr-local-daechi .dae-guide-checklist-mo__cta-sub { font-size: 12px; font-weight: 500; line-height: 1.4; color: #5c6b7d; } .jr-local-daechi .dae-guide-checklist-mo__cta-go { flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0056f3; color: #fff; } } @media (min-width: 900px) { .jr-local-daechi .dae-guide-checklist-mo { display: none !important; } } /* 안내 한 줄 + 구분선은 컨테이너(.ll-inner) 가로 전체 */ .jr-local-daechi .dae-guide-note-wrap { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--dae-line-muted-2); width: 100%; box-sizing: border-box; } .jr-local-daechi .dae-guide-note { margin: 0; padding: 0; border-top: none; font-size: calc(1.66rem * 1.2); line-height: 1.74; color: #64748b; } @media (min-width: 900px) { .jr-local-daechi .dae-guide-note__br-mo { display: none !important; } } .jr-local-daechi .dae-guide-note__link { color: #2e5fa1; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } .jr-local-daechi .dae-guide-note__link:hover { color: #1a2f4d; } .jr-local-daechi .dae-guide-note__link:focus-visible { outline: 2px solid #2e5fa1; outline-offset: 3px; border-radius: 2px; } /* PC 가이드 타임라인: css-src/pc/daechi-guide-pc-layout.css (번들 별도 포함) */ /* ─── #ll-main: 「우선 확인」(.ll-inner--dae-guide)과 동일 좌우 패딩·최대폭으로 하위 섹션 정렬 통일 ─── */ .jr-local-daechi #ll-main > .ll-section > .ll-inner:not(.ll-inner--dae-guide), .jr-local-daechi #ll-main > .ll-cta-final > .ll-inner, .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); box-sizing: border-box; } @media (min-width: 900px) { .jr-local-daechi #ll-main > .ll-section > .ll-inner:not(.ll-inner--dae-guide), .jr-local-daechi #ll-main > .ll-cta-final > .ll-inner, .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { max-width: min(1120px, calc(100% - 3rem)); padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); } } @media (min-width: 1200px) { .jr-local-daechi #ll-main > .ll-section > .ll-inner:not(.ll-inner--dae-guide), .jr-local-daechi #ll-main > .ll-cta-final > .ll-inner, .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { max-width: min(1180px, calc(100% - 4rem)); } } /* WHY JR: 카드 소제목(h3) 기준 크기 — 제목(h2)은 동일 값의 120% */ .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards > article > h3 { font-size: clamp(1.92rem, 1.72rem + 0.52vw, 2.2rem) !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; } /* 우선 확인 · 유형별 리스크 · 대응팀 · WHY JR · 미디어(네이버~후기) · FAQ: 제목 동일(카드 h3 × 120% × 120%) */ .jr-local-daechi #ll-main #ll-problem-title.dae-guide-title, .jr-local-daechi #ll-main #ll-problem-title.ll-h2--line, .jr-local-daechi #ll-main #ll-types-title.ll-h2--line, .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line, .jr-local-daechi #ll-main #jrWhyCredibility .ll-h2--line, .jr-local-daechi #ll-main .dae-media-head .ll-h2--line, .jr-local-daechi #ll-main #ll-faq-title.ll-h2--line, .jr-local-daechi #ll-main #jr-location-heading.ll-h2--line { font-size: calc(1.2 * 1.2 * clamp(1.92rem, 1.72rem + 0.52vw, 2.2rem)) !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; color: var(--ll-navy, #1a2f4d) !important; } .jr-local-daechi #ll-main #jrWhyCredibility .ll-h2--line, .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head .ll-h2--line, .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line, .jr-local-daechi #ll-main #ll-faq-title.ll-h2--line, .jr-local-daechi #ll-main #jr-location-heading.ll-h2--line { text-align: left !important; max-width: none; } @media (max-width: 767px) { .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards > article:not(.jr-why-core-card) > h3, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards > article.jr-why-core-card > h3 { font-size: inherit !important; line-height: inherit !important; } .jr-local-daechi #ll-main #ll-problem-title.dae-guide-title, .jr-local-daechi #ll-main #ll-problem-title.ll-h2--line, .jr-local-daechi #ll-main #ll-types-title.ll-h2--line, .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line, .jr-local-daechi #ll-main #jrWhyCredibility .ll-h2--line, .jr-local-daechi #ll-main .dae-media-head .ll-h2--line, .jr-local-daechi #ll-main #ll-faq-title.ll-h2--line, .jr-local-daechi #ll-main #jr-location-heading.ll-h2--line { font-size: calc(1.92rem * 1.2 * 1.2) !important; line-height: 1.35 !important; } } /* 미디어·유형별·WHY JR 공통: `.dae-media-head .ll-lead` (플레이스와 동일 타이포·여백) */ .jr-local-daechi #ll-main .dae-media-head .ll-lead { max-width: none; text-align: left !important; margin: 0 0 max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)) !important; font-size: calc(1.76rem * 1.2); line-height: 1.75; color: #5c6b7d; } /* 오시는 길 파란 카드: 본문 글자 크기·행간 = 위 `.dae-media-head .ll-lead` 와 동일 (.name·지도 링크는 아래 별도) */ .jr-local-daechi #ll-main #jrLocation .jr-location-add-info .jrinfo, .jr-local-daechi #ll-main #jrLocation .jr-location-add-info .jrinfo .add, .jr-local-daechi #ll-main #jrLocation .jr-location-add-info .jrinfo .jr-location-address-text, .jr-local-daechi #ll-main #jrLocation .jr-location-add-info .jrinfo .tel, .jr-local-daechi #ll-main #jrLocation .jr-location-transport li, .jr-local-daechi #ll-main #jrLocation .jr-location-transport li > span, .jr-local-daechi #ll-main #jrLocation .jr-location-transport li > p { font-size: calc(1.76rem * 1.2) !important; line-height: 1.75 !important; } .jr-local-daechi #ll-main #jrLocation .jr-location-add-info .jrinfo .name { font-weight: 700 !important; /* 본문(calc(1.76rem*1.2)) 대비 120% */ font-size: calc(1.76rem * 1.2 * 1.2) !important; line-height: 1.75 !important; } /* 네이버·카카오·T맵: 주소·교통 본문(calc(1.76rem*1.2))의 80% + 아이콘과 세로 가운데 정렬 */ .jr-local-daechi #ll-main #jrLocation .jr-location-map-apps li a { font-size: calc(1.76rem * 1.2 * 0.8) !important; line-height: 1.45 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; gap: 0.45rem !important; width: 100%; max-width: 12rem; margin-left: auto; margin-right: auto; } .jr-local-daechi #ll-main #jrLocation .jr-location-map-apps li a img { display: block !important; margin: 0 auto !important; flex-shrink: 0 !important; } /* FAQ 질문·답변: 유형별 리스크 훅(.dae-risk-story__hook)과 동일 타이포 — 부제 `.ll-lead`는 고객 후기와 공통 규칙 사용 */ .jr-local-daechi #ll-main .ll-section--alt .ll-faq-item summary { align-items: center !important; font-size: calc(1.56rem * 1.2) !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.4 !important; color: #1a2f4d !important; } .jr-local-daechi #ll-main .ll-section--alt .ll-faq-item summary::before { margin-top: 0 !important; align-self: center !important; } .jr-local-daechi #ll-main .ll-section--alt .ll-faq-a { /* 본문(답변)만 질문 대비 80% 크기 */ font-size: calc(1.56rem * 1.2 * 0.8) !important; font-weight: 400 !important; letter-spacing: -0.025em !important; line-height: 1.4 !important; color: var(--ll-text, #475569) !important; } @media (min-width: 900px) { .jr-local-daechi #ll-main .ll-section--alt .ll-faq-item summary { font-size: calc(1.62rem * 1.2) !important; } .jr-local-daechi #ll-main .ll-section--alt .ll-faq-a { font-size: calc(1.62rem * 1.2 * 0.8) !important; } } /* `.sect .innerWrap` 모바일 큰 flex gap 제거 — 방송·언론·블로그·인스타·고객후기·오시는 길 (#jrNaverReviews 는 별도) */ .jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { gap: 0 !important; row-gap: 0 !important; } /* * WHY JR(#jrWhyCredibility): 홈 main#target 와 동일 — inner 세로 스택 + 헤드↔카드 gap * (모바일은 .dae-media-head + .ll-h2--line + .ll-lead — 유형별 리스크와 동일, PC는 .jr-why-daechi-pc-head) */ body#target.jr-local-daechi #ll-main #jrWhyCredibility.jr-why-credibility-section > .ll-inner.innerWrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; /* 방송(#jrBroadcast)과 동일: flex gap 대신 헤드 margin-bottom + 본문 padding-top 으로 부제~본문 거리 산출 */ gap: 0 !important; row-gap: 0 !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head, .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head { display: none; } /* 네이버 플레이스: 모바일은 WHY JR과 동일 — .jr-naver-daechi-mo-head > .dae-media-head > .ll-h2--line + .ll-lead (PC는 .jr-naver-daechi-pc-head) */ /* FAQ: 기본 block 이면 헤드·목록 margin 이 수직 맞부딪힘 → flex 컬럼으로 분리(간격은 margin 합으로 미디어와 동일 체감) */ .jr-local-daechi #ll-main .ll-section--alt > .ll-inner { display: flex; flex-direction: column; gap: 0 !important; row-gap: 0 !important; } /* WHY JR과 동일: 부제 `.ll-lead` 하단 1줄분만 유지(헤드↔본문 시각 간격 통일) */ .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-pc-head .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrBroadcast .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrPress .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrBlog .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrInstagram .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-pc-head .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-media-head .ll-lead, .jr-local-daechi #ll-main #jrLocation .dae-media-head .ll-lead, .jr-local-daechi #ll-main .ll-section--alt .dae-media-head .ll-lead { margin-bottom: max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)) !important; } /* * WHY JR 카드 상단: index.min 의 4.8rem 은 대치 랜딩에서 이 규칙으로 덮음(미디어 섹션과 동일 토큰). */ /* WHY JR: `.dae-media-head` margin-bottom 이 `.ll-lead` margin-bottom 과 max 로 겹쳐 부제~카드가 좁아짐 → 유형별과 동일(헤드 mb 0 + 카드 padding stack) */ .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-pc-head > .dae-media-head, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-media-head { margin-bottom: 0 !important; } body.jr-local-daechi main#ll-main #jrWhyCredibility .jr-why-core-cards, .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-why-core-cards { justify-items: stretch !important; /* 유형별·방송과 동일: 헤드 margin-bottom 은 0(아래 전용 규칙) → 여기서 stack 전부 */ margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; box-sizing: border-box; } /* WHY JR 카드: 검증된 구성 등 본문은 항상 좌측 정렬(PC는 index.min 데스크톱 블록에 text-align 미지정 구간 있음) */ .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards article { text-align: left !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards h3 { text-align: left !important; justify-content: flex-start !important; } /* WHY JR 01 카드: 형광펜 하이라이트 — h3 본문은 다른 카드와 동일 타이포, 선만 ::after */ body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards .jr-why-core-card > h3.jr-why-core-card__hl-title { position: relative; z-index: 0; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards .jr-why-core-card > h3.jr-why-core-card__hl-title::after { content: ""; position: absolute; z-index: -1; left: 50%; width: calc(100% + 0.2em); max-width: 11em; height: 0.52em; bottom: 0.05em; transform: translateX(-50%) rotate(-0.7deg) skewX(-1.5deg); pointer-events: none; background: linear-gradient( 98deg, rgba(255, 235, 59, 0) 0%, rgba(255, 235, 59, 0.72) 7%, rgba(255, 241, 118, 0.82) 42%, rgba(255, 235, 59, 0.78) 88%, rgba(255, 235, 59, 0) 100% ); border-radius: 0.06em 0.22em 0.04em 0.18em; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards .jr-why-core-card__desc { text-align: left !important; } /* WHY JR 카드: PC(index.min 로드 구간)에서 「01」뱃지와 제목을 한 줄(01 검증된 구성)로 배치 */ @media (min-width: 900px) { .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__badge, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__icon, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__tags, .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__desc--mo { display: none !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__desc--pc { display: block !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards article { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 0.6rem !important; row-gap: 0.4rem !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards article::before { margin-bottom: 0 !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards article h3 { flex: 1 1 auto !important; min-width: 0 !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards article > .jr-why-core-card__desc--pc { flex: 1 1 100% !important; width: 100% !important; box-sizing: border-box !important; } .jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards h3::before { content: none !important; display: none !important; } } /* WHY JR·네이버 플레이스 모바일 헤더: PC 전용 블록만 숨김 — 모바일은 .jr-why-daechi-mo-head / .jr-naver-daechi-mo-head 안 .dae-media-head 사용 */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-pc-head { display: none !important; } /* 모바일: 「유형별 리스크」와 동일 — .dae-media-head + .ll-h2--line(구분선) + .ll-lead (temple-theme 가운데 헤더 덮어씀) */ body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head, body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head.jr-why-credibility-head { align-items: flex-start !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-media-head, body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head .dae-media-head { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; align-items: flex-start !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-faq-mo-kicker, body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-faq-mo-title, body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-media-head h2, body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-media-head .ll-lead { text-align: left !important; align-self: stretch !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-mo-head .dae-media-head .ll-lead, body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head .dae-media-head .ll-lead { text-align: left !important; max-width: none !important; /* 방송·미디어 `.dae-media-head .ll-lead` 와 동일 하단 여백 — 과한 margin 으로 부제~본문만 넓어지던 것 방지 */ margin: 0 0 max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)) !important; font-weight: 400 !important; letter-spacing: normal !important; } /* 모바일 섹션 부제: dae-guide-lead(1.42rem / 1.56 / #5c6b7d) — 학교폭력전략센터 대응팀 제외 */ body.jr-local-daechi #ll-main section:not(.jr-response-team-hero) .dae-guide-lead, body.jr-local-daechi #ll-main section:not(.jr-response-team-hero) .dae-media-head .ll-lead { font-size: 1.42rem !important; line-height: 1.56 !important; color: #5c6b7d !important; font-weight: 400 !important; letter-spacing: normal !important; } /* WHY JR 모바일: 2×3 카드(6개) · 가독 큰 글자 (헤더는 .dae-media-head 공통) */ body.jr-local-daechi main#ll-main #jrWhyCredibility .jr-why-core-cards, .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-why-core-cards { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.72rem !important; width: 100% !important; justify-items: stretch !important; counter-reset: none !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; position: relative !important; overflow: visible !important; padding: 1.05rem 0.62rem 0.95rem !important; background: #fff !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; border-radius: 16px !important; box-shadow: 0 8px 22px rgba(15, 40, 71, 0.1) !important; min-height: 100% !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card::before, body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card::after { content: none !important; display: none !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__badge { position: absolute !important; top: 0.55rem !important; left: 0.55rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.55rem !important; height: 1.55rem !important; border-radius: 50% !important; background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important; color: #fff !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1 !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 3.35rem !important; height: 3.35rem !important; margin: 0.2rem 0 0.45rem !important; border-radius: 12px !important; background: linear-gradient(180deg, #e8f1ff 0%, #d6e6ff 100%) !important; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4) !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__icon img { width: auto !important; height: 2.5rem !important; max-width: 88% !important; object-fit: contain !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards .jr-why-core-card > h3 { display: block !important; width: 100% !important; margin: 0 0 0.42rem !important; padding: 0 0.1rem !important; font-size: 1.86rem !important; font-weight: 700 !important; line-height: 1.34 !important; letter-spacing: -0.025em !important; color: #0f172a !important; text-align: center !important; justify-content: center !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards h3::before { content: none !important; display: none !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__tags { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.32rem !important; margin: 0 0 0.48rem !important; padding: 0 !important; list-style: none !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__tags li { display: inline-flex !important; padding: 0.22rem 0.55rem !important; border-radius: 999px !important; background: #eef2ff !important; color: #1e40af !important; font-size: 1.12rem !important; font-weight: 600 !important; line-height: 1.28 !important; letter-spacing: -0.01em !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__desc--pc { display: none !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__desc--mo { display: block !important; align-self: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 0.12rem !important; font-size: 1.32rem !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: -0.015em !important; color: #475569 !important; text-align: left !important; } /* * 네이버 플레이스 모바일: 모바일 헤드(.jr-naver-daechi-mo-head) + 본문 stack 은 블로그·JR 고객후기와 동일 토큰. * (기존 jr-head-to-body-gap margin 만 쓰면 부제~카드가 ~15px 넓어짐 — 헤드 mb 0 + 본문 padding-top stack) */ body#target.jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap { gap: 0 !important; row-gap: 0 !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-pc-head { display: none !important; } /* 부제~슬라이더: 블로그·JR 고객후기와 동일 stack(jr-head-to-body-gap margin 중복 제거) */ body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-mo-head > .dae-media-head { margin-bottom: 0 !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap > .cont.jr-naver-reviews-stage-wrap { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap > .jr-section-more-wrap { margin-top: max(1.5rem, 1.25lh) !important; } } @media (max-width: 390px) { body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card { padding: 0.95rem 0.52rem 0.88rem !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-cards .jr-why-core-card > h3 { font-size: 1.78rem !important; } body#target.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-core-card__desc--mo { font-size: 1.26rem !important; } } /* WHY JR: 홈 RISK(#jrRiskUrgency)와 동일 — 카드 박스 아래 30초 리스크 자가진단 CTA */ .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-section-more-wrap { /* 이전 flex row-gap(4.8rem) 역할 — 카드 그리드와 CTA 사이 */ margin-top: var(--jr-section-head-to-cards-gap, clamp(1.6rem, 4vw, 2.4rem)) !important; margin-bottom: 0 !important; max-width: 100% !important; display: flex !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; } .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-section-more-wrap a.jr-section-more-btn { display: inline-flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; box-sizing: border-box !important; border-radius: 9999px !important; font-size: 1.35rem !important; font-weight: 600 !important; text-decoration: none !important; color: #f8fafc !important; background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; border: 1px solid rgba(56, 189, 248, 0.38) !important; transition: filter 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important; } .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-section-more-wrap a.jr-section-more-btn:hover { filter: brightness(1.07); transform: translateY(-1px); border-color: rgba(125, 211, 252, 0.55) !important; color: #fff !important; } .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-section-more-wrap a.jr-section-more-btn > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap > .jr-section-more-wrap a.jr-section-more-btn svg { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; stroke: currentColor !important; fill: none !important; } /* 메인 미디어 블록 + WHY JR + JR 대응팀: 동일 좌우 패딩·최대폭 */ .jr-local-daechi #ll-main > section.jr-response-team-hero > .ll-inner, .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap { padding-left: max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); padding-right: max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); box-sizing: border-box; width: 100%; max-width: min(1120px, calc(100% - 3rem)); margin-left: auto; margin-right: auto; } @media (min-width: 900px) { .jr-local-daechi #ll-main > section.jr-response-team-hero > .ll-inner, .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap { max-width: min(1120px, calc(100% - 3rem)); padding-left: max(1.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); padding-right: max(1.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } } @media (min-width: 1200px) { .jr-local-daechi #ll-main > section.jr-response-team-hero > .ll-inner, .jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap, .jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap { max-width: min(1180px, calc(100% - 4rem)); } } /* 플레이스·방송·언론·블로그·인스타: 헤드↔본문 간격 공통값 (플레이스 산술식) */ .jr-local-daechi #ll-main { --dae-media-head-after: clamp(0.75rem, 1.5vw, 1.2rem); --dae-media-body-before: max( 0.65rem, calc(var(--jr-section-head-content-gap, 4.8rem) / 2 - clamp(1.35rem, 3vw, 2.05rem)) ); /* * 홈은 main#target 에만 정의된 JR 토큰 — 대치는 main#ll-main 이라 비어 있으면 * #jrInstagram .jr-instagram-card__body 의 padding(var(--jr-risk-card-pad-x)) 등이 무효가 됨. */ --jr-section-head-to-cards-gap: 4.8rem; --jr-section-head-content-gap: var(--jr-section-head-to-cards-gap); --jr-risk-card-pad-y: 2.2rem; --jr-risk-card-pad-x: 1.8rem; /* * 부제(.ll-lead) 아래 ~ 본문 첫 블록: margin 겹침(max)으로 줄어드는 것 방지 — 방송·미디어와 동일 산술(합). */ --dae-lead-to-body-stack: calc(var(--dae-media-head-after) + var(--dae-media-body-before)); } @media (max-width: 899px) { .jr-local-daechi #ll-main { --jr-head-to-body-gap: clamp(2.65rem, 2rem + 1.9vw, 3.55rem); --jr-card-title-body-gap: 1.05rem; --jr-section-head-to-cards-gap: var(--jr-head-to-body-gap); --jr-section-head-content-gap: var(--jr-section-head-to-cards-gap); } } /* 미디어 블록 헤드: 폭·여백 (제목 밑줄은 아래 `#ll-main h2.ll-h2--line::after` 통일 규칙) */ .jr-local-daechi #ll-main .dae-media-head { width: 100%; box-sizing: border-box; /* 플레이스·유형별·WHY JR·후기·FAQ 등 동일: 헤드 하단은 토크만 사용(대응팀은 .jr-response-team-head 사용) */ margin-bottom: var(--dae-media-head-after); } .jr-local-daechi #ll-main .dae-media-head .ll-h2--line { /* 글자 크기는 상단 「유형별 리스크」 제목군과 동일 선택자에서 지정 */ color: var(--ll-navy); margin: 0 !important; padding: 0 0 0.65rem !important; text-align: left !important; max-width: none !important; width: 100% !important; display: block !important; border: none !important; border-image: none !important; box-sizing: border-box; } /* #ll-main 섹션 제목 밑줄 통일: border-image·굵은 바 제거 → 동일한 얇은 페이드 바 */ .jr-local-daechi #ll-main h2.ll-h2--line { border-bottom: none !important; border-image: none !important; } .jr-local-daechi #ll-main h2.ll-h2--line::after { content: "" !important; display: block !important; width: 100% !important; height: var(--dae-title-rule-h, 4px) !important; margin-top: 0.65rem !important; border-radius: 3px !important; background: var(--dae-title-rule-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(26, 47, 77, 0.2) !important; } /* 대응팀 제목: 밑줄은 `.ll-inner` 가로 패딩 안쪽 오른쪽 끝까지 전폭 */ .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line { text-align: left !important; } .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line::after { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } @media (min-width: 900px) { .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line::after { width: 100% !important; max-width: 100% !important; } } @container jr-response-team-inner (min-width: 600px) { .jr-local-daechi #ll-main #jr-response-team-title.ll-h2--line::after { width: 100% !important; max-width: 100% !important; } } /* .dae-media-head .ll-lead 타이포는 상단 WHY JR과 함께 「유형별 리스크」 .ll-lead 와 통일 */ /* 헤드 하단 여백은 상단 `#ll-main .dae-media-head { margin-bottom: var(--dae-media-head-after) }` 로 통일 */ /* 유형별: 부제(~ll-lead) ~ 카드 — margin-collapse 로 줄어들지 않게 padding-top(=방송과 동일 stack) */ .jr-local-daechi #ll-main .ll-section--dae-case-types > .ll-inner > .dae-media-head { margin-bottom: 0 !important; } .jr-local-daechi #ll-main .ll-section--dae-case-types > .ll-inner > .ll-card-grid { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; } .jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap > .cont.jr-naver-reviews-stage-wrap { margin-top: var(--dae-media-body-before); } /* 네이버 플레이스 후기 3열: `dae-main-home-media.js` 가 viewport÷3 로 셀 폭을 잡음 → gap 축소 시 셀 가로 확대 + 본문 패딩 완화로 메타 한 줄 유지 */ .jr-local-daechi #ll-main #jrNaverReviews.jr-naver-reviews-section { --jr-naver-meta-fs: calc(var(--jr-type-body, 1.62rem) * 0.96); /* * 모바일 페이드 좌우 화살표 세로 위치: 카드 상단 패딩 + 네이버ID 줄 + 간격 + 별점·날짜 줄 + 프로필 하단 여백(style .review-card__profile margin-bottom 20px) ≈ 본문 border-top 구분선 * (clamp·타입 토큰에 곱셈을 섞은 calc 는 일부 엔진에서 무효 → top 이 무시되고 50% 가 남는 문제 방지) */ --jr-naver-fade-row-y: calc( clamp(1.75rem, 3.5vw, 2.35rem) + 2.85rem + 0.5rem + (var(--jr-naver-meta-fs) * 1.65) + 20px ); } @media (min-width: 900px) { .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-pc-head .dae-media-head, .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-pc-head .dae-media-head .ll-h2--line, .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-daechi-pc-head .dae-media-head .ll-lead { text-align: left !important; } } .jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid:not(.jr-naver-reviews-grid--single) { gap: clamp(0.75rem, 1.2vw, 1.2rem) !important; } .jr-local-daechi #ll-main #jrNaverReviews .review-card { padding-top: clamp(1.75rem, 3.5vw, 2.35rem) !important; padding-bottom: clamp(1.75rem, 3.5vw, 2.35rem) !important; padding-left: clamp(0.7rem, 1.6vw, 1.05rem) !important; padding-right: clamp(0.7rem, 1.6vw, 1.05rem) !important; } .jr-local-daechi #ll-main #jrNaverReviews .review-card__category { font-size: var(--jr-naver-meta-fs) !important; } /* * 네이버 플레이스: 프로필(네이버ID·별점·플레이스 메타)은 섹션에서 가운데 상속. * 본문만 `.review-card__body` / `__text` 의 `text-align: left !important` 로 좌측 고정. * (`text-align: left` 를 섹션에 두면 메타까지 왼쪽으로 당겨지므로 섹션은 center 로 고정.) */ body#target.jr-local-daechi #ll-main #jrNaverReviews.jr-naver-reviews-section.sect { text-align: center !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-section-more-wrap { display: flex !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .cont.jr-naver-reviews-stage-wrap { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-stage { position: relative !important; width: 100% !important; max-width: calc(1200px + 7rem) !important; padding: 0 clamp(2.75rem, 4vw, 3.5rem) !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-fade-root { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-viewport { overflow: hidden !important; width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-bottom: 2px !important; margin-bottom: -2px !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: max-content !important; min-width: 100% !important; max-width: none !important; margin: 0 !important; transition: transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1) !important; will-change: transform !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid.jr-naver-slide--no-trans { transition: none !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid--single { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; min-width: 0 !important; max-width: 28rem !important; margin-left: auto !important; margin-right: auto !important; transition: none !important; will-change: auto !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-grid-cell { display: flex !important; min-width: 0 !important; min-height: 0 !important; flex: 0 0 var(--jr-naver-cell, min(100%, 320px)) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid--single .jr-naver-grid-cell { flex: 1 1 auto !important; max-width: 100% !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-grid-cell--empty { visibility: hidden !important; pointer-events: none !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-fade-controls { position: absolute !important; left: 0 !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; pointer-events: none !important; z-index: 3 !important; margin: 0 !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-fade-btn { pointer-events: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: clamp(3rem, 5vw, 3.5rem) !important; height: clamp(3rem, 5vw, 3.5rem) !important; border-radius: 50% !important; border: 1px solid rgba(45, 36, 24, 0.12) !important; background: rgba(255, 255, 255, 0.96) !important; color: var(--brown800, #5c4f42) !important; box-shadow: 0 4px 14px rgba(45, 36, 24, 0.1) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; transform: none !important; opacity: 1 !important; height: auto !important; display: flex !important; flex-direction: column !important; border: 1px solid #b0a090 !important; border-radius: 16px !important; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.06) !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__profile { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; align-self: stretch !important; width: 100% !important; text-align: center !important; } /* style.css·상속 이슈 대비: 메타 줄은 text-align + fit-content·auto margin 으로 블록 가운데 배치 */ body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__profile .jr-naver-review-idline, body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__profile .review-card__name, body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__profile .review-card__category { text-align: center !important; width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__profile .jr-naver-review-idline { margin-top: 0 !important; margin-bottom: 0.5rem !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; text-align: left !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .review-card__text { color: #7d6e65 !important; font-size: var(--jr-naver-meta-fs) !important; line-height: 1.65 !important; text-align: left !important; flex: 1 1 auto !important; min-height: 0 !important; margin: 0 !important; padding-bottom: 0.12em !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 5 !important; line-clamp: 5 !important; overflow: hidden !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid--single .review-card__text { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-place-link { margin-top: auto !important; padding-top: 1rem !important; flex-shrink: 0 !important; display: inline-block !important; align-self: center !important; font-size: 1.45rem !important; font-weight: 600 !important; color: #03a84d !important; text-decoration: none !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-place-link:hover { text-decoration: underline !important; color: #038a3d !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews a.jr-section-more-btn { display: inline-flex !important; width: min(100%, 24rem) !important; min-width: min(100%, 24rem) !important; max-width: min(100%, 24rem) !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; box-sizing: border-box !important; border-radius: 9999px !important; font-size: 1.35rem !important; font-weight: 600 !important; text-decoration: none !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews a.jr-section-more-btn > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews a.jr-section-more-btn svg { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; /* 모바일은 index.min 미로드 → SVG 기본 fill(#000)만 적용되어 아이콘이 검은 덩어리로 보임. 홈 index.css 와 동일하게 선 아이콘으로 고정 */ stroke: currentColor !important; fill: none !important; } /* * 네이버 플레이스(모바일): 뷰포트 좌우 inset 은 dae-main-home-media.js 가 * jrNaverViewportTrackWidth() 로 패딩을 빼 셀 폭에 반영 — inset 만 늘리고 clientWidth 그대로 쓰면 오른쪽 테두리가 더 잘림. */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-grid-cell--empty { display: none !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-stage { padding: 0 !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-viewport { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: max(8px, env(safe-area-inset-left, 0px)) !important; padding-right: max(8px, env(safe-area-inset-right, 0px)) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-reviews-grid--single { max-width: min(28rem, 100%) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-fade-controls { left: -0.8rem !important; right: -0.8rem !important; top: var(--jr-naver-fade-row-y) !important; transform: translateY(-50%) !important; } } @media (max-width: 390px) { body#target.jr-local-daechi #ll-main #jrNaverReviews .jr-naver-fade-btn { width: 3.2rem !important; height: 3.2rem !important; } } /* JR 고객 후기: 블로그와 동일 부제~본문 stack(PC 과다 padding-top 제거) */ .jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap > .dae-media-head { margin-bottom: 0 !important; } .jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap > .cont { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; box-sizing: border-box; } /* JR 고객 후기: 카드 본문만 왼쪽 정렬(style.css .sect 가운데 상속 차단, PC·모바일 공통) */ body#target.jr-local-daechi #ll-main #jrReview .review-card__body, body#target.jr-local-daechi #ll-main #jrReview .review-card__text { text-align: left !important; } /* * JR 고객 후기(#jrReview): 모바일만 — 홈 Thanks(#jrReview)와 동일 본문(슬라이더·카드·본문 타이포). * 대치는 main#ll-main 이라 main#target 의 review-card 패딩·transform 덮어쓰기가 없고, * style.css 의 scale(0.9/1.1)·과다 padding 이 그대로 드러남. 부제~본문 간격은 위 stack 규칙으로 블로그와 통일. */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap { gap: 0 !important; row-gap: 0 !important; } /* 모바일: 부제~카드에 「한 줄」분량 추가(부제와 동일 font×line-height 한 줄) */ body#target.jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap > .cont { margin-top: 0 !important; padding-top: calc( var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) + (1.76rem * 1.2 * 1.75) ) !important; } body#target.jr-local-daechi #ll-main #jrReview .review-slider-container.swiper { overflow: visible !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card { padding: var(--jr-risk-card-pad-y, 2.2rem) var(--jr-risk-card-pad-x, 1.8rem) !important; box-sizing: border-box !important; transform: none !important; opacity: 1 !important; background: var(--temple-card, #fff) !important; border-radius: 20px !important; } body#target.jr-local-daechi #ll-main #jrReview .swiper-slide-active .review-card { transform: none !important; opacity: 1 !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__profile { margin-bottom: 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__img-box { width: 8rem !important; height: 8rem !important; border-radius: 50% !important; overflow: hidden !important; margin-bottom: 15px !important; background-color: var(--brown100, #eef4fc) !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__img-box img { transform: scale(1.1) !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__name { display: block !important; font-size: var(--jr-type-card-title, clamp(1.82rem, 1.63rem + 0.51vw, 2.11rem)) !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--temple-text, var(--brown900, #0f172a)) !important; margin-bottom: 5px !important; text-align: center !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__category { display: block !important; font-size: var(--jr-type-body, clamp(1.53rem, 1.41rem + 0.29vw, 1.69rem)) !important; line-height: 1.72 !important; letter-spacing: -0.004em !important; color: var(--temple-text-muted, var(--brown800, #334e68)) !important; text-align: center !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__body { border-top: 1px solid var(--brown200, var(--temple-border, #e2e8f0)) !important; padding-top: 20px !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__text { font-size: var(--jr-type-body, clamp(1.53rem, 1.41rem + 0.29vw, 1.69rem)) !important; line-height: 1.72 !important; letter-spacing: -0.004em !important; word-break: keep-all !important; color: var(--temple-text-muted, #475569) !important; margin: 0 !important; text-align: left !important; } body#target.jr-local-daechi #ll-main #jrReview .review-btn { display: flex !important; } } /* * PC #jrReview: 홈 Thanks와 동일 — 양쪽 scale(0.8), 가운데 scale(1.1) * style.min 의 .swiper-slide-active { bottom:2rem }·align-items:flex-end 가 카드만 위로 뜨게 하므로 리셋 */ @media (min-width: 900px) { body#target.jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap > .cont { overflow: hidden !important; padding-bottom: clamp(1.5rem, 2.5vw, 2.75rem) !important; } body#target.jr-local-daechi #ll-main #jrReview .review-slider-container.swiper { overflow: hidden !important; padding-block: clamp(2rem, 3vw, 3rem) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrReview .swiper-wrapper { align-items: center !important; } body#target.jr-local-daechi #ll-main #jrReview .swiper-slide { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; bottom: auto !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrReview .swiper-slide-active { bottom: auto !important; z-index: 2 !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card { width: 100% !important; padding: 2.75rem 2rem 3.25rem !important; box-sizing: border-box !important; transform: scale(0.8) !important; transform-origin: center center !important; opacity: 0.82 !important; transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease !important; background: var(--temple-card, #fff) !important; border: 1px solid #b0a090 !important; border-radius: 20px !important; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.07) !important; } body#target.jr-local-daechi #ll-main #jrReview .swiper-slide-active .review-card { transform: scale(1.1) !important; transform-origin: center center !important; opacity: 1 !important; z-index: 2 !important; box-shadow: 0 8px 22px rgba(45, 36, 25, 0.12) !important; border-color: #9a8a78 !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__profile { margin-bottom: 1.35rem !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__body { padding-top: 1.35rem !important; padding-bottom: 0.5rem !important; border-top: 1px solid var(--brown200, #e2e8f0) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrReview .review-card__text { font-size: var(--jr-type-body, clamp(1.53rem, 1.41rem + 0.29vw, 1.69rem)) !important; line-height: 1.72 !important; letter-spacing: -0.004em !important; word-break: keep-all !important; margin: 0 !important; } } .jr-local-daechi #ll-main .ll-section--alt > .ll-inner > .ll-faq-list { margin-top: var(--dae-media-body-before) !important; } .jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap > .jr-media-width, .jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap > .jr-media-width, .jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap > .jr-media-width { margin-top: var(--dae-media-body-before) !important; } .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap { gap: 0 !important; } /* JR 인스타: 학폭대응전략블로그(#jrBlog)와 동일 부제~본문 — margin 겹침 대신 stack */ .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap > .dae-media-head { margin-bottom: 0 !important; } .jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap > .jr-media-width { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; } /* * JR 미디어(#jrBroadcast·언론·블로그·인스타): 홈은 main#target 에 temple-theme 의 .jr-section-more-btn svg 규칙이 있으나 * 대치 랜딩은 main#ll-main 이라 동일 규칙이 비적용 → SVG가 뷰포트 폭까지 커지는 현상 보정(WHY JR 더보기와 동일 pill). */ .jr-local-daechi #ll-main #jrBroadcast .jr-media-width > .jr-section-more-wrap, .jr-local-daechi #ll-main #jrPress .jr-media-width > .jr-section-more-wrap, .jr-local-daechi #ll-main #jrBlog .jr-media-width > .jr-section-more-wrap, .jr-local-daechi #ll-main #jrInstagram .jr-media-width > .jr-section-more-wrap { margin-top: max(1.5rem, 1.25lh) !important; margin-bottom: 0 !important; max-width: 100% !important; display: flex !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; } .jr-local-daechi #ll-main #jrBroadcast .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn, .jr-local-daechi #ll-main #jrPress .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn, .jr-local-daechi #ll-main #jrBlog .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn, .jr-local-daechi #ll-main #jrInstagram .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn { display: inline-flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 4.5rem !important; padding: 0.85rem 1.35rem !important; justify-content: center !important; align-items: center !important; gap: 0.6rem !important; box-sizing: border-box !important; border-radius: 9999px !important; font-size: 1.35rem !important; font-weight: 600 !important; text-decoration: none !important; color: #f8fafc !important; background: linear-gradient(180deg, #1e40af 0%, #172554 100%) !important; border: 1px solid rgba(56, 189, 248, 0.38) !important; transition: filter 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important; } .jr-local-daechi #ll-main #jrBroadcast .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn:hover, .jr-local-daechi #ll-main #jrPress .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn:hover, .jr-local-daechi #ll-main #jrBlog .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn:hover, .jr-local-daechi #ll-main #jrInstagram .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn:hover { filter: brightness(1.07); transform: translateY(-1px); border-color: rgba(125, 211, 252, 0.55) !important; color: #fff !important; } .jr-local-daechi #ll-main #jrBroadcast .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn > span, .jr-local-daechi #ll-main #jrPress .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn > span, .jr-local-daechi #ll-main #jrBlog .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn > span, .jr-local-daechi #ll-main #jrInstagram .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .jr-local-daechi #ll-main #jrBroadcast .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn svg, .jr-local-daechi #ll-main #jrPress .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn svg, .jr-local-daechi #ll-main #jrBlog .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn svg { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; stroke: currentColor !important; fill: none !important; } .jr-local-daechi #ll-main #jrInstagram .jr-media-width > .jr-section-more-wrap a.jr-section-more-btn .jr-instagram-more-icon { width: 1.35rem !important; height: 1.35rem !important; flex-shrink: 0 !important; object-fit: contain !important; display: block !important; } /* ─── #ll-main 직계 section: 순서대로 2패턴 반복 (div 등 비-section 형제가 있어도 `nth-of-type` 으로만 섹션 번호 계산) ─── * 홀수번째 section = 「대치 학부모가…」(--dae-bg-pattern-1 + CI 워터마크) * 짝수번째 section = 「유형별 리스크…」(--dae-bg-pattern-2, 워터마크 없음) * 색 변경 시 `#ll-main` 의 --dae-bg-pattern-1 / --dae-bg-pattern-2 만 수정하면 전 섹션에 반영됨. */ .jr-local-daechi #ll-main > section:nth-of-type(odd) { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: var(--dae-bg-pattern-1) !important; } .jr-local-daechi #ll-main > section:nth-of-type(odd)::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.05 !important; background-image: url("/images/CI_symbol_dark.svg"), url("/images/CI_symbol_dark.svg") !important; background-repeat: no-repeat, no-repeat !important; background-position: 90% 18%, 6% 88% !important; background-size: clamp(100px, 18vw, 200px) auto, clamp(64px, 11vw, 120px) auto !important; } @media (max-width: 767px) { .jr-local-daechi #ll-main > section:nth-of-type(odd)::before { opacity: 0.038 !important; background-position: 92% 12%, 4% 92% !important; background-size: clamp(72px, 28vw, 140px) auto, clamp(48px, 16vw, 88px) auto !important; } } .jr-local-daechi #ll-main > section:nth-of-type(even) { position: relative !important; isolation: isolate !important; overflow-x: hidden !important; overflow-y: visible !important; background: var(--dae-bg-pattern-2) !important; } .jr-local-daechi #ll-main > section:nth-of-type(even)::before { content: none !important; display: none !important; } .jr-local-daechi #ll-main > section:nth-of-type(odd) > .ll-inner, .jr-local-daechi #ll-main > section:nth-of-type(odd) > .innerWrap, .jr-local-daechi #ll-main > section:nth-of-type(even) > .ll-inner, .jr-local-daechi #ll-main > section:nth-of-type(even) > .innerWrap { position: relative !important; z-index: 1 !important; background: transparent !important; } .jr-local-daechi #ll-main #jrWhyCredibility.jr-why-credibility-section::after { content: none !important; display: none !important; } /* 대치 랜딩 모바일: 왼쪽 패딩 2배(토큰 기준) — .ll-inner--dae-guide 는 .ll-section--dae-guide 전용 규칙에서 +15px */ @media screen and (max-width: 899px) { body.jr-local-landing.jr-local-daechi #ll-main > .ll-section > .ll-inner:not(.ll-inner--dae-guide), body.jr-local-landing.jr-local-daechi #ll-main > .ll-cta-final > .ll-inner, body.jr-local-landing.jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { padding-left: calc(2 * var(--jr-page-padding-inline-start, max(1rem, env(safe-area-inset-left, 0px)))); padding-right: calc(2 * var(--jr-page-padding-inline-end, max(1rem, env(safe-area-inset-right, 0px)))); } body#target.jr-local-landing.jr-local-daechi #ll-main > section.jr-response-team-hero > .ll-inner, body#target.jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main .dae-faq-mo-section > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap, body#target.jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap { padding-left: max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) !important; padding-right: max(1.25rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) !important; box-sizing: border-box !important; } } /* * JR 대응팀(모바일): jr-response-team-hero.css·style.css .lawyer-info 와의 !important/순서 간섭을 피하기 위해 * 본 파일(대치 랜딩에서 마지막 로드)에서 #ll-main·body#target 체인으로 최종 확정. */ @media (max-width: 899px) { /* .ll-inner: 한 번 더 1lh 축소(총 2lh) */ .jr-local-daechi #ll-main > section.jr-response-team-hero > .ll-inner { padding-bottom: max(0.45rem, calc(var(--dae-inner-pad-y) - 2lh)) !important; } /* 섹션 박스 자체 하단 패딩(--dae-section-pad-y)도 한 줄 분량 축소 */ .jr-local-daechi #ll-main > section.jr-response-team-hero.visual { padding-bottom: max(0.65rem, calc(var(--dae-section-pad-y) - 1lh)) !important; } body#target.jr-local-daechi #ll-main > section.jr-response-team-hero.visual #jr-hero-design-response-team .jr-hero-fixed.jr-hero-fixed--primary > .lawyer-info { position: relative !important; left: 0 !important; right: 0 !important; bottom: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; transform: none !important; box-sizing: border-box !important; } /* * hero-design-1.min: (max-width:1024px) 에서 .visual_right max-width:700px, duo·primary min(360px,88%) 등 * → 모바일에서 큰 변호사 카드 가로가 제목 밑 구분선(#jr-response-team-title::after)과 같도록 전폭. */ body#target.jr-local-daechi #ll-main > section.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right { max-width: none !important; width: 100% !important; justify-content: stretch !important; align-items: stretch !important; } body#target.jr-local-daechi #ll-main > section.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: stretch !important; } body#target.jr-local-daechi #ll-main > section.jr-response-team-hero.visual #jr-hero-design-response-team .visual_right .jr-hero-fixed-duo .jr-hero-fixed--primary { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } } /* * 대치 #ll-main: index.min/index.css 미로드 → .jr-broadcast-grid·영상 래퍼·카드 본문 규칙 없음. * 모바일(≤899px)만 홈 JR 미디어(index.min) 본문 카드 디자인 복제(섹션 .dae-media-head 제목·부제 스타일은 그대로). */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrBroadcast .jr-media-width { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1.5rem !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-card { display: block !important; background: var(--temple-card, #fff) !important; border: 1px solid var(--temple-border, #e2e8f0) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(15, 40, 71, 0.07) !important; cursor: pointer !important; text-align: left !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-video-wrap { position: relative !important; aspect-ratio: 16 / 9 !important; background: #e5e7eb !important; overflow: hidden !important; border-radius: 12px 12px 0 0 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-video-thumb { position: absolute !important; inset: 0 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-video-thumb img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-channel-badge { position: absolute !important; left: 0.75rem !important; top: 0.75rem !important; padding: 0.3rem 0.6rem !important; border-radius: 4px !important; background: rgba(15, 23, 42, 0.88) !important; color: #fff !important; font-size: 1.1rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; max-width: calc(100% - 1.5rem) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; z-index: 1 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-duration-badge { position: absolute !important; right: 0.75rem !important; bottom: 0.75rem !important; padding: 0.25rem 0.5rem !important; border-radius: 4px !important; background: rgba(15, 23, 42, 0.88) !important; color: #fff !important; font-size: 1.1rem !important; z-index: 1 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-play-btn { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 6.5rem !important; height: 6.5rem !important; min-width: 6.5rem !important; min-height: 6.5rem !important; border-radius: 50% !important; background: rgba(51, 51, 51, 0.65) !important; border: 3px solid #b87c48 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-play-btn svg { width: 2.6rem !important; height: 2.6rem !important; fill: #b87c48 !important; margin-left: 0.15rem !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-video-iframe-wrap { position: absolute !important; inset: 0 !important; z-index: 3 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-video-iframe-wrap iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-card-body { padding: 0 1rem 1rem 1rem !important; display: flex !important; flex-direction: column !important; gap: var(--jr-card-title-body-gap, 1.05rem) !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-card-body h3 { font-size: clamp(1.48rem, 1.36rem + 0.28vw, 1.62rem) !important; font-weight: 700 !important; color: var(--temple-text, #0f172a) !important; margin: 0 !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-card-body p { font-size: clamp(1.28rem, 1.2rem + 0.2vw, 1.4rem) !important; color: var(--temple-text-muted, #475569) !important; margin: 0 !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 1.2rem !important; color: #64748b !important; margin-top: auto !important; gap: 0.5rem !important; flex-wrap: wrap !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-meta .jr-meta-date, body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-meta .jr-meta-views { display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; min-width: 0 !important; } body#target.jr-local-daechi #ll-main #jrBroadcast .jr-broadcast-meta svg { width: 1.4rem !important; height: 1.4rem !important; flex-shrink: 0 !important; } } /* * JR 언론보도(#jrPress): 홈은 main#target 에 temple-theme 규칙이 적용되나 대치는 main#ll-main 이라 미적용. * 모바일(≤899px)만 홈과 동일 본문(목록·카드·기사 보기) 복제 — .dae-media-head 제목·부제 스타일은 변경하지 않음. */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrPress .jr-press-list { display: flex !important; flex-direction: column !important; gap: clamp(0.7rem, 1.5vw, 1.05rem) !important; margin: 0 !important; padding: 0 !important; width: 100% !important; list-style: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-empty { font-size: calc(1.4rem * 1.1) !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-list > .jr-press-card:nth-child(n + 4) { display: none !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: clamp(10px, 1.2vw, 14px) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.06) !important; overflow: hidden !important; cursor: pointer !important; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card:hover { transform: translateY(-2px) !important; border-color: rgba(148, 163, 184, 0.85) !important; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.1) !important; background: #fff !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card:hover .jr-press-card-left { background: #f1f5f9 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card:hover .jr-press-card-center, body#target.jr-local-daechi #ll-main #jrPress .jr-press-card:hover .jr-press-card-right { background: #fafbfc !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card:focus-within { outline: 2px solid rgba(37, 99, 235, 0.45) !important; outline-offset: 2px !important; position: relative !important; z-index: 1 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-left { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0.5rem !important; padding: clamp(1.15rem, 1rem + 0.45vw, 1.65rem) clamp(1rem, 0.88rem + 0.4vw, 1.35rem) !important; min-width: 0 !important; width: 100% !important; background: #f8fafc !important; border: none !important; box-sizing: border-box !important; transition: background-color 0.18s ease !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-left { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.35rem 0.5rem !important; justify-content: flex-start !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-cat { display: inline-flex !important; align-items: center !important; gap: 0.32rem !important; padding: 0.26rem 0.68rem !important; border-radius: 999px !important; background: #166534 !important; color: #fff !important; font-size: calc(1.08rem * 1.1) !important; font-weight: 600 !important; width: fit-content !important; line-height: 1.2 !important; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12) !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card[data-category="online"] .jr-press-cat { background: #1d4ed8 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card[data-category="broadcast"] .jr-press-cat { background: #6d28d9 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-cat svg { width: calc(1.05rem * 1.1) !important; height: calc(1.05rem * 1.1) !important; flex-shrink: 0 !important; stroke: #fff !important; fill: none !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-source { font-size: calc(1.2rem * 1.1) !important; color: #334155 !important; font-weight: 600 !important; text-align: left !important; line-height: 1.25 !important; width: auto !important; min-width: 0 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-center { padding: clamp(1.2rem, 1rem + 0.45vw, 1.75rem) clamp(1rem, 0.88rem + 0.4vw, 1.45rem) !important; min-width: 0 !important; text-align: left !important; background: #fff !important; transition: background-color 0.18s ease !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-center h3 { font-size: calc(1.1 * clamp(1.65rem, 1.35rem + 0.45vw, 1.95rem)) !important; font-weight: 700 !important; color: #020617 !important; margin: 0 0 clamp(0.45rem, 0.35rem + 0.25vw, 0.65rem) 0 !important; line-height: 1.35 !important; text-align: left !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-center p { font-size: calc(1.28rem * 1.1) !important; color: #475569 !important; margin: 0 !important; line-height: 1.5 !important; display: -webkit-box !important; line-clamp: 2 !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-align: left !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-right { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.65rem !important; padding: clamp(1.15rem, 0.95rem + 0.45vw, 1.65rem) clamp(1rem, 0.88rem + 0.4vw, 1.35rem) !important; border-top: 1px solid #e8ecf1 !important; border-left: none !important; width: 100% !important; box-sizing: border-box !important; background: #fff !important; transition: background-color 0.18s ease !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-date { font-size: calc(1.12rem * 1.1) !important; color: #64748b !important; line-height: 1.25 !important; font-variant-numeric: tabular-nums !important; flex-shrink: 0 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-link { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; word-break: keep-all !important; font-size: calc(1.22rem * 1.1) !important; color: #0c3480 !important; font-weight: 600 !important; gap: 0.35rem !important; line-height: 1.25 !important; padding: 0.42rem 0.75rem !important; border-radius: 10px !important; border: 1px solid transparent !important; background: transparent !important; cursor: pointer !important; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-link:hover { color: #082654 !important; background: rgba(37, 99, 235, 0.12) !important; border-color: rgba(37, 99, 235, 0.35) !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-link:focus-visible { color: #082654 !important; background: rgba(37, 99, 235, 0.14) !important; border-color: rgba(37, 99, 235, 0.55) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-link svg { width: 1.05em !important; height: 1.05em !important; flex-shrink: 0 !important; stroke: currentColor !important; fill: none !important; } } @media (max-width: 899px) and (min-width: 640px) { body#target.jr-local-daechi #ll-main #jrPress .jr-press-card { display: grid !important; grid-template-columns: 12rem minmax(0, 1fr) max-content !important; grid-template-rows: auto !important; align-items: stretch !important; column-gap: 0 !important; row-gap: 0 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-left { flex-direction: column !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 0.5rem !important; justify-content: center !important; align-self: stretch !important; width: auto !important; border-right: 1px solid #e8ecf1 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-source { width: 100% !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-center { display: flex !important; flex-direction: column !important; justify-content: center !important; align-self: stretch !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-right { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: center !important; gap: 0.55rem !important; border-top: none !important; border-left: 1px solid #e8ecf1 !important; width: auto !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-right .jr-press-date { text-align: right !important; width: auto !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-right .jr-press-link { align-self: flex-end !important; } } @media (max-width: 899px) and (max-width: 639px) { body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-center h3 { font-size: calc(1.58rem * 1.1) !important; line-height: 1.38 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-center { padding: clamp(1.1rem, 0.95rem + 0.5vw, 1.65rem) clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem) !important; border-top: 1px solid #e8ecf1 !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-left { padding: clamp(1.1rem, 0.95rem + 0.5vw, 1.65rem) clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem) !important; } body#target.jr-local-daechi #ll-main #jrPress .jr-press-card-right { padding: clamp(1.05rem, 0.9rem + 0.5vw, 1.55rem) clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem) !important; } } /* * 학폭 대응 전략 블로그(#jrBlog): 홈 index.css 의 .jr-blog-grid·카드 본문이 모바일(≤899px)에서 미로드됨. * 홈 네이버 블로그 섹션과 동일 본문(그리드·카드·썸네일·제목·날짜) 복제 — .dae-media-head 제목·부제 스타일은 변경하지 않음. */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1.25rem !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } @media (min-width: 768px) { body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-card { background: #fff !important; border: none !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(45, 36, 25, 0.07) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; text-decoration: none !important; color: inherit !important; appearance: none !important; -webkit-appearance: none !important; display: block !important; width: 100% !important; text-align: left !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; font: inherit !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-card:hover { transform: translateY(-5px) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-thumb { position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; background: #f1ece6 !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-body { padding: 0.9rem 1rem 1rem !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-body h3 { margin: 0 !important; font-size: 1.55rem !important; font-weight: 700 !important; color: #1f1711 !important; line-height: 1.35 !important; display: -webkit-box !important; line-clamp: 2 !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 4.1rem !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-date { margin-top: 0.6rem !important; font-size: 1.2rem !important; color: #6d6357 !important; } body#target.jr-local-daechi #ll-main #jrBlog .jr-blog-empty { text-align: center !important; padding: 2rem !important; color: #6d6357 !important; font-size: 1.4rem !important; } } /* * JR 인스타그램(#jrInstagram): 모바일만 — 위 #jrBlog 본문(.jr-blog-body)과 동일 패딩·세로 간격으로 * 카드 하단(캡션·반응 힌트) 정렬. 부제~본문 간격은 상단 #jrInstagram stack 과 동일 토큰. * (홈 temple-theme 인스타 카드는 블로그 제목 타이포에 맞춰 두었으나, 좌우 패딩은 main#target 변수에 의존) */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap { gap: 0 !important; row-gap: 0 !important; } body#target.jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap > .jr-media-width { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; } body#target.jr-local-daechi #ll-main #jrInstagram a.jr-instagram-card .jr-instagram-card__body { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; padding-top: 0.9rem !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 0 !important; box-sizing: border-box !important; } body#target.jr-local-daechi #ll-main #jrInstagram .jr-instagram-card__reaction-hint { padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; } } /* 오시는 길(#jrLocation): 모바일·기본 — 부제~본문은 stack 을 .cont padding-top 한 곳에 (유형별 리스크 패턴) */ .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner > .dae-media-head { margin-bottom: 0 !important; } .jr-local-daechi #ll-main #jrLocation > .innerWrap > .cont.jr-location-cont { margin-top: 0 !important; padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; box-sizing: border-box; } /* * PC(≥900px): #ll-main 은 temple-theme 의 jr-location-inner flex 가 없어 margin 접힘 가능. * 방송·블로그·인스타와 동일 — .dae-media-head margin-bottom + .cont margin-top(= --dae-media-body-before), * box 안쪽 상단은 section3 기본 3rem (stack 은 padding 이 아닌 마진으로만). */ @media (min-width: 900px) { body#target.jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner, .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; } body#target.jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner > .dae-media-head, .jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner > .dae-media-head { margin-bottom: var(--dae-media-head-after) !important; } body#target.jr-local-daechi #ll-main #jrLocation > .innerWrap > .cont.jr-location-cont, .jr-local-daechi #ll-main #jrLocation > .innerWrap > .cont.jr-location-cont { margin-top: var(--dae-media-body-before) !important; padding-top: 3rem !important; } } /* * 오시는 길(#jrLocation): 모바일(<=899px) — 홈 temple-theme 의 jr-location-mo-layout 본문을 * main#ll-main 에서도 동작하도록 #ll-main 체인으로 복제. * (섹션 .dae-media-head 제목·부제는 변경하지 않음.) */ /* ========== 오시는 길(#jrLocation): 모바일(≤899px) 통합 안내 박스·지도 버튼·하단 도식 ========== */ body#target.jr-local-daechi #ll-main #jrLocation .jr-location-mo-layout { display: none; } @media (max-width: 899px) { body#target.jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } body#target.jr-local-daechi #ll-main #jrLocation > .innerWrap > .cont.jr-location-cont { margin-top: 0 !important; } body#target.jr-local-daechi #ll-main #jrLocation.section3 .cont.jr-location-cont { padding-top: var(--dae-lead-to-body-stack, calc(var(--dae-media-head-after) + var(--dae-media-body-before))) !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; gap: 0 !important; } body#target.jr-local-daechi #ll-main #jrLocation .jr-location-mo-layout { --jr-loc-mo-pad: 0.85rem; --jr-loc-mo-gap: 0.4rem; --jr-loc-mo-radius: 18px; --jr-loc-mo-border: 1px solid #e8eaed; --jr-loc-mo-vline: #e2e5ea; --jr-loc-mo-blue: #1d4ed8; --jr-loc-mo-blue-title: #1e40af; --jr-loc-mo-text: #111827; --jr-loc-mo-muted: #6b7280; /* 오시는 길 부제(.jr-naver-reviews-desc)와 동일 계단 */ --jr-loc-mo-type: var(--jr-type-subtitle, clamp(1.62rem, 1.45rem + 0.34vw, 1.82rem)); display: flex !important; flex-direction: column; width: 100%; gap: var(--jr-loc-mo-gap); box-sizing: border-box; } body#target.jr-local-daechi #ll-main #jrLocation .jr-location-add-info, body#target.jr-local-daechi #ll-main #jrLocation .jr-location-map-figure, body#target.jr-local-daechi #ll-main #jrLocation .jr-location-more-wrap { display: none !important; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card { background: #fff; border: var(--jr-loc-mo-border); border-radius: var(--jr-loc-mo-radius); padding: var(--jr-loc-mo-pad); box-sizing: border-box; box-shadow: none; } /* 주소·교통·주차 한 박스: 동일 아이콘 거터 + 구분선 + 본문, 구간은 가로 구분선 */ body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle { padding: 0.875rem 0.8125rem 0.8125rem; border-radius: var(--jr-loc-mo-radius); } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-row { display: grid; grid-template-columns: 2.5rem 1px minmax(0, 1fr); column-gap: 0.65rem; align-items: center; margin: 0; padding: 0; border: 0; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-row + .jr-loc-mo-row { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--jr-loc-mo-vline); } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-vrule { width: 1px; align-self: stretch; min-height: 2.125rem; background: var(--jr-loc-mo-vline); justify-self: center; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-row--address .jr-loc-mo-vrule { min-height: 2.5rem; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card__icons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--jr-loc-mo-blue); justify-self: center; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-ico { display: flex; align-items: center; justify-content: center; line-height: 0; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-ico svg { display: block; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-iconcircle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e8f1ff; color: var(--jr-loc-mo-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-iconcircle { width: 2.35rem; height: 2.35rem; justify-self: center; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-iconcircle svg { display: block; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card__body { min-width: 0; text-align: left; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-ico svg { width: 1.3125rem; height: 1.3125rem; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-card--bundle .jr-loc-mo-iconcircle svg { width: 1.125rem; height: 1.125rem; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-addr-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; font-weight: 700; font-size: var(--jr-loc-mo-type); line-height: 1.38; letter-spacing: -0.006em; color: var(--jr-loc-mo-blue-title); word-break: keep-all; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-copy { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-copy img { display: block; width: 1em; height: auto; opacity: 0.75; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-addr-subline { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.35em; margin: 0.2rem 0 0; min-width: 0; font-size: var(--jr-loc-mo-type); line-height: 1.38; letter-spacing: -0.006em; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-addr-subline::-webkit-scrollbar { display: none; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-addr-floor { flex: 0 0 auto; font-weight: 500; color: var(--jr-loc-mo-muted); white-space: nowrap; word-break: keep-all; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-tel-inline.jr-loc-mo-info-title { margin: 0; display: inline-flex; align-items: center; gap: 0.22em; text-decoration: none; -webkit-tap-highlight-color: transparent; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-tel-emoji { font-style: normal; line-height: 1; flex-shrink: 0; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-info-title { margin: 0 0 0.1rem; font-size: var(--jr-loc-mo-type); font-weight: 700; line-height: 1.38; letter-spacing: -0.006em; color: var(--jr-loc-mo-blue-title); } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-info-desc { margin: 0; font-size: var(--jr-loc-mo-type); font-weight: 500; line-height: 1.38; color: var(--jr-loc-mo-muted); word-break: keep-all; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-map-shell { width: 100%; margin: 0; padding: 0.2rem 0 0; display: flex; justify-content: center; box-sizing: border-box; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-map-links { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.28em 0.42em; max-width: 100%; font-size: calc(0.88 * var(--jr-loc-mo-type)); font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; color: var(--jr-loc-mo-muted); } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-map-sep { color: #c4cad4; font-weight: 400; user-select: none; padding: 0 0.06em; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-maplink { display: inline-flex; align-items: center; gap: 0.3em; color: var(--jr-loc-mo-blue); text-decoration: none; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-maplink__ico { display: block; width: 1.05em; height: 1.05em; object-fit: contain; flex-shrink: 0; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-maplink:hover, body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-maplink:focus-visible { text-decoration: none; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-maplink:hover .jr-loc-mo-maplink__txt, body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-maplink:focus-visible .jr-loc-mo-maplink__txt { text-decoration: underline; text-underline-offset: 0.12em; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-route-wrap { position: relative; margin: 0; border-radius: var(--jr-loc-mo-radius); overflow: hidden; border: var(--jr-loc-mo-border); background: #fff; box-shadow: none; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-route-wrap .jr-loc-mo-route { margin: 0; padding: 0; border: none; border-radius: 0; overflow: visible; background: transparent; } body#target.jr-local-daechi #ll-main #jrLocation .jr-loc-mo-route-wrap .jr-loc-mo-route img { display: block; width: 100%; height: auto; } } @media (min-width: 900px) { body#target.jr-local-daechi #ll-main #jrLocation .jr-location-mo-layout { display: none !important; } } /* * 대응팀 제목 구분선(PC): 본 파일에서 최종 확정 — 왼쪽 정렬, 전폭 대비 3cm 짧게(오른쪽에서 단축). */ @media (min-width: 900px) { body#target.jr-local-daechi #ll-main .jr-response-team-hero .jr-response-team-head #jr-response-team-title.ll-h2--line::after { margin-left: 0 !important; margin-right: 0 !important; width: calc(100% - 3cm) !important; max-width: calc(100% - 3cm) !important; } } /* * 대치 body#target 모바일(≤899px) 본문 열 통일 * - local-seo .ll-section 가로(1.25rem)·.ll-inner--dae-guide max-width(38rem)·innerWrap-only 섹션 등으로 * 「우선 확인·유형별·FAQ·오시는 길」과 미디어·WHY JR 열 폭이 어긋남. * - #ll-main 직계 ll-section 가로는 0 → 가로 리듬은 래퍼(.ll-inner / 오시는 길 .innerWrap) 한 곳에서만. * - 래퍼 공통: width 100% + max-width min(1120px, calc(100% - 1.5rem)) + margin auto + 동일 좌우 패딩 * (≤950px·#id 체인 !important 보다 body#target.jr-local-landing.jr-local-daechi 로 덮어씀). */ @media (max-width: 899px) { body#target.jr-local-daechi #ll-main > section.ll-section { padding-left: 0 !important; padding-right: 0 !important; } body#target.jr-local-landing.jr-local-daechi #ll-main > section > .ll-inner:not(.ll-inner--dae-guide), body#target.jr-local-landing.jr-local-daechi #ll-main > .ll-cta-final > .ll-inner, body#target.jr-local-landing.jr-local-daechi #ll-main #jrLocation > .innerWrap.jr-location-inner, body#target.jr-local-landing.jr-local-daechi #ll-main #jrWhyCredibility > .ll-inner.innerWrap, body#target.jr-local-landing.jr-local-daechi #ll-main #jrNaverReviews > .ll-inner.innerWrap, body#target.jr-local-landing.jr-local-daechi #ll-main #jrBroadcast > .ll-inner.innerWrap, body#target.jr-local-landing.jr-local-daechi #ll-main #jrPress > .ll-inner.innerWrap, body#target.jr-local-landing.jr-local-daechi #ll-main #jrBlog > .ll-inner.innerWrap, body#target.jr-local-landing.jr-local-daechi #ll-main #jrInstagram > .ll-inner.innerWrap, body#target.jr-local-landing.jr-local-daechi #ll-main #jrReview > .ll-inner.innerWrap { width: 100% !important; max-width: min(1120px, calc(100% - 1.5rem)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding-left: max(0.625rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(0.625rem, env(safe-area-inset-right, 0px)) !important; } /* 우선 확인: 공통 .ll-inner 패딩(0.625rem) 위에 좌우 +20px — #id 체인으로 최종 적용 */ body#target.jr-local-landing.jr-local-daechi #ll-main > section.ll-section--dae-guide > .ll-inner.ll-inner--dae-guide { padding-left: calc(max(0.625rem, env(safe-area-inset-left, 0px)) + 20px) !important; padding-right: calc(max(0.625rem, env(safe-area-inset-right, 0px)) + 20px) !important; } /* ─── 유형별 리스크: 모바일 탭·카드 UI (첨부 시안 — px 기준 390 viewport) ─── */ .jr-local-daechi .ll-section--dae-case-types > .ll-inner > .dae-media-head { display: block !important; margin-bottom: 0 !important; padding-bottom: max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)); } .jr-local-daechi .ll-section--dae-case-types .dae-media-head .ll-h2--line, .jr-local-daechi .ll-section--dae-case-types .dae-media-head .ll-lead { text-align: left !important; max-width: none !important; } .jr-local-daechi #ll-main .ll-section--dae-case-types > .ll-inner > .dae-case-panels, .jr-local-daechi #ll-main .ll-section--dae-case-types > .ll-inner > .ll-card-grid.dae-case-panels { margin-top: 0 !important; padding-top: 0 !important; } .jr-local-daechi .ll-section--dae-case-types .dae-case-tabs { display: flex !important; width: 100%; margin: var(--dae-lead-to-body-stack, 1.1rem) 0 12px; padding: 0; border: 1px solid #e3e7ee; border-radius: 12px; overflow: hidden; box-sizing: border-box; background: #f8f9fa; } .jr-local-daechi .ll-section--dae-case-types .dae-case-tabs__btn { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; margin: 0; padding: 11px 3px; border: 0; border-left: 1px solid #e3e7ee; background: #f8f9fa; color: #4a5568; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; cursor: pointer; -webkit-tap-highlight-color: transparent; } .jr-local-daechi .ll-section--dae-case-types .dae-case-tabs__btn:first-child { border-left: none; } .jr-local-daechi .ll-section--dae-case-types .dae-case-tabs__btn.is-active, .jr-local-daechi .ll-section--dae-case-types .dae-case-tabs__btn[aria-selected="true"] { background: #0056f3; color: #fff; font-weight: 700; } .jr-local-daechi .ll-section--dae-case-types .dae-case-panels { display: block !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card { display: none; height: auto; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; transform: none; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card.is-active { display: flex; flex-direction: column; gap: 0; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__divider { display: none !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 12px; padding: 16px 14px; background: #fff; border-radius: 16px; border: 1px solid #eef1f5; box-shadow: 0 4px 20px rgba(26, 47, 77, 0.08); box-sizing: border-box; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro-copy { flex: 1 1 auto; min-width: 0; } /* 시안: 소제목(파란) + 본문(검정 굵게 2줄) */ .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro-copy > h3 { margin: 0 0 6px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; color: #0056f3 !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro-copy > p { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: -0.03em !important; color: #111 !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__hero-art { flex: 0 0 88px; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: none; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__hero-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-stories { margin: 0 0 12px; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion { margin: 0 0 10px; padding: 0; border: none; border-radius: 14px; background: #fff; box-shadow: 0 3px 14px rgba(26, 47, 77, 0.09); overflow: hidden; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion:last-child { margin-bottom: 0; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__summary { padding: 14px 12px; margin: 0; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__summary-text { align-items: center; gap: 10px; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__label { flex: 0 0 52px; width: 52px; min-width: 52px; height: 52px; flex-direction: column; align-self: center; justify-content: center; gap: 1px; padding: 6px 4px; font-size: 11px; font-weight: 700; line-height: 1.1; color: #1a4a7a; background: #e8f0fe; border: none; border-radius: 12px; box-shadow: none; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__label-line { display: block; text-align: center; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__label-line:last-child { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__hook { font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; color: #111; } .jr-local-daechi .ll-section--dae-case-types .dae-case-hook-br-mo { display: block; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__chevron { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin: 0; border-radius: 0; background: transparent; transform: none; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__chevron::after { top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid #8a94a6; border-bottom: 2px solid #8a94a6; transform: translate(-65%, -50%) rotate(-45deg); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion[open] .dae-risk-story__chevron { transform: none; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion[open] .dae-risk-story__chevron::after { top: 50%; transform: translate(-60%, -50%) rotate(-45deg); } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story--accordion .dae-risk-story__body { margin: 0; padding: 8px 14px 16px 14px; border-left: none; border-top: 1px solid #eef2f7; background: #fafbfd; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__body p { margin: 0 0 12px; padding-left: 0; font-size: 15px; line-height: 1.62; font-weight: 400; letter-spacing: -0.02em; color: #3d4f63; word-break: keep-all; overflow-wrap: break-word; } .jr-local-daechi .ll-section--dae-case-types .dae-risk-story__body p:last-child { margin-bottom: 0; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card > .dae-case-card__cta-pc { display: none !important; } .jr-local-daechi .ll-section--dae-case-types .dae-case-next-type { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 4px 0 0; padding: 14px 16px; border: 2px solid #0056f3; border-radius: 999px; background: #fff; color: #0056f3; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 86, 210, 0.1); -webkit-tap-highlight-color: transparent; } .jr-local-daechi .ll-section--dae-case-types .dae-case-next-type__icon { flex: 0 0 1.35rem; width: 1.35rem; height: 1.15rem; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%230056d2' d='M2 4h14v12H2z'/%3E%3Cpath fill='%23003d99' d='M2 4l7-3 7 3v2H2z'/%3E%3C/svg%3E"); } .jr-local-daechi .ll-section--dae-case-types .dae-case-next-type__arrow { flex: 0 0 0.55rem; width: 0.55rem; height: 0.55rem; border-right: 2px solid #0056d2; border-bottom: 2px solid #0056d2; transform: rotate(-45deg); } } /* PC(≥900px): 사이트 공통 innerWrap(5rem)과 동일 + style.min 950px 구간 모바일 헤더 규칙 무효화 */ @media (min-width: 900px) { .jr-local-daechi .ll-section--dae-case-types .dae-case-tabs, .jr-local-daechi .ll-section--dae-case-types .dae-case-next-type { display: none !important; } .jr-local-daechi .ll-section--dae-case-types .dae-case-hook-br-mo { display: none !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card { display: flex !important; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__intro { display: flex; flex-direction: column; padding: clamp(0.375rem, 1vw, 0.75rem) 0 0; background: transparent; box-shadow: none; border: none; border-radius: 0; margin-bottom: 0; } .jr-local-daechi .ll-section--dae-case-types .ll-case-card__hero-art { display: none !important; } body.jr-local-landing.jr-local-daechi .dae-v2-hero { padding-left: max(5rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(5rem, env(safe-area-inset-right, 0px)) !important; } body.jr-local-landing.jr-local-daechi #ll-main > section > .ll-inner, body.jr-local-landing.jr-local-daechi #ll-main > .ll-section > .ll-inner, body.jr-local-landing.jr-local-daechi #ll-main > .ll-cta-final > .ll-inner { padding-left: max(5rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(5rem, env(safe-area-inset-right, 0px)) !important; max-width: min(1180px, calc(100% - 10rem)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.jr-local-daechi .header .gnb_menu .gnb_list > li:not(.gnb_util) { display: list-item !important; } body.jr-local-daechi .header .gnb_menu .gnb_list { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } body.jr-local-daechi .header .logo { max-width: none !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; flex-wrap: nowrap !important; } /* 태그라인: 메인(index)과 동일 — .header .logo(24px) 상속, 0.68rem 강제 금지 */ body.jr-local-daechi .header .logo-tagline { font-size: inherit !important; letter-spacing: -0.05em; white-space: nowrap !important; } } /* ── FAQ 모바일 (대치동 학부모 자주 묻는 질문) ── */ @media (max-width: 899px) { body.jr-local-daechi #ll-main .dae-faq-mo-section.ll-section--alt { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; background: transparent !important; box-shadow: none !important; } body.jr-local-daechi .dae-faq-mo-section { position: relative; margin: 0 0 2.4rem; padding: 2.4rem 0 2rem; border-radius: 1.6rem; background: linear-gradient(165deg, #eef5ff 0%, #f5f9ff 42%, #ffffff 100%); box-shadow: 0 0.4rem 2.4rem rgba(30, 64, 175, 0.08); overflow: visible; } body.jr-local-daechi .dae-faq-mo-section::before { content: ""; position: absolute; top: 0.6rem; right: 0.4rem; width: 9.2rem; height: 7.2rem; background: url("/images/dae-faq-mo-deco.png") no-repeat right top / contain; opacity: 0.92; pointer-events: none; z-index: 0; } body.jr-local-daechi .dae-faq-mo-section > * { position: relative; z-index: 1; } body.jr-local-daechi .dae-faq-mo-head.dae-media-head { width: 100%; max-width: none; box-sizing: border-box; margin-bottom: 1.6rem; padding-right: 0; } /* FAQ·WHY JR 공통: 키커(작은 줄) + 제목(굵은 줄) */ body.jr-local-daechi .dae-faq-mo-kicker, body.jr-local-daechi #ll-main #jrWhyCredibility .dae-faq-mo-kicker { display: block; margin: 0 0 0.4rem; padding: 0; font-size: 1.66rem; font-weight: 500; color: #475569; letter-spacing: -0.015em; line-height: 1.45; text-align: left; } body.jr-local-daechi #ll-main .dae-faq-mo-section .dae-faq-mo-head .ll-h2--line, body.jr-local-daechi #ll-main .dae-faq-mo-section #ll-faq-title.dae-faq-mo-title, body.jr-local-daechi #ll-main #jrWhyCredibility .dae-faq-mo-title { margin: 0 0 0.85rem !important; font-size: 2.64rem !important; font-weight: 800 !important; line-height: 1.32 !important; letter-spacing: -0.035em !important; color: #0f172a !important; width: 100% !important; max-width: none !important; display: block !important; box-sizing: border-box; border-bottom: none !important; border-image: none !important; padding: 0 0 0.65rem !important; text-align: left !important; } /* 구분선: JR 언론보도·미디어 섹션과 동일 — 헤드 전폭, 부제·키커와 좌측 정렬 */ body.jr-local-daechi #ll-main .dae-faq-mo-section #ll-faq-title.ll-h2--line::after, body.jr-local-daechi #ll-main #jrWhyCredibility #dae-why-jr-h2-mo.ll-h2--line::after { content: "" !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0.65rem 0 0 !important; height: var(--dae-title-rule-h, 4px) !important; border-radius: 3px !important; background: var(--dae-title-rule-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(26, 47, 77, 0.2) !important; } body.jr-local-daechi .dae-faq-mo-head .ll-lead { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; font-size: 1.73rem !important; line-height: 1.62 !important; color: #475569 !important; text-align: left !important; letter-spacing: -0.015em !important; } body.jr-local-daechi #ll-main .dae-faq-mo-section > .ll-inner > .ll-faq-list { margin-top: 0 !important; } body.jr-local-daechi .dae-faq-mo-section .ll-faq-list { display: flex; flex-direction: column; gap: 1.14rem; margin: 0; padding: 0; width: 100%; max-width: 100%; list-style: none; box-sizing: border-box; } /* FAQ 아코디언 카드 = #jrPress .jr-press-card 와 동일 가로 폭 */ body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-item { width: 100%; max-width: 100%; box-sizing: border-box; border: none; border-radius: clamp(10px, 1.2vw, 14px); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.06); overflow: hidden; } body.jr-local-daechi #ll-main .dae-faq-mo-section .dae-faq-mo-item summary { display: flex !important; align-items: center !important; gap: 0.96rem; padding: 1.38rem 1.26rem 1.38rem 1.38rem !important; list-style: none; cursor: pointer; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 1.52 !important; letter-spacing: -0.025em !important; color: #0f172a !important; -webkit-tap-highlight-color: transparent; } body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-item summary::-webkit-details-marker { display: none; } body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-item summary::before, body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-item summary::after { display: none !important; content: none !important; } body.jr-local-daechi .dae-faq-mo-qbadge { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #1e3a8a; color: #fff; font-size: 1.26rem; font-weight: 700; letter-spacing: -0.02em; } body.jr-local-daechi .dae-faq-mo-item[open] .dae-faq-mo-qbadge { display: flex; } body.jr-local-daechi .dae-faq-mo-row-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3.18rem; height: 3.18rem; border-radius: 50%; background: #e8f1ff; } body.jr-local-daechi .dae-faq-mo-item[open] .dae-faq-mo-row-icon { display: none; } body.jr-local-daechi .dae-faq-mo-q { flex: 1; min-width: 0; margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.52; letter-spacing: -0.025em; color: #0f172a; text-align: left; word-break: keep-all; } body.jr-local-daechi .dae-faq-mo-item:not([open]) .dae-faq-mo-q { font-weight: 600; font-size: 1.78rem; line-height: 1.54; color: #1e293b; } body.jr-local-daechi .dae-faq-mo-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.64rem; height: 2.64rem; border-radius: 50%; font-size: 1.74rem; font-weight: 400; line-height: 1; color: #2563eb; background: #e8f1ff; transition: background 0.2s, color 0.2s; } body.jr-local-daechi .dae-faq-mo-toggle::before { content: "+"; display: block; margin-top: -0.05rem; } body.jr-local-daechi .dae-faq-mo-item[open] .dae-faq-mo-toggle { color: #fff; background: #1e3a8a; font-size: 1.92rem; font-weight: 300; } body.jr-local-daechi .dae-faq-mo-item[open] .dae-faq-mo-toggle::before { content: "−"; margin-top: 0; } /* 답변: summary(Q뱃지·질문)와 동일 열 — 왼쪽 1.38rem + 3rem + 0.9rem 에서 본문 시작 */ body.jr-local-daechi .dae-faq-mo-answer { display: grid; grid-template-columns: 3rem 0.9rem minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: start; margin: 0; padding: 1.32rem 1.26rem 1.56rem 1.38rem; background: #f0f6ff; border-top: 1px solid #e2ecfb; } body.jr-local-daechi .dae-faq-mo-answer-icon { grid-column: 1; grid-row: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #dbeafe; } body.jr-local-daechi #ll-main .dae-faq-mo-section .dae-faq-mo-answer .ll-faq-a { grid-column: 3; grid-row: 1; margin: 0 !important; padding: 0 !important; font-size: 1.7rem !important; line-height: 1.68 !important; letter-spacing: -0.015em !important; color: #1e293b !important; text-align: left !important; font-weight: 400 !important; word-break: keep-all !important; } } @media (min-width: 900px) { body.jr-local-daechi .dae-faq-mo-section::before { display: none; } body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-qbadge, body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-row-icon, body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-toggle, body.jr-local-daechi .dae-faq-mo-section .dae-faq-mo-answer-icon { display: none !important; } body.jr-local-daechi .dae-faq-mo-answer { display: block; padding: 0; background: transparent; border: none; } /* FAQ PC: WHY JR과 동일 키커(작은 줄) + 제목 + 구분선 */ body.jr-local-daechi #ll-main .dae-faq-mo-section .dae-faq-mo-head .dae-faq-mo-kicker { display: block !important; margin: 0 0 0.35rem; padding: 0; font-size: 1.38rem; font-weight: 500; color: #475569; letter-spacing: -0.015em; line-height: 1.45; text-align: left; } body.jr-local-daechi #ll-main .dae-faq-mo-section #ll-faq-title.dae-faq-mo-title, body.jr-local-daechi #ll-main .dae-faq-mo-section #ll-faq-title.ll-h2--line { margin: 0 0 0.75rem !important; font-size: calc(1.92rem * 1.2 * 1.2) !important; font-weight: 800 !important; line-height: 1.32 !important; letter-spacing: -0.035em !important; color: #0f172a !important; width: 100% !important; max-width: none !important; display: block !important; border-bottom: none !important; border-image: none !important; padding: 0 0 0.65rem !important; text-align: left !important; } body.jr-local-daechi #ll-main .dae-faq-mo-section #ll-faq-title.ll-h2--line::after { content: "" !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0.65rem 0 0 !important; height: var(--dae-title-rule-h, 4px) !important; border-radius: 3px !important; background: var(--dae-title-rule-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(26, 47, 77, 0.2) !important; } /* WHY JR PC: FAQ와 동일 키커+제목 2단 */ body.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-pc-head .dae-faq-mo-kicker { display: block; margin: 0 0 0.35rem; padding: 0; font-size: 1.38rem; font-weight: 500; color: #475569; letter-spacing: -0.015em; line-height: 1.45; text-align: left; } body.jr-local-daechi #ll-main #jrWhyCredibility .jr-why-daechi-pc-head .dae-faq-mo-title { margin: 0 0 0.75rem !important; font-size: calc(1.92rem * 1.2 * 1.2) !important; font-weight: 800 !important; line-height: 1.32 !important; letter-spacing: -0.035em !important; color: #0f172a !important; width: 100% !important; max-width: none !important; display: block !important; border-bottom: none !important; border-image: none !important; padding: 0 0 0.65rem !important; text-align: left !important; } body.jr-local-daechi #ll-main #jrWhyCredibility #dae-why-jr-h2.ll-h2--line::after { content: "" !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0.65rem 0 0 !important; height: var(--dae-title-rule-h, 4px) !important; border-radius: 3px !important; background: var(--dae-title-rule-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(26, 47, 77, 0.2) !important; } } /* ============================================================================= * 대치 랜딩 PC 가이드 섹션 (.ll-section--dae-guide / .dae-guide-legacy-pc) * HTML: daechi-school-violence-lawyer.html — .dae-guide-pc-layout 타임라인 * 이 파일만 수정·번들 포함. daechi-ui-enhance.css 의 구식 .dae-guide-steps PC 규칙과 분리. * ============================================================================= */ /* ─── PC: 양쪽 여백 활용 (900px 이상만, 모바일 레이아웃 유지) ─── */ @media (min-width: 900px) { .jr-local-daechi .ll-inner--dae-guide { max-width: min(1120px, calc(100% - 3rem)); padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); } .jr-local-daechi .dae-guide-head { margin-bottom: 0; padding-bottom: max(0.65rem, calc(max(1lh, 1.75rem) - 1lh)); } .jr-local-daechi .dae-guide-title { font-size: clamp(2.12rem, 1.55rem + 1.05vw, 2.52rem); max-width: none; } .jr-local-daechi .dae-guide-lead { font-size: calc(1.82rem * 1.2); max-width: none; } /* PC 우선 확인: 2열(소개 + 타임라인 카드) + 하단 CTA — 시안 */ .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-layout { display: flex; flex-direction: column; gap: 2rem; width: 100%; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-head { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-kicker { margin: 0 0 0.75rem; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.01em; color: #2563eb; } body#target.jr-local-daechi #ll-main .dae-guide-legacy-pc .dae-guide-title, body#target.jr-local-daechi #ll-main #ll-problem-title.dae-guide-title { margin: 0 0 1.1rem !important; font-size: clamp(2.8rem, 2.15rem + 1.1vw, 3.5rem) !important; font-weight: 800 !important; line-height: 1.32 !important; letter-spacing: -0.035em !important; color: #0f172a !important; max-width: none !important; } /* 상단 리드·pillar 제목: 유형별 리스크 `.dae-media-head .ll-lead` 와 동일 타이포 */ .jr-local-daechi .dae-guide-legacy-pc .dae-guide-lead, .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-pillar-label { font-size: calc(1.76rem * 1.2) !important; line-height: 1.75 !important; letter-spacing: normal !important; max-width: none; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-lead { margin: 0; color: #5c6b7d !important; font-weight: 400 !important; } .jr-local-daechi .dae-guide-pc-divider { border: 0; border-top: 1px solid #e2e8f0; margin: 1.75rem 0 1.5rem; } .jr-local-daechi .dae-guide-pc-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(7.5rem, 1fr)); gap: 1.35rem 1.5rem; } .jr-local-daechi .dae-guide-pc-pillar { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; } .jr-local-daechi .dae-guide-pc-pillar-icon { display: flex; align-items: center; justify-content: flex-start; width: 3.6rem; height: 3.6rem; margin-bottom: 0.35rem; } .jr-local-daechi .dae-guide-pc-pillar-icon svg { display: block; } .jr-local-daechi .dae-guide-pc-pillar-label { font-weight: 700 !important; color: #0f2744 !important; } /* pillar 설명: 타임라인 본문(.dae-guide-pc-timeline-text)과 동일 */ .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-pillar-desc { font-size: 1.5rem !important; line-height: 1.65 !important; letter-spacing: -0.015em !important; font-weight: 400 !important; color: #64748b !important; } .jr-local-daechi .dae-guide-pc-card { background: #fff; border: 1px solid #e8eef5; border-radius: 16px; box-shadow: 0 8px 28px rgba(15, 39, 68, 0.08); padding: 2rem 1.85rem 1.5rem; box-sizing: border-box; } .jr-local-daechi .dae-guide-pc-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .jr-local-daechi .dae-guide-pc-timeline::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 36px; width: 2px; background: linear-gradient(180deg, #2563eb 0%, rgba(37, 99, 235, 0.25) 100%); border-radius: 1px; pointer-events: none; } .jr-local-daechi .dae-guide-pc-timeline-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 1.15rem; margin: 0; padding: 0 0 1.4rem; } .jr-local-daechi .dae-guide-pc-timeline-item:last-child { padding-bottom: 0; } .jr-local-daechi .dae-guide-pc-timeline-num { grid-row: 1; align-self: start; justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #0f2744; color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; line-height: 1; position: relative; z-index: 1; } .jr-local-daechi .dae-guide-pc-timeline-body { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.85rem 1.15rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 1px solid #eef2f7; } .jr-local-daechi .dae-guide-pc-timeline-copy { grid-column: 1; min-width: 0; } .jr-local-daechi .dae-guide-pc-timeline-item:last-child .dae-guide-pc-timeline-body { padding-bottom: 0; border-bottom: none; } /* PC 타임라인: 원형·소프트 블루 링 (유형별 리스크 라운드 사각 그라데이션과 구분) */ .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-timeline-icon { position: relative; grid-column: 2; grid-row: 1; align-self: start; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-top: 0.05rem; border-radius: 50%; background: #fff; border: 1px solid #c7daf5; box-shadow: 0 0 0 3px rgba(219, 234, 254, 0.65), 0 3px 12px rgba(37, 99, 235, 0.1); box-sizing: border-box; overflow: hidden; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-timeline-icon::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f0f6ff 52%, #e8f1ff 100%); z-index: 0; pointer-events: none; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-pc-timeline-icon img { position: relative; z-index: 1; width: 38px; height: 38px; object-fit: contain; } .jr-local-daechi .dae-guide-pc-timeline-title { margin: 0 0 0.45rem; font-size: calc(1.76rem * 1.2) !important; font-weight: 800; line-height: 1.75 !important; letter-spacing: normal; color: #0f2744; } .jr-local-daechi .dae-guide-pc-timeline-text { margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.65; letter-spacing: -0.015em; color: #64748b; word-break: keep-all; } .jr-local-daechi .dae-guide-pc-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem 1.25rem; width: 100%; box-sizing: border-box; padding: 1.05rem 1.2rem 1.05rem 1.3rem; border: 1.5px solid #2563eb; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; box-shadow: 0 2px 14px rgba(37, 99, 235, 0.08); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .jr-local-daechi .dae-guide-pc-cta:hover { border-color: #1d4ed8; box-shadow: 0 6px 22px rgba(37, 99, 235, 0.14); } .jr-local-daechi .dae-guide-pc-cta:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; } .jr-local-daechi .dae-guide-pc-cta-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: #eff6ff; } .jr-local-daechi .dae-guide-pc-cta-copy { font-size: 1.6rem; font-weight: 400; line-height: 1.55; color: #475569; letter-spacing: -0.01em; } .jr-local-daechi .dae-guide-pc-cta-link { color: #2563eb; font-weight: 600; text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; } .jr-local-daechi .dae-guide-pc-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.85rem 1.35rem; border-radius: 10px; background: #0f2744; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; line-height: 1.2; } .jr-local-daechi .dae-guide-legacy-pc .dae-guide-note-wrap { display: none !important; } } @media (min-width: 1180px) { .jr-local-daechi .dae-guide-note-wrap .dae-guide-note { white-space: nowrap; } } @media (min-width: 1200px) { .jr-local-daechi .ll-inner--dae-guide { max-width: min(1180px, calc(100% - 4rem)); } }