/* claude-basics/07-prompt-techniques */
.entry-content .highlight-box{background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: 12px; padding: 18px 22px; margin: 20px 0 8px; text-align: center;}
.entry-content .highlight-box p{margin: 0; font-size: 1.02rem; color: #92400e; line-height: 1.7;}
.entry-content .ipo-flow{display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0; flex-wrap: wrap;}
.entry-content .ipo-card{flex: 1; min-width: 180px; max-width: 260px; padding: 24px 20px; border-radius: 14px; text-align: center; border: 2px solid; transition: transform 0.2s;}
.entry-content .ipo-card:hover{transform: translateY(-3px);}
.entry-content .ipo-card.input{background: #eff6ff; border-color: #93c5fd;}
.entry-content .ipo-card.process{background: #fef3c7; border-color: #fcd34d;}
.entry-content .ipo-card.output{background: #ecfdf5; border-color: #6ee7b7;}
.entry-content .ipo-emoji{font-size: 1.8rem; margin-bottom: 8px;}
.entry-content .ipo-label{font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;}
.entry-content .ipo-card.input .ipo-label{color: #2563eb;}
.entry-content .ipo-card.process .ipo-label{color: #d97706;}
.entry-content .ipo-card.output .ipo-label{color: #059669;}
.entry-content .ipo-title{font-size: 1.15rem; font-weight: 800; color: #1e293b; margin-bottom: 6px;}
.entry-content .ipo-desc{font-size: 0.82rem; color: #64748b; line-height: 1.5;}
.entry-content .ipo-arrow{font-size: 1.6rem; color: #94a3b8; font-weight: 700; flex-shrink: 0;}
.entry-content .tip-box{display: flex; align-items: center; gap: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 20px; margin-top: 16px;}
.entry-content .tip-icon{font-size: 1.3rem; flex-shrink: 0; line-height: 1.6;}
.entry-content .tip-box p{margin: 0; font-size: 0.95rem; color: #1e40af; line-height: 1.6;}
.entry-content .input-cards{display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0;}
.entry-content .input-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; transition: border-color 0.2s, transform 0.2s;}
.entry-content .input-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .input-card-header{display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.entry-content .input-card-icon{font-size: 1.4rem;}
.entry-content .input-card-header strong{font-size: 1rem; color: #1e293b;}
.entry-content .input-card-role{font-size: 0.88rem; color: #64748b; margin-bottom: 12px;}
.entry-content .input-card-example{background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; color: #475569; font-style: italic; line-height: 1.5;}
.entry-content .diff-rows{display: flex; flex-direction: column; gap: 12px; margin: 16px 0;}
.entry-content .diff-row{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.entry-content .diff-cell{padding: 14px 16px; border-radius: 10px; font-size: 0.88rem; line-height: 1.6; color: #374151;}
.entry-content .bad-cell{background: #fef2f2; border: 1px solid #fecaca;}
.entry-content .good-cell{background: #f0fdf4; border: 1px solid #bbf7d0;}
.entry-content .diff-badge{display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-right: 6px; margin-bottom: 4px;}
.entry-content .bad-badge{background: #fee2e2; color: #dc2626;}
.entry-content .good-badge{background: #dcfce7; color: #16a34a;}
.entry-content .format-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px;}
.entry-content .format-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 16px; transition: border-color 0.2s, transform 0.2s;}
.entry-content .format-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .format-icon{font-size: 1.5rem; margin-bottom: 8px;}
.entry-content .format-card strong{display: block; font-size: 0.92rem; color: #1e293b; margin-bottom: 4px;}
.entry-content .format-card p{font-size: 0.82rem; color: #64748b; margin: 0; line-height: 1.5;}
.entry-content .compare-container{display: flex; flex-direction: column; gap: 16px; margin-top: 20px;}
.entry-content .compare-card{border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; transition: transform 0.2s;}
.entry-content .compare-card:hover{transform: translateY(-2px);}
.entry-content .compare-header{display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-weight: 700; font-size: 0.92rem;}
.entry-content .bad-header{background: #fef2f2; color: #dc2626;}
.entry-content .good-header{background: #f0fdf4; color: #16a34a;}
.entry-content .compare-icon{font-size: 1.1rem;}
.entry-content .compare-body{padding: 16px 18px; background: #f8fafc;}
.entry-content .compare-body pre{margin: 0; font-size: 0.85rem; line-height: 1.6; color: #374151; white-space: pre-wrap; font-family: 'JetBrains Mono', 'Fira Code', monospace;}
.entry-content .strength-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px;}
.entry-content .strength-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 24px 20px; transition: border-color 0.2s, transform 0.2s;}
.entry-content .strength-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .strength-icon{font-size: 1.8rem; margin-bottom: 10px;}
.entry-content .strength-card h3{font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: 8px;}
.entry-content .strength-card p{font-size: 0.88rem; color: #64748b; margin: 0; line-height: 1.6;}
.entry-content .tip-section{background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; margin-bottom: 20px; transition: border-color 0.2s;}
.entry-content .tip-section:hover{border-color: #93c5fd;}
.entry-content .tip-section-header{display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.entry-content .tip-section-icon{font-size: 1.4rem;}
.entry-content .tip-section-header h3{font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0;}
.entry-content .tip-section > p{font-size: 0.95rem; color: #475569; margin-bottom: 16px;}
.entry-content .iteration-steps{display: flex; flex-direction: column; gap: 8px;}
.entry-content .iteration-step{display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;}
.entry-content .iter-number{background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; flex-shrink: 0;}
.entry-content .iter-text{font-size: 0.9rem; color: #374151;}
.entry-content .practice-box{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; margin-top: 12px;}
.entry-content .practice-header{display: flex; align-items: center; gap: 14px; margin-bottom: 20px;}
.entry-content .practice-icon{font-size: 1.6rem; flex-shrink: 0;}
.entry-content .practice-header strong{display: block; font-size: 1.05rem; color: #1e293b; margin-bottom: 4px;}
.entry-content .practice-header p{margin: 0; font-size: 0.92rem; color: #64748b;}
.entry-content .hint-box{background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 18px;}
.entry-content .hint-label{font-weight: 700; font-size: 0.88rem; color: #b45309; display: block; margin-bottom: 10px;}
.entry-content .hint-items{display: flex; flex-direction: column; gap: 6px;}
.entry-content .hint-item{font-size: 0.88rem; color: #92400e; line-height: 1.5;}
.entry-content .hint-item strong{color: #78350f;}
@media (max-width: 768px){
.entry-content .ipo-flow{flex-direction: column; gap: 4px;}
.entry-content .ipo-card{max-width: 100%;}
.entry-content .ipo-arrow{transform: rotate(90deg); font-size: 1.3rem;}
.entry-content .input-cards{grid-template-columns: 1fr;}
.entry-content .diff-row{grid-template-columns: 1fr;}
.entry-content .format-grid{grid-template-columns: 1fr;}
.entry-content .strength-grid{grid-template-columns: 1fr;}
.entry-content .tip-section{padding: 18px;}
.entry-content .practice-header{flex-direction: column; gap: 10px;}
}